/*
 * The one stylesheet of the site (since 29.10.2026, Richard: "nur noch unser neues Design"). It grew from the beta
 * page `/v6/` (draft R1, 10.10.2026) and the front page; the inner pages and the theme use its last part.
 *
 * Every section is a `.band` with a colour
 * class (`on-white`, `on-tint`, `on-navy`); the parts inside read their colours from the band, so
 * a section can change colour without new rules. No JavaScript: reveals and the marker are
 * scroll-driven where the browser supports it and plainly visible elsewhere.
 */

@font-face {
    font-display: swap;
    font-family: 'Red Hat Display';
    font-weight: 500;
    src: url('fonts/red-hat-display-500.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Red Hat Display';
    font-weight: 700;
    src: url('fonts/red-hat-display-700.woff2') format('woff2');
}

:root {
    --yellow: #ffc107;
    --yellow-soft: #fff4d1;
    --navy: #211350;
    --ink-soft: #4b4763;
    --ink-faint: #6f6b85;
    --night: #161325;
    --paper: #fff;
    --tint: #f6f5fa;
    --line: #e8e6f0;
    --green: #2e9e5b;
    --r-s: 16px;
    --r-pill: 999px;
    --pad: 170px;
    --font-display: 'Red Hat Display', ui-sans-serif, system-ui, sans-serif;
    --font-body: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Inner pages, forms and the theme. */
    --ink: #1b1733;
    --yellow-hover: #ffd24d;
    --yellow-dot: #fdb523;
    --radius: var(--r-s);
    --radius-small: 10px;
    --shadow: 0 1px 2px rgb(22 19 37 / 6%), 0 8px 24px rgb(22 19 37 / 8%);
    /* Buttons outside a band (inner pages); a band sets its own. */
    --btn: var(--navy);
    --btn-fg: #fff;
}

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: 24px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--navy);
    font: 18px/1.6 var(--font-body);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

/*
 * The footer sits at the bottom of the window also on short pages (sign-in, legal and help texts):
 * the page is a column at least as high as the window, and its main part takes the rest, so the
 * last section (with its background) reaches down to the footer.
 */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

body > main {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
}

body > main > :last-child {
    flex-grow: 1;
}

/* Inline scripts at the end of main (busy state of the forms) do not count as the last section. */
body > main > :nth-last-child(1 of :not(script, style, template)) {
    flex-grow: 1;
}

img,
video {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

h1,
h2,
h3,
h4 {
    text-wrap: balance;
}

h1,
h2,
h3 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.03em;
}

p,
figure {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wrap {
    width: min(100% - 32px, 1240px);
    margin-inline: auto;
}

/* The reading width of text pages: legal, help, support, the theme's pages, 404. */
.wrap--narrow {
    width: min(100% - 32px, 820px);
}

.skip {
    position: absolute;
    left: 16px;
    top: -48px;
    z-index: 100;
    padding: 8px 14px;
    background: var(--yellow);
    color: var(--navy);
    font-size: 15px;
    font-weight: 700;
}

.skip:focus {
    top: 8px;
}

/* Shown to administrators while the page is still switched off. */
.preview-bar,
.catalog-closed {
    padding: 8px 16px;
    background: var(--yellow);
    color: var(--navy);
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.catalog-closed {
    margin-top: 28px;
    padding: 14px 20px;
    border-radius: var(--r-s);
}

/* ------------------------------------------------------------------ Bands and their colours */
.band {
    --bg: var(--paper);
    --fg: var(--navy);
    --soft: var(--ink-soft);
    --accent: var(--yellow);
    --on-accent: var(--navy);
    --btn: var(--navy);
    --btn-fg: #fff;
    --pulse: var(--yellow);
    --edge-c: var(--line);
    --edge: 1px solid var(--edge-c);
    --rule: var(--line);
    --lift: 0 50px 90px -45px rgb(22 19 37 / 42%), 0 0 0 1px rgb(22 19 37 / 6%);
    --lift-s: 0 14px 30px -18px rgb(22 19 37 / 35%), 0 0 0 1px rgb(22 19 37 / 6%);
    position: relative;
    padding: var(--pad) 0;
    background: var(--bg);
    color: var(--fg);
}

.on-white {
    --bg: #fff;
}

.on-tint {
    --bg: var(--tint);
}

.on-navy {
    --bg: var(--navy);
    --fg: #fff;
    --soft: #c9c5dc;
    --btn: var(--yellow);
    --btn-fg: var(--navy);
    --edge-c: rgb(255 255 255 / 14%);
    --rule: rgb(255 255 255 / 16%);
    --lift: 0 50px 90px -40px rgb(0 0 0 / 70%);
}

.band--flach {
    padding-bottom: 0;
}

/* ------------------------------------------------------------------ Head, buttons, small parts */
.head {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 10;
    --btn: var(--navy);
    --btn-fg: #fff;
    color: var(--navy);
}

.head__bar {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 84px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font: 700 18px/1 var(--font-display);
    text-decoration: none;
    white-space: nowrap;
}

.brand img {
    width: 28px;
}

.head__bar > nav {
    display: flex;
    gap: 28px;
    margin-left: auto;
    font-size: 15px;
    font-weight: 600;
}

.head__bar > nav a {
    position: relative;
    text-decoration: none;
}

.head__bar > nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s;
}

.head__bar > nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.button {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 20px 34px;
    border-radius: var(--r-pill);
    background: var(--btn);
    color: var(--btn-fg);
    font: 700 18px/1.2 var(--font-body);
    text-decoration: none;
    white-space: nowrap;
    transition:
        transform 0.2s var(--ease-out),
        filter 0.2s var(--ease-out);
}

/*
 * Buttons and arrow links answer the pointer: a button lifts with a shadow on hover and sinks in
 * while pressed, and its arrow runs ahead. On the click (press-script sets `.klick`) the button
 * springs back and the arrow flies off to the right and comes back from the left. The shadow is a
 * filter, so the outline button keeps its inset frame. Reduced motion switches all of it off.
 */
.button:hover,
.button:focus-visible {
    transform: translateY(-2px);
    filter: drop-shadow(0 10px 14px rgb(22 19 37 / 0.22));
}

.button:active {
    transform: translateY(0) scale(0.97);
    filter: none;
    transition-duration: 0.08s;
}

.button.klick {
    animation: knopf-klick 0.45s var(--ease-out);
}

.pfeil,
.link-arrow::after {
    display: inline-block;
    transition: transform 0.25s var(--ease-out);
}

/* In a text link the gap is a margin, so the underline ends with the word, not under a space. */
a:not(.button) > .pfeil {
    margin-left: 0.3em;
}

:is(a, button):is(:hover, :focus-visible) .pfeil,
.link-arrow:is(:hover, :focus-visible)::after {
    transform: translateX(5px);
}

.klick :is(.pfeil, .help-hint__arrow, .weg__pfeil),
.link-arrow.klick::after {
    animation: pfeil-los 0.5s var(--ease-out);
}

@keyframes knopf-klick {
    0% {
        transform: scale(0.95);
    }

    55% {
        transform: translateY(-2px) scale(1.03);
    }

    100% {
        transform: translateY(-2px);
    }
}

@keyframes pfeil-los {
    40% {
        transform: translateX(20px);
        opacity: 0;
    }

    41% {
        transform: translateX(-14px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.button--klein {
    padding: 12px 20px;
    font-size: 15px;
}

/* The same look on <button>: no browser frame, the hand, the text centred when the button is wide. */
button.button {
    justify-content: center;
    border: 0;
    cursor: pointer;
}

.button--large {
    padding: 18px 32px;
}

.link {
    font-weight: 700;
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
    transition:
        text-underline-offset 0.2s var(--ease-out),
        opacity 0.15s;
}

/* The underline moves up to the text on hover; a press dims the link for a moment. */
.link:is(:hover, :focus-visible) {
    text-underline-offset: 3px;
}

.link:active {
    opacity: 0.7;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.badge::before {
    content: '';
    width: 36px;
    height: 2px;
    background: currentColor;
}

.on-navy .badge {
    color: var(--yellow);
}

/* The head of a section: label, a large line, one sentence. */
.lede {
    max-width: 900px;
    margin-bottom: 80px;
}

/* h1 where the section is the page itself (`/preise/`): its size is set here, not left to the browser. */
.lede :is(h1, h2) {
    margin: 18px 0 24px;
    font-size: clamp(40px, 6vw, 88px);
}

.lede :is(h1, h2) span {
    color: var(--accent);
}

.lede p {
    max-width: 34em;
    color: var(--soft);
    font-size: 21px;
}

.lede--mitte {
    margin-inline: auto;
    text-align: center;
}

.lede--mitte p {
    margin-inline: auto;
}

/* A real view from the product. */
.shot {
    border: var(--edge);
    border-radius: var(--r-s);
    box-shadow: var(--lift);
    background: #fff;
}

.browser {
    border: var(--edge);
    border-radius: var(--r-s);
    box-shadow: var(--lift);
    background: #fff;
    overflow: hidden;
}

.browser img {
    width: 100%;
}

.browser__bar {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    background: #efedf5;
    border-bottom: 1px solid rgb(22 19 37 / 10%);
}

.browser__bar i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d6d2e3;
}

.browser__bar span {
    margin-left: 12px;
    padding: 2px 12px;
    overflow: hidden;
    border-radius: 999px;
    background: #fff;
    color: var(--ink-faint);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The tariff a thing belongs to. A box with a small radius: it stays in shape over two lines. */
.tier {
    display: inline-block;
    margin-top: 24px;
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 700;
    border: 0;
    background: var(--yellow-soft);
    color: var(--navy);
}

.tier--free {
    background: #e5f4ea;
    color: #1d6b3d;
}

/* ------------------------------------------------------------------ Hero */
.hero {
    padding: 190px 0 120px;
    overflow: hidden;
}

.hero h1 {
    font-size: clamp(38px, 8.4vw, 132px);
    line-height: 0.98;
}

.hero h1 span {
    display: block;
    animation: word-in 0.9s var(--ease-out) both;
}

.hero h1 span + span {
    animation-delay: 0.15s;
}

/* "Alle Plattformen.": the second line of the title, pale. */
.outline {
    width: max-content;
    max-width: 100%;
    color: var(--fg);
    opacity: 0.5;
    animation: word-in 0.9s 0.15s var(--ease-out) both;
}

.hero__lead {
    max-width: 30em;
    margin-top: 36px;
    color: var(--soft);
    font-size: 22px;
    animation: word-in 0.9s 0.3s var(--ease-out) both;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px 32px;
    margin-top: 40px;
    animation: word-in 0.9s 0.45s var(--ease-out) both;
}

.hero__note {
    margin-top: 26px;
    color: var(--soft);
    font-size: 14px;
    opacity: 0.85;
}

/* Centred: the headline carries the page. */
.hero--mitte {
    text-align: center;
}

.hero--mitte h1 {
    font-size: clamp(38px, 9.4vw, 150px);
}

.hero--mitte .outline,
.hero--mitte .hero__lead {
    margin-inline: auto;
}

.hero--mitte .hero__actions {
    justify-content: center;
}

/* ------------------------------------------------------------------ The hub */

/* Two platforms left, the inventory in the middle, two right; pulses run along the lines. */
.hub {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 200px 72px minmax(0, 1fr) 72px 200px;
    align-items: stretch;
    margin-top: 88px;
    animation: hub-in 1.2s 0.5s var(--ease-out) both;
}

.hub__side {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 16px;
}

/* The lines take the height of the inventory beside them; alone they would ask for 460 px. */
.hub__lines {
    width: 100%;
    height: 0;
    min-height: 100%;
    overflow: visible;
}

.hub__lines path {
    fill: none;
    stroke-linecap: round;
}

.hub__track {
    stroke: var(--fg);
    stroke-width: 2;
    stroke-dasharray: 2 6;
    opacity: 0.4;
}

.hub__pulse {
    stroke: var(--pulse);
    stroke-width: 5;
    stroke-dasharray: 10 100;
    stroke-dashoffset: -100;
    animation: pulse-run 6s linear infinite;
    animation-delay: var(--d);
}

.hub__frame img {
    width: 100%;
}

.dock {
    display: grid;
    gap: 8px;
    padding: 20px;
    border: var(--edge);
    border-radius: var(--r-s);
    outline: 5px solid transparent;
    outline-offset: 3px;
    background: #fff;
    box-shadow: var(--lift-s);
    color: var(--navy);
    animation: dock-arrive 6s ease-out infinite;
    animation-delay: var(--d);
}

.dock__name {
    display: flex;
    align-items: center;
    gap: 12px;
    font: 700 19px/1.2 var(--font-display);
}

.dock__logo {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--c);
    color: #fff;
    font: 700 16px var(--font-display);
}

.dock__state {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1c7c45;
    font-size: 15px;
    font-weight: 600;
    animation: state-pop 6s ease-out infinite;
    animation-delay: var(--d);
}

.dock__state::before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 0 4px rgb(46 158 91 / 18%);
    animation: dot-pop 6s ease-out infinite;
    animation-delay: var(--d);
}

.ka {
    --c: #86b817;
}

.vinted {
    --c: #007782;
}

.willhaben {
    --c: #00a0e1;
}

.ebay {
    --c: linear-gradient(135deg, #e53238 0 30%, #0064d2 30% 55%, #f5af02 55% 78%, #86b817 78%);
}

/* ------------------------------------------------------------------ Partners */
.partners {
    padding: 48px 0;
    background: #fff;
    border-block: 1px solid rgb(22 19 37 / 8%);
}

.partners h2 {
    margin-bottom: 26px;
    color: var(--ink-faint);
    font: 700 13px/1.4 var(--font-body);
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

.partners ul {
    display: grid;
    grid-template-columns: repeat(8, auto);
    align-items: center;
    justify-content: center;
    justify-items: center;
    gap: 28px 52px;
}

/* Eight logos never leave one alone in a row: four and four, on a phone two by two. */
@media (max-width: 1200px) {
    .partners ul {
        grid-template-columns: repeat(4, auto);
        gap: 28px 64px;
    }
}

@media (max-width: 520px) {
    .partners ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 28px 16px;
    }
}

.partners img {
    width: auto;
    max-width: min(120px, 100%);
    max-height: 40px;
    filter: grayscale(1);
    opacity: 0.7;
    transition: filter 0.2s, opacity 0.2s;
}

.partners img:hover {
    filter: none;
    opacity: 1;
}

.mark {
    margin-right: 2px;
    padding: 2px 8px;
    border-radius: min(var(--r-s), 6px);
    background: linear-gradient(var(--yellow), var(--yellow)) 0 0 / 100% 100% no-repeat;
    color: var(--navy);
    font-weight: 700;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/* ------------------------------------------------------------------ Agents */
.agent {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.2fr);
    gap: 72px;
    align-items: center;
}

.agent + .agent {
    margin-top: 140px;
}

.agent--flip {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
}

.agent--flip .agent__text {
    order: 2;
}

.agent__name {
    display: inline-block;
    padding: 7px 14px;
    border-radius: var(--r-pill);
    background: var(--accent);
    color: var(--on-accent);
    font: 700 14px/1.2 var(--font-display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.agent h3 {
    margin: 22px 0 20px;
    font-size: clamp(34px, 4vw, 60px);
}

.agent p {
    color: var(--soft);
    font-size: 20px;
}

.agent ul {
    display: grid;
    gap: 14px;
    margin-top: 26px;
}

.agent li {
    position: relative;
    padding-left: 32px;
}

.agent li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 7px;
    width: 16px;
    height: 16px;
    background: var(--accent);
    clip-path: polygon(0 55%, 38% 92%, 100% 12%, 86% 0, 38% 64%, 13% 40%);
}

/* The tier and, where the agent has its own page, the link to it in one row. */
.agent__fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    margin-top: 30px;
}

.agent__plan {
    display: inline-block;
    padding: 9px 14px;
    border: 2px solid var(--accent);
    border-radius: 12px;
    color: var(--accent);
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
}

.agent__media {
    position: relative;
    display: grid;
    gap: 22px;
}

.agent__media .shot {
    width: 100%;
}

.agent__media .shot + .shot {
    width: calc(100% - 48px);
    margin-left: 48px;
}

.agent__mail {
    position: absolute;
    right: 18px;
    bottom: -26px;
    display: grid;
    gap: 2px;
    padding: 12px 18px 12px 56px;
    border-radius: var(--r-s);
    background: #fff;
    color: var(--navy);
    font-size: 14px;
    animation: mail 7s infinite;
    border: 0;
    box-shadow: 0 20px 40px -18px rgb(0 0 0 / 55%);
}

.agent__mail::before {
    content: '✉';
    position: absolute;
    left: 14px;
    top: 50%;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: min(var(--r-s), 8px);
    background: var(--yellow);
    font-size: 15px;
    translate: 0 -50%;
}

.agent__mail b {
    font: 700 16px/1.2 var(--font-display);
}

/* ------------------------------------------------------------------ New during the beta */
.neu {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 56px;
}

.neu__punkt {
    display: flex;
    flex-direction: column;
    padding-top: 28px;
    border-top: 1px solid var(--rule);
}

.neu__punkt h3 {
    font-size: 28px;
}

.neu__punkt p {
    margin: 12px 0 24px;
    color: var(--soft);
}

/* The tier sits at the foot, level across a row. */
.neu__punkt .tier {
    align-self: flex-start;
    margin-top: auto;
}

@media (max-width: 1000px) {
    .neu {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .neu {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
}

/* ------------------------------------------------------------------ Beta steps */
.steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 56px;
    counter-reset: step;
}

.step {
    padding-top: 28px;
    border-top: 1px solid var(--rule);
    counter-increment: step;
}

.step::before {
    content: '0' counter(step);
    display: block;
    margin-bottom: 20px;
    font: 700 84px/0.9 var(--font-display);
    color: var(--accent);
    -webkit-text-stroke: 0;
}

.step h3 {
    font-size: 30px;
}

.step p {
    margin-top: 12px;
    color: var(--soft);
}

.step a {
    display: inline-block;
    margin-top: 16px;
    font-weight: 700;
}

.steps__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px 32px;
    margin-top: 72px;
}

/* ------------------------------------------------------------------ FAQ and closing */
.faq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 56px;
}

.faq details {
    border-top: 1px solid var(--rule);
}

.faq summary {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 26px 0;
    font: 700 23px/1.25 var(--font-display);
    letter-spacing: -0.01em;
    list-style: none;
    cursor: pointer;
}

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

.faq summary::after {
    content: '→';
    transition: transform 0.3s;
}

.faq details[open] summary::after {
    transform: rotate(90deg);
}

.faq details[open] summary {
    padding-bottom: 12px;
}

.faq p {
    padding-bottom: 26px;
    color: var(--soft);
    font-size: 17px;
}

.closing {
    overflow: hidden;
    text-align: center;
}

.closing__mark {
    position: absolute;
    right: -60px;
    top: 50%;
    width: 380px;
    opacity: 0.16;
    translate: 0 -50%;
    animation: float 8s ease-in-out infinite alternate;
}

.closing h2 {
    font-size: clamp(40px, 7vw, 110px);
}

/* Lines break between the sentences only, never inside "Alle Plattformen." */
.closing h2 span {
    display: inline-block;
}

.closing p {
    max-width: 30em;
    margin: 28px auto 40px;
    color: var(--soft);
    font-size: 21px;
}

/* ------------------------------------------------------------------ Motion */
@supports (animation-timeline: view()) {
    .reveal {
        animation: reveal-rise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 70%;
    }

    .mark {
        animation: mark-sweep linear both;
        animation-timeline: view();
        animation-range: entry 60% cover 38%;
    }
}

/* Scroll reveals only lift; text that fades with the scroll stays pale on the first screen until the
 * visitor scrolls (Richard 30.10.2026, Lighthouse colour contrast, 0.5.74). */
@keyframes reveal-rise {
    from {
        transform: translateY(48px);
    }
}

@keyframes mark-sweep {
    from {
        background-size: 0 100%;
    }
}

@keyframes word-in {
    from {
        opacity: 0;
        transform: translateY(0.35em);
    }
}

@keyframes hub-in {
    from {
        opacity: 0;
        transform: translateY(60px) scale(0.97);
    }
}

@keyframes pulse-run {
    0% {
        stroke-dashoffset: 10;
    }
    30%,
    100% {
        stroke-dashoffset: -100;
    }
}

@keyframes dock-arrive {
    0%,
    24% {
        outline-color: transparent;
    }
    30% {
        outline-color: var(--pulse);
    }
    50%,
    100% {
        outline-color: transparent;
    }
}

/* The words of the state only move; fading them would leave the text unreadable for a moment
 * (Lighthouse colour contrast, 0.5.72). The dot in front of them lights up instead. */
@keyframes state-pop {
    0%,
    26% {
        transform: translateX(-4px);
    }
    32% {
        transform: translateX(2px);
    }
    40%,
    100% {
        transform: none;
    }
}

@keyframes dot-pop {
    0%,
    26% {
        opacity: 0.35;
    }
    32%,
    100% {
        opacity: 1;
    }
}

@keyframes mail {
    0%,
    30% {
        opacity: 0;
        transform: translateY(14px);
    }
    38%,
    90% {
        opacity: 1;
        transform: none;
    }
    100% {
        opacity: 0;
    }
}

@keyframes float {
    to {
        transform: translateY(-24px) rotate(6deg);
    }
}

/* ------------------------------------------------------------------ Narrow screens */
@media (max-width: 1000px) {
    body {
        --pad: 88px;
    }

    .head__bar > nav {
        display: none;
    }

    .head__bar .button {
        margin-left: auto;
    }

    .hero {
        padding: 130px 0 80px;
    }

    .hero__lead {
        font-size: 19px;
    }

    .hub {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-top: 56px;
    }

    .hub__frame {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-bottom: 10px;
    }

    .hub__lines {
        display: none;
    }

    .hub__side {
        display: contents;
    }

    .dock {
        padding: 14px;
    }

    .dock__name {
        font-size: 16px;
    }

    .lede {
        margin-bottom: 48px;
    }

    .lede p {
        font-size: 19px;
    }

    .agent,
    .agent--flip,
    .steps {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .faq {
        grid-template-columns: minmax(0, 1fr);
    }

    .agent + .agent {
        margin-top: 96px;
    }

    .agent--flip .agent__text {
        order: 0;
    }

    .agent__media .shot + .shot {
        width: 100%;
        margin-left: 0;
    }

    .closing__mark {
        display: none;
    }
}

@media (max-width: 600px) {
    .brand {
        font-size: 15px;
    }

    .head__bar {
        gap: 12px;
    }

    .head .button {
        padding: 12px 14px;
        font-size: 14px;
    }

    .button {
        padding: 17px 24px;
        font-size: 16px;
    }

    .shot,
    .browser {
        box-shadow: var(--lift);
    }
}

/* Text links get the height of a finger, on a phone held sideways too. */
@media (max-width: 600px), (pointer: coarse) {
    .head .brand {
        padding-block: 6px;
    }

    .link,
    .step a {
        display: inline-block;
        padding-block: 9px;
    }

    .step a {
        margin-top: 7px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }

}

.head .button--klein {
    box-shadow: none;
}

/* The menu of narrow screens: the site's main pages and the install button under the bar. */
.head__menu {
    display: none;
}

.head__menu summary {
    display: grid;
    gap: 5px;
    padding: 12px 8px;
    cursor: pointer;
    list-style: none;
}

.head__menu summary::-webkit-details-marker {
    display: none;
}

.head__menu summary span {
    display: block;
    width: 22px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
}

.head__panel {
    position: absolute;
    inset: 84px 0 auto;
    display: grid;
    gap: 4px;
    padding: 12px 16px 20px;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.head__panel a:not(.button) {
    padding: 12px 0;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}

.head__panel .button {
    justify-content: center;
    margin: 12px 0 0;
}

@media (max-width: 1000px) {
    .head__menu {
        display: block;
    }
}

@media (max-width: 420px) {
    .head__menu {
        margin-left: auto;
    }
}

/*
 * R1 without tabs. On top of stil.css:
 * - The five tasks stand one below the other, numbered, the view changing sides.
 * - The questions "Wo, wann und für wie viel?" as three rows: the question large,
 *   the answer below it, the view beside it.
 * - Tariffs as two equal sides: today's tariffs with the beta bonus, the new ones announced.
 */

/* ------------------------------------------------------------ The five tasks */
.griffe {
    display: grid;
    gap: 160px;
}

.griff {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.7fr);
    gap: 72px;
    align-items: center;
}

.griff:nth-child(even) {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 0.8fr);
}

.griff:nth-child(even) .griff__text {
    order: 2;
}

.griff__nr {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
    color: var(--soft);
    font: 700 14px/1 var(--font-display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.griff__nr b {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--navy);
    color: #fff;
    font-size: 16px;
    letter-spacing: 0;
}

.griff h3 {
    font-size: clamp(30px, 3.2vw, 46px);
}

.griff p {
    margin-top: 20px;
    color: var(--soft);
    font-size: 20px;
}

.griff__view {
    position: relative;
}

.griff__view .shot {
    width: 100%;
}

/* ------------------------------------------------------------ The three questions */
.fragen {
    border-top: 1px solid var(--rule);
}

.frage {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.45fr);
    gap: 72px;
    align-items: center;
    padding: 104px 0;
    border-bottom: 1px solid var(--rule);
}

.frage h3 {
    font-size: clamp(56px, 7vw, 104px);
    line-height: 0.95;
    letter-spacing: -0.04em;
}

.frage .frage__a {
    margin-top: 32px;
    color: var(--fg);
    font: 700 clamp(24px, 2.5vw, 34px) / 1.3 var(--font-display);
    letter-spacing: -0.02em;
}

.frage p {
    max-width: 30em;
    margin-top: 18px;
    color: var(--soft);
    font-size: 19px;
}

.frage__view {
    position: relative;
}

.frage__view img {
    width: 100%;
    border: 1px solid rgb(22 19 37 / 10%);
    border-radius: 16px;
    box-shadow: var(--lift);
}

/* Two views: the second one below, set in a little. */
.frage__view--paar {
    display: grid;
    gap: 22px;
}

.frage__view--paar img + img {
    width: calc(100% - 48px);
    margin-left: 48px;
}

.frage:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

/* ------------------------------------------------------------ Tariffs: two equal sides */
.paar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.seite {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 52px;
    border-radius: 28px;
    background: #fff;
}

.seite--b {
    --soft: #c9c5dc;
    --btn: var(--yellow);
    --btn-fg: var(--navy);
    --rule: rgb(255 255 255 / 18%);
    background: var(--navy);
    color: #fff;
}

.seite__wer {
    color: var(--soft);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.seite :is(h2, h3) {
    font-size: clamp(44px, 5vw, 76px);
}

.seite__ab {
    font: 700 24px/1.2 var(--font-display);
}

.seite__ab small {
    display: block;
    margin-top: 6px;
    color: var(--soft);
    font: 500 14px/1.3 var(--font-body);
}

.plus {
    display: grid;
    gap: 10px;
}

.plus li {
    position: relative;
    padding-left: 28px;
    font-size: 16px;
}

.plus li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 14px;
    height: 14px;
    background: currentColor;
    clip-path: polygon(0 55%, 38% 92%, 100% 12%, 86% 0, 38% 64%, 13% 40%);
}

.seite--b .plus li::before {
    background: var(--yellow);
}

.bonus {
    padding: 18px 20px;
    border-radius: 16px;
    background: var(--yellow-soft);
    color: var(--navy);
    font-size: 15px;
}

/* On navy the button is the one yellow field; the bonus is a lighter panel with a yellow lead. */
.seite--b .bonus {
    background: rgb(255 255 255 / 10%);
    color: #fff;
}

.seite--b .bonus b {
    color: var(--yellow);
}

.seite .button {
    align-self: start;
    justify-self: start;
}

/* The order button with the payment methods below it: one row of the shared grid, held close together. */
.seite__kauf {
    display: grid;
    justify-items: start;
    align-self: start;
    gap: 12px;
}

/* Payment logos: same-sized white cards, so brand colours read alike on the light and the navy side. */
.zahlarten {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.zahlarten li {
    display: flex;
    width: 40px;
    height: 26px;
    overflow: hidden;
    border-radius: 4px;
    background: #fff;
    box-shadow: inset 0 0 0 1px rgb(30 22 80 / 14%);
}

.zahlarten img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.zahlarten__wort img {
    padding: 5px 4px;
}

/* Both sides share their rows: prices, lists, bonus, button and announcement stand level. */
@supports (grid-template-rows: subgrid) {
    @media (min-width: 1001px) {
        .seite {
            display: grid;
            grid-template-rows: subgrid;
            grid-row: span 7;
            row-gap: 22px;
        }

        .paar--wahl .seite {
            grid-row: span 6;
        }

        /* A shorter ladder ends below its last step, not at the foot of the shared row. */
        .seite > .leiter {
            align-self: start;
        }
    }
}

/* The new tariffs, announced: a price ladder without a button. */
.bald {
    margin-top: auto;
    padding-top: 30px;
    border-top: 2px dashed var(--rule);
}

.bald__label {
    display: inline-block;
    padding: 4px 12px;
    border: 2px solid currentColor;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bald h4 {
    margin: 14px 0 8px;
    font: 700 24px/1.2 var(--font-display);
    letter-spacing: -0.02em;
}

.leiter {
    display: grid;
    align-content: start;
    border-bottom: 1px solid var(--rule);
}

.leiter li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 84px;
    gap: 16px;
    align-items: baseline;
    padding: 13px 0;
    border-top: 1px solid var(--rule);
}

.leiter b {
    font: 700 18px/1.2 var(--font-display);
    white-space: nowrap;
}

.leiter strong {
    font: 700 18px/1.2 var(--font-display);
    text-align: right;
}

.leiter span {
    color: var(--soft);
    font-size: 14px;
    text-align: right;
}

.bald__note {
    margin-top: 12px;
    color: var(--soft);
    font-size: 13px;
}

.tarife__hinweis {
    margin-top: 28px;
    color: var(--soft);
    text-align: center;
}

.frei {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    margin-top: 28px;
    padding: 36px 44px;
    border-radius: 28px;
    background: #fff;
}

.frei :is(h2, h3) {
    font-size: 28px;
}

.frei p {
    max-width: 38em;
    margin-top: 8px;
    color: var(--soft);
}

.frei--zuerst {
    margin: 0 0 28px;
}

.frei .button {
    flex: none;
    border: 2px solid var(--navy);
    background: none;
    color: var(--navy);
}

/* One column as soon as the picture of a whole list would get too small to read beside its text. */
@media (max-width: 1100px) {
    .griffe {
        gap: 96px;
    }

    .griff,
    .griff:nth-child(even) {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .griff__text,
    .frage__text {
        max-width: 640px;
    }

    .frage {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
        padding: 64px 0;
    }

    .griff:nth-child(even) .griff__text {
        order: 0;
    }
}

@media (max-width: 1000px) {
    .paar {
        grid-template-columns: minmax(0, 1fr);
    }
}

/*
 * On a phone a whole list would shrink to a third: show the part that carries the
 * message at a readable size instead, the list from its left edge, the reasons of the
 * recommendation from the right.
 */
@media (max-width: 700px) {
    .schnitt {
        height: auto;
        aspect-ratio: 16 / 11;
        object-fit: cover;
        object-position: left top;
    }

    .schnitt--hoch {
        aspect-ratio: 10 / 9;
    }

    .schnitt--rechts {
        aspect-ratio: 16 / 10;
        object-position: right top;
    }
}

@media (max-width: 700px) {
    .seite {
        padding: 28px;
    }

    .frei {
        flex-direction: column;
        align-items: start;
        padding: 28px;
    }

    .leiter li {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .leiter span {
        grid-column: 1;
        grid-row: 2;
        text-align: left;
    }

    .leiter strong {
        grid-row: 1 / span 2;
        align-self: center;
    }
}

/* Once the new tariffs are on sale: the ladder is the offer, each step leads to its product. */
.seite__lead {
    color: var(--soft);
    font-size: 16px;
}

.leiter--wahl li {
    display: block;
    padding: 0;
}

.leiter--wahl a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 84px;
    gap: 16px;
    align-items: baseline;
    padding: 15px 0;
    text-decoration: none;
}

.leiter--wahl a:hover b {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.frei--zusatz {
    align-items: start;
}

.frei--zusatz .leiter {
    flex: 0 1 460px;
}

/* ------------------------------------------------------------ Footer (partials/footer.php) */

.site-footer {
    padding: 72px 0 32px;
    background: var(--night);
    color: #c9c5dc;
    font-size: 15px;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(4, minmax(0, 1fr));
    gap: 32px;
}

.site-footer .brand {
    display: inline-flex;
    color: #fff;
}

.site-footer__brand p {
    max-width: 300px;
    margin-top: 16px;
}

.site-footer__column {
    display: grid;
    align-content: start;
    gap: 8px;
}

.site-footer h2 {
    margin-bottom: 6px;
    color: #fff;
    font: 700 15px/1.4 var(--font-display);
    letter-spacing: 0;
}

.site-footer a:not(.brand) {
    text-decoration: none;
}

.site-footer a:not(.brand):hover {
    color: #fff;
    text-decoration: underline;
}

.site-footer__note {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid rgb(255 255 255 / 12%);
    color: #8c87a6;
    font-size: 14px;
}

@media (max-width: 1000px) {
    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .site-footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .leiter--wahl a {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .leiter--wahl span {
        grid-column: 1;
        grid-row: 2;
    }

    .leiter--wahl strong {
        grid-row: 1 / span 2;
        align-self: center;
    }

    .frei--zusatz .leiter {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 520px) {
    .head__bar {
        gap: 12px;
    }

    .head .brand {
        font-size: 16px;
    }

    /* The longest button, "Kostenlos für Chrome installieren", in one line down to 360 px. */
    .button {
        gap: 8px;
        padding: 16px 18px;
        font-size: 15px;
    }

    .site-footer__grid {
        grid-template-columns: 1fr;
    }
}

/* A phone has no room for a button beside the brand; the hero's own follows right below. */
@media (max-width: 420px) {
    .head .button--klein {
        display: none;
    }
}

/*
 * The smallest phones (320 px): two platform cards side by side only fit with the logo above the
 * name, and the longest button keeps its one line with a smaller type.
 */
@media (max-width: 359px) {
    .hub {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .dock {
        padding: 12px;
    }

    .dock__name {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        font-size: 15px;
    }

    .dock__logo {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .dock__state {
        font-size: 14px;
    }

    .button {
        gap: 6px;
        padding: 15px 14px;
        font-size: 14px;
    }
}

/* ------------------------------------------------------------ Verkaufsagent page (sell-agent.php) */
/* The plan below the centred title, as a view in a browser window. */
.hero__view {
    max-width: 880px;
    margin: 80px auto 0;
    text-align: left;
    animation: hub-in 1.1s 0.5s var(--ease-out) both;
}

.lede--mitte .tier {
    margin-top: 28px;
}

/* Questions and promises: two columns of short texts under a rule. */
.punkte {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 56px;
}

.punkt {
    padding: 36px 0 48px;
    border-top: 1px solid var(--rule);
}

.punkt h3 {
    font-size: clamp(28px, 3vw, 40px);
}

.punkt .punkt__a {
    margin-top: 16px;
    color: var(--fg);
    font: 700 clamp(20px, 2vw, 24px) / 1.35 var(--font-display);
}

.punkt p {
    margin-top: 14px;
    color: var(--soft);
}

/* The amounts per tariff: name, market checks, watched articles. */
.mengen {
    display: grid;
    border-bottom: 1px solid var(--rule);
}

.mengen li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 112px 112px;
    gap: 16px;
    align-items: baseline;
    padding: 13px 0;
    border-top: 1px solid var(--rule);
}

.mengen b {
    font: 700 18px/1.2 var(--font-display);
}

.mengen span {
    text-align: right;
}

.mengen strong {
    display: block;
    font: 700 18px/1.2 var(--font-display);
}

.mengen small {
    display: block;
    margin-top: 2px;
    color: var(--soft);
    font-size: 12px;
}

.mengen .mengen__kopf {
    align-items: end;
    color: var(--soft);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
}

.mengen__kopf b {
    font: inherit;
}

.mengen__kurz {
    display: none;
}

@media (max-width: 1000px) {
    .hero__view {
        margin-top: 56px;
    }

    .punkte {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 520px) {
    .mengen li {
        grid-template-columns: minmax(0, 1fr) 76px 76px;
        gap: 10px;
    }

    .mengen b,
    .mengen strong {
        font-size: 16px;
    }

    .mengen__lang {
        display: none;
    }

    .mengen__kurz {
        display: inline;
    }
}

/* On a phone the plan in the hero shows its left part, where the answers stand, large enough to read. */
@media (max-width: 700px) {
    .schnitt--plan {
        aspect-ratio: 3 / 2;
    }
}

/* The smallest phones: a narrower card frame, so a tariff name like "Business S" stays on one line. */
@media (max-width: 380px) {
    .seite:has(.mengen) {
        padding: 24px 18px;
    }

    .mengen li {
        grid-template-columns: minmax(0, 1fr) 74px 74px;
        gap: 8px;
    }

    .mengen b,
    .mengen strong {
        font-size: 15px;
    }

    .mengen small {
        white-space: nowrap;
    }
}

/* ============================================================ Front page until the V6 update */
/* Version 5 in the look of this page (SL1/SL2, 28.10.2026): six tiles, today's tariffs with
   clasify Business and Expertenservice below (SL19), and the clasify App for phones (SL4). */

/* An extension installs on a computer only: phones see the clasify App instead. */
.nur-handy {
    display: none;
}

@media (max-width: 700px), (pointer: coarse) and (max-width: 1000px) {
    .nur-computer {
        display: none !important;
    }

    .nur-handy {
        display: flex;
    }
}

.closing .button.nur-handy {
    justify-content: center;
}

/* ------------------------------------------------------------ Phone: the clasify App */

/* Text and the app's screen side by side, the buttons below over the card's full width. */
.app-karte {
    display: none;
    grid-template-columns: minmax(0, 1fr) 118px;
    gap: 18px;
    align-items: center;
    margin: 32px auto 0;
    max-width: 460px;
    padding: 22px;
    border-radius: 22px;
    background: var(--tint);
    text-align: left;
}

@media (max-width: 700px), (pointer: coarse) and (max-width: 1000px) {
    .app-karte {
        display: grid;
    }
}

.app-karte__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.app-karte__wo {
    color: var(--soft);
    font: 700 12px/1 var(--font-display);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.app-karte h2 {
    font-size: 26px;
}

.app-karte__text > p:not(.app-karte__wo) {
    color: var(--soft);
    font-size: 15px;
}

.app-karte__knoepfe {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.app-karte__knoepfe .button {
    justify-content: center;
    width: 100%;
    white-space: nowrap;
}

.app-karte__knoepfe .link {
    white-space: nowrap;
}

.app-karte__bild img {
    display: block;
    width: 100%;
    height: auto;
    border: 5px solid var(--navy);
    border-radius: 22px;
    box-shadow: var(--lift-s);
}

.app-karte__fuss {
    grid-column: 1 / -1;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    color: var(--ink-faint);
    font-size: 13px;
}

/* The smallest phones: the screen goes, the text keeps its width. */
@media (max-width: 359px) {
    .app-karte {
        grid-template-columns: 1fr;
    }

    .app-karte__bild {
        display: none;
    }
}

/* ------------------------------------------------------------ Six tiles */

.kacheln {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.kachel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--lift-s);
}

.kachel__bild {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--night);
}

.kachel__bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left top;
}

.kachel__text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 26px 28px 28px;
}

.kachel h3 {
    font-size: 23px;
}

.kachel p {
    color: var(--soft);
    font-size: 16px;
}

.kachel .tier {
    align-self: flex-start;
    margin-top: auto;
}

@media (max-width: 1000px) {
    .kacheln {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

/* On a phone the picture moves beside a short text: one tile is about a thumb high. */
@media (max-width: 600px) {
    .kacheln {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .kachel {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        border-radius: 16px;
    }

    .kachel__bild {
        aspect-ratio: auto;
        height: 100%;
    }

    .kachel__text {
        gap: 6px;
        padding: 16px 18px;
    }

    .kachel h3 {
        font-size: 18px;
    }

    .kachel p {
        font-size: 14px;
    }
}

/* ------------------------------------------------------------ Today's tariffs, clasify Business, Expertenservice */

@supports (grid-template-rows: subgrid) {
    @media (min-width: 1001px) {
        .paar--heute .seite {
            grid-row: span 5;
        }
    }
}

.extra {
    display: grid;
    gap: 14px;
    margin-top: 28px;
}

.extra__zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 32px;
    border-radius: var(--r-s);
    background: #fff;
}

/* clasify Business is framed in yellow: the way on for traders (SL19). */
.extra__zeile--clasify {
    box-shadow: inset 0 0 0 2px var(--yellow);
}

.extra__zeile div {
    min-width: 0;
}

.extra__zeile :is(h2, h3) {
    font-size: 22px;
}

.extra__zeile p {
    margin-top: 6px;
    color: var(--soft);
    font-size: 15px;
}

.extra__zeile .link {
    flex: none;
    white-space: nowrap;
}

@media (max-width: 700px) {
    .extra__zeile {
        flex-direction: column;
        align-items: flex-start;
        padding: 22px;
    }
}

/* The short page keeps its bands lower on phones: it should be read in a few swipes. */
@media (max-width: 700px) {
    .kurz .band {
        --pad: 64px;
    }

    .kurz .hero h1 {
        font-size: 44px;
    }
}

/* ================================================================== Features (SL17/SL18, 29.10.2026)
 * The front page's two groups ("Für alle" and the dark band for dealers with clasify Business), the
 * reviews from the Chrome Web Store and the features page /funktionen/.
 */

/* ------------------------------------------------------------ Front page: tiles link to their feature */

a.kachel {
    color: inherit;
    text-decoration: none;
    transition:
        box-shadow 0.25s,
        transform 0.25s var(--ease-out);
}

a.kachel:hover {
    box-shadow: var(--lift);
    transform: translateY(-4px);
}

.kachel__fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
}

.kachel__fuss .tier {
    margin-top: 0;
}

.kachel__mehr {
    color: var(--navy);
    font: 700 15px/1 var(--font-display);
    white-space: nowrap;
}


.alle-funktionen {
    margin-top: 40px;
    text-align: center;
}

/* ------------------------------------------------------------ Front page: the band for traders */

.gewerbe {
    overflow: hidden;
}

/* The brand's light behind the band, the same glow as the text pages. */
.gewerbe::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(700px 380px at 100% 0%, rgb(255 193 7 / 14%), transparent 70%),
        radial-gradient(600px 400px at 0% 100%, rgb(106 90 205 / 28%), transparent 70%);
    pointer-events: none;
}

.gewerbe .wrap {
    position: relative;
}

.gewerbe .lede {
    margin-bottom: 64px;
}

.gewerbe__karten {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.gewerbe__karte {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 28px 26px;
    border: 1px solid var(--edge-c);
    border-radius: 20px;
    background: rgb(255 255 255 / 5%);
    color: inherit;
    text-decoration: none;
    transition:
        background 0.25s,
        border-color 0.25s,
        transform 0.25s var(--ease-out);
}

.gewerbe__karte:hover {
    border-color: rgb(255 193 7 / 55%);
    background: rgb(255 255 255 / 9%);
    transform: translateY(-4px);
}

.gewerbe__symbol {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
    border-radius: 14px;
    background: var(--yellow);
    color: var(--navy);
}

.gewerbe__karte h3 {
    font-size: 21px;
}

.gewerbe__karte p {
    color: var(--soft);
    font-size: 16px;
}

.gewerbe__karte .tier {
    align-self: flex-start;
    margin-top: auto;
    background: rgb(255 193 7 / 16%);
    color: var(--yellow);
}

.gewerbe__knoepfe {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
    margin-top: 32px;
    white-space: nowrap;
}

.on-navy .link {
    color: #fff;
}

@media (max-width: 1100px) {
    .gewerbe__karten {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .gewerbe__karten {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .gewerbe__karte {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 4px 16px;
        padding: 18px;
    }

    .gewerbe__symbol {
        grid-row: span 3;
        width: 44px;
        height: 44px;
        margin: 0;
    }

    .gewerbe__karte h3 {
        font-size: 18px;
    }

    .gewerbe__karte p {
        font-size: 15px;
    }

    .gewerbe__karte .tier {
        justify-self: start;
        margin-top: 6px;
    }

    .gewerbe__knoepfe {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .kachel__mehr {
        display: none;
    }
}

/* ------------------------------------------------------------ Features page */

.fn-hero {
    padding: 190px 0 110px;
    overflow: hidden;
    background:
        radial-gradient(760px 380px at 92% 0%, rgb(255 193 7 / 18%), transparent 70%),
        radial-gradient(640px 420px at 0% 10%, rgb(106 90 205 / 12%), transparent 70%), var(--tint);
}

.fn-hero h1 {
    max-width: 14em;
    margin-inline: auto;
    font-size: clamp(40px, 6.6vw, 96px);
    line-height: 1;
    text-align: center;
}

.fn-hero h1 span {
    color: var(--yellow);
    -webkit-text-stroke: 0;
}

.fn-hero .hero__lead {
    max-width: 34em;
    margin: 28px auto 0;
    color: var(--ink-soft);
    font-size: 21px;
    text-align: center;
}

/* Two signposts: who sells privately reads on, who sells commercially jumps to the traders. */
.wege {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    max-width: 880px;
    margin: 64px auto 0;
}

.weg {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 24px 26px;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--lift-s);
    color: var(--navy);
    text-decoration: none;
    transition:
        box-shadow 0.25s,
        transform 0.25s var(--ease-out);
}

.weg:hover {
    box-shadow: var(--lift);
    transform: translateY(-4px);
}

.weg--b {
    background: var(--navy);
    color: #fff;
}

.weg__symbol {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--yellow-soft);
}

.weg--b .weg__symbol {
    background: var(--yellow);
    color: var(--navy);
}

.weg__text {
    display: grid;
    gap: 2px;
    color: var(--ink-faint);
    font-size: 15px;
}

.weg--b .weg__text {
    color: #c9c5dc;
}

.weg__text strong {
    color: inherit;
    font: 700 20px/1.25 var(--font-display);
}

.weg--b .weg__text strong,
.weg .weg__text strong {
    color: currentColor;
}

.weg .weg__text strong {
    color: var(--navy);
}

.weg--b .weg__text strong {
    color: #fff;
}

.weg__pfeil {
    font-size: 22px;
    transition: transform 0.2s var(--ease-out);
}

.weg:hover .weg__pfeil {
    transform: translateY(4px);
}

/* The feature rows reuse the beta page's .griff; on this page they come closer together. */
.fn .griffe {
    gap: 120px;
}

.fn .griff h3 {
    font-size: clamp(28px, 2.8vw, 40px);
}

.fn .griff .plus {
    margin-top: 24px;
}

.fn .griff .plus li {
    font-size: 18px;
}

.fn .griff .plus li::before {
    top: 7px;
    color: var(--green);
}

.on-navy.fn .griff .plus li::before {
    color: var(--yellow);
}

.on-navy .griff__nr b {
    background: var(--yellow);
    color: var(--navy);
}

.griff__fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 24px;
    margin-top: 28px;
}

.griff__fuss .tier {
    margin-top: 0;
}

.griff__fuss .link {
    font-size: 16px;
}

@media (max-width: 700px) {
    .fn-hero {
        padding: 130px 0 72px;
    }

    .fn-hero .hero__lead {
        font-size: 18px;
    }

    .wege {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 40px;
    }

    .weg {
        grid-template-columns: 44px minmax(0, 1fr) auto;
        gap: 14px;
        padding: 18px;
    }

    .weg__symbol {
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }

    .weg__text strong {
        font-size: 18px;
    }

    .fn .griffe {
        gap: 72px;
    }

    .fn .griff .plus li {
        font-size: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    a.kachel,
    .gewerbe__karte,
    .weg {
        transition: none;
    }
}

/* ================================================================== Life (Richard 29.10.2026: "really lively")
 * Everything here moves slowly and quietly: light drifting behind the bands, a brush stroke under the
 * key word, tiles and cards rising one after another, pictures panning on hover, icons floating,
 * a light running around the clasify card, reviews flowing past. CSS only; all of it rests with
 * prefers-reduced-motion (this sheet switches every animation off there).
 */

@property --winkel {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

/* Light drifting behind a band: two soft blobs that wander slowly. */
.licht {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.licht::before,
.licht::after {
    content: '';
    position: absolute;
    width: 46vw;
    max-width: 720px;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.55;
    animation: licht-wandern 22s ease-in-out infinite alternate;
}

.licht::before {
    top: -18%;
    right: -10%;
    background: rgb(255 193 7 / 32%);
}

.licht::after {
    bottom: -25%;
    left: -12%;
    background: rgb(106 90 205 / 30%);
    animation-duration: 28s;
    animation-direction: alternate-reverse;
}

.on-navy .licht::before {
    background: rgb(255 193 7 / 22%);
}

.on-navy .licht::after {
    background: rgb(124 104 238 / 55%);
}

@keyframes licht-wandern {
    to {
        transform: translate(-14vw, 10vh) scale(1.25);
    }
}

.band > .wrap {
    position: relative;
}

/* A brush stroke under the key word, drawn when the heading comes into view. */
.strich {
    position: relative;
    isolation: isolate;
    display: inline-block;
    white-space: nowrap;
}

/* The word keeps the heading's colour; the stroke carries the yellow. Below the letters, behind the descenders. */
.lede h2 .strich {
    color: inherit;
}

.strich svg {
    position: absolute;
    z-index: -1;
    left: -2%;
    bottom: -0.3em;
    width: 104%;
    height: 0.26em;
    overflow: visible;
    color: var(--yellow);
}

.strich path {
    fill: none;
    stroke: currentColor;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: 100;
    animation: strich-ziehen 1.1s 0.3s var(--ease-out) both;
}

@supports (animation-timeline: view()) {
    .strich path {
        animation: strich-ziehen linear both;
        animation-timeline: view();
        animation-range: entry 40% cover 35%;
    }
}

@keyframes strich-ziehen {
    from {
        stroke-dashoffset: 100;
    }
    to {
        stroke-dashoffset: 0;
    }
}

/* Tiles and cards rise one after another instead of all at once. */
@supports (animation-timeline: view()) {
    .kacheln > :nth-child(3n + 2),
    .gewerbe__karten > :nth-child(4n + 2) {
        animation-range: entry 8% entry 78%;
    }

    .kacheln > :nth-child(3n + 3),
    .gewerbe__karten > :nth-child(4n + 3) {
        animation-range: entry 16% entry 86%;
    }

    .gewerbe__karten > :nth-child(4n + 4) {
        animation-range: entry 24% entry 94%;
    }
}

/* On hover the picture of a tile pans slowly down the view, as if someone scrolled it. */
.kachel__bild img {
    transition: object-position 2.4s var(--ease-out);
}

a.kachel:hover .kachel__bild img {
    object-position: left bottom;
}

a.kachel {
    position: relative;
}

a.kachel::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 2px var(--yellow);
    opacity: 0;
    transition: opacity 0.25s;
    pointer-events: none;
}

a.kachel:hover::after {
    opacity: 1;
}

/* The traders' icons float, each in its own rhythm; on hover they give a small nod. */
.gewerbe__symbol {
    animation: schweben 4.2s ease-in-out infinite alternate;
}

.gewerbe__karte:nth-child(2) .gewerbe__symbol {
    animation-delay: -1.1s;
}

.gewerbe__karte:nth-child(3) .gewerbe__symbol {
    animation-delay: -2.3s;
}

.gewerbe__karte:nth-child(4) .gewerbe__symbol {
    animation-delay: -3.2s;
}

.gewerbe__karte:hover .gewerbe__symbol {
    animation: nicken 0.6s ease-in-out;
}

.gewerbe__karte {
    position: relative;
    overflow: hidden;
}

/* A sheen runs across a card when the pointer arrives. */
.gewerbe__karte::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 35%,
        rgb(255 255 255 / 9%) 50%,
        transparent 65%
    );
    transform: translateX(-110%);
    pointer-events: none;
}

.gewerbe__karte:hover::after {
    transform: translateX(110%);
    transition: transform 0.9s var(--ease-out);
}

@keyframes schweben {
    to {
        transform: translateY(-6px);
    }
}

@keyframes nicken {
    30% {
        transform: rotate(-10deg) scale(1.08);
    }
    60% {
        transform: rotate(8deg) scale(1.08);
    }
}

/* ------------------------------------------------------------ clasify Business on the navy band */

.clasify {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px 28px;
    margin-top: 48px;
    padding: 28px 32px;
    border-radius: 22px;
    background:
        radial-gradient(420px 160px at 0% 0%, rgb(255 193 7 / 16%), transparent 70%),
        linear-gradient(120deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 3%));
    color: #fff;
}

/* A light runs around the card's edge. */
.clasify::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    padding: 1.5px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--winkel),
        rgb(255 255 255 / 12%) 0deg,
        var(--yellow) 60deg,
        rgb(255 255 255 / 12%) 130deg,
        rgb(255 255 255 / 12%) 230deg,
        #8f7cff 290deg,
        rgb(255 255 255 / 12%) 360deg
    );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: umlauf 7s linear infinite;
}

@keyframes umlauf {
    to {
        --winkel: 360deg;
    }
}

.clasify__marke {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(140deg, var(--yellow), #ffdd6e);
    color: var(--navy);
    font: 700 26px/1 var(--font-display);
    box-shadow: 0 12px 30px -12px rgb(255 193 7 / 70%);
}

.clasify__text {
    display: grid;
    gap: 6px;
}

.clasify__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.clasify h3 {
    font-size: 23px;
}

.clasify__pille {
    padding: 5px 11px;
    border-radius: var(--r-pill);
    background: rgb(255 193 7 / 16%);
    color: var(--yellow);
    font: 700 12px/1 var(--font-display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.clasify p {
    color: #c9c5dc;
    font-size: 16px;
}

.clasify .button {
    white-space: nowrap;
}

/*
 * clasify Business and the expert service are offers of their own, not part of the last feature row
 * (Richard 29.10.2026: right under the autoresponder they looked like one thing): a labelled divider
 * and clear distance set them apart.
 */
.trenner {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 120px 0 0;
    color: rgb(255 255 255 / 62%);
    font: 700 14px/1 var(--font-display);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.trenner::before,
.trenner::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgb(255 255 255 / 14%);
}

.trenner + .clasify {
    margin-top: 32px;
}

@media (max-width: 860px) {
    .trenner {
        margin-top: 72px;
    }
}

.gewerbe__extra-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 14px;
    padding: 22px 32px;
    border: 1px solid rgb(255 255 255 / 12%);
    border-radius: 22px;
    background: rgb(255 255 255 / 4%);
}

.gewerbe__extra-zeile h3 {
    font-size: 20px;
}

.gewerbe__extra-zeile p {
    margin-top: 4px;
    color: #c9c5dc;
    font-size: 15px;
}

@media (max-width: 700px) {
    .clasify {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
        padding: 22px;
    }

    .clasify__marke {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .clasify .button {
        justify-self: start;
    }

    .gewerbe__extra-zeile {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px 22px;
    }
}

/* ------------------------------------------------------------ Reviews from the Chrome Web Store */

.stimmen {
    overflow: hidden;
}

.stimmen__kopf {
    display: grid;
    justify-items: center;
    gap: 14px;
    margin-bottom: 56px;
    text-align: center;
}

.stimmen__note {
    display: flex;
    align-items: center;
    gap: 18px;
    font: 700 clamp(64px, 9vw, 120px) / 1 var(--font-display);
    letter-spacing: -0.02em;
}

.sterne {
    --anteil: 94%;
    position: relative;
    display: inline-block;
    color: #e2dff0;
    font-size: 0.32em;
    letter-spacing: 0.08em;
    line-height: 1;
}

.sterne::before {
    content: '★★★★★';
    position: absolute;
    inset: 0;
    width: var(--anteil);
    overflow: hidden;
    color: var(--yellow);
    white-space: nowrap;
    animation: sterne-fuellen 1.6s 0.2s var(--ease-out) both;
}

@supports (animation-timeline: view()) {
    .stimmen .sterne::before {
        animation: sterne-fuellen linear both;
        animation-timeline: view();
        animation-range: entry 30% cover 40%;
    }
}

@keyframes sterne-fuellen {
    from {
        width: 0;
    }
}

.stimmen__zahlen {
    color: var(--ink-soft);
    font-size: 18px;
}

.stimmen__zahlen b {
    color: var(--navy);
}

/* Two rows of reviews flowing past in opposite directions; pointer, focus and a tap hold them (WCAG 2.2.2). */
.laufband {
    display: grid;
    gap: 18px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.laufband__reihe {
    display: flex;
    gap: 18px;
    width: max-content;
    animation: laufen 140s linear infinite;
}

.laufband__reihe--zurueck {
    animation-direction: reverse;
    animation-duration: 168s;
}

.laufband:hover .laufband__reihe,
.laufband:focus .laufband__reihe {
    animation-play-state: paused;
}

.laufband:focus-visible {
    outline: 2px solid var(--navy);
    outline-offset: 4px;
}

@keyframes laufen {
    to {
        transform: translateX(-50%);
    }
}

.stimme {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 380px;
    padding: 26px 28px;
    border-radius: 20px;
    background: #fff;
    box-shadow: var(--lift-s);
}

.stimme .sterne {
    --anteil: 100%;
    font-size: 17px;
}

.stimme .sterne::before {
    animation: none;
}

.stimme blockquote {
    margin: 0;
    color: var(--navy);
    font-size: 16px;
    line-height: 1.55;
}

.stimme figcaption {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    color: var(--ink-faint);
    font-size: 14px;
}

.stimme figcaption b {
    display: block;
    color: var(--navy);
    font-size: 15px;
}

.stimme__kreis {
    display: grid;
    flex: none;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--yellow-soft);
    color: var(--navy);
    font: 700 15px/1 var(--font-display);
}

.stimme:nth-child(3n + 2) .stimme__kreis {
    background: #e8e4ff;
}

.stimme:nth-child(3n + 3) .stimme__kreis {
    background: #e5f4ea;
}

.stimmen__fuss {
    display: grid;
    justify-items: center;
    gap: 14px;
    margin-top: 48px;
    text-align: center;
}

.stimmen__hinweis {
    max-width: 46em;
    color: var(--ink-faint);
    font-size: 13px;
}

@media (max-width: 700px) {
    .stimme {
        width: 290px;
        padding: 22px;
    }

    .stimmen__kopf {
        margin-bottom: 36px;
    }
}

/* ------------------------------------------------------------ Features page: more motion */

/* The product name stays in one piece where it fits on one line. */
.fn-hero h1 .fn-hero__name {
    color: inherit;
}

@media (min-width: 700px) {
    .fn-hero h1 .fn-hero__name {
        white-space: nowrap;
    }
}

/* The views tilt upright as they scroll in. */
@supports (animation-timeline: view()) {
    .fn .griff__view {
        perspective: 1400px;
    }

    /* Upright once the view is fully in sight: ending later left tall views half transparent. */
    .fn .griff__view > * {
        animation: aufrichten linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 100%;
        transform-origin: 50% 100%;
    }

    .fn .griff .plus li {
        animation: reveal-rise linear both;
        animation-timeline: view();
        animation-range: entry 10% entry 90%;
    }
}

/* Movement only, like reveal-rise: the views are content and stay fully opaque (Richard 30.10.2026, 0.5.75). */
@keyframes aufrichten {
    from {
        transform: rotateX(18deg) translateY(40px) scale(0.96);
    }
}

/* A ring breathes around each feature's number. */
.fn .griff__nr b {
    position: relative;
}

.fn .griff__nr b::after {
    content: '';
    position: absolute;
    inset: -6px;
    border: 2px solid var(--yellow);
    border-radius: 50%;
    opacity: 0;
    animation: atmen 2.8s ease-out infinite;
}

@keyframes atmen {
    0% {
        opacity: 0.7;
        transform: scale(0.85);
    }
    100% {
        opacity: 0;
        transform: scale(1.35);
    }
}

/* Standing still, the reviews scroll by hand and their copies for the loop step aside. */
@media (prefers-reduced-motion: reduce) {
    .laufband {
        overflow-x: auto;
    }

    .laufband .stimme[aria-hidden='true'] {
        display: none;
    }
}

/* ================================================================== Inner pages (one design for the whole site, 29.10.2026)
 * Richard: the whole site in the front page's look, the old sheet gone. Legal and help texts, sign-in, password,
 * product pages, cancelling and withdrawing, the board and the WordPress pages of the theme use this part; their
 * header and footer are the front page's. Light everywhere: no dark page heads any more. */

/* Without a band hero below it (inner pages, checkout, the theme) the header stands in the flow, on the tint those
   pages' heads begin with. */
body:not(:has(> main > :is(.band, .fn-hero):first-child)) .head {
    position: relative;
    background: var(--tint);
}

.head--schmal .head__bar {
    justify-content: space-between;
}

.button--outline {
    background: none;
    box-shadow: inset 0 0 0 2px var(--line);
    color: var(--navy);
}

.button--outline:hover {
    box-shadow: inset 0 0 0 2px var(--navy);
}

.button:disabled {
    opacity: 0.7;
    transform: none;
    filter: none;
}

.link-quiet {
    color: var(--ink-soft);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.link-quiet:hover {
    color: var(--navy);
}

.link-arrow {
    font-weight: 700;
    text-decoration: none;
}

.link-arrow::after {
    content: ' →';
}

.eyebrow {
    margin-bottom: 16px;
    color: #6a5acd;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lead {
    max-width: 680px;
    margin-top: 18px;
    color: var(--ink-soft);
    font-size: 19px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Sections */

.section {
    padding: 96px 0;
}

.section--tint {
    background: var(--tint);
}

.section__head {
    max-width: 820px;
    margin: 0 auto 48px;
    text-align: center;
}

.section__head h1,
.section__head h2 {
    font-size: clamp(30px, 3.6vw, 42px);
    text-wrap: balance;
}

.section__head p:not(.eyebrow) {
    margin-top: 16px;
    color: var(--ink-soft);
    font-size: 18px;
}

/* Price page */

.prices-more {
    display: grid;
    justify-items: center;
    gap: 16px;
    text-align: center;
    color: var(--ink-soft);
}

/* Plans */

.plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 20px;
}

.plan {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.plan--highlight {
    border: 2px solid var(--navy);
    box-shadow: var(--shadow);
}

/*
 * The card a link points to (`/preise/#privat-plus`, EV14). Extra margin keeps the "Beliebt" flag
 * clear of the sticky header; further ids of a card sit on its top edge.
 */
.plan,
.plan__anchor,
.price-group__head {
    scroll-margin-top: 20px;
}

.plan__anchor {
    position: absolute;
    top: 0;
}

.plan:target,
.plan:has(> .plan__anchor:target) {
    outline: 3px solid var(--yellow);
    outline-offset: 4px;
}

.plan__flag {
    position: absolute;
    top: -13px;
    left: 28px;
    padding: 3px 12px;
    background: var(--yellow);
    color: var(--navy);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.plan__audience {
    color: var(--ink-faint);
    font-size: 14px;
    font-weight: 600;
}

.plan h3 {
    margin-top: 4px;
    font-size: 26px;
}

.plan__price {
    margin-top: 18px;
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
}

.plan__tax {
    margin-top: 6px;
    color: var(--ink-faint);
    font-size: 14px;
}

.plan__lead {
    margin-top: 18px;
    color: var(--ink-soft);
}

.plan__features {
    display: grid;
    gap: 10px;
    margin: 20px 0 28px;
    padding: 0;
    list-style: none;
    font-size: 15px;
}

.plan__features li {
    position: relative;
    padding-left: 26px;
}

.plan__features li::before {
    content: '';
    position: absolute;
    top: 0.45em;
    left: 2px;
    width: 12px;
    height: 7px;
    border-bottom: 2.5px solid var(--green);
    border-left: 2.5px solid var(--green);
    transform: rotate(-45deg);
}

.plan .button {
    margin-top: auto;
}

.plans__note {
    margin-top: 28px;
    color: var(--ink-soft);
    font-size: 15px;
    text-align: center;
}

/* New V6 catalogue on the beta page: one block per family. */

.plans--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.price-group + .price-group {
    margin-top: 72px;
}

.price-group__head {
    max-width: 720px;
    margin: 0 auto 32px;
    text-align: center;
}

.price-group__head h3 {
    font-size: 28px;
}

.price-group__head p {
    margin-top: 8px;
    color: var(--ink-soft);
}

.catalog-closed {
    margin-top: 16px;
    padding: 10px 16px;
    background: var(--yellow);
    color: var(--navy);
    border-radius: var(--radius-small);
    font-size: 14px;
    font-weight: 600;
}

/* Question mark with a short explanation (partials/hint.php). */

.hint {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    margin-left: 4px;
    padding: 0;
    vertical-align: 1px;
    background: var(--paper);
    color: var(--ink-soft);
    border: 1px solid var(--line);
    border-radius: 50%;
    font: 700 12px/1 var(--font-body);
    cursor: pointer;
}

.hint:hover {
    border-color: var(--navy);
    color: var(--navy);
}

.hint__bubble {
    max-width: min(320px, calc(100vw - 32px));
    margin: auto;
    padding: 12px 14px;
    background: var(--ink);
    color: #fff;
    border: 0;
    border-radius: var(--radius-small);
    box-shadow: var(--shadow);
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}

@supports (position-area: bottom) {
    .hint__bubble {
        inset: auto;
        margin: 8px 0;
        position-area: bottom;
        position-try-fallbacks: flip-block;
    }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}


/* Product page of the new catalogue (templates/product.php) */

.product {
    padding-top: 56px;
}

.product__head {
    margin-bottom: 32px;
}

.product__back {
    color: var(--ink-faint);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.product__back::before {
    content: '← ';
}

.product__back:hover {
    color: var(--navy);
}

.product__error {
    max-width: 720px;
    margin: 0 auto 24px;
    text-align: center;
}

:where(.product__form fieldset) {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.period {
    display: flex;
    width: fit-content;
    margin: 0 auto 40px;
    padding: 4px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.period__option input,
.more__option input,
.plan__radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.period__option span {
    display: block;
    padding: 8px 20px;
    border-radius: 999px;
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
}

.period__option small {
    margin-left: 4px;
    color: var(--green);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
}

.period__option input:checked + span {
    background: var(--navy);
    color: #fff;
}

.period__option input:checked + span small {
    color: var(--yellow);
}

.period__option input:focus-visible + span,
.more__option:has(input:focus-visible),
.plan--choice:has(.plan__radio:focus-visible) {
    outline: 3px solid var(--yellow);
    outline-offset: 2px;
}

/* The price of the duration not chosen stays hidden. */
.product__form:has(input[name='attribute_laufzeit'][value='jährlich']:checked) [data-duration='monatlich'],
.product__form:has(input[name='attribute_laufzeit'][value='monatlich']:checked) [data-duration='jährlich'] {
    display: none;
}

.plan--choice {
    cursor: pointer;
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}

.plan--choice:hover {
    border-color: var(--ink-faint);
}

.plan--choice:has(.plan__radio:checked) {
    border-color: var(--navy);
    box-shadow:
        0 0 0 1px var(--navy),
        var(--shadow);
}

/* The label covers the whole card, so a click anywhere picks it. */
.plan__choose {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}

.plan__choose::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.plan__name {
    order: -1;
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
}

.plan__mark {
    flex: none;
    width: 24px;
    height: 24px;
    border: 2px solid var(--line);
    border-radius: 50%;
    transition:
        background 0.15s,
        border-color 0.15s;
}

.plan__radio:checked + .plan__mark {
    background: var(--navy)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffc107' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
        center / 14px no-repeat;
    border-color: var(--navy);
}

.plan--choice .plan__features {
    margin-bottom: 0;
}

.more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 28px;
}

.more legend {
    float: left;
    margin-right: 6px;
    color: var(--ink-soft);
    font-size: 15px;
    font-weight: 600;
}

.more__option {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 16px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 15px;
    cursor: pointer;
}

.more__option:has(input:checked) {
    border-color: var(--navy);
    box-shadow: 0 0 0 1px var(--navy);
}

.more__name {
    font-weight: 700;
}

.more__price {
    color: var(--ink-soft);
}

.product__buy {
    display: grid;
    justify-items: center;
    gap: 10px;
    margin-top: 40px;
    text-align: center;
}

.product__buy .button {
    min-width: 260px;
}

.product__after {
    display: grid;
    justify-items: center;
    gap: 6px;
    margin-top: 10px;
    text-align: center;
}

.product__terms,
.product__extensions {
    margin: 0;
    color: var(--ink-faint);
    font-size: 14px;
}

.product__extensions p {
    margin: 0;
}

/* Existing tariffs: one feature list, one row per tier. */

.ladder {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
    gap: 20px;
    max-width: 980px;
    margin-inline: auto;
}

.ladder__title {
    font-size: 20px;
}

.ladder__card .plan__features {
    margin-bottom: 0;
}

.ladder__rows {
    display: grid;
    gap: 10px;
}

.ladder__row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    transition:
        border-color 0.15s,
        box-shadow 0.15s;
}

.ladder__row:hover {
    border-color: var(--ink-faint);
}

.ladder__row:has(.plan__radio:checked) {
    border-color: var(--navy);
    box-shadow:
        0 0 0 1px var(--navy),
        var(--shadow);
}

.ladder__row:has(.plan__radio:focus-visible) {
    outline: 3px solid var(--yellow);
    outline-offset: 2px;
}

.ladder__name,
.ladder__price {
    display: grid;
    gap: 2px;
}

.ladder__name {
    flex: 1;
    min-width: 0;
}

.ladder__name b,
.ladder__price b {
    font-family: var(--font-display);
    font-size: 19px;
}

.ladder__name small,
.ladder__price small {
    color: var(--ink-faint);
    font-size: 13px;
}

.ladder__price {
    text-align: right;
    white-space: nowrap;
}

.product__form:has(input[name='attribute_laufzeit'][value='jährlich']:checked) .ladder__row[data-only='monatlich'],
.product__form:has(input[name='attribute_laufzeit'][value='monatlich']:checked) .ladder__row[data-only='jährlich'] {
    display: none;
}

/* On a phone the cards run long: the yearly note goes under its label, the button stays in view. */
@media (max-width: 860px) {
    .period {
        width: auto;
    }

    .period__option {
        flex: 1;
    }

    .period__option span {
        padding: 6px 18px;
        text-align: center;
    }

    .period__option small {
        display: block;
        margin: 0;
        font-size: 12px;
    }

    .product__buy {
        position: sticky;
        bottom: 0;
        z-index: 5;
        margin-inline: -16px;
        margin-top: 32px;
        padding: 12px 16px;
        background: rgb(246 245 250 / 94%);
        border-top: 1px solid var(--line);
        backdrop-filter: blur(8px);
    }

    .product__buy .button {
        width: 100%;
    }

    .ladder {
        grid-template-columns: 1fr;
    }

    .ladder__rows {
        order: -1;
    }
}


/* Legal pages (templates/legal.php): the WordPress text, cleaned to plain structure. */

.legal h1 {
    margin-bottom: 32px;
    font-size: clamp(30px, 3.6vw, 42px);
}

.legal__text {
    color: var(--ink-soft);
    font-size: 16px;
    overflow-wrap: anywhere;
}

.legal__text :is(h2, h3, h4) {
    margin: 36px 0 10px;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-wrap: balance;
}

.legal__text h2 {
    font-size: 24px;
}

.legal__text h3 {
    font-size: 19px;
}

.legal__text h4 {
    font-size: 17px;
}

.legal__text > :first-child {
    margin-top: 0;
}

.legal__text p,
.legal__text ul,
.legal__text ol,
.legal__text table {
    margin: 0 0 12px;
}

.legal__text :is(ul, ol) {
    padding-left: 22px;
}

.legal__text ul {
    list-style: disc;
}

.legal__text ol {
    list-style: decimal;
}

.legal__text li + li {
    margin-top: 4px;
}

.legal__text strong,
.legal__text b {
    color: var(--ink);
}

.legal__text table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.legal__text :is(th, td) {
    padding: 8px 10px;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

/*
 * Text pages (legal, help, support, 404, search) come to life (Richard 29.10.2026: "too clean"):
 * a tinted head with KE yellow and violet light, a fine dot grid fading out, the brand mark drifting
 * faintly behind the title, the title rising in with a yellow stroke below it, and the text following.
 * Headings of long texts carry the yellow dot of the mark and rise in while scrolling. CSS only; the
 * motion stops with prefers-reduced-motion.
 */

.section.legal {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(620px 300px at 92% 0%, rgb(255 193 7 / 16%), transparent 70%),
        radial-gradient(560px 340px at 0% 0%, rgb(106 90 205 / 10%), transparent 70%),
        linear-gradient(var(--tint), var(--paper) 440px);
}

.section.legal::before,
.section.legal::after {
    content: '';
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.section.legal::before {
    inset: 0 0 auto;
    height: 440px;
    background-image: radial-gradient(rgb(33 19 80 / 13%) 1px, transparent 1.6px);
    background-size: 22px 22px;
    -webkit-mask-image: linear-gradient(#000, transparent);
    mask-image: linear-gradient(#000, transparent);
}

.section.legal::after {
    top: 36px;
    right: max(-110px, calc(50% - 760px));
    width: 330px;
    aspect-ratio: 621.61 / 694;
    background: url('img/mark-on-light.svg') center / contain no-repeat;
    opacity: 0.07;
    animation: mark-drift 9s ease-in-out infinite alternate;
}

.legal h1 {
    animation: page-rise 0.9s var(--ease-out) backwards;
}

.legal h1::after {
    content: '';
    display: block;
    width: 64px;
    height: 5px;
    margin-top: 18px;
    background: linear-gradient(90deg, var(--yellow), var(--yellow-dot));
    border-radius: 999px;
    transform-origin: left;
    animation: stroke-grow 0.8s 0.35s var(--ease-out) both;
}

.legal .wrap > :not(h1) {
    animation: page-rise 0.9s 0.18s var(--ease-out) backwards;
}

.legal .wrap > :not(h1) ~ :not(h1) {
    animation-delay: 0.3s;
}

.legal__text h2::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 12px;
    background: var(--yellow-dot);
    border-radius: 50%;
    vertical-align: 0.12em;
}

@supports (animation-timeline: view()) {
    .legal__text :is(h2, h3) {
        animation: heading-rise linear backwards;
        animation-timeline: view();
        animation-range: entry 0% entry 80%;
    }
}

/* Like reveal-rise: on the scroll the headings only lift, they never fade. */
@keyframes heading-rise {
    from {
        transform: translateY(18px);
    }
}

@keyframes page-rise {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
}

@keyframes stroke-grow {
    from {
        transform: scaleX(0);
    }
}

@keyframes mark-drift {
    to {
        transform: translateY(-22px) rotate(6deg);
    }
}

@media (max-width: 720px) {
    .section.legal::after {
        top: 20px;
        right: -70px;
        width: 190px;
        opacity: 0.06;
    }
}

/* Help pages (HelpPage): calls to action, the survey, V5's sign-in, the support form. */

.page-cta {
    margin: 24px 0;
}

.help__text iframe {
    display: block;
    width: 100%;
    max-width: 680px;
    margin: 24px auto;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.help__text img {
    display: inline-block;
    max-height: 32px;
    width: auto;
    margin-right: 6px;
    vertical-align: middle;
}

/* V5 draws its inventory suggestions in the colors of the old dark page: they get a dark field. */
.help__text #ke-install-inventory:not(:empty) {
    margin: 24px 0;
    padding: 24px;
    background: var(--night);
    border-radius: var(--radius);
}

.help-login {
    color: var(--ink-soft);
}

body.kew-help {
    background: var(--paper);
    font-family: var(--font-body);
}

/* The support form as a raised card with the brand's stroke on top. */
.kew-help .help-form {
    position: relative;
    margin-top: 32px;
    padding: 28px;
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow:
        0 1px 2px rgb(22 19 37 / 6%),
        0 24px 56px -28px rgb(22 19 37 / 28%);
}

.kew-help .help-form::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(90deg, var(--yellow), var(--yellow-dot) 45%, #6a5acd);
}

/* A way to the answer before writing: the help centre, as a tile. */
.help-hint {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 28px;
    padding: 18px 20px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    text-decoration: none;
    transition:
        border-color 0.2s,
        box-shadow 0.2s,
        transform 0.2s var(--ease-out);
}

.help-hint:hover {
    border-color: rgb(255 193 7 / 70%);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.help-hint__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    background: var(--yellow-soft);
    border-radius: 12px;
    color: var(--navy);
}

.help-hint__text {
    display: grid;
    flex: 1;
    min-width: 0;
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.45;
}

.help-hint__text strong {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 17px;
}

.help-hint__arrow {
    flex: none;
    color: var(--ink-faint);
    font-size: 20px;
    transition: transform 0.2s var(--ease-out);
}

.help-hint:hover .help-hint__arrow {
    color: var(--navy);
    transform: translateX(4px);
}

/* Page head of inner pages */

.page-head {
    padding: 72px 0 56px;
    background:
        radial-gradient(620px 300px at 92% 0%, rgb(255 193 7 / 16%), transparent 70%),
        radial-gradient(560px 340px at 0% 0%, rgb(106 90 205 / 10%), transparent 70%),
        linear-gradient(var(--tint), var(--paper));
    color: var(--navy);
}

.page-head h1 {
    font-size: clamp(34px, 4.4vw, 52px);
}

.page-head .lead {
    max-width: 680px;
    margin-top: 16px;
}

.page-head--success .eyebrow {
    color: var(--green);
}

/* Forms (cancellation, withdrawal) */

.section--form {
    padding: 56px 0 96px;
    background: var(--tint);
}

.form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 32px;
}

.card {
    padding: 32px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.form {
    display: grid;
    gap: 26px;
}

.form__intro {
    font-weight: 600;
}

.field {
    display: grid;
    gap: 8px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.field legend,
.field > label {
    margin-bottom: 4px;
    padding: 0;
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
}

.field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.optional {
    color: var(--ink-faint);
    font-family: var(--font-body);
    font-weight: 500;
}

.field input[type='text'],
.field input[type='email'],
.field input[type='password'],
.field input[type='date'],
.field select,
.field textarea {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    background: var(--paper);
    border: 1px solid #cfcbdc;
    border-radius: var(--radius-small);
    color: var(--ink);
    font: inherit;
    font-size: 16px;
}

.field textarea {
    resize: vertical;
}

.field select {
    padding-right: 42px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23161325' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-position: right 14px center;
    background-repeat: no-repeat;
    cursor: pointer;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--navy);
    outline: 3px solid rgb(255 193 7 / 55%);
    outline-offset: 0;
}

.field :is(input, select, textarea)[aria-invalid='true'] {
    border-color: #c62828;
}

.field__hint {
    color: var(--ink-faint);
    font-size: 14px;
}

.field__error {
    color: #b71c1c;
    font-size: 14px;
    font-weight: 600;
}

.choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
    cursor: pointer;
}

.choice:has(input:checked) {
    background: #fffbea;
    border-color: var(--yellow);
}

.choice input[type='radio'] {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: var(--navy);
}

.choice span {
    display: grid;
    gap: 2px;
}

.choice small {
    color: var(--ink-faint);
    font-size: 14px;
}

.choice__date {
    max-width: 220px;
    margin-top: 8px;
}

/* The reason only matters for an extraordinary cancellation; it stays visible when it has an error. */
.form:has(input[name='type'][value='ordinary']:checked) .field--reason:not(:has([aria-invalid])) {
    display: none;
}

.notice {
    padding: 14px 16px;
    border-radius: var(--radius-small);
    font-weight: 600;
}

.notice--error {
    background: #fdecea;
    color: #8e1b1b;
}

.button--danger {
    justify-self: start;
}

.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-aside {
    display: grid;
    gap: 14px;
    padding: 8px 4px;
    color: var(--ink-soft);
    font-size: 15px;
}

.form-aside h2 {
    color: var(--ink);
    font-size: 19px;
}

.form-aside__note {
    font-size: 14px;
}

.timeline {
    display: grid;
    gap: 12px;
    margin: 0;
    padding-left: 20px;
    list-style: decimal;
}

/* Sign-in (/login/) */

.auth {
    padding: 72px 0 96px;
    background:
        radial-gradient(720px 360px at 85% 0%, rgb(255 193 7 / 18%), transparent 60%),
        radial-gradient(560px 320px at 0% 100%, rgb(106 90 205 / 12%), transparent 70%), var(--tint);
}

.auth__wrap {
    display: grid;
    justify-items: center;
    gap: 20px;
}

.auth__card {
    width: min(100%, 440px);
    padding: 36px 32px 32px;
}

.auth__mark {
    display: block;
    width: 40px;
    height: auto;
    margin-bottom: 20px;
}

.auth__card h1 {
    font-size: 30px;
}

.auth__lead {
    margin-top: 6px;
    color: var(--ink-soft);
    font-size: 15px;
}

.auth__form {
    gap: 20px;
    margin-top: 26px;
}

.field__label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.field__label-row label {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 700;
}

.field__label-row a {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    cursor: pointer;
}

.check input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--navy);
}

.notice--info {
    background: var(--tint);
    color: var(--ink-soft);
}

.auth__hint {
    margin-top: 18px;
    color: var(--ink-soft);
    font-size: 15px;
}

.auth__note a {
    color: var(--navy);
    font-weight: 600;
}

.notice--success {
    background: #e7f6ed;
    color: #1d6b3c;
}

.auth__submit {
    width: 100%;
}

/* Forms with a busy state (partials/busy-script.php): sign-in, password, "Weiter zur Kasse". */
form[data-ke-busy] button[type='submit'] > span {
    pointer-events: none;
}

form[data-ke-busy] button[type='submit']:disabled {
    cursor: progress;
}

.spinner {
    display: none;
    width: 18px;
    height: 18px;
    border: 2.5px solid rgb(33 19 80 / 25%);
    border-top-color: var(--navy);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

form[data-ke-busy][aria-busy='true'] .spinner {
    display: inline-block;
}

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

.auth__note {
    max-width: 440px;
    color: var(--ink-soft);
    font-size: 14px;
    text-align: center;
}

@media (max-width: 520px) {
    .auth {
        padding: 32px 0 64px;
    }

    .auth__card {
        padding: 28px 20px 24px;
    }
}

/* Receipt */

.receipt {
    display: grid;
    gap: 22px;
}

.receipt__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.receipt__head h2 {
    font-size: 24px;
}

.receipt__ref {
    color: var(--ink-faint);
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.receipt__list {
    display: grid;
    gap: 14px;
    margin: 0;
}

.receipt__list div {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 16px;
}

.receipt__list dt {
    color: var(--ink-faint);
    font-weight: 600;
}

.receipt__list dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.receipt__note {
    color: var(--ink-faint);
    font-size: 14px;
}

.receipt .button {
    justify-self: start;
}

/* Ideen und bekannte Probleme (KD24): one kanban, ideas and problems share the columns */
.board-section {
    background: var(--tint);
}

.kanban {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
}

.kanban__column {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    padding: 16px;
    border-radius: var(--radius);
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 4px solid var(--line);
}

.kanban__column--open {
    border-top-color: #b9b4cc;
}

.kanban__column--planned {
    border-top-color: var(--yellow);
}

.kanban__column--working {
    border-top-color: #6c5ce7;
}

.kanban__column--done {
    border-top-color: var(--green);
}

.kanban__head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
}

.kanban__count {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--tint);
    color: var(--ink-soft);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
}

.kanban__head p {
    margin-top: 2px;
    color: var(--ink-faint);
    font-size: 13px;
}

.kanban__empty {
    padding: 14px;
    border: 1px dashed var(--line);
    border-radius: var(--radius-small);
    color: var(--ink-faint);
    font-size: 14px;
}

.kanban__cards {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kanban-card {
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
    background: var(--paper);
    box-shadow: 0 1px 2px rgb(22 19 37 / 6%);
}

.kanban-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    color: var(--ink-faint);
    font-size: 12px;
}

.kanban-card h3 {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.kanban-card__text {
    display: -webkit-box;
    margin-top: 4px;
    overflow: hidden;
    color: var(--ink-soft);
    font-size: 14px;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.kanban-card__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 10px;
    color: var(--ink-soft);
    font-size: 13px;
}

.kanban-card__votes {
    font-weight: 700;
}

.tag {
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.tag--wish {
    background: #ebe7fb;
    color: #3b2a8a;
}

.tag--bug {
    background: #fde8e8;
    color: #9b1c1c;
}

.board__how {
    max-width: 820px;
    margin: 48px auto 0;
}

.board__how h2 {
    font-size: 24px;
}

.board__how ol {
    display: grid;
    gap: 8px;
    margin: 16px 0 0;
    padding-left: 20px;
    color: var(--ink-soft);
}

.board__links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
    margin-top: 24px;
}

.board__note {
    margin-top: 20px;
    color: var(--ink-faint);
    font-size: 14px;
}

@media (max-width: 1080px) {
    .kanban {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .kanban {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media print {
    .head,
    .site-footer,
    .preview-bar,
    .print-hide,
    .skip {
        display: none !important;
    }

    .page-head {
        padding: 0 0 16px;
        background: none;
        color: #000;
    }

    .section--form {
        padding: 0;
        background: none;
    }

    .form-layout {
        display: block;
    }

    .card {
        border: 0;
        box-shadow: none;
        padding: 0;
    }
}


/* ------------------------------------------------------------ Inner pages on narrow screens */

@media (max-width: 1080px) {
    .plans--four {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .plans--four,
    .plans,
    .form-layout,
    .field-row {
        grid-template-columns: 1fr;
    }

    .receipt__list div {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .card {
        padding: 22px;
    }

    .plans {
        gap: 28px;
    }

    .section {
        padding: 72px 0;
    }
}

@media (max-width: 520px) {
    .page-head {
        padding: 48px 0 40px;
    }

    .auth__submit,
    .page-cta .button {
        justify-content: center;
        width: 100%;
        white-space: normal;
    }
}

@media (prefers-reduced-motion: reduce) {
    .section.legal::after,
    .legal h1,
    .legal h1::after,
    .legal .wrap > *,
    .legal__text :is(h2, h3) {
        animation: none;
    }

    .help-hint,
    .help-hint__arrow {
        transition: none;
    }
}