/* HUFNEX – Stylesheet
 *
 * Helles, redaktionelles Design. Der Himmel oben auf jeder Seite folgt der
 * Tageszeit in Nürnberg (Klassen sky-* vom Server, fließender Verlauf per JS).
 * Bewegung gibt es nur mit JavaScript (html.motion) und ohne reduzierte Bewegung.
 */

@font-face {
    font-family: "Instrument Serif";
    src: url("../fonts/instrument-serif-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Instrument Serif";
    src: url("../fonts/instrument-serif-400-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Figtree";
    src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");
    font-weight: 300 900;
    font-style: normal;
    font-display: swap;
}

/* Himmelsfarben als echte Farbwerte registrieren, damit sie weich überblenden */
@property --sky-top { syntax: "<color>"; inherits: true; initial-value: #cfe6fb; }
@property --sky-bottom { syntax: "<color>"; inherits: true; initial-value: #fdf8ee; }
@property --sun { syntax: "<color>"; inherits: true; initial-value: #ffe08a; }

/* ---------- Design-Tokens ---------- */

:root {
    color-scheme: light;

    --ink: #1b1a17;
    --ink-soft: #4d4a43;
    --paper: #fbf8f2;
    --card: #ffffff;
    --line: rgb(27 26 23 / 0.12);
    --line-strong: rgb(27 26 23 / 0.24);
    --blue: #2346d6;
    --blue-dark: #19329c;
    --blue-soft: #e6ebfc;
    --yellow: #ffc83d;
    --yellow-soft: #fff3cf;
    --coral: #f2643d;
    --mint: #3bbf91;
    --lilac: #c4b5f5;
    --success: #1f8a5b;
    --error: #c2361b;
    --error-soft: #fdeee9;

    /* Flächen und Texte, die im Dark Mode anders aussehen */
    --on-color: #1b1a17;              /* Text auf Gelb, Mint, Flieder, Koralle: immer dunkel */
    --fill-blue: var(--blue);         /* blaue Flächen (Buttons, Feature-Karte) */
    --fill-blue-hover: var(--blue-dark);
    --button-shadow: var(--blue-dark);
    --header-bg: rgb(251 248 242 / 0.88);
    --alt-bg: rgb(255 255 255 / 0.6);
    --chip-bg: rgb(255 255 255 / 0.7);
    --footer-bg: #1b1a17;
    --footer-text: rgb(251 248 242 / 0.72);
    --footer-strong: #fbf8f2;
    --footer-line: rgb(251 248 242 / 0.15);
    --footer-x: #6d8bff;

    /* Mauszeiger: gelber Pfeil mit hartem Schatten, über Links blau mit Funken wie im Logo */
    --cursor: url("../img/cursor.svg") 3 2, auto;
    --cursor-link: url("../img/cursor-link.svg") 3 2, pointer;
    --spark: var(--blue);

    /* Wetter im Himmel */
    --cloud: rgb(255 255 255 / 0.85);
    --cloud-dense: rgb(232 235 242 / 0.9);
    --rain: rgb(35 70 214 / 0.4);
    --snow: rgb(255 255 255 / 0.95);
    --fog: rgb(255 255 255 / 0.55);

    --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
    --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --step--1: 0.875rem;
    --step-0: 1.0625rem;
    --step-1: clamp(1.15rem, 1.07rem + 0.4vw, 1.35rem);
    --step-2: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
    --step-3: clamp(2.2rem, 1.7rem + 2.2vw, 3.4rem);
    --step-4: clamp(2.9rem, 1.9rem + 4.6vw, 5.4rem);
    --step-5: clamp(3.4rem, 2rem + 6.6vw, 7.2rem);

    --space-section: clamp(4.5rem, 3rem + 6vw, 8rem);
    --radius: 0.9rem;
    --radius-lg: 1.4rem;
    --shadow: 0 1px 0 rgb(27 26 23 / 0.04), 0 18px 40px -24px rgb(27 26 23 / 0.35);
    --shadow-lift: 0 2px 0 rgb(27 26 23 / 0.05), 0 28px 50px -24px rgb(27 26 23 / 0.4);
    --container: 76rem;
    --control-height: 3.1rem; /* gleiche Höhe für alle Buttons und Bedienelemente */
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Himmel je Tageszeit (Startwerte vom Server, JavaScript blendet fließend über) */
.sky-night { --sky-top: #cdd5ee; --sky-bottom: #eef0f8; --sun: #fbf6e4; --stars: 1; }
.sky-dawn { --sky-top: #e1d3f0; --sky-bottom: #fbeef0; --sun: #ffcfb5; --stars: 0.3; }
.sky-sunrise { --sky-top: #ffcdb0; --sky-bottom: #fff3e6; --sun: #ffad73; --stars: 0; }
.sky-morning { --sky-top: #cde5fb; --sky-bottom: #fdf8ee; --sun: #ffdc7a; --stars: 0; }
.sky-noon { --sky-top: #bcdeff; --sky-bottom: #f7fbff; --sun: #fff0a0; --stars: 0; }
.sky-afternoon { --sky-top: #d4e6f8; --sky-bottom: #fff6e8; --sun: #ffd166; --stars: 0; }
.sky-sunset { --sky-top: #ffbc96; --sky-bottom: #ffe6d1; --sun: #ff8547; --stars: 0; }
.sky-dusk { --sky-top: #d9c8ea; --sky-bottom: #f6eef6; --sun: #f6b2c6; --stars: 0.4; }


/* ---------- Dark Mode: der Himmel bei Nacht ----------
 * Folgt der Systemeinstellung; data-theme="light"/"dark" auf <html> überstimmt sie
 * (Umschalter im Kopf, Wahl wird gespeichert). Es werden nur Farben getauscht,
 * Aufbau, Sticker und Schatten bleiben gleich. Farben pro Phase auch in app.js.
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --ink: #f1ece2;
        --ink-soft: #b9b3a7;
        --paper: #131216;
        --card: #1d1c22;
        --line: rgb(241 236 226 / 0.12);
        --line-strong: rgb(241 236 226 / 0.26);
        --blue: #93abff;
        --blue-soft: #222a4a;
        --yellow-soft: #1e2342; /* im Dunkeln Nachtindigo statt Senfgelb */
        --success: #5fd39a;
        --error: #ff8a6b;
        --error-soft: #3a1f19;
        --shadow: 0 1px 0 rgb(0 0 0 / 0.3), 0 18px 40px -24px rgb(0 0 0 / 0.85);
        --shadow-lift: 0 2px 0 rgb(0 0 0 / 0.35), 0 28px 50px -24px rgb(0 0 0 / 0.9);
        --fill-blue: #3b5cf0;
        --fill-blue-hover: #2f4bd1;
        --button-shadow: #9fb3ff;
        --header-bg: rgb(19 18 22 / 0.86);
        --alt-bg: rgb(255 255 255 / 0.025);
        --chip-bg: rgb(255 255 255 / 0.06);
        --footer-bg: #0b0a0d;
        --cursor: url("../img/cursor-dark.svg") 3 2, auto;
        --cursor-link: url("../img/cursor-link-dark.svg") 3 2, pointer;
        --spark: var(--yellow);
        --cloud: rgb(160 175 215 / 0.13);
        --cloud-dense: rgb(150 160 195 / 0.18);
        --rain: rgb(147 171 255 / 0.45);
        --snow: rgb(235 240 255 / 0.8);
        --fog: rgb(150 160 190 / 0.16);
    }
    :root:not([data-theme="light"]).sky-night { --sky-top: #0b1024; --sky-bottom: #131216; --sun: #f4efd8; --stars: 1; }
    :root:not([data-theme="light"]).sky-dawn { --sky-top: #2a1d3d; --sky-bottom: #18151d; --sun: #ff9e7a; --stars: 0.6; }
    :root:not([data-theme="light"]).sky-sunrise { --sky-top: #4a2430; --sky-bottom: #1b1517; --sun: #ff8a4c; --stars: 0.15; }
    :root:not([data-theme="light"]).sky-morning { --sky-top: #152a4c; --sky-bottom: #141418; --sun: #ffd36b; --stars: 0; }
    :root:not([data-theme="light"]).sky-noon { --sky-top: #173a6b; --sky-bottom: #14161c; --sun: #ffe58a; --stars: 0; }
    :root:not([data-theme="light"]).sky-afternoon { --sky-top: #1d3253; --sky-bottom: #151519; --sun: #ffc75a; --stars: 0; }
    :root:not([data-theme="light"]).sky-sunset { --sky-top: #4b2133; --sky-bottom: #1a1418; --sun: #ff7a3d; --stars: 0; }
    :root:not([data-theme="light"]).sky-dusk { --sky-top: #2b1f45; --sky-bottom: #17151d; --sun: #f58fb4; --stars: 0.6; }
    :root:not([data-theme="light"]) ::selection { color: var(--on-color); }
    :root:not([data-theme="light"]) .marquee,
    :root:not([data-theme="light"]) .sticker__body,
    :root:not([data-theme="light"]) .steps li::before,
    :root:not([data-theme="light"]) .timeline__number,
    :root:not([data-theme="light"]) .price-card__badge,
    :root:not([data-theme="light"]) .card--feature .card__icon,
    :root:not([data-theme="light"]) .thanks__icon,
    :root:not([data-theme="light"]) .faq__item[open] summary::after,
    :root:not([data-theme="light"]) .button--ghost:hover,
    :root:not([data-theme="light"]) .lang-switch:hover,
    :root:not([data-theme="light"]) .theme-toggle:hover,
    :root:not([data-theme="light"]) .tags li:hover { color: var(--on-color); }
    :root:not([data-theme="light"]) .marquee li::after { background: var(--on-color); }
    :root:not([data-theme="light"]) .pg-site { --ink: #1b1a17; --ink-soft: #4d4a43; --card: #ffffff; --line: rgb(27 26 23 / 0.12); }
    :root:not([data-theme="light"]) .sky__sun { filter: drop-shadow(0 0 40px color-mix(in srgb, var(--sun) 45%, transparent)); }
    :root:not([data-theme="light"]) .cta::before { opacity: 0.45; bottom: -20rem; }
    :root:not([data-theme="light"]) .button--ghost { background: var(--paper); }
    /* Hover muss die feste Hintergrundfarbe oben wieder überstimmen, sonst dunkle Schrift auf dunklem Grund */
    :root:not([data-theme="light"]) .button--ghost:hover { background: var(--yellow); }
    /* Icon-Kacheln im kräftigen Gelb wie im Logo, Symbol dunkel */
    :root:not([data-theme="light"]) .card__icon { background: var(--yellow); color: var(--on-color); }
    :root:not([data-theme="light"]) .eyebrow::before { box-shadow: 0 0 0 3px rgb(255 200 61 / 0.18); }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #f1ece2;
    --ink-soft: #b9b3a7;
    --paper: #131216;
    --card: #1d1c22;
    --line: rgb(241 236 226 / 0.12);
    --line-strong: rgb(241 236 226 / 0.26);
    --blue: #93abff;
    --blue-soft: #222a4a;
    --yellow-soft: #1e2342; /* im Dunkeln Nachtindigo statt Senfgelb */
    --success: #5fd39a;
    --error: #ff8a6b;
    --error-soft: #3a1f19;
    --shadow: 0 1px 0 rgb(0 0 0 / 0.3), 0 18px 40px -24px rgb(0 0 0 / 0.85);
    --shadow-lift: 0 2px 0 rgb(0 0 0 / 0.35), 0 28px 50px -24px rgb(0 0 0 / 0.9);
    --fill-blue: #3b5cf0;
    --fill-blue-hover: #2f4bd1;
    --button-shadow: #9fb3ff;
    --header-bg: rgb(19 18 22 / 0.86);
    --alt-bg: rgb(255 255 255 / 0.025);
    --chip-bg: rgb(255 255 255 / 0.06);
    --footer-bg: #0b0a0d;
    --cursor: url("../img/cursor-dark.svg") 3 2, auto;
    --cursor-link: url("../img/cursor-link-dark.svg") 3 2, pointer;
    --spark: var(--yellow);
    --cloud: rgb(160 175 215 / 0.13);
    --cloud-dense: rgb(150 160 195 / 0.18);
    --rain: rgb(147 171 255 / 0.45);
    --snow: rgb(235 240 255 / 0.8);
    --fog: rgb(150 160 190 / 0.16);
}
:root[data-theme="dark"].sky-night { --sky-top: #0b1024; --sky-bottom: #131216; --sun: #f4efd8; --stars: 1; }
:root[data-theme="dark"].sky-dawn { --sky-top: #2a1d3d; --sky-bottom: #18151d; --sun: #ff9e7a; --stars: 0.6; }
:root[data-theme="dark"].sky-sunrise { --sky-top: #4a2430; --sky-bottom: #1b1517; --sun: #ff8a4c; --stars: 0.15; }
:root[data-theme="dark"].sky-morning { --sky-top: #152a4c; --sky-bottom: #141418; --sun: #ffd36b; --stars: 0; }
:root[data-theme="dark"].sky-noon { --sky-top: #173a6b; --sky-bottom: #14161c; --sun: #ffe58a; --stars: 0; }
:root[data-theme="dark"].sky-afternoon { --sky-top: #1d3253; --sky-bottom: #151519; --sun: #ffc75a; --stars: 0; }
:root[data-theme="dark"].sky-sunset { --sky-top: #4b2133; --sky-bottom: #1a1418; --sun: #ff7a3d; --stars: 0; }
:root[data-theme="dark"].sky-dusk { --sky-top: #2b1f45; --sky-bottom: #17151d; --sun: #f58fb4; --stars: 0.6; }
:root[data-theme="dark"] ::selection { color: var(--on-color); }
:root[data-theme="dark"] .marquee,
:root[data-theme="dark"] .sticker__body,
:root[data-theme="dark"] .steps li::before,
:root[data-theme="dark"] .timeline__number,
:root[data-theme="dark"] .price-card__badge,
:root[data-theme="dark"] .card--feature .card__icon,
:root[data-theme="dark"] .thanks__icon,
:root[data-theme="dark"] .faq__item[open] summary::after,
:root[data-theme="dark"] .button--ghost:hover,
:root[data-theme="dark"] .lang-switch:hover,
:root[data-theme="dark"] .theme-toggle:hover,
:root[data-theme="dark"] .tags li:hover { color: var(--on-color); }
:root[data-theme="dark"] .marquee li::after { background: var(--on-color); }
:root[data-theme="dark"] .pg-site { --ink: #1b1a17; --ink-soft: #4d4a43; --card: #ffffff; --line: rgb(27 26 23 / 0.12); }
:root[data-theme="dark"] .sky__sun { filter: drop-shadow(0 0 40px color-mix(in srgb, var(--sun) 45%, transparent)); }
:root[data-theme="dark"] .cta::before { opacity: 0.45; bottom: -20rem; }
:root[data-theme="dark"] .button--ghost { background: var(--paper); }
/* Hover muss die feste Hintergrundfarbe oben wieder überstimmen, sonst dunkle Schrift auf dunklem Grund */
:root[data-theme="dark"] .button--ghost:hover { background: var(--yellow); }
/* Icon-Kacheln im kräftigen Gelb wie im Logo, Symbol dunkel */
:root[data-theme="dark"] .card__icon { background: var(--yellow); color: var(--on-color); }
:root[data-theme="dark"] .eyebrow::before { box-shadow: 0 0 0 3px rgb(255 200 61 / 0.18); }

/* ---------- Basis ---------- */

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Fokussierte Elemente nicht hinter dem Widget unten links verstecken (WCAG 2.4.11) */
    scroll-padding-bottom: 5rem;
    background: var(--paper);
    cursor: var(--cursor);
}

a,
button,
summary,
label,
select,
[role="button"] {
    cursor: var(--cursor-link);
}

input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
textarea {
    cursor: text;
}

body {
    position: relative;
    margin: 0;
    background: transparent;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

/* Einschwebende Elemente starten seitlich versetzt; ohne clip würde die Seite auf dem Handy
   seitlich verschiebbar und herausgezoomt. clip statt hidden, damit sticky weiter funktioniert. */
main {
    overflow-x: clip;
}

::selection {
    background: var(--yellow);
    color: var(--ink);
}

/* Der Himmel: Verlauf oben auf der Seite, darin Sonne bzw. Mond */
.sky {
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    height: min(110vh, 70rem);
    background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bottom) 55%, var(--paper) 100%);
    pointer-events: none;
    overflow: hidden;
    transition: --sky-top 2s linear, --sky-bottom 2s linear;
}

/* Sterne, sichtbar je nach --stars */
.sky::before {
    content: "";
    position: absolute;
    inset: 0 0 40%;
    opacity: calc(var(--stars, 0) * 0.55);
    background-image:
        radial-gradient(1.5px 1.5px at 12% 18%, var(--ink) 50%, transparent 51%),
        radial-gradient(1px 1px at 28% 8%, var(--ink) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 44% 26%, var(--ink) 50%, transparent 51%),
        radial-gradient(1px 1px at 63% 12%, var(--ink) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 78% 30%, var(--ink) 50%, transparent 51%),
        radial-gradient(1px 1px at 88% 6%, var(--ink) 50%, transparent 51%),
        radial-gradient(1px 1px at 6% 40%, var(--ink) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 54% 44%, var(--ink) 50%, transparent 51%);
    transition: opacity 2s;
}

.sky__sun {
    position: absolute;
    left: var(--sun-x, 78%);
    top: var(--sun-y, 14%);
    width: clamp(7rem, 5rem + 8vw, 13rem);
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 50% 50%, var(--sun) 0 55%, color-mix(in srgb, var(--sun) 50%, transparent) 56%, transparent 72%);
    filter: blur(0.5px);
    transition: left 2s var(--ease), top 2s var(--ease), --sun 2s linear;
}

/* Auf dem Handy bleibt die Sonne klein am rechten oberen Rand, damit sie nicht hinter dem Text steht */
@media (max-width: 40rem) {
    /* :root, damit die Nacht-Regel weiter unten (Mond) die Größe nicht überschreibt */
    .sky__sun,
    :root.sky-night .sky__sun,
    :root.is-night .sky__sun {
        left: calc(82% + var(--sun-x, 78%) * 0.1);
        top: calc(5.4rem + var(--sun-y, 14%) * 0.04);
        width: 2.75rem;
    }
}

/* Beim Ausprobieren im Widget sofort umschalten statt überblenden */
.sky-instant .sky,
.sky-instant .sky__sun {
    transition: none;
}

/* Nachts wird aus der Sonne eine Mondsichel */
.sky-night .sky__sun,
.is-night .sky__sun {
    width: clamp(4.5rem, 3.5rem + 4vw, 7rem);
    background: var(--sun);
    box-shadow: inset -1.4rem -0.6rem 0 0 var(--sky-top), 0 0 50px 10px rgb(255 255 255 / 0.6);
}

h1,
h2,
h3 {
    margin: 0 0 0.75rem;
    text-wrap: balance;
}

h1,
h2 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.015em;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }

h3 {
    font-family: var(--font-body);
    font-size: var(--step-1);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

h1 em,
h2 em {
    font-style: italic;
    color: var(--blue);
}

p {
    margin: 0 0 1rem;
    text-wrap: pretty;
}

a {
    color: var(--blue);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

a:hover {
    text-decoration-thickness: 2px;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

img,
svg {
    display: block;
    max-width: 100%;
}

address {
    font-style: normal;
}

:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
    border-radius: 6px;
}

.container {
    width: min(100% - 2.5rem, var(--container));
    margin-inline: auto;
}

.skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 300;
    padding: 0.75rem 1rem;
    background: var(--ink);
    color: var(--paper);
    border-radius: var(--radius);
    font-weight: 600;
}

.skip-link:focus {
    top: 1rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Hervorhebung: kursiv, mit handgezogenem Strich darunter */
.mark {
    font-style: italic;
    color: var(--blue);
    padding-bottom: 0.08em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9.5C40 4 90 3 120 5.5s55 4 76-1' fill='none' stroke='%23ffc83d' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100% / 100% 0.32em;
}

.h3 {
    font-family: var(--font-body);
    font-size: var(--step-1);
    font-weight: 700;
}

.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    height: 3px;
    background: var(--yellow);
    transform: scaleX(var(--progress, 0));
    transform-origin: left;
    pointer-events: none;
}

/* ---------- Buttons ---------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: var(--control-height);
    padding: 0.7rem 1.5rem;
    border: 2px solid var(--fill-blue);
    border-radius: 999px;
    background: var(--fill-blue);
    color: #fff;
    font: inherit;
    font-weight: 650;
    line-height: 1.2;
    white-space: nowrap; /* kein Umbruch, damit alle Buttons gleich hoch bleiben */
    text-decoration: none;
    cursor: var(--cursor-link);
    box-shadow: 0 4px 0 var(--button-shadow);
    transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.25s, border-color 0.25s;
}

.button:hover {
    text-decoration: none;
    background: var(--fill-blue-hover);
    border-color: var(--fill-blue-hover);
    box-shadow: 0 6px 0 var(--ink);
    transform: translate(var(--bx, 0), calc(var(--by, 0px) - 2px));
}

.button:active {
    box-shadow: 0 1px 0 var(--ink);
    transform: translateY(3px);
}

.button svg {
    flex: none;
    width: 1.1rem;
    height: 1.1rem;
    transition: transform 0.3s var(--ease);
}

.button:hover svg {
    transform: translateX(3px);
}

.button--ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
    box-shadow: 0 4px 0 var(--ink);
}

.button--ghost:hover {
    background: var(--yellow);
    border-color: var(--ink);
}

/* Früher eine kleinere Variante; jetzt bewusst gleich groß wie alle Buttons */
.button--small {
    box-shadow: 0 4px 0 var(--button-shadow);
}

.button--ghost.button--small {
    box-shadow: 0 4px 0 var(--ink);
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
}

/* ---------- Header ---------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid transparent;
    transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}

.site-header.is-scrolled,
.site-header:has(.primary-nav.is-open) {
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    border-bottom-color: var(--line);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 4.75rem;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: var(--ink);
    text-decoration: none;
}

/* Zeichen aus dem Logo (gleiche Form wie das Favicon) */
.logo__mark {
    width: 2.9rem;
    height: auto;
    overflow: visible;
    transform-origin: 45% 55%;
    transition: transform 0.45s var(--spring);
}

.logo__sparks {
    transform-origin: 52px 4px;
    transition: transform 0.35s var(--spring);
}

.logo:hover .logo__mark {
    transform: rotate(-6deg) scale(1.06);
}

.logo:hover .logo__sparks {
    transform: scale(1.25) translate(1px, -1px);
}

/* Schriftzug: kräftig und rund wie im Logo, das X in Blau */
.logo__text {
    font-family: var(--font-body);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    line-height: 1;
}

.logo__x {
    color: var(--blue);
}

.logo--light {
    color: var(--footer-strong);
}

/* Auf dem dunklen Footer ein helleres Blau, damit das X sichtbar bleibt */
.logo--light .logo__x {
    color: var(--footer-x);
}

.site-footer__brand .logo__mark {
    width: 3rem;
}

.site-footer__brand .logo__text {
    font-size: 1.7rem;
}

/* Sprachumschalter und Menü-Button; auf dem Desktop rechts neben der Navigation */
.site-header__tools {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    order: 3;
}

.primary-nav {
    order: 2;
    margin-left: auto;
}

.lang-switch {
    display: grid;
    place-items: center;
    min-width: var(--control-height);
    min-height: var(--control-height);
    padding: 0 0.8rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    color: var(--ink);
    font-size: var(--step--1);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.3s var(--spring);
}

/* Umschalter hell/dunkel: zeigt den Mond (dunkel einschalten) bzw. die Sonne */
.theme-toggle {
    display: grid;
    place-items: center;
    width: var(--control-height);
    height: var(--control-height);
    padding: 0;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    cursor: var(--cursor-link);
    transition: background-color 0.2s, transform 0.3s var(--spring);
}

.theme-toggle:hover {
    background: var(--yellow);
    transform: rotate(-12deg);
}

/* Mondsichel aus einem Kreis mit ausgespartem Schatten */
.theme-toggle__icon {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
    box-shadow: inset -0.32rem -0.18rem 0 0 currentColor;
    transform: rotate(-20deg);
    transition: box-shadow 0.35s var(--ease), background-color 0.35s;
}

.theme-toggle[aria-pressed="true"] .theme-toggle__icon {
    background: currentColor;
    box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px currentColor;
    width: 0.7rem;
    height: 0.7rem;
}

.lang-switch:hover {
    background: var(--yellow);
    transform: rotate(-6deg);
}

/* Hinweis auf den englischen Rechtsseiten: verbindlich ist die deutsche Fassung */
.notice-de {
    padding: 1rem 1.25rem;
    border-left: 4px solid var(--yellow);
    border-radius: var(--radius);
    background: var(--yellow-soft);
    font-size: var(--step--1);
}

.primary-nav ul {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
}

.primary-nav a:not(.button) {
    position: relative;
    display: block;
    padding: 0.5rem 0.9rem;
    color: var(--ink);
    font-weight: 550;
    text-decoration: none;
}

/* Unterstrich wächst beim Überfahren */
.primary-nav a:not(.button)::after {
    content: "";
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.3rem;
    height: 2px;
    background: var(--yellow);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s var(--ease);
}

.primary-nav a:not(.button):hover::after,
.primary-nav a[aria-current="page"]:not(.button)::after,
.primary-nav a[data-active]:not(.button)::after {
    transform: scaleX(1);
}

.primary-nav li:last-child {
    margin-left: 0.75rem;
}

.menu-toggle {
    display: none;
    align-items: center;
    gap: 0.6rem;
    min-height: var(--control-height);
    padding: 0.5rem 1.1rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    color: var(--ink);
    font-weight: 650;
    text-decoration: none;
}

.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after {
    display: block;
    width: 1.1rem;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.25s var(--ease), opacity 0.2s;
}

.menu-toggle__icon {
    position: relative;
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
    content: "";
    position: absolute;
    left: 0;
}

.menu-toggle__icon::before { top: -6px; }
.menu-toggle__icon::after { top: 6px; }

.menu-toggle[aria-expanded="true"] .menu-toggle__icon { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { transform: translateY(6px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { transform: translateY(-6px) rotate(-45deg); }

/* Schmale Handys: Logo, Hell/Dunkel, Sprache und Menü passen sonst nicht in eine Zeile,
   und der Browser zoomt die ganze Seite heraus. „Menü“ bleibt als Name für Screenreader. */
@media (max-width: 30rem) {
    .site-header__inner {
        gap: 0.75rem;
    }

    .site-header__tools {
        gap: 0.4rem;
    }

    .menu-toggle {
        justify-content: center;
        width: var(--control-height);
        padding: 0;
    }

    .menu-toggle [data-menu-label] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@media (max-width: 52rem) {
    .menu-toggle {
        display: inline-flex;
    }

    /* Ohne JavaScript führt „Menü“ zur Navigation im Footer */
    .primary-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--paper);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow);
    }

    .primary-nav.is-open {
        display: block;
        animation: drop-in 0.35s var(--ease);
    }

    .primary-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        width: min(100% - 2.5rem, var(--container));
        margin-inline: auto;
        padding: 1rem 0 1.5rem;
    }

    .primary-nav a:not(.button) {
        padding: 0.8rem 0;
        font-family: var(--font-display);
        font-size: var(--step-2);
        font-weight: 400;
    }

    .primary-nav a:not(.button)::after {
        left: 0;
        right: auto;
        width: 3rem;
    }

    .primary-nav li:last-child {
        margin: 0.75rem 0 0;
    }

    .primary-nav .button {
        width: 100%;
    }
}

@keyframes drop-in {
    from { opacity: 0; transform: translateY(-8px); }
}

/* ---------- Abschnitte ---------- */

.section {
    position: relative;
    padding-block: var(--space-section);
}

.section--alt {
    background: var(--alt-bg);
    border-block: 1px solid var(--line);
}

.section--tight {
    padding-top: clamp(2rem, 1.5rem + 2vw, 3rem);
}

.section__head {
    max-width: 46rem;
    margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 4rem);
}

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

.section__head--center .lead {
    margin-inline: auto;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1rem;
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.eyebrow::before {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--yellow);
    box-shadow: 0 0 0 3px var(--yellow-soft);
}

.lead {
    font-size: var(--step-1);
    color: var(--ink-soft);
    max-width: 42rem;
}

.grid {
    display: grid;
    gap: 1.25rem;
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }

.split {
    display: grid;
    gap: 2rem;
    align-items: start;
}

@media (min-width: 60rem) {
    .split {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
        gap: 4.5rem;
    }
}

.prose p:last-child {
    margin-bottom: 0;
}

/* ---------- Karten ---------- */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.9rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    transition: transform 0.45s var(--spring), box-shadow 0.45s var(--ease), border-color 0.3s;
}

.card:hover {
    transform: translateY(-5px) rotate(-0.4deg);
    box-shadow: var(--shadow-lift);
    border-color: var(--line-strong);
}

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

.card__icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.4rem;
    border-radius: 0.9rem;
    background: var(--yellow-soft);
    color: var(--ink);
    transform: rotate(-4deg);
    transition: transform 0.45s var(--spring);
}

.card:hover .card__icon {
    transform: rotate(6deg) scale(1.08);
}

.card__icon svg {
    width: 1.45rem;
    height: 1.45rem;
}

.card__link {
    margin-top: auto;
    font-weight: 700;
    text-decoration: none;
    color: var(--ink);
}

.card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.card:has(.card__link:focus-visible) {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
}

.card__link:focus-visible {
    outline: none;
}

/* ---------- Hero ---------- */

.hero {
    position: relative;
    padding-block: clamp(3rem, 2rem + 5vw, 6rem) var(--space-section);
}

.hero--home {
    padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

.hero__grid {
    display: grid;
    gap: 3.5rem;
    align-items: center;
}

@media (min-width: 64rem) {
    .hero__grid {
        grid-template-columns: 1fr 1fr;
    }
}

.hero h1 {
    margin-bottom: 1.5rem;
    font-size: var(--step-5);
    line-height: 0.95;
}

.hero--page h1 {
    font-size: var(--step-4);
    max-width: 54rem;
}

.hero .lead {
    margin-bottom: 2.25rem;
}

.hero--page {
    padding-bottom: clamp(3rem, 2rem + 4vw, 5rem);
}

.hero--page .lead {
    max-width: 48rem;
    margin-bottom: 2rem;
}

/* Wechselndes Wort in der Überschrift */
.rotator {
    display: inline-block;
    white-space: nowrap;
}

.rotator.is-out {
    animation: word-out 0.4s var(--ease) forwards;
}

.rotator.is-in {
    animation: word-in 0.7s var(--spring);
}

@keyframes word-out {
    to { opacity: 0; transform: translateY(-0.3em) rotate(-3deg); }
}

@keyframes word-in {
    from { opacity: 0; transform: translateY(0.4em) rotate(4deg); }
}

.hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    margin: 2.25rem 0 0;
    padding: 0;
    list-style: none;
    color: var(--ink-soft);
    font-size: var(--step--1);
}

.hero__facts strong {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
}

/* ---------- Spielwiese im Hero: Vorschau mit Branchenwahl und Stickern ---------- */

.hero__visual {
    position: relative;
    padding: 2.5rem 1rem 3rem;
}

.playground-stage {
    position: relative;
}

.playground {
    position: relative;
    z-index: 1;
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: 10px 10px 0 var(--ink);
    overflow: hidden;
    transform: rotate(-1.2deg);
}

.playground__bar {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1rem;
    border-bottom: 2px solid var(--ink);
    background: var(--paper);
}

.playground__bar i {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    border: 1.5px solid var(--ink);
}

.playground__bar i:nth-child(1) { background: var(--coral); }
.playground__bar i:nth-child(2) { background: var(--yellow); }
.playground__bar i:nth-child(3) { background: var(--mint); }

.playground__url {
    margin-left: 0.6rem;
    flex: 1;
    padding: 0.15rem 0.8rem;
    border: 1.5px solid var(--line-strong);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink-soft);
    font-size: 0.78rem;
}

/* Die Beispielseite: Farben kommen aus --pg-*, gesetzt per JavaScript */
.pg-site {
    --pg-accent: #c2410c;
    --pg-soft: #fff1e6;
    padding: 1.25rem;
    background: var(--pg-soft);
    transition: background-color 0.6s var(--ease);
}

.pg-site__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    font-size: 0.8rem;
    font-weight: 700;
}

.pg-site__brand {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--ink);
}

.pg-site__brand::before {
    content: "";
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 0.35rem;
    background: var(--pg-accent);
    transition: background-color 0.6s var(--ease);
}

.pg-site__links {
    display: flex;
    gap: 0.75rem;
    color: var(--ink-soft);
    font-weight: 550;
}

.pg-site__headline {
    margin: 0 0 0.6rem;
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem);
    line-height: 1.05;
    color: var(--ink);
}

.pg-site__text {
    margin-bottom: 1rem;
    color: var(--ink-soft);
    font-size: 0.85rem;
}

.pg-site__cta {
    display: inline-block;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    background: var(--pg-accent);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    transition: background-color 0.6s var(--ease);
}

.pg-site__tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-top: 1.25rem;
}

.pg-site__tiles span {
    height: 3.6rem;
    border-radius: 0.6rem;
    background: var(--card);
    border: 1px solid var(--line);
}

.pg-site__tiles span:first-child {
    background: color-mix(in srgb, var(--pg-accent) 20%, var(--card));
}

/* Wechsel-Animation, wenn eine andere Branche gewählt wird */
.pg-site.is-switching .pg-site__headline,
.pg-site.is-switching .pg-site__text,
.pg-site.is-switching .pg-site__brand {
    animation: pg-swap 0.55s var(--ease);
}

@keyframes pg-swap {
    0% { opacity: 1; }
    40% { opacity: 0; transform: translateY(6px); }
    100% { opacity: 1; transform: none; }
}

.playground__picker {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.75rem;
}

.playground__picker p {
    margin: 0 0.25rem 0 0;
    color: var(--ink-soft);
    font-size: var(--step--1);
    font-weight: 600;
}

.chip-button {
    min-height: var(--control-height);
    padding: 0.4rem 1.1rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: var(--step--1);
    font-weight: 650;
    cursor: var(--cursor-link);
    transition: transform 0.3s var(--spring), background-color 0.2s;
}

.chip-button:hover {
    transform: translateY(-2px) rotate(-2deg);
}

.chip-button[aria-pressed="true"] {
    background: var(--ink);
    color: var(--paper);
}

/* Sticker: schweben herein und lassen sich mit der Maus oder dem Finger verschieben */
.sticker {
    position: absolute;
    z-index: 3;
    left: var(--x);
    top: var(--y);
    touch-action: none;
    user-select: none;
    transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--r, 0deg));
}

.sticker__body {
    display: grid;
    place-items: center;
    padding: 0.6rem 1rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--bg, var(--yellow));
    color: var(--ink);
    font-weight: 800;
    font-size: 0.9rem;
    line-height: 1.15;
    text-align: center;
    white-space: nowrap;
    box-shadow: 4px 4px 0 var(--ink);
    transition: transform 0.3s var(--spring), box-shadow 0.3s var(--ease);
}

.sticker--round .sticker__body {
    width: 6.4rem;
    height: 6.4rem;
    padding: 0.5rem;
    border-radius: 50%;
    white-space: normal;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1;
}

.sticker--round small {
    display: block;
    font-family: var(--font-body);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.motion .sticker {
    cursor: grab;
}

.motion .sticker:hover .sticker__body {
    transform: scale(1.06);
}

.sticker.is-dragging {
    z-index: 10;
    cursor: grabbing;
}

.sticker.is-dragging .sticker__body {
    transform: scale(1.12) rotate(4deg);
    box-shadow: 9px 12px 0 var(--ink);
}

/* Hereinschweben von der jeweiligen Seite (--fx/--fy), danach sanftes Schaukeln */
.motion .sticker__body {
    animation:
        sticker-in 1.1s var(--spring) both,
        bob 5s ease-in-out infinite;
    animation-delay: var(--delay, 0.4s), calc(var(--delay, 0.4s) + 1.1s);
}

.motion .sticker.is-dragging .sticker__body,
.motion .sticker.was-dragged .sticker__body {
    animation: none;
}

@keyframes sticker-in {
    from { opacity: 0; transform: translate(var(--fx, 0), var(--fy, -120px)) rotate(-25deg) scale(0.5); }
}

@keyframes bob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-7px) rotate(2deg); }
}

/* Position, Farbe und Einflugrichtung der einzelnen Sticker */
/* Prozent beziehen sich auf das Vorschaufenster (.playground-stage), nicht auf Buttons und Felder darunter */
.sticker--price { --x: -5%; --y: -12%; --r: -12deg; --fx: -220px; --fy: -140px; --delay: 0.5s; --bg: var(--yellow); }
.sticker--cookies { --x: 76%; --y: -9%; --r: 7deg; --fx: 240px; --fy: -160px; --delay: 0.75s; --bg: var(--mint); }
.sticker--ki { --x: -8%; --y: 68%; --r: -5deg; --fx: -260px; --fy: 140px; --delay: 1s; --bg: var(--lilac); }
.sticker--city { --x: 78%; --y: 74%; --r: 6deg; --fx: 260px; --fy: 180px; --delay: 1.25s; --bg: var(--coral); }

/* Kennzeichnung der ausgedachten Beispiel-Betriebe in der Live-Vorschau */
.playground__note {
    margin: 0.75rem 0 0;
    color: var(--ink-soft);
    font-size: 0.8rem;
}

.sticker-hint {
    display: none;
    margin: 1rem 0 0;
    color: var(--ink-soft);
    font-size: 0.8rem;
    font-style: italic;
}

/* Der Hinweis nur dort, wo sich die Sticker auch verschieben lassen */
.motion .sticker-hint {
    display: block;
}

@media (max-width: 40rem) {
    .sticker--price { --x: -3%; --y: -14%; }
    .sticker--cookies { --x: 60%; --y: -10%; }
    .sticker--ki { --x: -3%; --y: 80%; }
    .sticker--city { --x: 56%; --y: 84%; }

    .sticker--round .sticker__body {
        width: 5.2rem;
        height: 5.2rem;
        font-size: 1.1rem;
    }
}

/* ---------- Laufband ---------- */

.marquee {
    position: relative;
    z-index: 2;
    margin-block: 1rem;
    padding-block: 1rem;
    border-block: 2px solid var(--ink);
    background: var(--yellow);
    overflow: hidden;
    transform: rotate(-1.5deg);
}

.marquee__track {
    display: flex;
    width: max-content;
    gap: 2.5rem;
    list-style: none;
}

.motion .marquee__track {
    animation: marquee 40s linear infinite;
}

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

.marquee li {
    display: flex;
    align-items: center;
    gap: 2.5rem;
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-style: italic;
    white-space: nowrap;
}

.marquee li::after {
    content: "";
    width: 0.9rem;
    height: 0.9rem;
    background: var(--ink);
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}

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

/* ---------- Bento-Raster für Leistungen ---------- */

.bento {
    display: grid;
    gap: 1.25rem;
}

@media (min-width: 56rem) {
    .bento {
        grid-template-columns: repeat(6, 1fr);
    }

    .bento > :nth-child(1) { grid-column: span 4; }
    .bento > :nth-child(2) { grid-column: span 2; }
    .bento > :nth-child(3) { grid-column: span 2; }
    .bento > :nth-child(4) { grid-column: span 2; }
    .bento > :nth-child(5) { grid-column: span 2; }
}

.bento .card {
    min-height: 15rem;
}

.card--feature {
    background: var(--fill-blue);
    border-color: var(--fill-blue);
    color: #fff;
}

.card--feature p,
.card--feature .card__link {
    color: rgb(255 255 255 / 0.88);
}

.card--feature .card__link {
    color: #fff;
}

.card--feature h3 {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 400;
}

.card--feature .card__icon {
    background: var(--yellow);
}

.card__big {
    margin: auto 0 0.5rem;
    font-family: var(--font-display);
    font-size: var(--step-4);
    line-height: 1;
}

.card__big small {
    font-family: var(--font-body);
    font-size: var(--step-0);
    font-weight: 600;
}

/* ---------- KI-Abschnitt ---------- */

.ai-flow {
    display: grid;
    gap: 1rem;
}

.ai-flow__row {
    display: grid;
    gap: 0.75rem;
    align-items: stretch;
}

@media (min-width: 40rem) {
    .ai-flow__row {
        grid-template-columns: 1fr auto 1fr;
    }
}

.ai-flow__cell {
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--card);
}

.ai-flow__cell small {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ai-flow__cell--human {
    border: 2px solid var(--ink);
    background: var(--yellow-soft);
    box-shadow: 4px 4px 0 var(--ink);
}

.ai-flow__arrow {
    display: grid;
    place-items: center;
    color: var(--blue);
}

.ai-flow__arrow svg {
    width: 1.4rem;
    height: 1.4rem;
}

@media (max-width: 39.99rem) {
    .ai-flow__arrow svg {
        transform: rotate(90deg);
    }
}

.disclosure {
    margin-top: 2rem;
    padding: 1.25rem 1.4rem;
    border-radius: var(--radius);
    border: 2px dashed var(--line-strong);
    color: var(--ink-soft);
    font-size: var(--step--1);
}

.disclosure strong {
    color: var(--ink);
}

/* ---------- Checklisten, Vorteile ---------- */

.checklist {
    list-style: none;
    display: grid;
    gap: 0.8rem;
}

.checklist li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.checklist svg {
    flex: none;
    width: 1.3rem;
    height: 1.3rem;
    margin-top: 0.15rem;
    color: var(--success);
}

.checklist strong {
    display: block;
}

.checklist small {
    color: var(--ink-soft);
    font-size: var(--step--1);
}

.checklist--large {
    gap: 1.1rem;
    font-size: var(--step-1);
}

.checklist--large svg {
    margin-top: 0.3rem;
}

.benefit {
    padding-top: 1.5rem;
    border-top: 2px solid var(--ink);
}

.benefit h3 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.benefit h3 svg {
    width: 1.4rem;
    height: 1.4rem;
    color: var(--blue);
}

.benefit p {
    color: var(--ink-soft);
    margin: 0;
}

/* ---------- Ablauf ---------- */

.steps {
    list-style: none;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    counter-reset: step;
}

.steps li {
    position: relative;
    counter-increment: step;
    padding: 1.6rem 0 0;
    border-top: 2px solid var(--ink);
}

.steps li::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    margin-bottom: 1rem;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--yellow);
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-style: italic;
    line-height: 1;
    transition: transform 0.4s var(--spring);
}

.steps li:hover::before {
    transform: rotate(-12deg) scale(1.1);
}

.steps p {
    color: var(--ink-soft);
    margin: 0;
}

.timeline {
    list-style: none;
    display: grid;
    gap: 1.25rem;
}

.timeline__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.25rem;
    padding: 1.9rem;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.timeline__number {
    display: grid;
    place-items: center;
    width: 3.2rem;
    height: 3.2rem;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--yellow);
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-style: italic;
    line-height: 1;
}

.timeline__body p {
    color: var(--ink-soft);
    max-width: 46rem;
}

.timeline__meta {
    display: grid;
    gap: 0.75rem 2rem;
    margin: 1.25rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--line-strong);
    font-size: var(--step--1);
}

@media (min-width: 48rem) {
    .timeline__meta {
        grid-template-columns: 2fr 1fr;
    }
}

.timeline__meta dt {
    color: var(--ink-soft);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.72rem;
}

.timeline__meta dd {
    margin: 0.2rem 0 0;
}

/* ---------- Preise ---------- */

.pricing {
    align-items: stretch;
}

.price-card {
    padding: 2.1rem;
}

/* Leicht schräg wie hingelegte Karten, beim Überfahren gerade */
@media (min-width: 60rem) {
    .price-card:nth-child(1) { transform: rotate(-1.2deg); }
    .price-card:nth-child(3) { transform: rotate(1.2deg); }
}

.price-card:hover {
    transform: translateY(-6px) rotate(0deg);
}

.price-card__badge {
    position: absolute;
    top: -1rem;
    right: 1.5rem;
    padding: 0.35rem 0.9rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--yellow);
    color: var(--ink);
    font-size: 0.78rem;
    font-weight: 800;
    transform: rotate(4deg);
}

.price-card__tagline {
    margin-bottom: 0.25rem;
    color: var(--blue);
    font-size: var(--step--1);
    font-weight: 700;
}

.price-card h3 {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.price-card--highlight {
    border: 2px solid var(--ink);
    box-shadow: 8px 8px 0 var(--ink);
}

.price-card--highlight:hover {
    box-shadow: 12px 14px 0 var(--ink);
}

/* Vom Paket-Finder empfohlen */
.price-card.is-recommended {
    border: 2px solid var(--blue);
    box-shadow: 8px 8px 0 var(--blue);
}

.price-card__match {
    display: none;
    align-self: flex-start;
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--fill-blue);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
}

.price-card.is-recommended .price-card__match {
    display: inline-block;
    animation: pop 0.5s var(--spring);
}

@keyframes pop {
    from { transform: scale(0.4); opacity: 0; }
}

.price-card__for {
    margin-bottom: 1.5rem;
}

.price {
    margin-bottom: 1.75rem;
    font-family: var(--font-display);
    font-size: var(--step-4);
    line-height: 1;
}

.price small {
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--ink-soft);
}

.price-card .price small,
.grid--4 .price small {
    display: block;
    margin-top: 0.5rem;
}

.grid--4 .price {
    font-size: var(--step-3);
    white-space: nowrap;
}

.price--text {
    font-size: var(--step-2);
}

.price-card .checklist {
    margin-bottom: 2rem;
}

.price-card .button {
    margin-top: auto;
}

.hosting-strip {
    display: grid;
    gap: 1.25rem 2rem;
    align-items: center;
    margin-top: 2rem;
    padding: 1.6rem 1.9rem;
    border: 2px dashed var(--ink);
    border-radius: var(--radius-lg);
    background: var(--card);
}

@media (min-width: 56rem) {
    .hosting-strip {
        grid-template-columns: auto 1fr auto;
    }
}

.hosting-strip__price {
    font-family: var(--font-display);
    font-size: var(--step-3);
    line-height: 1;
}

.hosting-strip__price small {
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--ink-soft);
}

.hosting-strip ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    list-style: none;
    color: var(--ink-soft);
    font-size: var(--step--1);
}

.hosting-strip li::before {
    content: "✓ ";
    color: var(--success);
    font-weight: 800;
}

.fineprint {
    margin-top: 1.5rem;
    color: var(--ink-soft);
    font-size: var(--step--1);
    text-align: center;
}

.fineprint--left {
    text-align: left;
}

/* ---------- Paket-Finder ---------- */

.finder {
    display: grid;
    gap: 1.5rem 3rem;
    align-items: center;
    margin-bottom: 3rem;
    padding: 1.75rem 2rem;
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg);
    background: var(--yellow-soft);
    box-shadow: 6px 6px 0 var(--ink);
}

@media (min-width: 56rem) {
    .finder {
        grid-template-columns: 1.2fr 1fr;
    }
}

.finder h3 {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 400;
}

.finder__pages {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 650;
}

.finder__pages output {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 400;
}

.finder input[type="range"],
.sky-widget input[type="range"] {
    width: 100%;
    accent-color: var(--blue);
    cursor: var(--cursor-link);
}

.finder__pages output {
    white-space: nowrap;
}

.finder__options {
    margin-inline: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-top: 1rem;
}

.finder__options label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--step--1);
    font-weight: 600;
    cursor: var(--cursor-link);
}

.finder__options input {
    width: 1.15rem;
    height: 1.15rem;
    accent-color: var(--blue);
}

.finder__result {
    margin: 0;
    font-size: var(--step-1);
}

.finder__result strong {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 400;
    color: var(--blue);
}

/* ---------- Zahlen ---------- */

.stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (min-width: 60rem) {
    .stats--wide {
        grid-template-columns: repeat(4, 1fr);
    }
}

.stat {
    padding: 1.6rem;
    border-radius: var(--radius-lg);
    background: var(--card);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.stat__value {
    display: block;
    margin-bottom: 0.35rem;
    font-family: var(--font-display);
    font-size: var(--step-4);
    line-height: 1;
    color: var(--blue);
}

.stat__label {
    color: var(--ink-soft);
    font-size: var(--step--1);
}

/* ---------- Abschluss-CTA ---------- */

.cta {
    position: relative;
    padding-block: clamp(5rem, 3rem + 8vw, 9rem);
    text-align: center;
    overflow: hidden;
}

/* Große Sonne hinter dem Abschluss */
.cta::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -14rem;
    z-index: -1;
    width: 34rem;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, var(--yellow) 0 52%, rgb(255 200 61 / 0.35) 53%, transparent 70%);
}

.cta h2 {
    font-size: var(--step-5);
    line-height: 0.95;
    max-width: 16ch;
    margin-inline: auto;
}

.cta p {
    color: var(--ink-soft);
    max-width: 38rem;
    margin-inline: auto;
}

.cta .button-row {
    justify-content: center;
    margin-top: 2.25rem;
}

/* ---------- Unterseiten ---------- */

.page-intro {
    padding-block: clamp(3rem, 2rem + 5vw, 6rem);
}

.page-intro .lead {
    margin-bottom: 2rem;
}

.page-intro--compact {
    padding-bottom: 0;
}

.breadcrumb {
    margin-bottom: 1.5rem;
    font-size: var(--step--1);
}

.breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    list-style: none;
    color: var(--ink-soft);
}

.breadcrumb li + li::before {
    content: "/";
    margin-right: 0.4rem;
    opacity: 0.4;
}

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

.breadcrumb [aria-current="page"] {
    color: var(--ink);
    font-weight: 700;
}

.h2-small {
    font-size: var(--step-3);
}

.h2-small a {
    color: inherit;
    text-decoration: none;
}

.h2-small a:hover {
    color: var(--blue);
}

.service-list {
    display: grid;
}

.service-row {
    display: grid;
    gap: 2rem;
    padding-block: clamp(2rem, 1.5rem + 2.5vw, 4rem);
    border-top: 2px solid var(--ink);
}

.service-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.service-row__intro p {
    color: var(--ink-soft);
    margin-bottom: 1.5rem;
}

@media (min-width: 60rem) {
    .service-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
        gap: 4.5rem;
    }
}

.crosslist {
    list-style: none;
    display: grid;
    gap: 1rem;
    font-size: var(--step-1);
}

.crosslist li {
    position: relative;
    padding-left: 2.4rem;
}

.crosslist li::before {
    content: "✕";
    position: absolute;
    left: 0;
    top: 0.1rem;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--coral);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
}

.tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.tags li {
    padding: 0.5rem 1.05rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--card);
    font-weight: 650;
    transition: transform 0.35s var(--spring), background-color 0.2s;
}

.tags li:nth-child(3n + 1):hover { background: var(--yellow); transform: rotate(-4deg); }
.tags li:nth-child(3n + 2):hover { background: var(--lilac); transform: rotate(3deg); }
.tags li:nth-child(3n + 3):hover { background: var(--mint); transform: rotate(-2deg); }

.address-card {
    margin-top: 1.5rem;
    padding: 1.25rem 1.5rem;
    border-left: 4px solid var(--yellow);
    border-radius: var(--radius);
    background: var(--card);
}

/* Kleine Karte auf „Über HUFNEX“: eigenes SVG, keine Kartendienste */
.place-map {
    max-width: 26rem;
    margin: 2rem 0 0;
}

.place-map__svg {
    display: block;
    width: 100%;
    height: auto;
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: 5px 5px 0 var(--ink);
    font-family: var(--font-body);
}

.place-map__area {
    fill: var(--yellow-soft);
    stroke: var(--yellow);
    stroke-width: 2;
    stroke-dasharray: 6 5;
}

.place-map__area-label {
    fill: var(--ink-soft);
    font-family: var(--font-display);
    font-size: 15px;
    font-style: italic;
}

.place-map__river {
    fill: none;
    stroke: var(--blue);
    stroke-opacity: 0.45;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.place-map__river-label {
    fill: var(--blue);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.place-map__wall {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.5;
    stroke-dasharray: 3 2.5;
}

.place-map__castle {
    fill: var(--ink);
}

.place-map__city circle:not(.place-map__hit) {
    fill: var(--ink);
}

.place-map__city text {
    fill: var(--ink);
    font-family: var(--font-display);
    font-size: 22px;
}

.place-map__pin {
    fill: var(--yellow);
    stroke: var(--on-color);
    stroke-width: 2.5;
}

.place-map__pulse {
    fill: var(--yellow);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.motion .place-map__pulse {
    animation: map-pulse 2.4s var(--ease) infinite;
}

@keyframes map-pulse {
    0% { opacity: 0.6; transform: scale(1); }
    100% { opacity: 0; transform: scale(3.2); }
}

.place-map__tag rect {
    fill: var(--yellow);
    stroke: var(--on-color);
    stroke-width: 2;
}

.place-map__tag text {
    fill: var(--on-color);
    font-size: 12px;
    font-weight: 800;
}

.place-map__legend path,
.place-map__legend text {
    fill: var(--ink-soft);
}

.place-map__legend text {
    font-size: 11px;
    font-weight: 700;
}

.place-map__legend .place-map__scale {
    fill: none;
    stroke: var(--ink-soft);
    stroke-width: 2;
}

.place-map__caption {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-top: 1rem;
    color: var(--ink-soft);
    font-size: var(--step--1);
}

.place-map__caption a {
    color: var(--ink);
    font-weight: 700;
}

/* Interaktiv (mit JavaScript): Städte und Büro antippen */
.place-map [role="button"] {
    cursor: var(--cursor-link);
    outline: none;
}

/* Größere, unsichtbare Tippfläche um jeden Punkt */
.place-map__city .place-map__hit {
    fill: transparent;
}

.place-map__city circle:not(.place-map__hit),
.place-map__pin {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 0.3s var(--spring), fill 0.2s;
}

.place-map__city:is(:hover, :focus-visible, [aria-pressed="true"]) circle:not(.place-map__hit) {
    fill: var(--blue);
    transform: scale(1.8);
}

.place-map__city:is(:hover, :focus-visible, [aria-pressed="true"]) text {
    fill: var(--blue);
}

.place-map__office:is(:hover, :focus-visible, [aria-pressed="true"]) .place-map__pin {
    transform: scale(1.3);
}

/* Tastaturfokus sichtbar (WCAG 2.4.7) */
.place-map [role="button"]:focus-visible .place-map__hit,
.place-map__office:focus-visible .place-map__pin {
    stroke: var(--blue);
    stroke-width: 2.5;
    stroke-dasharray: 4 3;
}

.place-map__route {
    fill: none;
    stroke: var(--ink);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.place-map__route.is-drawn {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.7s var(--ease);
}

/* Auto auf der Karte */
.place-map__car[hidden] {
    display: none;
}

.place-map__car-body {
    pointer-events: none;
}

.place-map__car-shell,
.place-map__car-roof {
    fill: var(--yellow);
    stroke: var(--on-color);
    stroke-width: 1.6;
    stroke-linejoin: round;
}

.place-map__car-roof {
    fill: var(--card);
}

.place-map__car-wheel {
    fill: var(--on-color);
}

.motion .place-map__car-body {
    animation: car-bump 0.35s ease-in-out infinite alternate;
}

@keyframes car-bump {
    to { transform: translateY(-0.8px); }
}

.place-map__distance[hidden] {
    display: none;
}

.place-map__distance rect {
    fill: var(--card);
    stroke: var(--ink);
    stroke-width: 2;
}

.place-map__distance text {
    fill: var(--ink);
    font-size: 12px;
    font-weight: 800;
}

.place-map__info {
    min-height: 3em;
    margin: 1rem 0 0;
    font-weight: 600;
}

/* ---------- Spielzeuge auf der Leistungsübersicht ---------- */
.toy {
    max-width: 26rem;
    margin-top: 2rem;
}

.toy__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.toy__status {
    flex-basis: 100%;
    min-height: 1.4em;
    color: var(--ink-soft);
    font-size: var(--step--1);
    font-weight: 600;
}

/* Gemeinsamer Rahmen der kleinen Bildschirme */
.toy__screen,
.toy__sheet,
.toy__app {
    height: 12.5rem;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: 4px 4px 0 var(--ink);
}

/* Websites: Desktop als Browserfenster, Tablet und Handy als Gerät mit dunklem Rahmen.
   Die Bühne ist immer 14rem hoch, damit die Buttons darunter beim Umschalten nicht springen. */
.toy__screen {
    position: relative;
    width: 100%;
    margin-top: 1.5rem;
    overflow: hidden;
    transition: width 0.55s var(--spring), height 0.55s var(--spring), margin-top 0.55s var(--spring),
        border-width 0.3s, border-radius 0.4s;
}

[data-device="tablet"] .toy__screen {
    width: 16rem;
    border-width: 7px;
    border-radius: 1.1rem;
}

[data-device="phone"] .toy__screen {
    width: 7.4rem;
    height: 14rem;
    margin-top: 0;
    border-width: 6px;
    border-radius: 1.5rem;
}

/* Im Gerät gibt es keine Fensterleiste: Punkte weg, stattdessen Kamera (Tablet) oder Notch (Handy) */
[data-device="tablet"] .toy__bar,
[data-device="phone"] .toy__bar {
    justify-content: center;
    border-bottom-color: transparent;
}

[data-device="tablet"] .toy__bar i,
[data-device="phone"] .toy__bar i {
    display: none;
}

.toy__notch {
    display: none;
    border-radius: 999px;
    background: var(--ink);
}

[data-device="tablet"] .toy__notch {
    display: block;
    width: 5px;
    height: 5px;
}

[data-device="phone"] .toy__notch {
    display: block;
    width: 2.2rem;
    height: 0.55rem;
}

.toy__home {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 0.3rem;
    width: 2.6rem;
    height: 3px;
    border-radius: 999px;
    background: var(--ink);
    transform: translateX(-50%);
}

[data-device="phone"] .toy__home {
    display: block;
}

.toy__bar {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 1.2rem;
    padding: 0 0.5rem;
    border-bottom: 2px solid var(--ink);
}

.toy__bar i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--line-strong);
}

.toy__site {
    display: grid;
    gap: 0.45rem;
    padding: 0.7rem;
}

.toy__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.25rem;
}

.toy__brand {
    width: 2.4rem;
    height: 0.55rem;
    border-radius: 999px;
    background: var(--blue);
}

.toy__links {
    display: flex;
    gap: 0.35rem;
}

.toy__links i {
    width: 1.4rem;
    height: 0.35rem;
    border-radius: 999px;
    background: var(--line-strong);
}

.toy__burger {
    display: none;
    width: 0.9rem;
    height: 0.6rem;
    border-block: 2px solid var(--ink);
}

.toy__headline {
    width: 80%;
    height: 0.8rem;
    border-radius: 999px;
    background: var(--ink);
    opacity: 0.85;
}

.toy__headline--short {
    width: 55%;
}

.toy__cta {
    width: 3.6rem;
    height: 1rem;
    border: 2px solid var(--on-color);
    border-radius: 999px;
    background: var(--yellow);
}

.toy__tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    margin-top: 0.2rem;
}

.toy__tiles span {
    height: 3rem;
    border: 1.5px solid var(--line-strong);
    border-radius: 0.5rem;
    background: var(--blue-soft);
}

[data-device="tablet"] .toy__tiles {
    grid-template-columns: repeat(2, 1fr);
}

[data-device="tablet"] .toy__tiles span:last-child {
    grid-column: 1 / -1;
    height: 1.6rem;
}

[data-device="phone"] .toy__links {
    display: none;
}

[data-device="phone"] .toy__burger {
    display: block;
}

[data-device="phone"] .toy__headline {
    width: 100%;
}

[data-device="phone"] .toy__tiles {
    grid-template-columns: 1fr;
}

[data-device="phone"] .toy__tiles span {
    height: 1.8rem;
}

/* Software: Excel geht in Rente */
.toy--excel {
    position: relative;
}

.toy__sheet {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-content: start;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.72rem;
    transition: background-color 0.3s 0.3s, border-color 0.3s 0.3s, box-shadow 0.3s 0.3s;
}

.toy__sheet span {
    overflow: hidden;
    padding: 0.45rem 0.4rem;
    border-right: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: transform 0.75s var(--ease) var(--fly-delay, 0s), opacity 0.55s var(--fly-delay, 0s);
}

.toy__sheet span:nth-child(-n + 4) {
    background: rgb(33 115 70 / 0.16);
    font-weight: 700;
}

.toy__sheet span:nth-child(8),
.toy__sheet span:nth-child(16),
.toy__sheet span:nth-child(20) {
    color: var(--error);
}

.toy__sheet span:nth-child(10),
.toy__sheet span:nth-child(15) {
    background: rgb(255 200 61 / 0.35);
}

.toy__app {
    position: absolute;
    inset: 0 0 auto;
    display: grid;
    align-content: start;
    gap: 0.45rem;
    padding: 0.7rem;
    opacity: 0;
    transform: translateY(1rem) scale(0.96);
    pointer-events: none;
    transition: opacity 0.4s, transform 0.5s var(--spring);
}

.is-retired .toy__sheet {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.is-retired .toy__sheet span {
    opacity: 0;
    transform: translate(var(--fly-x), var(--fly-y)) rotate(var(--fly-r));
}

.is-retired .toy__app {
    opacity: 1;
    transform: none;
    transition-delay: 0.45s;
}

.toy__search {
    display: flex;
    align-items: center;
    height: 1.7rem;
    padding: 0 0.7rem;
    border: 1.5px solid var(--line-strong);
    border-radius: 999px;
    color: var(--ink-soft);
    font-size: 0.75rem;
}

.toy__row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.6rem;
    border-radius: 0.6rem;
    background: var(--paper);
    font-size: 0.8rem;
}

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

.toy__pill {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    color: var(--on-color);
    font-size: 0.68rem;
    font-style: normal;
    font-weight: 800;
}

.toy__pill--open { background: var(--yellow); }
.toy__pill--done { background: var(--mint); }
.toy__pill--new { background: var(--lilac); }

/* Hosting: Server mit Herzschlag */
.toy--ping {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 1rem;
}

.toy--ping .toy__controls {
    grid-column: 1 / -1;
}

.toy__server {
    display: grid;
    gap: 0.35rem;
    padding: 0.5rem;
    border: 2px solid var(--ink);
    border-radius: 0.6rem;
    background: var(--card);
    box-shadow: 3px 3px 0 var(--ink);
}

.toy__rack {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    width: 4.4rem;
    height: 1.25rem;
    padding: 0 0.4rem;
    border: 1.5px solid var(--line-strong);
    border-radius: 0.3rem;
    background: var(--paper);
}

.toy__rack i {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--mint);
}

.toy__rack i:last-child {
    width: 1.3rem;
    height: 0.25rem;
    margin-left: auto;
    border-radius: 999px;
    background: var(--line-strong);
}

.motion .toy__rack i:first-child {
    animation: led 1.4s steps(2, jump-none) infinite;
}

.motion .toy__rack:last-child i:first-child {
    animation-delay: 0.7s;
}

.is-pinging .toy__rack i:nth-child(2) {
    background: var(--yellow);
}

.motion .is-pinging .toy__rack i:first-child {
    animation-duration: 0.3s;
}

@keyframes led {
    50% { opacity: 0.25; }
}

.toy__pulse {
    width: 100%;
    height: 4rem;
    overflow: visible;
}

.toy__pulse path {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.toy__pulse-track {
    stroke: var(--line-strong);
}

.toy__pulse-trace {
    stroke: var(--success);
}

.motion .toy__pulse-trace {
    stroke-dasharray: 28 72;
    animation: pulse-trace 2.6s linear infinite;
}

.motion .is-pinging .toy__pulse-trace {
    animation-duration: 0.7s;
}

@keyframes pulse-trace {
    from { stroke-dashoffset: 100; }
    to { stroke-dashoffset: 0; }
}

/* ---------- Abschnitt „Ausprobieren“ auf den Leistungsseiten ---------- */
.section--lab {
    border-block: 2px dashed var(--yellow);
    background: var(--yellow-soft);
}

.lab-section {
    display: grid;
    gap: 2.5rem;
    align-items: center;
}

@media (min-width: 60rem) {
    .lab-section {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
        gap: 4rem;
    }
}

.lab__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.lab__caption {
    flex-basis: 100%;
    min-height: 1.5em;
    margin: 0;
    color: var(--ink-soft);
    font-weight: 600;
}

/* Websites: Bühne mit Rahmen, der vom Browserfenster zum Tablet und Handy wird */
.lab__stage {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 25rem;
}

.lab__frame {
    position: relative;
    width: 100%;
    height: 20rem;
    overflow: hidden;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: #fffaf2;
    box-shadow: 6px 6px 0 var(--ink);
}

[data-device="tablet"] .lab__frame {
    height: 22.5rem;
    border-width: 9px;
    border-radius: 1.4rem;
}

[data-device="phone"] .lab__frame {
    height: 25rem;
    border-width: 8px;
    border-radius: 2rem;
}

.lab__chrome {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    height: 1.6rem;
    padding: 0 0.7rem;
    border-bottom: 2px solid #1b1a17;
    background: #fff;
}

.lab__chrome i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgb(27 26 23 / 0.2);
}

.lab__notch {
    display: none;
    border-radius: 999px;
    background: var(--ink);
}

[data-device="tablet"] .lab__chrome,
[data-device="phone"] .lab__chrome {
    justify-content: center;
    border-bottom-color: transparent;
    background: #fffaf2;
}

[data-device="tablet"] .lab__chrome i,
[data-device="phone"] .lab__chrome i {
    display: none;
}

[data-device="tablet"] .lab__notch {
    display: block;
    width: 6px;
    height: 6px;
}

[data-device="phone"] .lab__notch {
    display: block;
    width: 3.4rem;
    height: 0.8rem;
}

.lab__home {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 0.4rem;
    width: 4rem;
    height: 4px;
    border-radius: 999px;
    background: #1b1a17;
    transform: translateX(-50%);
}

[data-device="phone"] .lab__home {
    display: block;
}

/* Die Mini-Website rendert in voller Breite und wird maßstäblich verkleinert (app.js) */
.lab__viewport {
    container-type: inline-size;
    overflow: hidden;
    transform-origin: 0 0;
}

.lab__range {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 4.5rem;
    align-items: center;
    gap: 0.9rem;
    flex-basis: 100%;
    font-weight: 700;
}

.lab__range input {
    width: 100%;
    accent-color: var(--blue);
}

.lab__range output {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.lab__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.lab__buttons small {
    margin-left: 0.25rem;
    opacity: 0.65;
    font-weight: 600;
}

/* Die Website eines ausgedachten Kunden: immer hell, auch im Dark Mode */
.mini-site {
    display: grid;
    gap: 22px;
    padding: 18px 24px 30px;
    background: #fffaf2;
    color: #1b1a17;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.45;
}

.mini-site p {
    margin: 0;
}

.mini-site__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.mini-site__nav strong {
    font-size: 16px;
    font-weight: 800;
}

.mini-site__links {
    display: flex;
    gap: 18px;
    font-size: 14px;
}

.mini-site__burger {
    display: none;
    width: 22px;
    height: 14px;
    border-block: 3px solid #1b1a17;
}

.mini-site__hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    align-items: center;
    gap: 28px;
}

.mini-site__hero > div:first-child {
    display: grid;
    gap: 12px;
    justify-items: start;
}

.mini-site__headline {
    font-family: var(--font-display);
    font-size: 46px;
    line-height: 1;
}

.mini-site__hero p:not(.mini-site__headline) {
    color: #4d4a43;
}

.mini-site__cta {
    padding: 9px 18px;
    border-radius: 999px;
    background: #a94f2a;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.mini-site__picture {
    position: relative;
    aspect-ratio: 16 / 8;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(160deg, #ffe2a8, #f0a35e);
}

.mini-site__picture span {
    position: absolute;
    right: 18%;
    bottom: -22%;
    width: 70%;
    aspect-ratio: 2 / 1;
    border-radius: 50% 50% 0 0;
    background: #c9813f;
    box-shadow: inset 0 10px 0 #dd9a52;
}

.mini-site__tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.mini-site__tiles div {
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1.5px solid rgb(27 26 23 / 0.15);
    border-radius: 12px;
    background: #fff;
}

.mini-site__tiles span {
    color: #4d4a43;
    font-size: 13px;
}

.mini-site__footer {
    padding-top: 12px;
    border-top: 1.5px solid rgb(27 26 23 / 0.15);
    color: #4d4a43;
    font-size: 13px;
}

@container (max-width: 1023px) {
    .mini-site__hero {
        grid-template-columns: 1fr;
    }

    .mini-site__picture {
        aspect-ratio: 16 / 6;
    }

    .mini-site__tiles {
        grid-template-columns: repeat(2, 1fr);
    }

    .mini-site__tiles div:last-child {
        grid-column: 1 / -1;
    }
}

@container (max-width: 599px) {
    .mini-site {
        padding-inline: 18px;
    }

    .mini-site__links {
        display: none;
    }

    .mini-site__burger {
        display: block;
    }

    .mini-site__headline {
        font-size: 36px;
    }

    .mini-site__picture {
        order: -1;
        aspect-ratio: 16 / 9;
    }

    .mini-site__tiles {
        grid-template-columns: 1fr;
    }

    .mini-site__tiles div:last-child {
        grid-column: auto;
    }
}

/* Software: Fenster mit Excel-Liste, danach die App */
.lab__window {
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: 6px 6px 0 var(--ink);
}

.lab__titlebar {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 2.2rem;
    padding: 0 0.9rem;
    border-bottom: 2px solid var(--ink);
    font-size: 0.8rem;
    font-weight: 700;
}

.lab__titlebar i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line-strong);
}

.lab__titlebar span {
    margin-left: 0.6rem;
}

/* Tabelle und App liegen übereinander im selben Rasterfeld, die höhere bestimmt die Höhe */
.lab__body {
    display: grid;
    min-height: 20rem;
}

.lab__sheet,
.lab__app {
    grid-area: 1 / 1;
}

.lab__sheet {
    display: grid;
    grid-template-columns: 1.1fr 1.3fr 0.9fr 1fr 1fr;
    align-content: start;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.8rem;
}

.lab__sheet span {
    overflow: hidden;
    min-height: 2.3rem;
    padding: 0.6rem 0.5rem;
    border-right: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
    white-space: nowrap;
    text-overflow: ellipsis;
    transition: transform 0.8s var(--ease) var(--fly-delay, 0s), opacity 0.6s var(--fly-delay, 0s);
}

.lab__sheet span:nth-child(-n + 5) {
    background: rgb(33 115 70 / 0.16);
    font-weight: 700;
}

.lab__sheet span:nth-child(10),
.lab__sheet span:nth-child(20),
.lab__sheet span:nth-child(25),
.lab__sheet span:nth-child(35) {
    color: var(--error);
}

.lab__sheet span:nth-child(13),
.lab__sheet span:nth-child(17),
.lab__sheet span:nth-child(29) {
    background: rgb(255 200 61 / 0.35);
}

.is-retired .lab__sheet span {
    opacity: 0;
    transform: translate(var(--fly-x), var(--fly-y)) rotate(var(--fly-r));
}

.lab__app {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    opacity: 0;
    transform: translateY(1rem) scale(0.97);
    pointer-events: none;
    transition: opacity 0.4s, transform 0.5s var(--spring);
}

.is-retired .lab__app {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition-delay: 0.5s;
}

.lab__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.lab__toolbar input {
    flex: 1 1 9rem;
    min-width: 0;
    height: var(--control-height);
    padding: 0 1rem;
    border: 2px solid var(--line-strong);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
}

.lab__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.lab__filters button {
    min-height: var(--control-height);
    padding: 0 0.95rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: var(--step--1);
    font-weight: 700;
    cursor: var(--cursor-link);
}

.lab__filters button[aria-pressed="true"] {
    background: var(--ink);
    color: var(--paper);
}

.lab__list {
    display: grid;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lab__list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.7rem;
    background: var(--paper);
    font-size: 0.9rem;
}

.lab__list li[hidden] {
    display: none;
}

.lab__list li span {
    color: var(--ink-soft);
}

.lab__list li[data-state="done"] strong,
.lab__list li[data-state="done"] span:not(.lab__date) {
    text-decoration: line-through;
    opacity: 0.6;
}

.lab__state {
    min-width: 5.6rem;
    padding: 0.3rem 0.7rem;
    border: 0;
    border-radius: 999px;
    color: var(--on-color);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: var(--cursor-link);
}

[data-state="open"] .lab__state { background: var(--yellow); }
[data-state="done"] .lab__state { background: var(--mint); }
[data-state="new"] .lab__state { background: var(--lilac); }

.is-changed .lab__state {
    animation: lab-pop 0.4s var(--spring);
}

@keyframes lab-pop {
    40% { transform: scale(1.18) rotate(-4deg); }
}

.lab__empty {
    margin: 0;
    color: var(--ink-soft);
}

.lab__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.25rem 1rem;
    margin: auto 0 0;
    color: var(--ink-soft);
    font-size: 0.78rem;
}

.lab__footer span:first-child {
    color: var(--ink);
    font-weight: 700;
}

@media (max-width: 40rem) {
    .lab__list li {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.1rem 0.75rem;
    }

    .lab__list li span:not(.lab__date) {
        grid-row: 2;
        font-size: 0.8rem;
    }

    .lab__date {
        display: none;
    }

    .lab__state {
        grid-row: 1 / span 2;
        grid-column: 2;
    }
}

/* Hosting: Live-Werte dieser Website */
.lab--status {
    padding: 1.25rem;
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: 6px 6px 0 var(--ink);
}

.lab__statusbar {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 0.9rem;
    padding-bottom: 1rem;
    border-bottom: 2px dashed var(--line-strong);
}

.lab__server {
    display: grid;
    gap: 4px;
    padding: 6px;
    border: 2px solid var(--ink);
    border-radius: 0.5rem;
    background: var(--paper);
}

.lab__server i {
    position: relative;
    display: block;
    width: 2.8rem;
    height: 0.75rem;
    border-radius: 0.2rem;
    background: var(--line);
}

.lab__server i::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 5px;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: var(--mint);
}

.motion .lab__server i::after {
    animation: led 1.4s steps(2, jump-none) infinite;
}

.motion .lab__server i:last-child::after {
    animation-delay: 0.7s;
}

.motion .is-pinging .lab__server i::after {
    animation-duration: 0.3s;
}

.is-offline .lab__server i::after {
    background: var(--error);
}

.lab__online {
    color: var(--success);
    font-weight: 800;
}

.is-offline .lab__online {
    color: var(--error);
}

.lab__pulse {
    width: 100%;
    height: 2.5rem;
    overflow: visible;
}

.lab__pulse path {
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.lab__tiles {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}

@media (min-width: 40rem) {
    .lab__tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lab__tile--ping {
        grid-row: span 3;
    }
}

.lab__tile {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.1rem;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--paper);
}

.lab__tile h3 {
    margin: 0 0 0.35rem;
    color: var(--ink-soft);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.lab__value {
    margin: 0;
    font-family: var(--font-display);
    font-size: 2.4rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.lab__note {
    margin: 0.4rem 0 0;
    color: var(--ink-soft);
    font-size: 0.8rem;
}

.lab__tile.is-secure .lab__value {
    color: var(--success);
}

.lab__tile[data-lab-tls]:not(.is-secure) .lab__value {
    color: var(--error);
}

.lab__bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 5rem;
    margin-top: auto;
    padding-top: 1rem;
}

.lab__bars span {
    flex: 1;
    max-width: 1.2rem;
    height: var(--h);
    border-radius: 4px 4px 0 0;
    background: var(--blue);
    opacity: 0.55;
}

.lab__bars span:last-child {
    background: var(--success);
    opacity: 1;
}

.lab__tile--ping .chip-button {
    align-self: flex-start;
    margin-top: 1rem;
}

/* ---------- Kontaktseite: kleine Extras ---------- */

/* Gerade im Büro? */
.presence {
    margin: 0 0 1.25rem;
    padding: 0.9rem 1rem;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--paper);
}

.presence p {
    margin: 0;
}

.presence__status {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-weight: 700;
}

.presence__lamp {
    position: relative;
    flex: none;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--ink-soft);
    transform: translateY(0.05rem);
}

[data-state="open"] .presence__lamp {
    background: var(--success);
}

[data-state="later"] .presence__lamp {
    background: var(--yellow);
}

.motion [data-state="open"] .presence__lamp::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--success);
    animation: map-pulse 2.2s var(--ease) infinite;
}

.presence__clock {
    margin-top: 0.4rem !important;
    font-size: var(--step--1);
}

.presence__note {
    margin-top: 0.25rem !important;
    color: var(--ink-soft);
    font-size: 0.72rem;
}

/* Kopieren-Buttons */
.contact-list__row {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
}

.copy-button {
    display: grid;
    flex: none;
    place-items: center;
    width: var(--control-height);
    height: var(--control-height);
    padding: 0;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: transparent;
    color: var(--ink);
    cursor: var(--cursor-link);
    transition: background-color 0.2s, color 0.2s, transform 0.3s var(--spring);
}

.copy-button:hover {
    background: var(--yellow);
    color: var(--on-color);
    transform: rotate(-8deg);
}

.copy-button svg {
    width: 1.15rem;
    height: 1.15rem;
}

.copy-bubble {
    padding: 0.2rem 0.65rem;
    border: 2px solid var(--on-color);
    border-radius: 999px;
    background: var(--yellow);
    color: var(--on-color);
    font-size: 0.75rem;
    font-weight: 800;
    transform: rotate(-4deg);
    animation: drop-in 0.3s var(--spring);
}

/* Budget-Tipp */
.budget-tip {
    margin-top: 0.6rem;
    padding: 0.55rem 0.8rem;
    border-left: 3px solid var(--blue);
    border-radius: 0.5rem;
    background: var(--blue-soft);
    color: var(--ink);
    font-weight: 600;
    animation: drop-in 0.3s var(--spring);
}

/* Absende-Zeile mit Briefmarke */
.form__send {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem 2rem;
}

.stamp {
    --progress: 0;
    display: grid;
    grid-template-columns: 5rem auto;
    align-items: center;
    gap: 1.75rem;
}

/* Briefmarke mit gezacktem Rand: Löcher in Seitenfarbe im Randstreifen */
.stamp__paper {
    position: relative;
    grid-area: 1 / 1;
    width: 5rem;
    height: 6rem;
    padding: 5px;
    background:
        linear-gradient(var(--card), var(--card)) content-box,
        radial-gradient(circle, var(--paper) 2.4px, transparent 2.9px) -4px -4px / 8px 8px,
        var(--card);
    filter: drop-shadow(3px 3px 0 var(--ink));
    transform: rotate(-4deg);
}

.stamp__fill {
    position: absolute;
    inset: 5px;
    background: linear-gradient(160deg, var(--yellow-soft), var(--yellow));
    clip-path: inset(calc((1 - var(--progress)) * 100%) 0 0 0);
    transition: clip-path 0.5s var(--spring);
}

.stamp__mark {
    position: absolute;
    top: 18%;
    left: 50%;
    width: 58%;
    overflow: visible;
    opacity: calc(0.3 + var(--progress) * 0.7);
    filter: grayscale(calc(1 - var(--progress)));
    transform: translateX(-50%) rotate(calc((1 - var(--progress)) * -20deg));
    transition: opacity 0.4s, filter 0.4s, transform 0.5s var(--spring);
}

.stamp__mark rect {
    fill: #fbd98c;
}

.stamp__mark .stamp__mark-front {
    fill: #2550e2;
}

.stamp__mark path {
    stroke: #fff;
}

.stamp__label {
    position: absolute;
    right: 0;
    bottom: 10px;
    left: 0;
    color: var(--on-color);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
}

/* Poststempel: erscheint, wenn alle Pflichtfelder ausgefüllt sind */
.stamp__postmark {
    position: relative;
    display: grid;
    grid-area: 1 / 1;
    align-self: start;
    justify-self: end;
    place-content: center;
    width: 4.4rem;
    height: 4.4rem;
    margin: -0.9rem -2.2rem 0 0;
    border: 2px solid var(--blue);
    border-radius: 50%;
    color: var(--blue);
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-align: center;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    transform: rotate(-16deg) scale(1.9);
}

.stamp__postmark::before {
    content: "";
    position: absolute;
    inset: 4px;
    border: 1px dashed currentColor;
    border-radius: 50%;
}

.is-stamped .stamp__postmark {
    opacity: 0.9;
    transform: rotate(-16deg) scale(1);
}

.motion .is-stamped .stamp__postmark {
    animation: stamp-in 0.45s cubic-bezier(0.5, 0, 0.75, 0) both;
}

@keyframes stamp-in {
    0% { opacity: 0; transform: rotate(-16deg) scale(1.9); }
    100% { opacity: 0.9; transform: rotate(-16deg) scale(1); }
}

.stamp__ready {
    margin: 0;
    color: var(--success);
    font-weight: 800;
    opacity: 0;
    transform: translateX(-0.5rem) rotate(-3deg);
    transition: opacity 0.3s 0.3s, transform 0.4s var(--spring) 0.3s;
}

.is-stamped .stamp__ready {
    opacity: 1;
    transform: rotate(-3deg);
}

/* Danke-Seite: Flieger landet neben dem Haken */
.thanks__landing {
    position: relative;
    display: inline-block;
}

.thanks__plane {
    position: absolute;
    top: -0.6rem;
    left: calc(100% + 0.5rem);
    width: 2.6rem;
    height: 2.6rem;
    transform: rotate(12deg);
}

.thanks__plane svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.motion .thanks__plane {
    animation: plane-land 1.5s cubic-bezier(0.2, 0.7, 0.3, 1) 0.2s both;
}

@keyframes plane-land {
    0% { opacity: 0; transform: translate(-45vw, -35vh) rotate(-30deg) scale(0.6); }
    15% { opacity: 1; }
    70% { transform: translate(0.6rem, -0.5rem) rotate(4deg) scale(1.05); }
    100% { transform: rotate(12deg); }
}

.thanks__when {
    font-weight: 700;
}

/* ---------- Ablauf & Preise: kleine Extras ---------- */

/* Ablauf: Spur mit Papierflieger, der beim Scrollen mitfliegt */
.timeline-wrap {
    --progress: 0;
    position: relative;
}

.timeline-wrap .timeline {
    padding-left: 3.4rem;
}

/* Höhe und Lage setzt app.js: von der Mitte der Nummer 01 bis zur Mitte der Nummer 04 */
.timeline__track {
    position: absolute;
    top: 1.6rem;
    height: calc(100% - 3.2rem);
    left: 1.1rem;
    width: 4px;
    border-radius: 4px;
    background: repeating-linear-gradient(to bottom, var(--line-strong) 0 8px, transparent 8px 14px);
}

.timeline__progress {
    position: absolute;
    inset: 0 0 auto;
    height: calc(var(--progress) * 100%);
    border-radius: 4px;
    background: var(--blue);
}

.timeline__plane {
    position: absolute;
    top: calc(var(--progress) * 100%);
    left: 50%;
    width: 2.2rem;
    height: 2.2rem;
    transform: translate(-50%, -50%) rotate(135deg);
}

.timeline__plane svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.timeline-wrap .timeline__number {
    position: relative;
    transition: background-color 0.3s, color 0.3s, transform 0.45s var(--spring);
}

.timeline-wrap .timeline__item {
    position: relative;
}

.timeline__plane {
    transition: opacity 0.2s;
}

/* Gelandet: der Flieger auf der Spur ist weg, die 04 wird zum Haken */
.is-landed .timeline__plane {
    opacity: 0;
}

.timeline__flyer {
    position: fixed;
    z-index: 60;
    pointer-events: none;
    transform: rotate(135deg);
}

.timeline-wrap .timeline__item.is-live .timeline__number {
    background: var(--mint);
    color: transparent;
    transform: rotate(-6deg) scale(1.12);
}

.motion .timeline-wrap .timeline__item.is-live .timeline__number {
    animation: number-flip 0.6s var(--spring);
}

/* Haken aus zwei Strichen über der Nummer */
.timeline-wrap .timeline__item.is-live .timeline__number::after {
    content: "";
    position: absolute;
    top: 42%;
    left: 50%;
    width: 0.65rem;
    height: 1.15rem;
    border-right: 3px solid var(--on-color);
    border-bottom: 3px solid var(--on-color);
    transform: translate(-50%, -50%) rotate(45deg);
}

@keyframes number-flip {
    0% { transform: rotate(-6deg) scale(1) rotateY(0); }
    50% { transform: rotate(-6deg) scale(1.25) rotateY(90deg); }
    100% { transform: rotate(-6deg) scale(1.12) rotateY(0); }
}

/* Sticker „Online!“ neben der 04 */
.timeline__live {
    position: absolute;
    top: -0.9rem;
    left: 3.6rem;
    padding: 0.3rem 0.8rem;
    border: 2px solid var(--on-color);
    border-radius: 999px;
    background: var(--yellow);
    box-shadow: 3px 3px 0 var(--on-color);
    color: var(--on-color);
    font-size: 0.85rem;
    font-weight: 800;
    transform: rotate(-8deg);
    pointer-events: none;
}

.motion .timeline__live {
    animation: live-pop 0.5s var(--spring) both;
}

@keyframes live-pop {
    from { opacity: 0; transform: rotate(-30deg) scale(0.3); }
    to { opacity: 1; transform: rotate(-8deg) scale(1); }
}

/* Noch nicht erreichte Schritte: Nummer blass, erreichte bekommen ihr Gelb */
.timeline-wrap .timeline__item:not(.is-reached) .timeline__number {
    background: var(--card);
    color: var(--ink-soft);
}

.timeline-wrap .timeline__item.is-reached .timeline__number {
    transform: rotate(-6deg);
}

@media (max-width: 40rem) {
    .timeline-wrap .timeline {
        padding-left: 2.2rem;
    }

    .timeline__track {
        left: 0.55rem;
    }

    .timeline__plane {
        width: 1.7rem;
        height: 1.7rem;
    }
}

/* Zwischenüberschriften der Rechner in der Überschriften-Schrift (h3 wäre sonst Figtree) */
.planner__head h3,
.compare__head h3 {
    font-family: var(--font-display);
    font-weight: 400;
    letter-spacing: -0.01em;
}

/* Zeitplan-Rechner */
.planner {
    margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
    padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: 6px 6px 0 var(--ink);
}

.planner__controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    margin: 1.25rem 0 2rem;
}

.planner__packages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.planner__date {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-weight: 700;
}

.planner__date input {
    height: var(--control-height);
    padding: 0 1rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
}

.planner__strip {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.planner__strip li {
    display: grid;
    flex: var(--share, 1) 1 0;
    align-content: start;
    gap: 0.35rem;
    min-width: 6.5rem;
    transition: flex-grow 0.5s var(--spring);
}

.planner__bar {
    height: 0.95rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
}

.planner__strip li:nth-child(1) .planner__bar { background: var(--lilac); }
.planner__strip li:nth-child(2) .planner__bar { background: var(--yellow); }
.planner__strip li:nth-child(3) .planner__bar { background: var(--fill-blue); }
.planner__strip li:nth-child(4) .planner__bar { background: var(--mint); }

.planner__strip strong {
    font-size: var(--step--1);
}

.planner__dates {
    color: var(--ink-soft);
    font-size: 0.8rem;
}

.planner__result {
    margin: 1.75rem 0 0.4rem;
    font-family: var(--font-display);
    font-size: var(--step-2);
    line-height: 1.15;
}

.planner__note {
    max-width: 46rem;
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.8rem;
}

@media (max-width: 40rem) {
    .planner__strip {
        flex-direction: column;
        gap: 0.9rem;
    }

    .planner__strip li {
        min-width: 0;
    }
}

/* Netto/Brutto-Schalter */
.vat-switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.6rem 1rem;
    margin-top: 1.5rem;
    font-weight: 700;
}

.vat-switch__buttons {
    display: inline-flex;
    height: var(--control-height);
    padding: 4px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--card);
}

.vat-switch__buttons button {
    padding: 0 1.15rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-weight: 700;
    cursor: var(--cursor-link);
    transition: background-color 0.2s, color 0.2s;
}

.vat-switch__buttons button[aria-pressed="true"] {
    background: var(--ink);
    color: var(--paper);
}

.vat-switch__note {
    flex-basis: 100%;
    margin: 0;
    color: var(--ink-soft);
    font-size: var(--step--1);
    font-weight: 600;
    text-align: center;
}

/* Festpreis-Stempel auf den Paketkarten */
.fixed-stamp {
    position: absolute;
    top: 4.6rem;
    right: 1.2rem;
    padding: 0.3rem 0.65rem;
    border: 2.5px solid var(--coral);
    border-radius: 0.4rem;
    outline: 1.5px solid var(--coral);
    outline-offset: 2px;
    color: var(--coral);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
    transform: rotate(-12deg);
}

.is-stamped .fixed-stamp {
    opacity: 0.85;
    animation: fixed-stamp 0.45s cubic-bezier(0.5, 0, 0.75, 0) var(--delay, 0s) both;
}

:root:not(.motion) .is-stamped .fixed-stamp {
    animation: none;
}

@keyframes fixed-stamp {
    from { opacity: 0; transform: rotate(-12deg) scale(2.4); }
    to { opacity: 0.85; transform: rotate(-12deg) scale(1); }
}

/* Paketvergleich */
.compare {
    margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}

.compare__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.compare__head h3 {
    margin: 0;
}

.compare__scroll {
    overflow-x: auto;
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: 6px 6px 0 var(--ink);
}

.compare__table {
    width: 100%;
    min-width: 40rem;
    border-collapse: collapse;
    font-size: var(--step--1);
}

.compare__table th,
.compare__table td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
    transition: background-color 0.15s;
}

.compare__table thead th {
    border-bottom: 2px solid var(--ink);
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 400;
}

.compare__table thead th:first-child {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

.compare__table tbody th {
    font-weight: 700;
}

/* Erste Spalte bleibt beim seitlichen Scrollen stehen */
.compare__table th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--card);
}

.compare__table td svg {
    width: 1.3rem;
    height: 1.3rem;
    color: var(--success);
    vertical-align: middle;
}

.compare__table td > span[aria-hidden] {
    color: var(--ink-soft);
}

.compare__table .is-highlight {
    background: var(--yellow-soft);
}

.compare__table tbody tr:hover th,
.compare__table tbody tr:hover td {
    background: var(--blue-soft);
}

.compare__table tbody tr:last-child th,
.compare__table tbody tr:last-child td {
    border-bottom: 0;
}

.compare__price td {
    font-family: var(--font-display);
    font-size: 1.4rem;
}

.only-diff tr[data-same] {
    display: none;
}

/* Gesamtkosten-Rechner */
.costs {
    display: grid;
    gap: 2.5rem;
    margin-top: clamp(3rem, 2rem + 3vw, 5rem);
    padding-top: clamp(2.5rem, 2rem + 2vw, 4rem);
    border-top: 2px dashed var(--line-strong);
}

@media (min-width: 60rem) {
    .costs {
        grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.6fr);
        align-items: center;
        gap: 4rem;
    }
}

.costs__card {
    display: grid;
    gap: 1.75rem;
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: 6px 6px 0 var(--ink);
}

@media (min-width: 72rem) {
    .costs__card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 2.5rem;
    }
}

.costs__controls {
    display: grid;
    align-content: start;
    gap: 1.1rem;
}

.costs__group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.costs__label {
    flex-basis: 100%;
    color: var(--ink-soft);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.costs__group small {
    margin-left: 0.25rem;
    opacity: 0.7;
}

.chip-button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.costs__range {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 4.5rem;
    align-items: center;
    gap: 0.8rem;
    font-weight: 700;
}

.costs__range input {
    width: 100%;
    accent-color: var(--blue);
}

.costs__range output {
    text-align: right;
}

.costs__total {
    display: grid;
    margin: 0;
}

.costs__total span {
    color: var(--ink-soft);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.costs__total strong {
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 2rem + 2vw, 3.4rem);
    font-weight: 400;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.costs__split {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.2rem;
    margin: 0.6rem 0 1.25rem;
    color: var(--ink-soft);
    font-size: var(--step--1);
}

.costs__split strong {
    color: var(--ink);
}

.costs__chart {
    display: flex;
    align-items: flex-end;
    gap: 0.6rem;
    height: 11rem;
    border-bottom: 2px solid var(--ink);
}

.costs__bar {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    height: 100%;
}

.costs__bar b {
    order: -1;
    font-size: 0.7rem;
    white-space: nowrap;
}

.costs__stack {
    display: flex;
    flex-direction: column-reverse;
    width: 100%;
    max-width: 3rem;
    height: calc(100% - 2.6rem);
}

.costs__stack i {
    display: block;
    width: 100%;
    border: 2px solid var(--ink);
    transition: height 0.5s var(--spring);
}

.costs__once {
    height: var(--once);
    border-radius: 0 0 0.3rem 0.3rem;
    background: var(--yellow);
}

.costs__running {
    height: var(--running);
    border-radius: 0.3rem 0.3rem 0 0;
    border-bottom: 0 !important;
    background: var(--fill-blue);
}

.costs__bar small {
    margin-bottom: -1.6rem;
    color: var(--ink-soft);
    font-size: 0.7rem;
    font-weight: 700;
}

.costs__chart {
    margin-bottom: 1.6rem;
}

/* ---------- Über HUFNEX: kleine Extras ---------- */

/* Vorher/nachher: KI-Entwurf gegen überarbeitete Fassung */
.draft {
    min-width: 0;
    margin: 2rem 0 0;
}

.draft__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.draft__frame {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.draft__frame[hidden] {
    display: none;
}

.draft__layer {
    min-width: 0;   /* sonst drücken lange Code-Zeilen die Box über den Bildschirmrand */
    padding: 1.25rem 1.4rem;
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg);
    background: var(--card);
}

.draft__layer--before {
    border-style: dashed;
}

/* Ohne JavaScript: erst der Entwurf, dann die Überarbeitung */
.draft:not(.is-live) .draft__layer--before {
    order: -1;
}

.draft__tag {
    display: inline-block;
    margin-bottom: 0.6rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    color: var(--on-color);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.draft__layer--before .draft__tag {
    background: var(--lilac);
}

.draft__layer--after .draft__tag {
    background: var(--mint);
}

.draft__layer p {
    margin: 0;
    color: var(--ink);
    line-height: 1.55;
}

.draft__layer mark {
    background: none;
    color: inherit;
    text-decoration: underline wavy var(--coral) 2px;
    text-underline-offset: 4px;
}

.draft__layer code {
    display: block;
    overflow-x: auto;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    white-space: pre;
}

/* Am Handy umbrechen statt seitlich scrollen, eingerückt bleibt eingerückt */
@media (max-width: 40rem) {
    .draft__layer {
        padding-inline: 1.1rem;
    }

    .draft__layer code {
        font-size: 0.78rem;
        white-space: pre-wrap;
        overflow-wrap: anywhere;
    }
}

/* Mit JavaScript liegen beide Fassungen übereinander. --p (0 bis 1) kommt vom Regler:
   bis zur Hälfte werden die Floskeln durchgestrichen, danach blendet die fertige Fassung über. */
.draft.is-live .draft__frame {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.draft.is-live .draft__frame[hidden] {
    display: none;
}

.draft.is-live .draft__layer {
    grid-area: 1 / 1;
    box-shadow: 6px 6px 0 var(--ink);
}

.draft.is-live .draft__layer--before {
    opacity: clamp(0, (0.68 - var(--p, 0)) * 6, 1);
    transform: rotate(calc(var(--p, 0) * -3deg));
}

.draft.is-live .draft__layer--after {
    opacity: clamp(0, (var(--p, 0) - 0.5) * 6, 1);
    transform: rotate(calc((1 - var(--p, 0)) * 2deg)) translateY(calc((1 - var(--p, 0)) * 0.6rem));
}

.draft.is-live .draft__layer mark {
    background-image: linear-gradient(var(--coral), var(--coral));
    background-position: 0 58%;
    background-repeat: no-repeat;
    background-size: calc(min(1, var(--p, 0) * 2.2) * 100%) 2px;
}

.draft__control {
    margin-top: 1.1rem;
}

.draft__control input {
    width: 100%;
    accent-color: var(--blue);
}

.draft__ends {
    display: flex;
    justify-content: space-between;
    color: var(--ink-soft);
    font-size: 0.75rem;
    font-weight: 700;
}

.draft__hint {
    margin-top: 0.5rem;
    color: var(--ink-soft);
    font-size: 0.8rem;
}

/* Werte-Karten zum Umdrehen */
.flip-card {
    display: grid;
    gap: 0.75rem;
    perspective: 1400px;
}

.flip-card.is-live {
    gap: 0;
}

.flip-card.is-live .flip-card__face {
    grid-area: 1 / 1;
    backface-visibility: hidden;
    transition: transform 0.7s var(--spring), box-shadow 0.3s, visibility 0s 0.2s;
}

/* Zusätzlich zu backface-visibility: die abgewandte Seite zur Hälfte der Drehung ausblenden,
   manche Browser zeigen sie sonst trotzdem an */
.flip-card.is-live .flip-card__back,
.flip-card.is-flipped .flip-card__front {
    visibility: hidden;
}

.flip-card.is-flipped .flip-card__back {
    visibility: visible;
}

/* Hover der Karte darf das Umdrehen nicht überschreiben */
.flip-card.is-live .flip-card__front,
.flip-card.is-live .flip-card__front:hover {
    transform: rotateY(0);
}

.flip-card.is-live .flip-card__back,
.flip-card.is-live .flip-card__back:hover {
    justify-content: center;
    background: var(--yellow-soft);
    transform: rotateY(180deg);
}

.flip-card.is-flipped .flip-card__front,
.flip-card.is-flipped .flip-card__front:hover {
    transform: rotateY(-180deg);
}

.flip-card.is-flipped .flip-card__back,
.flip-card.is-flipped .flip-card__back:hover {
    transform: rotateY(0);
}

.flip-card__back p {
    color: var(--ink);
    font-weight: 600;
}

.flip-card__button {
    align-self: flex-start;
    margin-top: auto;
}

.flip-card__front .flip-card__button {
    margin-top: 1.25rem;
}

.flip-card__back .flip-card__button {
    margin-top: 1.5rem;
}

/* „Was Sie bei uns nicht bekommen“: roter Strich wie von Hand, Punkte lassen sich wegschnippen */
.never .crosslist li span {
    background-image: linear-gradient(var(--coral), var(--coral));
    background-position: 0 58%;
    background-repeat: no-repeat;
    background-size: 0% 3px;
    transition: background-size 0.6s var(--ease) calc(var(--i, 0) * 0.35s);
}

.never.is-struck .crosslist li span {
    background-size: 100% 3px;
}

.never .crosslist li[role="button"] {
    cursor: var(--cursor-link);
    transition: transform 0.45s var(--ease), opacity 0.4s;
}

.never .crosslist li[role="button"]:hover {
    transform: translateX(4px) rotate(-0.5deg);
}

.never .crosslist li.is-flicked {
    opacity: 0;
    transform: translate(var(--fx), -2rem) rotate(var(--fr));
}

.never__hint {
    margin: 1rem 0 0;
    color: var(--ink-soft);
    font-size: 0.8rem;
}

.never__done {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    animation: drop-in 0.4s var(--spring);
}

.never__done[hidden] {
    display: none;
}

.never__done p {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--step-2);
}

/* Werkzeugkasten: Technik-Begriffe als Buttons mit Erklärung */
.toolbox.is-live .tags li,
.toolbox.is-live .tags li:hover {
    padding: 0;
    border: 0;
    background: none;
    transform: none;
}

.toolbox .tags button {
    min-height: var(--control-height);
    padding: 0 1.15rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-weight: 650;
    cursor: var(--cursor-link);
    transition: transform 0.35s var(--spring), background-color 0.2s, color 0.2s;
}

.toolbox .tags li:nth-child(3n + 1) button:is(:hover, [aria-pressed="true"]) { background: var(--yellow); color: var(--on-color); transform: rotate(-4deg); }
.toolbox .tags li:nth-child(3n + 2) button:is(:hover, [aria-pressed="true"]) { background: var(--lilac); color: var(--on-color); transform: rotate(3deg); }
.toolbox .tags li:nth-child(3n + 3) button:is(:hover, [aria-pressed="true"]) { background: var(--mint); color: var(--on-color); transform: rotate(-2deg); }

.toolbox__info {
    min-height: 4.5rem;
    margin: 1.25rem 0 0;
    padding: 1rem 1.2rem;
    border: 2px dashed var(--line-strong);
    border-radius: var(--radius);
    color: var(--ink-soft);
}

.toolbox__info strong {
    color: var(--ink);
}

.toolbox__info.is-new {
    animation: drop-in 0.3s var(--spring);
}

/* Visitenkarte */
.vcard-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 1rem;
    margin: 1.5rem 0 0;
}

.vcard-row small {
    color: var(--ink-soft);
}

/* ---------- Startseite: eigene Vorschau, KI-Übergabe, kippende Karten, Laufband ---------- */

/* Eigener Name und eigene Farbe für die Live-Vorschau */
.playground__custom {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem 1.25rem;
    margin-top: 1rem;
}

.playground__custom[hidden] {
    display: none;
}

.playground__name {
    display: grid;
    flex: 1 1 13rem;
    gap: 0.3rem;
}

.playground__name label,
.playground__colors > span {
    color: var(--ink-soft);
    font-size: var(--step--1);
    font-weight: 600;
}

.playground__name input {
    height: var(--control-height);
    padding: 0 1.1rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
}

.playground__colors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.playground__colors > span {
    flex-basis: 100%;
}

/* Farbtupfer: runde Buttons in Standardhöhe, innen die Farbe */
.swatch {
    display: grid;
    place-items: center;
    width: var(--control-height);
    height: var(--control-height);
    padding: 0;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--card);
    cursor: var(--cursor-link);
    transition: transform 0.3s var(--spring);
}

.swatch span {
    width: 62%;
    height: 62%;
    border-radius: 50%;
    background: var(--swatch);
    outline: 1px solid var(--line-strong);   /* damit Schwarz auch im Dark Mode sichtbar bleibt */
}

.swatch:hover {
    transform: rotate(-8deg) scale(1.06);
}

.swatch[aria-pressed="true"] {
    background: var(--ink);
    transform: scale(1.08);
}

.swatch[aria-pressed="true"] span {
    box-shadow: 0 0 0 3px var(--card);
}

.playground__private {
    flex-basis: 100%;
    margin: 0;
    color: var(--ink-soft);
    font-size: 0.75rem;
}

/* KI-Übergabe: ein Päckchen wandert von „KI“ zu „Wir“, dann kommt der Stempel */
.ai-flow.is-live .ai-flow__row {
    position: relative;
}

.ai-flow__cell--human {
    position: relative;
}

.ai-flow.is-live .ai-flow__row:not(.is-done) .ai-flow__cell--human {
    opacity: 0.45;
    transform: translateX(-0.6rem);
}

.ai-flow.is-live .ai-flow__cell--human {
    transition: opacity 0.4s, transform 0.5s var(--spring);
}

.ai-flow.is-live .ai-flow__row::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 22%;
    width: 1.1rem;
    height: 1.1rem;
    margin-top: -0.55rem;
    border: 2px solid var(--ink);
    border-radius: 0.3rem;
    background: var(--lilac);
    opacity: 0;
    pointer-events: none;
}

.ai-flow.is-live .ai-flow__row.is-flowing::after {
    animation: ai-handoff 0.7s var(--ease) forwards;
}

@keyframes ai-handoff {
    0% { opacity: 0; left: 22%; transform: rotate(0) scale(0.6); }
    20% { opacity: 1; transform: rotate(-20deg) scale(1); }
    85% { opacity: 1; left: 70%; transform: rotate(160deg) scale(1); }
    100% { opacity: 0; left: 74%; transform: rotate(180deg) scale(0.4); }
}

/* Untereinander (Handy): das Päckchen fällt von oben nach unten */
@media (max-width: 39.99rem) {
    .ai-flow.is-live .ai-flow__row::after {
        top: 22%;
        left: 50%;
        margin-left: -0.55rem;
    }

    @keyframes ai-handoff {
        0% { opacity: 0; top: 22%; transform: scale(0.6); }
        20% { opacity: 1; transform: rotate(-20deg) scale(1); }
        85% { opacity: 1; top: 70%; transform: rotate(160deg) scale(1); }
        100% { opacity: 0; top: 74%; transform: scale(0.4); }
    }
}

.ai-flow__stamp {
    position: absolute;
    top: -0.7rem;
    right: -0.5rem;
    padding: 0.15rem 0.55rem;
    border: 2px solid var(--success);
    border-radius: 0.35rem;
    background: var(--card);
    color: var(--success);
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0;
    transform: rotate(8deg) scale(2);
    pointer-events: none;
}

.ai-flow__row.is-done .ai-flow__stamp {
    opacity: 1;
    transform: rotate(8deg) scale(1);
    transition: opacity 0.2s, transform 0.35s cubic-bezier(0.5, 0, 0.75, 0);
}

/* Leistungskarten kippen zur Maus (Werte setzt app.js) */
.bento .card.is-tilting {
    transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)) translateY(-4px);
    transition: transform 0.12s linear, box-shadow 0.3s, border-color 0.3s;
}

.bento .card.is-tilting::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgb(255 255 255 / 0.22), transparent 55%);
    pointer-events: none;
}

/* Laufband zum Ziehen: Bewegung kommt aus app.js statt aus der CSS-Animation */
.marquee.is-draggable {
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
}

.marquee.is-draggable.is-dragging {
    cursor: grabbing;
}

.marquee.is-draggable .marquee__track {
    animation: none;
}

/* FAQ mit <details>: funktioniert ohne JavaScript */
.faq {
    border-top: 2px solid var(--ink);
}

.faq__item {
    border-bottom: 1px solid var(--line-strong);
}

.faq__item summary {
    position: relative;
    padding: 1.35rem 3rem 1.35rem 0;
    font-weight: 700;
    font-size: var(--step-1);
    cursor: var(--cursor-link);
    list-style: none;
    transition: color 0.2s;
}

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

.faq__item summary::after {
    content: "+";
    position: absolute;
    right: 0.25rem;
    top: 50%;
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    transform: translateY(-50%);
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--card);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1;
    transition: transform 0.35s var(--spring), background-color 0.2s;
}

.faq__item[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
    background: var(--yellow);
}

.faq__item summary:hover {
    color: var(--blue);
}

.faq__item p {
    margin: 0 0 1.35rem;
    color: var(--ink-soft);
    max-width: 46rem;
}

.faq__item[open] p {
    animation: drop-in 0.4s var(--ease);
}

/* ---------- Kontakt ---------- */

.contact {
    display: grid;
    gap: 2.5rem;
    align-items: start;
}

@media (min-width: 60rem) {
    .contact {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        gap: 4rem;
    }

    .contact__aside {
        position: sticky;
        top: 6rem;
    }
}

.contact__aside {
    display: grid;
    gap: 1.25rem;
}

.contact-list {
    list-style: none;
    display: grid;
    gap: 1rem;
}

.contact-list span {
    display: block;
    color: var(--ink-soft);
    font-size: var(--step--1);
}

.contact-list a {
    font-weight: 700;
    word-break: break-word;
}

.mini-steps {
    display: grid;
    gap: 0.75rem;
    padding-left: 1.25rem;
    color: var(--ink-soft);
}

.mini-steps li::marker {
    color: var(--blue);
    font-weight: 800;
}

.form {
    display: grid;
    gap: 1.5rem;
}

.form__row {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 40rem) {
    .form__row {
        grid-template-columns: 1fr 1fr;
    }
}

.field {
    display: grid;
    gap: 0.45rem;
    align-content: start;
}

.field label {
    font-weight: 700;
}

.field__required {
    color: var(--ink-soft);
    font-size: var(--step--1);
    font-weight: 400;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 3.1rem;
    padding: 0.75rem 1rem;
    border: 2px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--card);
    color: var(--ink);
    font: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.field textarea {
    resize: vertical;
    min-height: 10rem;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
    border-color: var(--ink-soft);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 4px 4px 0 var(--blue);
}

.field [aria-invalid="true"] {
    border-color: var(--error);
}

.field__hint {
    margin: 0;
    color: var(--ink-soft);
    font-size: var(--step--1);
}

.field__error {
    margin: 0;
    color: var(--error);
    font-size: var(--step--1);
    font-weight: 700;
}

.form__privacy {
    margin: 0;
    color: var(--ink-soft);
    font-size: var(--step--1);
}

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

/* Honeypot: aus dem sichtbaren Bereich geschoben statt display:none, das manche Bots erkennen */
.form__trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.error-summary {
    margin-bottom: 2rem;
    padding: 1.25rem 1.5rem;
    border: 2px solid var(--error);
    border-radius: var(--radius);
    background: var(--error-soft);
}

.error-summary h2 {
    font-family: var(--font-body);
    font-size: var(--step-1);
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.error-summary ul {
    padding-left: 1.25rem;
    display: grid;
    gap: 0.25rem;
}

.error-summary a {
    color: var(--ink);
}

.error-summary p {
    margin-bottom: 0.5rem;
}

.thanks {
    max-width: 40rem;
}

.thanks__icon {
    display: grid;
    place-items: center;
    width: 4rem;
    height: 4rem;
    margin-bottom: 1.5rem;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--mint);
    color: var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
}

.motion .thanks__icon {
    animation: pop 0.7s var(--spring) 0.2s both;
}

.thanks__icon svg {
    width: 2rem;
    height: 2rem;
}

/* ---------- Rechtstexte ---------- */

.legal {
    max-width: 48rem;
}

.legal h1 {
    font-size: var(--step-4);
}

.legal h2 {
    margin-top: 2.75rem;
    font-family: var(--font-body);
    font-size: var(--step-1);
    font-weight: 700;
    line-height: 1.3;
    scroll-margin-top: 6rem;
}

.legal h3 {
    font-size: var(--step-0);
}

.legal ul {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
    display: grid;
    gap: 0.35rem;
}

.legal__toc {
    margin: 2rem 0;
    padding: 1.4rem 1.6rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--card);
}

.legal__toc ol {
    padding-left: 1.25rem;
    display: grid;
    gap: 0.3rem;
}

.legal__clauses {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
    display: grid;
    gap: 0.6rem;
}

.legal__clauses li::marker {
    content: "(" counter(list-item) ")  ";
    color: var(--ink-soft);
}

.legal__box {
    margin: 1.5rem 0;
    padding: 1.4rem 1.6rem;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--yellow-soft);
}

.legal__box p:last-child {
    margin: 0;
}

.legal__updated {
    margin-top: 2rem;
    color: var(--ink-soft);
    font-size: var(--step--1);
}

.placeholder {
    padding: 0.1rem 0.35rem;
    border-radius: 0.3rem;
    background: #fef08a;
    color: #713f12;
    font-weight: 700;
}

/* ---------- Footer ---------- */

.site-footer {
    position: relative;
    padding-top: 4.5rem;
    background: var(--footer-bg);
    color: var(--footer-text);
    font-size: var(--step--1);
    overflow: hidden;
}

.site-footer a {
    color: var(--footer-strong);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--yellow);
}

.site-footer__grid {
    display: grid;
    gap: 2.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    padding-bottom: 3rem;
}

@media (min-width: 60rem) {
    .site-footer__grid {
        grid-template-columns: 1.6fr 1fr 1fr 1fr;
    }
}

.site-footer__brand p {
    margin-top: 1rem;
    max-width: 22rem;
}

.site-footer__heading {
    margin-bottom: 1rem;
    color: var(--footer-strong);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.site-footer ul {
    list-style: none;
    display: grid;
    gap: 0.6rem;
}

.site-footer__muted {
    margin-top: 0.75rem;
}

.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    /* unten Platz für das Widget, damit es nichts verdeckt */
    padding: 1.5rem 0 5rem;
    border-top: 1px solid var(--footer-line);
}

.site-footer__bottom p {
    margin: 0;
}

/* Großer Schriftzug: Buchstaben als feine Kontur, das X in Blau wie im Logo.
   Beim Auftauchen eine Welle, bei Maus oder Finger füllt sich ein Buchstabe farbig (app.js). */
.site-footer__wordmark {
    display: flex;
    justify-content: center;
    margin: 0 0 -0.15em;
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(5rem, 2rem + 16vw, 17rem);
    line-height: 0.85;
    color: transparent;
    -webkit-text-stroke: 1.5px rgb(251 248 242 / 0.22);
    user-select: none;
}

.site-footer__wordmark span {
    --c: var(--yellow);
    --r: -6deg;
    display: inline-block;
    padding-inline: 0.02em;
    cursor: var(--cursor-link);
    transition: transform 0.45s var(--spring), color 0.25s, -webkit-text-stroke-color 0.25s;
}

.site-footer__wordmark span:nth-child(2) { --c: var(--coral); --r: 5deg; }
.site-footer__wordmark span:nth-child(3) { --c: var(--mint); --r: -4deg; }
.site-footer__wordmark span:nth-child(4) { --c: var(--lilac); --r: 7deg; }
.site-footer__wordmark span:nth-child(5) { --c: var(--yellow); --r: -5deg; }

.site-footer__wordmark .is-x {
    --c: var(--footer-x);
    --r: 9deg;
    color: rgb(109 139 255 / 0.18);
    -webkit-text-stroke-color: var(--footer-x);
}

/* Maus darüber oder angetippt: farbig gefüllt, springt schräg hoch */
.site-footer__wordmark span:hover,
.site-footer__wordmark span.is-poked {
    color: var(--c);
    -webkit-text-stroke-color: transparent;
    transform: translateY(-0.1em) rotate(var(--r));
}

/* Welle beim ersten Auftauchen der Fußzeile */
.motion .site-footer__wordmark.is-waving span {
    animation: wordmark-wave 0.9s var(--spring) calc(var(--i, 0) * 0.08s);
}

@keyframes wordmark-wave {
    0%, 100% { transform: none; }
    35% { color: var(--c); -webkit-text-stroke-color: transparent; transform: translateY(-0.14em) rotate(var(--r)); }
}

/* Klick: einmal herumwirbeln */
.motion .site-footer__wordmark span.is-spinning {
    animation: wordmark-spin 0.7s var(--spring);
}

@keyframes wordmark-spin {
    0% { transform: translateY(-0.1em) rotate(var(--r)); }
    60% { transform: translateY(-0.2em) rotate(calc(var(--r) + 360deg)) scale(1.1); }
    100% { transform: translateY(-0.1em) rotate(calc(var(--r) + 360deg)); }
}

/* ---------- Tageszeit-Widget ---------- */

.sky-widget {
    position: fixed;
    left: 1rem;
    bottom: 1rem;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: calc(100vw - 2rem);
}

/* Pause-Button für alle Animationen (WCAG 2.2.2) */
.sky-widget__motion {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    order: 2;
    min-height: var(--control-height);
    padding: 0.45rem 1rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    font-size: var(--step--1);
    font-weight: 700;
    cursor: var(--cursor-link);
    box-shadow: 3px 3px 0 var(--ink);
}

.sky-widget__motion-icon {
    display: flex;
    gap: 3px;
    width: 0.8rem;
    height: 0.8rem;
}

/* Pause-Symbol: zwei Balken */
.sky-widget__motion-icon::before,
.sky-widget__motion-icon::after {
    content: "";
    flex: 1;
    background: currentColor;
    border-radius: 1px;
}

/* Abspiel-Symbol, wenn pausiert */
.sky-widget__motion[aria-pressed="true"] .sky-widget__motion-icon {
    gap: 0;
    background: currentColor;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.sky-widget__motion[aria-pressed="true"] .sky-widget__motion-icon::before,
.sky-widget__motion[aria-pressed="true"] .sky-widget__motion-icon::after {
    display: none;
}

.sky-widget__toggle {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: var(--control-height);
    padding: 0.35rem 1rem 0.35rem 0.35rem;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--card);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: var(--cursor-link);
    box-shadow: 3px 3px 0 var(--ink);
    transition: transform 0.3s var(--spring);
}

.sky-widget__toggle:hover {
    transform: translateY(-2px);
}

.sky-widget__icon {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: radial-gradient(circle, var(--sun) 0 45%, var(--sky-top) 46%);
}

.sky-widget__text {
    display: grid;
    line-height: 1.2;
    font-size: var(--step--1);
    font-weight: 700;
}

.sky-widget__text small {
    color: var(--ink-soft);
    font-size: 0.7rem;
    font-weight: 600;
}

.sky-widget__panel {
    position: absolute;
    left: 0;
    bottom: calc(100% + 0.75rem);
    width: min(22rem, calc(100vw - 2rem));
    padding: 1.25rem;
    border: 2px solid var(--ink);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: 5px 5px 0 var(--ink);
    font-size: var(--step--1);
    animation: drop-in 0.35s var(--spring);
}

.sky-widget__scale {
    display: flex;
    justify-content: space-between;
    margin: 0.25rem 0 1rem;
    color: var(--ink-soft);
    font-size: 0.72rem;
}

@media (max-width: 40rem) {
    .sky-widget__text small {
        display: none;
    }

    /* Auf dem Handy nur das Sonnen-Symbol, die Uhrzeit erscheint erst nach dem Antippen.
       Zugeklappt sind beide Buttons runde Kreise mit dem Symbol genau in der Mitte. */
    .sky-widget__toggle[aria-expanded="false"],
    .sky-widget__motion {
        justify-content: center;
        width: var(--control-height);
        height: var(--control-height);
        padding: 0;
    }

    .sky-widget__toggle[aria-expanded="false"] .sky-widget__text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .sky-widget__toggle[aria-expanded="true"] {
        padding-right: 1rem;
    }

    .sky-widget__motion [data-motion-label] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* ---------- Bewegung (nur mit JavaScript und ohne reduzierte Bewegung) ---------- */

/* Einschweben von links, rechts, unten oder als Aufploppen (Richtung setzt JavaScript) */
.motion [data-reveal] {
    opacity: 0;
    transition: opacity 0.8s var(--ease), transform 1.1s var(--spring);
    transition-delay: var(--delay, 0s);
}

.motion [data-reveal="left"] { transform: translate(-70px, 24px) rotate(-4deg); }
.motion [data-reveal="right"] { transform: translate(70px, 24px) rotate(4deg); }
.motion [data-reveal="up"] { transform: translateY(60px); }
.motion [data-reveal="pop"] { transform: scale(0.82) rotate(-5deg); }

.motion [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* ---------- Funken beim Klicken ----------
 * Kurze Striche wie die Funken im Logo, die vom Klickpunkt wegfliegen (setzt app.js).
 */
.click-spark {
    position: fixed;
    top: var(--y);
    left: var(--x);
    z-index: 9999;
    pointer-events: none;
}

.click-spark i {
    position: absolute;
    top: -1.5px;
    left: 0;
    width: 11px;
    height: 3px;
    border-radius: 3px;
    background: var(--spark);
    transform-origin: 0 50%;
    transform: rotate(var(--angle)) translateX(6px) scaleX(1);
    animation: click-spark 0.45s var(--ease) forwards;
}

@keyframes click-spark {
    to {
        opacity: 0;
        transform: rotate(var(--angle)) translateX(20px) scaleX(0.2);
    }
}

/* ---------- Mond in der echten Phase (zeichnet app.js) ---------- */
.sky__moon {
    display: none;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.sky__moon-dark {
    fill: var(--sun);
    opacity: 0.14;
}

.sky__moon-lit {
    fill: var(--sun);
}

.sky-night .sky__sun.has-moon,
.is-night .sky__sun.has-moon {
    background: none;
    box-shadow: none;
    filter: drop-shadow(0 0 22px rgb(255 255 255 / 0.75));
}

.sky-night .has-moon .sky__moon,
.is-night .has-moon .sky__moon {
    display: block;
}

/* ---------- Sternschnuppen ---------- */
.shooting-star {
    position: absolute;
    top: var(--y);
    left: var(--x);
    z-index: 5;
    width: 9rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: none;
    transform-origin: 0 50%;
    animation: shooting-star 2.6s var(--ease) forwards;
}

/* Kopf links, Schweif nach rechts oben */
.shooting-star::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ink), transparent);
}

.shooting-star::after {
    content: "";
    position: absolute;
    top: calc(50% - 3px);
    left: -2px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ink);
    box-shadow: 0 0 12px 3px color-mix(in srgb, var(--ink) 45%, transparent);
}

@keyframes shooting-star {
    0% { opacity: 0; transform: rotate(-28deg) translateX(0); }
    12% { opacity: 1; }
    75% { opacity: 1; }
    100% { opacity: 0; transform: rotate(-28deg) translateX(-38vw); }
}

/* Sprechblasen im Sticker-Stil (Sternschnuppe, Logo) */
.star-wish,
.logo-bubble {
    z-index: 60;
    max-width: 17rem;
    margin: 0;
    padding: 0.7rem 1rem;
    border: 2px solid var(--ink);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: 4px 4px 0 var(--ink);
    color: var(--ink);
    font-size: var(--step--1);
    font-weight: 600;
    line-height: 1.4;
    pointer-events: none;
    animation: bubble 4.2s var(--spring) forwards;
}

.star-wish {
    position: absolute;
    top: var(--y);
    left: var(--x);
    translate: -50% calc(-100% - 1rem);
}

.logo-bubble {
    position: fixed;
    top: var(--y);
    left: var(--x);
    background: var(--yellow);
    color: var(--on-color);
    box-shadow: 4px 4px 0 var(--on-color);
    border-color: var(--on-color);
    animation-duration: 4.5s;
}

/* Ohne Bewegung einfach stehen lassen (app.js entfernt die Blase wieder) */
:root:not(.motion) .logo-bubble {
    animation: none;
}

@keyframes bubble {
    0% { opacity: 0; transform: scale(0.6) rotate(-6deg); }
    8% { opacity: 1; transform: scale(1) rotate(-2deg); }
    90% { opacity: 1; transform: scale(1) rotate(-2deg); }
    100% { opacity: 0; transform: scale(0.9) rotate(-2deg); }
}

/* ---------- Wetter in Nürnberg (Daten vom DWD, setzt app.js) ---------- */
.sky__weather {
    position: absolute;
    inset: 0;
}

:root:is(.weather-cloudy, .weather-rain, .weather-snow, .weather-thunder) .sky__weather {
    --cloud: var(--cloud-dense);
}

.sky__cloud {
    position: absolute;
    top: var(--cy);
    left: var(--cx);
    width: var(--cw);
    height: calc(var(--cw) * 0.28);
    border-radius: 999px;
    background: var(--cloud);
}

/* Zwei Buckel oben auf der Wolke */
.sky__cloud::before,
.sky__cloud::after {
    content: "";
    position: absolute;
    bottom: 40%;
    border-radius: 50%;
    background: inherit;
}

.sky__cloud::before {
    left: 16%;
    width: 38%;
    aspect-ratio: 1;
}

.sky__cloud::after {
    left: 42%;
    width: 46%;
    aspect-ratio: 1;
    bottom: 25%;
}

.motion .sky__cloud {
    animation: cloud-drift var(--cd) ease-in-out infinite alternate;
}

/* Auf dem Handy kleinere Wolken, damit sie nicht über dem Text liegen */
@media (max-width: 40rem) {
    .sky__cloud {
        width: calc(var(--cw) * 0.5);
        height: calc(var(--cw) * 0.14);
    }
}

@keyframes cloud-drift {
    from { transform: translateX(-5vw); }
    to { transform: translateX(5vw); }
}

/* Bei dichten Wolken steht die Sonne blasser dahinter */
:root:is(.weather-cloudy, .weather-rain, .weather-snow, .weather-thunder, .weather-fog):not(.is-night) .sky__sun {
    opacity: 0.45;
}

.sky__precip {
    position: absolute;
    inset: 0 0 25%;
    mask-image: linear-gradient(#000 35%, transparent);
}

/* Regen: einzelne schräge Striche mit runden Enden, wie die Funken im Logo (erzeugt app.js) */
.sky__precip i {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: 3px;
    height: var(--len);
    border-radius: 3px;
    background: var(--rain);
    opacity: var(--o);
    rotate: 16deg;
}

.motion .sky__precip i {
    top: -6%;
    animation: raindrop var(--dur) linear var(--delay) infinite;
}

@keyframes raindrop {
    to { translate: calc(-0.29 * 80vh) 80vh; }
}

.weather-snow .sky__precip {
    background-image:
        radial-gradient(2.5px 2.5px at 50% 50%, var(--snow) 60%, transparent 75%),
        radial-gradient(1.8px 1.8px at 50% 50%, var(--snow) 60%, transparent 75%);
    background-size: 47px 59px, 71px 67px;
    background-position: 0 0, 23px 31px;
}

.weather-fog .sky__precip {
    inset: 20% -10% 15%;
    background: linear-gradient(transparent, var(--fog) 45%, var(--fog) 60%, transparent);
    mask-image: none;
}

.motion.weather-snow .sky__precip {
    animation: snow 9s linear infinite;
}

.motion.weather-fog .sky__precip {
    animation: fog 24s ease-in-out infinite alternate;
}

@keyframes snow {
    to { background-position: 30px 590px, 0 700px; }
}

@keyframes fog {
    to { transform: translateX(6%); opacity: 0.7; }
}

/* Gewitter: selten ein schwaches Wetterleuchten (deutlich unter der Blitz-Grenze aus WCAG 2.3.1) */
.motion.weather-thunder .sky__weather::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(255 255 255 / 0.5);
    opacity: 0;
    animation: lightning 11s linear infinite;
}

@keyframes lightning {
    0%, 92%, 100% { opacity: 0; }
    93% { opacity: 0.45; }
    94% { opacity: 0; }
    95.5% { opacity: 0.3; }
    97% { opacity: 0; }
}

/* Infozeilen im Uhrzeit-Widget */
.sky-widget__facts {
    display: grid;
    gap: 0.2rem;
    margin: 0 0 0.9rem;
    padding: 0;
    list-style: none;
    font-weight: 600;
}

.sky-widget__facts .sky-widget__source {
    color: var(--ink-soft);
    font-size: 0.72rem;
    font-weight: 400;
}

/* ---------- Papierflieger beim Absenden ---------- */
.paper-plane {
    position: fixed;
    top: var(--y);
    left: var(--x);
    z-index: 9999;
    width: 2.6rem;
    height: 2.6rem;
    margin: -1.3rem 0 0 -1.3rem;
    pointer-events: none;
    animation: paper-plane 0.95s cubic-bezier(0.55, 0, 0.75, 0.4) forwards;
}

.paper-plane svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.paper-plane__wing {
    fill: var(--card);
    stroke: var(--ink);
    stroke-width: 1.6;
    stroke-linejoin: round;
}

.paper-plane__fold {
    fill: none;
    stroke: var(--ink);
    stroke-width: 1.4;
    stroke-linecap: round;
}

@keyframes paper-plane {
    0% { transform: translate(0, 0) rotate(0) scale(0.5); opacity: 0; }
    15% { transform: translate(-1.5rem, 0.5rem) rotate(8deg) scale(1.1); opacity: 1; }
    100% { transform: translate(60vw, -80vh) rotate(-18deg) scale(0.7); opacity: 0.9; }
}

.button.is-sent {
    transform: scale(0.96);
}

/* ---------- Logo-Gag: Funkenregen ---------- */
.logo--party .logo__mark {
    animation: logo-party 0.9s var(--spring);
}

@keyframes logo-party {
    0% { transform: rotate(0) scale(1); }
    40% { transform: rotate(-200deg) scale(1.25); }
    100% { transform: rotate(-360deg) scale(1); }
}

.spark-rain {
    position: fixed;
    inset: 0;
    z-index: 9998;
    overflow: hidden;
    pointer-events: none;
}

.spark-rain i {
    position: absolute;
    top: -2rem;
    left: var(--x);
    width: 4px;
    height: 16px;
    border-radius: 4px;
    background: var(--color);
    box-shadow: 1px 1px 0 var(--ink);
    animation: spark-fall var(--time) var(--delay) cubic-bezier(0.4, 0, 0.8, 0.6) forwards;
}

@keyframes spark-fall {
    from { transform: translateY(0) rotate(var(--turn)); }
    to { transform: translateY(calc(100vh + 4rem)) rotate(calc(var(--turn) + 540deg)); }
}

/* ---------- 404: verirrter Funke ---------- */
.lost-spark {
    margin-top: clamp(2.5rem, 2rem + 3vw, 4rem);
}

.lost-spark__hint {
    max-width: 34rem;
    color: var(--ink-soft);
}

.lost-spark__field {
    position: relative;
    height: clamp(16rem, 12rem + 12vw, 22rem);
    border: 2px dashed var(--line-strong);
    border-radius: var(--radius-lg);
    touch-action: none;
}

.lost-spark__logo {
    position: absolute;
    top: 50%;
    left: 62%;
    width: clamp(8rem, 6rem + 8vw, 12rem);
    overflow: visible;
    color: var(--ink);
    transform: translate(-50%, -45%) rotate(-4deg);
    transition: transform 0.5s var(--spring);
}

.lost-spark__slot {
    stroke-dasharray: 1.6 1.6;
    opacity: 0.45;
}

.lost-spark__spark {
    position: absolute;
    top: var(--sy, 70%);
    left: var(--sx, 15%);
    display: grid;
    place-items: center;
    width: 3.4rem;
    height: 3.4rem;
    margin: -1.7rem 0 0 -1.7rem;
    padding: 0;
    border: 2px solid var(--ink);
    border-radius: 50%;
    background: var(--yellow);
    box-shadow: 3px 3px 0 var(--ink);
    color: var(--on-color);
    touch-action: none;
    cursor: grab;
    transition: top 0.45s var(--spring), left 0.45s var(--spring), transform 0.2s, opacity 0.3s;
}

.lost-spark__spark svg {
    width: 1.6rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
}

.motion .lost-spark__spark:not(.is-dragging) {
    animation: wiggle 2.4s ease-in-out infinite;
}

.lost-spark__spark.is-dragging {
    cursor: grabbing;
    transform: scale(1.1);
    transition: transform 0.2s;
}

@keyframes wiggle {
    0%, 70%, 100% { rotate: 0deg; }
    76% { rotate: -14deg; }
    82% { rotate: 12deg; }
    88% { rotate: -6deg; }
}

/* Geschafft: Funke sitzt wieder im Logo */
.is-fixed .lost-spark__spark {
    opacity: 0;
    transform: scale(0.3);
    animation: none;
    pointer-events: none;
}

.is-fixed .lost-spark__slot {
    stroke-dasharray: none;
    opacity: 1;
}

.is-fixed .lost-spark__logo {
    transform: translate(-50%, -45%) rotate(4deg) scale(1.08);
}

.lost-spark__done {
    min-height: 1.5em;
    margin-top: 1rem;
    font-weight: 700;
}

/* Weiche Übergänge beim Seitenwechsel (Browser mit View Transitions, z. B. Chrome, Edge, Safari) */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0.3s;
    }
}

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

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .marquee__track {
        animation: none;
    }
}