/* =========================================================================
   webseo.one Kostenrechner – Gestaltung („Werkbank“)

   Links ein weißes Arbeitsblatt mit Haarlinien, rechts die dunkle Werkbank „Ihr Projekt“: die Aufwandsformel
   als senkrechte Rechnung, darunter die Wabe und die Spanne unter einer Mint-Platte mit den Spitzen des Logos.
   Kühn ist nur die Werkbank, und laut wird sie erst im Moment des Schnitts.

   Alles liegt unter .wsk und .wsk-hero. Variablen mit Ersatzwerten, damit der Rechner auch ohne die Stile
   der Website funktioniert. Selektoren innerhalb von .wsk tragen das Präfix, damit Element-Regeln der Website
   (z. B. ".service-site h2") nicht hineinwirken.
   ========================================================================= */

/* ---------------------------------------------------------------- Tokens */
.wsk,
.wsk-hero {
    --wsk-ink: var(--ink, #07110f);
    --wsk-ink-soft: #14211e;
    --wsk-ink-raised: #1d2b27;
    --wsk-space: #030807;
    --wsk-mint: var(--accent, #22e6bd);
    --wsk-teal: #33b4a2;
    --wsk-navy: #093146;
    --wsk-mist: #eef3f1;
    --wsk-mist-strong: #dde6e3;
    --wsk-white: #fff;
    --wsk-text: #3e4945;
    --wsk-muted: #5b6561;
    --wsk-on-dark: #c3cec9;
    --wsk-muted-dark: #93a49d;
    --wsk-bright-dark: #e7eeeb;
    --wsk-line: rgba(7, 17, 15, 0.19);
    --wsk-line-mid: rgba(7, 17, 15, 0.3);
    --wsk-line-strong: rgba(7, 17, 15, 0.56);
    --wsk-line-dark: rgba(195, 206, 201, 0.16);
    --wsk-error: #a3271c;
    --wsk-ease: cubic-bezier(0.23, 1, 0.32, 1);
    --wsk-ease-move: cubic-bezier(0.77, 0, 0.175, 1);
    --wsk-hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    --wsk-font: var(--font, "Instrument Sans", Arial, sans-serif);
    --wsk-gutter: clamp(1.25rem, 3.4vw, 4rem);
    --wsk-panel-w: clamp(23.75rem, 36vw, 33.75rem);
    --wsk-col-gap: clamp(1.5rem, 3vw, 3rem);
    --wsk-sticky-top: 104px;
    --wsk-plate-h: 8.25rem;
    --wsk-indent: calc(1.1rem + 1.2rem + 1.3rem);
    font-family: var(--wsk-font);
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
}

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

.wsk .wsk-sr,
.wsk .wsk-sr-only,
.wsk-hero .wsk-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.wsk [hidden] {
    display: none !important;
}

.wsk ::selection,
.wsk-hero ::selection {
    background: var(--wsk-mint);
    color: var(--wsk-ink);
}

.wsk :focus-visible,
.wsk-hero :focus-visible {
    outline: 3px solid var(--wsk-mint);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--wsk-ink);
}

.wsk button,
.wsk input,
.wsk textarea {
    margin: 0;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
}

.wsk svg {
    display: block;
    max-width: none;
}

/* ------------------------------------------------------------ Seitenkopf */
.wsk-hero {
    padding: clamp(7.5rem, 4vw + 6rem, 8.5rem) 0 clamp(2.1rem, 3.2vw, 3rem);
    background: var(--wsk-ink);
    color: var(--wsk-white);
}

.wsk-hero .wsk-hero__inner {
    display: grid;
    grid-template-areas:
        "kicker kicker"
        "title title"
        "lead facts"
        "actions value"
        "formula formula";
    grid-template-columns: minmax(0, 1fr) var(--wsk-panel-w);
    column-gap: var(--wsk-col-gap);
    align-items: end;
    padding-inline: max(var(--wsk-gutter), calc((100% - 92.5rem) / 2));
}

.wsk-hero .wsk-hero__kicker {
    grid-area: kicker;
    margin: 0 0 1rem;
    color: var(--wsk-mint);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.4;
}

.wsk-hero .wsk-hero__title {
    grid-area: title;
    max-width: 18ch;
    margin: 0;
    color: var(--wsk-white);
    font-size: clamp(2.75rem, 5.5vw, 5.6rem);
    font-stretch: 78%;
    font-weight: 560;
    letter-spacing: -0.045em;
    line-height: 0.92;
    text-wrap: balance;
    overflow-wrap: normal;
}

.wsk-hero .wsk-hero__lead {
    grid-area: lead;
    max-width: 54ch;
    margin: clamp(1.25rem, 2vw, 1.75rem) 0 0;
    color: var(--wsk-on-dark);
    font-size: clamp(1rem, 1.15vw, 1.12rem);
    line-height: 1.65;
}

.wsk-hero .wsk-hero__facts {
    grid-area: facts;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.wsk-hero .wsk-hero__actions { grid-area: actions; margin-top: 1.25rem; align-self: start; }
.wsk-hero .wsk-hero__cta {
    --cut: 13px;
    display: inline-flex;
    max-width: 100%;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    padding: .95rem 1.4rem;
    background: var(--wsk-mint);
    color: var(--wsk-ink);
    font-size: .98rem;
    font-weight: 620;
    line-height: 1.3;
    text-decoration: none;
    clip-path: polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut) * .577) 100%,0 100%);
    transition: background-color 200ms ease;
}
.wsk-hero .wsk-hero__cta i { flex: none; width: 4px; height: .95em; background: currentColor; transform: skewX(-30deg); }
.wsk-hero .wsk-hero__cta:hover { background: var(--wsk-white); }
.wsk-hero .wsk-hero__cta:focus-visible { clip-path: none; outline-offset: 4px; }
.wsk-hero .wsk-hero__value { grid-area: value; align-self: start; margin: 1rem 0 0; max-width: 42ch; color: var(--wsk-on-dark); font-size: .94rem; line-height: 1.55; }

.wsk-hero .wsk-hero__facts li {
    display: flex;
    min-height: 2.5rem;
    align-items: center;
    gap: 0.7rem;
    border-top: 1px solid var(--wsk-line-dark);
    color: var(--wsk-bright-dark);
    font-size: 0.92rem;
    font-weight: 520;
    line-height: 1.3;
}

.wsk-hero .wsk-hero__facts li::before {
    flex: none;
    width: 0.8rem;
    aspect-ratio: 2 / 1.732;
    background: var(--wsk-teal);
    content: "";
    clip-path: var(--wsk-hex);
}

.wsk-hero .wsk-hero__formula {
    grid-area: formula;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.05em 0.38em;
    margin: clamp(1.6rem, 2.6vw, 2.25rem) 0 0;
    padding-top: clamp(0.9rem, 1.5vw, 1.3rem);
    border-top: 1px solid var(--wsk-line-dark);
    color: var(--wsk-white);
    font-size: clamp(1.45rem, 2.55vw, 2.6rem);
    font-stretch: 80%;
    font-weight: 560;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.wsk-hero .wsk-hero__formula i {
    color: var(--wsk-teal);
    font-style: normal;
    font-weight: 400;
}

/* --------------------------------------------------------------- Rechner */
.wsk {
    padding-block: clamp(1.75rem, 2.8vw, 2.5rem) clamp(4rem, 8vw, 7rem);
    background: var(--wsk-white);
    color: var(--wsk-ink);
    /* Beim Aufdecken gleicht das Skript selbst aus; der Browser soll nicht zusätzlich verankern. */
    overflow-anchor: none;
    /* Sprungziel #kostenrechner (CTAs im Ratgeber): Platz für den festen Kopf der Website. */
    scroll-margin-top: 100px;
}

.wsk .wsk-alert {
    max-width: 62ch;
    margin: 1.25rem 0 0;
    padding: 0.85rem 1rem;
    border-left: 3px solid var(--wsk-error);
    background: var(--wsk-mist);
    color: var(--wsk-ink);
    font-size: 0.95rem;
    line-height: 1.55;
}

.wsk > noscript .wsk-alert,
.wsk > .wsk-alert {
    margin-inline: max(var(--wsk-gutter), calc((100% - 92.5rem) / 2));
}

.wsk .wsk-alert p {
    margin: 0;
}

.wsk .wsk-alert p + p {
    margin-top: 0.4rem;
}

.wsk .wsk-alert a {
    color: var(--wsk-ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.wsk .wsk-alert:focus {
    outline: none;
    box-shadow: none;
}

.wsk .wsk-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--wsk-panel-w);
    column-gap: var(--wsk-col-gap);
    align-items: start;
    padding-inline: max(var(--wsk-gutter), calc((100% - 92.5rem) / 2));
}

/* Arbeitsblatt: weiß, eine Haarlinie als Rahmen */
.wsk .wsk-work {
    position: relative;
    min-width: 0;
    border: 1px solid var(--wsk-line);
    background: var(--wsk-white);
    container: blatt / inline-size;
}

/* Fortschritt: Sechseck-Knoten auf einer Haarlinie */
.wsk .wsk-route {
    --node-w: 2.1rem;
    display: grid;
    grid-template-columns: repeat(var(--wsk-stops, 7), minmax(0, 1fr));
    margin: 0;
    padding: 0.7rem clamp(0.5rem, 1.6vw, 1.5rem) 0.55rem;
    border-bottom: 1px solid var(--wsk-line);
    list-style: none;
}

.wsk .wsk-route li {
    position: relative;
    display: flex;
    min-width: 0;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.wsk .wsk-route li::before {
    display: none;
}

.wsk .wsk-route li:not(:last-child)::after {
    position: absolute;
    top: calc(0.4rem + var(--node-w) * 0.433);
    right: calc(-50% + var(--node-w) / 2 + 0.35rem);
    left: calc(50% + var(--node-w) / 2 + 0.35rem);
    height: 1px;
    background: var(--wsk-line);
    content: "";
}

.wsk .wsk-route li.is-done:not(:last-child)::after {
    background: var(--wsk-ink);
}

.wsk .wsk-route__item {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0 0.3rem;
    border: 0;
    background: none;
    color: inherit;
    text-align: center;
}

.wsk button.wsk-route__item {
    cursor: pointer;
}

.wsk .wsk-node {
    display: grid;
    width: var(--node-w);
    flex: none;
    aspect-ratio: 2 / 1.732;
    place-items: center;
    background: var(--wsk-mist-strong);
    color: var(--wsk-text);
    clip-path: var(--wsk-hex);
    font-size: 0.74rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1;
    transition: background-color 200ms ease, color 200ms ease;
}

.wsk .is-done .wsk-node {
    background: var(--wsk-mint);
    color: var(--wsk-ink);
}

.wsk .is-current .wsk-node {
    background: var(--wsk-ink);
    color: var(--wsk-white);
}

.wsk .wsk-route__label {
    max-width: 100%;
    color: var(--wsk-muted);
    font-size: 0.78rem;
    font-weight: 560;
    line-height: 1.2;
    white-space: nowrap;
}

.wsk .is-done .wsk-route__label,
.wsk .is-current .wsk-route__label {
    color: var(--wsk-ink);
}

.wsk .is-current .wsk-route__label {
    font-weight: 680;
}

@media (hover: hover) and (pointer: fine) {
    .wsk button.wsk-route__item:hover .wsk-route__label {
        text-decoration: underline;
        text-underline-offset: 0.22em;
    }

    .wsk button.wsk-route__item:hover .wsk-node {
        background: var(--wsk-ink);
        color: var(--wsk-mint);
    }
}

/* Schrittinhalt */
.wsk .wsk-body {
    padding: clamp(1.4rem, 2.8vw, 2.4rem) clamp(1.15rem, 2.6vw, 2.5rem) clamp(1.5rem, 2.6vw, 2.4rem);
}

.wsk .wsk-body--mess {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    visibility: hidden;
    pointer-events: none;
}

.wsk .is-enter {
    animation: wsk-enter 240ms var(--wsk-ease) both;
}

@keyframes wsk-enter {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

.wsk .wsk-editbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0 1.25rem;
    margin: 0 0 1.4rem;
    padding: 0.2rem 0 0.2rem 0.9rem;
    border-left: 3px solid var(--wsk-mint);
    background: var(--wsk-mist);
}

.wsk .wsk-editbar p {
    margin: 0.5rem 0;
    color: var(--wsk-text);
    font-size: 0.9rem;
    line-height: 1.45;
}

.wsk .wsk-editbar .wsk-textbtn {
    padding-right: 0.9rem;
}

.wsk .wsk-step__count {
    margin: 0 0 0.7rem;
    color: var(--wsk-muted);
    font-size: 0.86rem;
    line-height: 1.4;
}

.wsk .wsk-step__count strong {
    color: var(--wsk-ink);
    font-weight: 650;
}

.wsk .wsk-title {
    margin: 0;
    color: var(--wsk-ink);
    font-size: clamp(1.95rem, 2.9vw, 2.9rem);
    font-stretch: 80%;
    font-weight: 560;
    letter-spacing: -0.04em;
    line-height: 0.98;
    text-wrap: balance;
    overflow-wrap: normal;
}

.wsk .wsk-title:focus {
    outline: none;
    box-shadow: none;
}

.wsk .wsk-lead {
    max-width: 60ch;
    margin: 0.85rem 0 0;
    color: var(--wsk-text);
    font-size: 1.04rem;
    line-height: 1.6;
}

.wsk .wsk-field {
    min-width: 0;
    margin: clamp(1.4rem, 2.6vw, 2rem) 0 0;
    padding: 0;
    border: 0;
}

.wsk .wsk-field + .wsk-field {
    margin-top: clamp(1.6rem, 3vw, 2.4rem);
}

.wsk .wsk-field__label {
    display: block;
    margin: 0;
    padding: 0;
    color: var(--wsk-ink);
    font-size: 1.1rem;
    font-weight: 620;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.wsk .wsk-field__hint {
    max-width: 62ch;
    margin: 0.35rem 0 0;
    color: var(--wsk-text);
    font-size: 0.95rem;
    line-height: 1.55;
}

.wsk .wsk-error {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0.7rem 0 0;
    color: var(--wsk-error);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.45;
}

.wsk .wsk-error::before {
    flex: none;
    width: 0.7rem;
    aspect-ratio: 2 / 1.732;
    background: currentColor;
    content: "";
    clip-path: var(--wsk-hex);
}

.wsk .wsk-hidden-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    clip-path: inset(50%);
    pointer-events: none;
}

/* Sechseck-Markierung für Auswahl (Häkchen) und Einzelwahl (Punkt) */
.wsk .wsk-mark {
    position: relative;
    display: inline-block;
    flex: none;
    width: 1.55rem;
    aspect-ratio: 2 / 1.732;
    background: var(--wsk-line-strong);
    clip-path: var(--wsk-hex);
    transition: background-color 160ms ease;
}

.wsk .wsk-mark::before,
.wsk .wsk-mark::after {
    position: absolute;
    content: "";
}

.wsk .wsk-mark::before {
    inset: 1.5px;
    background: var(--wsk-white);
    clip-path: var(--wsk-hex);
    transition: background-color 160ms ease;
}

.wsk .wsk-mark--check::after,
.wsk .wsk-mark--fixed::after {
    top: 45%;
    left: 50%;
    width: 0.32rem;
    height: 0.58rem;
    border: solid var(--wsk-ink);
    border-width: 0 2px 2px 0;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(45deg) scale(0.6);
    transition: opacity 120ms ease, transform 180ms var(--wsk-ease);
}

.wsk .wsk-mark--radio::after {
    inset: 26%;
    background: var(--wsk-ink);
    clip-path: var(--wsk-hex);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 120ms ease, transform 180ms var(--wsk-ease);
}

/* Gewählt: Die Markierung folgt dem Eingabefeld davor (Geschwister-Selektor, ohne :has()). Karten- und
   Zeilenflächen ergänzen das weiter unten per :has() – fehlt :has(), bleibt die Markierung als Anzeige. */
.wsk .wsk-hidden-input:checked ~ .wsk-mark--check,
.wsk .wsk-hidden-input:checked ~ .wsk-mark--check::before {
    background: var(--wsk-mint);
}

.wsk .wsk-hidden-input:checked ~ .wsk-mark--check::after {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
}

.wsk .wsk-hidden-input:checked ~ .wsk-mark--radio {
    background: var(--wsk-ink);
}

.wsk .wsk-hidden-input:checked ~ .wsk-mark--radio::after {
    opacity: 1;
    transform: scale(1);
}

/* Fokus ohne :has(): Rahmen um den sichtbaren Text neben der Markierung (die Sechseck-Markierung selbst schneidet
   per clip-path jeden Umriss ab). Mit :has() trägt die ganze Zeile bzw. Karte den Rahmen (siehe unten). */
@supports not selector(:has(*)) {
    .wsk .wsk-hidden-input:focus-visible ~ :is(.wsk-card__body, .wsk-option__label, .wsk-consent__text),
    .wsk .wsk-check .wsk-hidden-input:focus-visible ~ span:last-child {
        outline: 3px solid var(--wsk-mint);
        outline-offset: 2px;
        box-shadow: 0 0 0 2px var(--wsk-ink);
    }
}

/* Nicht bedienbar: immer dabei */
.wsk .wsk-mark--fixed,
.wsk .wsk-mark--fixed::before {
    background: var(--wsk-mist-strong);
}

.wsk .wsk-mark--fixed::after {
    border-color: var(--wsk-muted);
    opacity: 1;
    transform: translate(-50%, -50%) rotate(45deg) scale(0.9);
}

/* Große Karten: 60°-Fase oben rechts, Rahmen als Haarlinie; gewählt auf Ink umgekehrt */
.wsk .wsk-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.25rem), 1fr));
    gap: clamp(0.75rem, 1.4vw, 1.1rem);
}

.wsk .wsk-field__label + .wsk-cards {
    margin-top: 1rem;
}

.wsk .wsk-card {
    --c: 1.6rem;
    --bw: 1px;
    --bc: var(--wsk-line-mid);
    --bg: var(--wsk-white);
    position: relative;
    display: grid;
    min-height: 14.5rem;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    align-content: start;
    gap: 0 1rem;
    padding: 1.2rem 1.35rem 1.4rem;
    color: var(--wsk-ink);
    cursor: pointer;
    isolation: isolate;
    transition: color 180ms ease;
}

.wsk .wsk-card::before,
.wsk .wsk-card::after {
    position: absolute;
    content: "";
    clip-path: polygon(0 0, calc(100% - var(--c) * 0.577) 0, 100% var(--c), 100% 100%, 0 100%);
}

.wsk .wsk-card::before {
    z-index: -2;
    inset: 0;
    background: var(--bc);
    transition: background-color 180ms ease;
}

.wsk .wsk-card::after {
    z-index: -1;
    inset: var(--bw);
    background: var(--bg);
    transition: background-color 180ms ease;
}

.wsk .wsk-card:has(:checked) {
    --bc: var(--wsk-ink);
    --bg: var(--wsk-ink);
    color: var(--wsk-white);
}

.wsk .wsk-card:has(:focus-visible) {
    outline: 3px solid var(--wsk-mint);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--wsk-ink);
}

@media (hover: hover) and (pointer: fine) {
    .wsk .wsk-card:not(:has(:checked)):hover {
        --bc: var(--wsk-ink);
    }
}

.wsk .wsk-card__icon {
    grid-column: 1;
    grid-row: 1;
    padding-bottom: 2.1rem;
}

.wsk .wsk-card > .wsk-mark {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0.85rem;
}

.wsk .wsk-card > .wsk-hidden-input:checked ~ .wsk-mark {
    background: var(--wsk-mint);
}

.wsk .wsk-card__body {
    display: grid;
    grid-column: 1 / -1;
    grid-row: 2;
    align-content: start;
    gap: 0.5rem;
}

.wsk .wsk-icon {
    width: 3.6rem;
    height: 3.6rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
}

.wsk .wsk-icon .a {
    fill: var(--wsk-mint);
}

.wsk .wsk-icon .w {
    fill: var(--bg, var(--wsk-white));
    transition: fill 180ms ease;
}

.wsk .wsk-card__title {
    font-size: 1.42rem;
    font-stretch: 82%;
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.02;
}

.wsk .wsk-card__text {
    color: var(--wsk-text);
    font-size: 0.94rem;
    line-height: 1.5;
    transition: color 180ms ease;
}

.wsk .wsk-card:has(:checked) .wsk-card__text {
    color: var(--wsk-on-dark);
}

/* Auswahllisten: Zeilen wie ein Datenblatt */
.wsk .wsk-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
    margin: 1.1rem 0 0;
    padding: 0;
    border-bottom: 1px solid var(--wsk-line);
}

.wsk .wsk-option {
    position: relative;
    display: grid;
    min-height: 3.5rem;
    grid-template-columns: auto minmax(0, 1fr);
    align-content: start;
    gap: 0.15rem 0.8rem;
    padding: 0.85rem 0.75rem 0.9rem 0.6rem;
    border-top: 1px solid var(--wsk-line);
    color: var(--wsk-ink);
    cursor: pointer;
    transition: background-color 160ms ease;
}

.wsk .wsk-option .wsk-mark {
    grid-row: 1 / span 3;
    margin-top: 0.05rem;
}

.wsk .wsk-option__label {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

.wsk .wsk-option__text {
    color: var(--wsk-text);
    font-size: 0.9rem;
    line-height: 1.5;
}

.wsk .wsk-option__note {
    color: var(--wsk-muted);
    font-size: 0.84rem;
    font-weight: 560;
    line-height: 1.4;
}

.wsk .wsk-option:has(:checked) {
    background: var(--wsk-mist);
}

.wsk .wsk-option.is-fixed {
    cursor: default;
}

.wsk .wsk-option.is-fixed .wsk-option__label {
    color: var(--wsk-text);
}

.wsk .wsk-option:has(:focus-visible) {
    z-index: 1;
    outline: 3px solid var(--wsk-mint);
    outline-offset: 1px;
    box-shadow: 0 0 0 1px var(--wsk-ink);
}

@media (hover: hover) and (pointer: fine) {
    .wsk .wsk-option:not(.is-fixed):not(:has(:checked)):hover {
        background: rgba(238, 243, 241, 0.6);
    }

    .wsk .wsk-option:not(.is-fixed):not(:has(:checked)):hover .wsk-mark {
        background: var(--wsk-ink);
    }
}

/* Zähler: am Desktop als Datenblattzeile (Frage links, Zähler rechts) */
.wsk .wsk-field--anzahl {
    display: grid;
    gap: 0.9rem 2rem;
}

.wsk .wsk-field--anzahl .wsk-error {
    grid-column: 1 / -1;
    margin-top: 0;
}

.wsk .wsk-field__control {
    min-width: 0;
}

.wsk .wsk-counter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem clamp(0.6rem, 1.6vw, 1rem);
}

.wsk .wsk-hexbtn {
    position: relative;
    display: grid;
    width: 3.4rem;
    height: 2.95rem;
    flex: none;
    place-items: center;
    padding: 0;
    border: 0;
    background: none;
    color: var(--wsk-ink);
    cursor: pointer;
    touch-action: manipulation;
}

.wsk .wsk-hexbtn__shape {
    position: absolute;
    inset: 0;
    background: var(--wsk-mist);
    clip-path: var(--wsk-hex);
    transition: background-color 160ms ease;
}

.wsk .wsk-hexbtn::before,
.wsk .wsk-hexbtn::after {
    position: relative;
    z-index: 1;
    grid-area: 1 / 1;
    width: 13px;
    height: 2px;
    background: var(--wsk-ink);
    content: "";
}

.wsk .wsk-hexbtn--plus::after {
    transform: rotate(90deg);
}

.wsk .wsk-hexbtn--minus::after {
    display: none;
}

.wsk .wsk-hexbtn:not([aria-disabled="true"]):active .wsk-hexbtn__shape {
    background: var(--wsk-mint);
}

.wsk .wsk-hexbtn[aria-disabled="true"] {
    cursor: not-allowed;
}

.wsk .wsk-hexbtn[aria-disabled="true"]::before,
.wsk .wsk-hexbtn[aria-disabled="true"]::after {
    opacity: 0.35;
}

.wsk .wsk-hexbtn[aria-disabled="true"] .wsk-hexbtn__shape {
    background: var(--wsk-mist);
    opacity: 0.6;
}

@media (hover: hover) and (pointer: fine) {
    .wsk .wsk-hexbtn:not([aria-disabled="true"]):hover .wsk-hexbtn__shape {
        background: var(--wsk-mist-strong);
    }

    .wsk .wsk-hexbtn:not([aria-disabled="true"]):active .wsk-hexbtn__shape {
        background: var(--wsk-mint);
    }
}

.wsk .wsk-counter__value {
    display: flex;
    min-width: 8.5rem;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0 0.35rem 0.15rem;
    border-bottom: 1px solid var(--wsk-line-strong);
}

.wsk .wsk-counter__value:has(:focus-visible) {
    outline: 3px solid var(--wsk-mint);
    outline-offset: 4px;
    box-shadow: 0 0 0 2px var(--wsk-ink);
}

.wsk .wsk-counter__input {
    width: 2.3ch;
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--wsk-ink);
    font-size: 2.75rem;
    font-stretch: 76%;
    font-variant-numeric: tabular-nums;
    font-weight: 560;
    letter-spacing: -0.04em;
    line-height: 1.1;
    text-align: right;
    appearance: textfield;
    -moz-appearance: textfield;
}

.wsk .wsk-counter__input::-webkit-inner-spin-button,
.wsk .wsk-counter__input::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.wsk .wsk-counter__input:focus-visible {
    outline: none;
    box-shadow: none;
}

.wsk .wsk-counter__input:disabled {
    opacity: 0.45;
}

.wsk .wsk-counter__unit {
    font-size: 1.05rem;
    font-weight: 600;
}

.wsk .wsk-counter__split {
    margin: 0.65rem 0 0;
    color: var(--wsk-muted);
    font-size: 0.88rem;
    line-height: 1.45;
}

/* Kurzer Hinweis, wenn ein getippter Wert angepasst wurde (Grenze oder „Mehr als …“) */
.wsk .wsk-counter__hinweis {
    margin: 0.65rem 0 0;
    padding-left: 0.7rem;
    border-left: 3px solid var(--wsk-mint);
    color: var(--wsk-ink);
    font-size: 0.88rem;
    font-weight: 560;
    line-height: 1.45;
    animation: wsk-fade 200ms var(--wsk-ease) both;
}

.wsk .wsk-check {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.4rem;
    color: var(--wsk-ink);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 560;
    line-height: 1.35;
}

.wsk .wsk-check:has(:focus-visible),
.wsk .wsk-consent:has(:focus-visible) {
    outline: 3px solid var(--wsk-mint);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--wsk-ink);
}

/* Kontakt */
.wsk .wsk-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.35rem 1.25rem;
    margin-top: clamp(1.4rem, 2.6vw, 2rem);
}

.wsk .wsk-form__full {
    grid-column: 1 / -1;
}

.wsk .wsk-form .wsk-field {
    margin: 0;
}

.wsk .wsk-input-label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.1rem 0.5rem;
    margin: 0 0 0.45rem;
    padding: 0;
    color: var(--wsk-ink);
    font-size: 0.95rem;
    font-weight: 620;
    line-height: 1.35;
}

.wsk .wsk-input-label small {
    color: var(--wsk-muted);
    font-size: 0.84rem;
    font-weight: 500;
}

.wsk .wsk-input {
    display: block;
    width: 100%;
    min-height: 3.25rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--wsk-line-strong);
    border-radius: 0;
    background: var(--wsk-white);
    color: var(--wsk-ink);
    font-size: 1rem;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color 160ms ease;
}

.wsk .wsk-input::placeholder {
    color: #69726e;
    opacity: 1;
}

.wsk .wsk-input:focus-visible {
    border-color: var(--wsk-ink);
    outline-offset: 2px;
    box-shadow: 0 0 0 1px var(--wsk-ink);
}

.wsk .wsk-input[aria-invalid="true"] {
    border-color: var(--wsk-error);
    box-shadow: inset 3px 0 0 var(--wsk-error);
}

@media (hover: hover) and (pointer: fine) {
    .wsk .wsk-input:hover {
        border-color: var(--wsk-ink);
    }
}

.wsk textarea.wsk-input {
    min-height: 7rem;
    resize: vertical;
}

.wsk .wsk-help {
    margin: 0.45rem 0 0;
    color: var(--wsk-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.wsk .wsk-segments {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border: 1px solid var(--wsk-line-strong);
}

/* Segment: Die Textfläche füllt das ganze Feld, so tragen Wahl und Fokus ohne :has() (Geschwister-Selektor). */
.wsk .wsk-segment {
    position: relative;
    display: grid;
    min-height: 3rem;
    padding: 0;
    border-left: 1px solid var(--wsk-line-mid);
    color: var(--wsk-ink);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 560;
    line-height: 1.25;
    text-align: center;
}

.wsk .wsk-segment > .wsk-hidden-input + span {
    display: grid;
    place-items: center;
    padding: 0.55rem 0.6rem;
    transition: background-color 160ms ease, color 160ms ease;
}

.wsk .wsk-segment:first-child {
    border-left: 0;
}

.wsk .wsk-segment > .wsk-hidden-input:checked + span {
    background: var(--wsk-ink);
    color: var(--wsk-white);
}

.wsk .wsk-segment:focus-within {
    z-index: 1;
}

.wsk .wsk-segment > .wsk-hidden-input:focus-visible + span {
    outline: 3px solid var(--wsk-mint);
    outline-offset: 1px;
}

@media (hover: hover) and (pointer: fine) {
    .wsk .wsk-segment:hover > .wsk-hidden-input:not(:checked) + span {
        background: var(--wsk-mist);
    }
}

.wsk .wsk-consent {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 0.8rem;
    padding: 0.35rem 0;
    color: var(--wsk-text);
    cursor: pointer;
    font-size: 0.92rem;
    line-height: 1.5;
}

.wsk .wsk-consent .wsk-mark {
    margin-top: 0.05rem;
}

.wsk .wsk-consent .wsk-hidden-input[aria-invalid="true"] ~ .wsk-mark {
    background: var(--wsk-error);
}

.wsk .wsk-consent a {
    color: var(--wsk-ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

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

/* Aktionen: Zurück links, Weiter rechts in Daumennähe */
.wsk .wsk-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    margin-top: clamp(1.7rem, 3.2vw, 2.4rem);
    padding-top: 1.3rem;
    border-top: 1px solid var(--wsk-line);
}

.wsk .wsk-nav__main {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-left: auto;
}

.wsk .wsk-nav--solo {
    justify-content: flex-start;
}

.wsk .wsk-nav--solo .wsk-nav__main {
    margin-left: 0;
}

.wsk .wsk-btn {
    --cut: 13px;
    position: relative;
    display: inline-flex;
    max-width: 100%;
    min-height: 3.375rem;
    align-items: center;
    justify-content: center;
    gap: 0.95rem;
    padding: 0.95rem 1.5rem 0.95rem 1.4rem;
    border: 0;
    border-radius: 0;
    background: var(--wsk-mint);
    color: var(--wsk-ink);
    cursor: pointer;
    font-size: 0.98rem;
    font-weight: 620;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut) * 0.577) 100%, 0 100%);
    transition: background-color 220ms ease, color 220ms ease;
}

.wsk .wsk-btn--ink {
    background: var(--wsk-ink);
    color: var(--wsk-white);
}

.wsk .wsk-btn__slash {
    display: inline-block;
    width: 4px;
    height: 0.95em;
    flex: none;
    background: currentColor;
    transform: skewX(-30deg);
    transition: box-shadow 300ms var(--wsk-ease), translate 300ms var(--wsk-ease);
}

.wsk .wsk-btn:focus-visible {
    clip-path: none;
}

.wsk .wsk-btn:focus-visible .wsk-btn__slash {
    box-shadow: 7px 0 0 currentColor;
    translate: -3px 0;
}

.wsk .wsk-btn[aria-busy="true"] {
    cursor: progress;
}

.wsk .wsk-btn[aria-busy="true"] .wsk-btn__slash {
    animation: wsk-busy 900ms var(--wsk-ease) infinite alternate;
}

@keyframes wsk-busy {
    to {
        box-shadow: 7px 0 0 currentColor;
        translate: -3px 0;
    }
}

@media (hover: hover) and (pointer: fine) {
    .wsk .wsk-btn:not([aria-disabled="true"]):hover {
        background: var(--wsk-ink);
        color: var(--wsk-mint);
    }

    .wsk .wsk-btn--ink:not([aria-disabled="true"]):hover {
        background: var(--wsk-mint);
        color: var(--wsk-ink);
    }

    .wsk .wsk-btn:not([aria-disabled="true"]):hover .wsk-btn__slash {
        box-shadow: 7px 0 0 currentColor;
        translate: -3px 0;
    }
}

.wsk .wsk-textbtn {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding: 0.4rem 0;
    border: 0;
    background: none;
    color: var(--wsk-ink);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
}

@media (hover: hover) and (pointer: fine) {
    .wsk .wsk-textbtn:hover {
        text-decoration-thickness: 2px;
    }
}

/* Bereit und Ergebnis links */
.wsk .wsk-kopie {
    margin: 1rem 0 0;
    color: var(--wsk-muted);
    font-size: 0.88rem;
    line-height: 1.5;
}

.wsk .wsk-kopie strong {
    color: var(--wsk-ink);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.wsk .wsk-note {
    max-width: 60ch;
    margin: 1.1rem 0 0;
    padding: 0.85rem 1rem;
    border-left: 3px solid var(--wsk-ink);
    background: var(--wsk-mist);
    color: var(--wsk-ink);
    font-size: 0.95rem;
    line-height: 1.55;
}

.wsk .wsk-block {
    margin-top: clamp(1.7rem, 3vw, 2.4rem);
    padding-top: 1.2rem;
    border-top: 1px solid var(--wsk-line);
}

.wsk .wsk-block__title {
    margin: 0;
    color: var(--wsk-ink);
    font-size: 1.1rem;
    font-weight: 620;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.wsk .wsk-hexlist {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1.5rem;
    margin: 0.9rem 0 0;
    padding: 0;
    list-style: none;
}

.wsk .wsk-hexlist li {
    position: relative;
    margin: 0;
    padding-left: 1.6rem;
    color: var(--wsk-text);
    font-size: 0.95rem;
    line-height: 1.5;
}

.wsk .wsk-hexlist li::before {
    position: absolute;
    top: 0.42em;
    left: 0;
    width: 0.85rem;
    aspect-ratio: 2 / 1.732;
    background: var(--wsk-teal);
    content: "";
    clip-path: var(--wsk-hex);
}

.wsk .wsk-next {
    position: relative;
    display: grid;
    gap: 1rem;
    margin: 1.05rem 0 0;
    padding: 0;
    list-style: none;
}

.wsk .wsk-next::before {
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: calc(1.1rem - 0.5px);
    width: 1px;
    background: var(--wsk-line-mid);
    content: "";
}

.wsk .wsk-next li {
    position: relative;
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr);
    align-items: start;
    gap: 0.9rem;
    margin: 0;
}

.wsk .wsk-next__node {
    display: grid;
    width: 2.2rem;
    aspect-ratio: 2 / 1.732;
    place-items: center;
    background: var(--wsk-mist-strong);
    color: var(--wsk-ink);
    clip-path: var(--wsk-hex);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.wsk .wsk-next li:first-child .wsk-next__node {
    background: var(--wsk-mint);
}

.wsk .wsk-next p {
    max-width: 56ch;
    margin: 0.1rem 0 0;
    color: var(--wsk-text);
    font-size: 0.95rem;
    line-height: 1.55;
}

.wsk .wsk-termin {
    margin-top: 1.4rem;
}

.wsk .wsk-studenten {
    margin-top: clamp(1.5rem, 3vw, 2.1rem);
    padding: 1rem 1.15rem 0.6rem;
    border: 1px solid var(--wsk-line);
}

.wsk .wsk-studenten p {
    max-width: 60ch;
    margin: 0;
    color: var(--wsk-text);
    font-size: 0.92rem;
    line-height: 1.55;
}

.wsk .wsk-studenten a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--wsk-ink);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.25em;
}

.wsk .wsk-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    margin-top: clamp(1.7rem, 3.2vw, 2.4rem);
    padding-top: 1.3rem;
    border-top: 1px solid var(--wsk-line);
}

.wsk .wsk-mobile-next {
    display: none;
}

/* --------------------------------------------- Werkbank „Ihr Projekt“ */
.wsk .wsk-project {
    --c: 2.25rem;
    position: sticky;
    top: var(--wsk-sticky-top);
    min-width: 0;
    padding: 1.15rem clamp(1.15rem, 2vw, 1.75rem) 1rem;
    background: var(--wsk-ink);
    color: var(--wsk-white);
    clip-path: polygon(0 0, calc(100% - var(--c) * 0.577) 0, 100% var(--c), 100% 100%, 0 100%);
    container: werkbank / inline-size;
}

.wsk .wsk-project__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.6rem;
    padding-right: 1rem;
}

.wsk .wsk-project__title {
    margin: 0;
    color: var(--wsk-white);
    font-size: 1.6rem;
    font-stretch: 80%;
    font-weight: 560;
    letter-spacing: -0.035em;
    line-height: 1;
}

.wsk .wsk-project__meta {
    margin: 0;
    color: var(--wsk-muted-dark);
    font-size: 0.86rem;
    font-weight: 520;
    line-height: 1.3;
    text-align: right;
}

/* Formelglieder als senkrechte Rechnung in der Formel-Typo: + … = */
.wsk .wsk-terms {
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--wsk-line-dark);
    list-style: none;
}

.wsk .wsk-term {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid var(--wsk-line-dark);
}

.wsk .wsk-term::before {
    display: none;
}

/* Feste Raster: Zeile 1 Titel, Betrag, Aufklapper; Zeile 2 Zusammenfassung über die ganze Breite */
.wsk .wsk-term__row {
    display: grid;
    grid-template-areas:
        "op sw title amount toggle"
        ". . value value value";
    grid-template-columns: 1.1rem 1.2rem minmax(0, 1fr) auto 1.2rem;
    align-items: center;
    column-gap: 0.65rem;
    row-gap: 0.1rem;
    min-height: 44px;
    padding: 0.38rem 0 0.42rem;
    list-style: none;
}

.wsk .wsk-term__row::-webkit-details-marker {
    display: none;
}

.wsk .wsk-term__row::marker {
    content: "";
}

.wsk summary.wsk-term__row {
    cursor: pointer;
}

.wsk .wsk-term__op {
    grid-area: op;
    color: var(--wsk-teal);
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    text-align: center;
}

.wsk .wsk-swatch {
    grid-area: sw;
    width: 1.2rem;
    height: auto;
    overflow: visible;
    transition: opacity 200ms ease;
}

/* Der Titel darf umbrechen und trennen, der Betrag nie: Er bleibt in Zeile 1 neben dem Titel. */
.wsk .wsk-term__title {
    grid-area: title;
    min-width: 0;
    color: var(--wsk-bright-dark);
    font-size: clamp(1.25rem, 1.55vw, 1.42rem);
    font-stretch: 80%;
    font-weight: 560;
    letter-spacing: -0.03em;
    line-height: 1.05;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* Ohne Zeilenbegrenzung: Das Skript kürzt auf etwa zwei Zeilen; bei größeren Textabständen (WCAG 1.4.12) darf es mehr werden. */
.wsk .wsk-term__value {
    grid-area: value;
    display: block;
    min-width: 0;
    color: var(--wsk-on-dark);
    font-size: 0.86rem;
    line-height: 1.38;
    overflow-wrap: anywhere;
}

.wsk .wsk-term:not(.is-filled) .wsk-term__title {
    color: var(--wsk-muted-dark);
}

.wsk .wsk-term:not(.is-filled) .wsk-term__value {
    color: var(--wsk-muted-dark);
}

.wsk .wsk-term:not(.is-filled) .wsk-swatch {
    opacity: 0.4;
}

.wsk .wsk-term.is-new .wsk-term__value {
    animation: wsk-fade 260ms var(--wsk-ease) both;
}

.wsk .wsk-term__amount {
    grid-area: amount;
    justify-self: end;
    color: var(--wsk-white);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    font-weight: 620;
    line-height: 1.3;
    text-align: right;
    white-space: nowrap;
}

.wsk .wsk-term__amount.is-reserved {
    visibility: hidden;
}

.wsk .wsk-term__amount.is-stale {
    color: var(--wsk-muted-dark);
}

.wsk .wsk-term__amount.is-in {
    animation: wsk-fade 280ms var(--wsk-ease) both;
    animation-delay: calc(var(--i, 0) * 45ms + 300ms);
}

.wsk .wsk-term__amount small {
    color: var(--wsk-on-dark);
    font-size: 0.8rem;
    font-weight: 520;
}

/* Aufklapper: Winkel im Sechseck, damit er nicht mit den Pluszeichen der Formel konkurriert */
.wsk .wsk-term__toggle {
    position: relative;
    display: grid;
    grid-area: toggle;
    width: 1.2rem;
    aspect-ratio: 2 / 1.732;
    place-items: center;
    background: var(--wsk-ink-raised);
    clip-path: var(--wsk-hex);
    transition: background-color 200ms ease;
}

.wsk .wsk-term__toggle.is-leer {
    visibility: hidden;
}

.wsk .wsk-term__toggle::before {
    width: 5px;
    height: 5px;
    border: solid var(--wsk-white);
    border-width: 0 1.5px 1.5px 0;
    content: "";
    transform: translateY(-1px) rotate(45deg);
    transition: transform 200ms var(--wsk-ease);
}

.wsk details[open] > summary .wsk-term__toggle {
    background: var(--wsk-mint);
}

.wsk details[open] > summary .wsk-term__toggle::before {
    border-color: var(--wsk-ink);
    transform: translateY(1px) rotate(-135deg);
}

@media (hover: hover) and (pointer: fine) {
    .wsk summary.wsk-term__row:hover .wsk-term__title {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.15em;
    }
}

.wsk .wsk-project summary:focus-visible {
    outline-offset: 2px;
    box-shadow: none;
}

.wsk .wsk-term__lines {
    display: grid;
    gap: 0.3rem;
    margin: 0 0 0.65rem var(--wsk-indent);
    padding: 0;
    list-style: none;
}

/* Posten links, Betrag rechts; fehlt der Platz, rückt der Betrag rechtsbündig unter den Text (nie abgeschnitten). */
.wsk .wsk-term__lines li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 1rem;
    margin: 0;
    color: var(--wsk-on-dark);
    font-size: 0.84rem;
    line-height: 1.4;
}

.wsk .wsk-term__lines li span:first-child {
    flex: 1 1 9rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.wsk .wsk-term__lines li span:last-child {
    flex: none;
    margin-left: auto;
    color: var(--wsk-bright-dark);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

@keyframes wsk-fade {
    from {
        opacity: 0;
    }
}

/* Wabe: Spirale aus der Mitte, Zellen in den Farben der Formelglieder */
.wsk .wsk-comb {
    position: relative;
    height: var(--wsk-comb-h, 13rem);
    margin: 0.7rem 0 0.25rem;
}

.wsk .wsk-comb__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.wsk .wsk-comb__jig polygon {
    fill: none;
    stroke: rgba(195, 206, 201, 0.2);
    stroke-width: 1;
}

.wsk .wsk-comb__free {
    fill: none;
    stroke: rgba(195, 206, 201, 0.5);
    stroke-dasharray: 3 3.5;
    stroke-width: 1.2;
    transition: transform 280ms var(--wsk-ease);
}

.wsk .wsk-cell {
    transition: opacity 160ms ease;
}

.wsk .wsk-comb[data-hl] .wsk-cell {
    opacity: 0.22;
}

.wsk .wsk-comb[data-hl] .wsk-cell.is-hl {
    opacity: 1;
}

.wsk .wsk-c {
    stroke-linejoin: round;
    stroke-width: 1.5;
}

.wsk .wsk-cell text {
    fill: var(--wsk-bright-dark);
    font-family: var(--wsk-font);
    font-size: 11px;
    font-weight: 650;
    dominant-baseline: central;
    text-anchor: middle;
}

.wsk .wsk-c--grundpaket {
    fill: var(--wsk-mint);
    stroke: var(--wsk-mint);
}

.wsk .wsk-c--umfang {
    fill: var(--wsk-teal);
    stroke: var(--wsk-teal);
}

.wsk .wsk-c--funktionen {
    fill: rgba(34, 230, 189, 0.16);
    stroke: var(--wsk-mint);
}

.wsk .wsk-c--inhalte {
    fill: var(--wsk-navy);
    stroke: var(--wsk-teal);
}

.wsk .wsk-c--anbindungen {
    fill: rgba(255, 255, 255, 0.06);
    stroke: rgba(255, 255, 255, 0.45);
}

/* Immer dabei: grau gefüllt ohne Kontur, deutlich anders als gewählte Funktionen */
.wsk .wsk-c--fest {
    fill: rgba(195, 206, 201, 0.24);
    stroke: rgba(195, 206, 201, 0);
}

.wsk .wsk-c--individuell {
    fill: none;
    stroke: var(--wsk-mint);
    stroke-dasharray: 3.5 3;
}

.wsk .wsk-c--betrieb {
    fill: none;
    stroke: rgba(195, 206, 201, 0.45);
}

.wsk .wsk-c--mehr {
    fill: var(--wsk-ink-soft);
    stroke: rgba(195, 206, 201, 0.4);
}

.wsk .wsk-comb__legend {
    display: flex;
    min-height: 1.15rem;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1.1rem;
    margin: 0 0 0.6rem;
    color: var(--wsk-muted-dark);
    font-size: 0.78rem;
    line-height: 1.4;
}

.wsk .wsk-comb__legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.wsk .wsk-comb__legend .wsk-swatch {
    width: 0.95rem;
}

.wsk .wsk-comb__count {
    margin-right: auto;
    color: var(--wsk-on-dark);
    font-variant-numeric: tabular-nums;
}

/* Summe und Mint-Platte */
.wsk .wsk-sum {
    --wsk-cx: 56%;
    position: relative;
}

.wsk .wsk-sum__label {
    position: relative;
    display: grid;
    grid-template-columns: 1.1rem 1.2rem minmax(0, 1fr);
    align-items: center;
    column-gap: 0.65rem;
    margin: 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--wsk-line-dark);
    color: var(--wsk-bright-dark);
    font-size: clamp(1.25rem, 1.55vw, 1.42rem);
    font-stretch: 80%;
    font-weight: 560;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.wsk .wsk-sum__label i {
    color: var(--wsk-teal);
    font-size: 1.9rem;
    font-stretch: 100%;
    font-style: normal;
    font-weight: 400;
    line-height: 0.9;
    text-align: center;
}

.wsk .wsk-sum__label span {
    grid-column: 3;
}

/* Nach dem Schnitt bleibt eine kurze Mint-Spur im Summenstrich stehen. */
.wsk .wsk-sum__label::after {
    position: absolute;
    top: -1px;
    left: var(--wsk-cx);
    width: 5px;
    height: 15px;
    background: var(--wsk-mint);
    content: "";
    opacity: 0;
    transform: translate(-50%, -50%) skewX(-30deg);
}

.wsk.wsk--ergebnis:not(.wsk--aendern) .wsk-sum__label::after {
    opacity: 1;
    transition: opacity 240ms ease 380ms;
}

/* Die Bühne ist so hoch wie die Platte; die Spanne liegt im Fluss darüber und darf die Bühne nur dann strecken,
   wenn sie selbst höher wird (große Textabstände, WCAG 1.4.12), statt in „Nach dem Start“ zu laufen. */
.wsk .wsk-sum__stage {
    position: relative;
    display: grid;
    min-height: var(--wsk-plate-h);
    margin-top: 0.5rem;
}

.wsk .wsk-sum__result {
    position: relative;
    grid-area: 1 / 1;
    display: grid;
    align-content: center;
    gap: 0.1rem;
    padding-left: var(--wsk-indent);
}

.wsk .wsk-sum__result:focus {
    outline: none;
    box-shadow: none;
}

.wsk .wsk-sum__result:focus-visible {
    outline: 3px solid var(--wsk-mint);
    outline-offset: 2px;
}

.wsk .wsk-sum__netto {
    margin: 0;
}

.wsk .wsk-sum__netto strong {
    display: block;
    color: var(--wsk-mint);
    font-size: clamp(2.25rem, 12.4cqi, 4rem);
    font-stretch: 76%;
    font-variant-numeric: tabular-nums;
    font-weight: 560;
    letter-spacing: -0.045em;
    line-height: 0.95;
}

.wsk .wsk-sum__unit {
    margin: 0.2rem 0 0.3rem;
    color: var(--wsk-on-dark);
    font-size: 0.86rem;
    line-height: 1.3;
}

.wsk .wsk-sum__tax {
    display: grid;
    gap: 0.1rem;
    margin: 0;
    padding-right: calc(1.2rem + 0.65rem);
}

.wsk .wsk-sum__tax div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 1rem;
    color: var(--wsk-on-dark);
    font-size: 0.86rem;
    line-height: 1.4;
}

.wsk .wsk-sum__tax dt,
.wsk .wsk-sum__tax dd {
    margin: 0;
}

.wsk .wsk-sum__tax dd {
    margin-left: auto;
    color: var(--wsk-bright-dark);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Ändern-Modus: die alte Spanne bleibt gedimmt stehen */
.wsk .wsk-sum__result.is-stale .wsk-sum__netto strong {
    color: var(--wsk-muted-dark);
}

/* Gedimmt über die Farbe, nicht über Deckkraft: muted-dark auf Ink hält 8:1 (WCAG 1.4.3). */
.wsk .wsk-sum__result.is-stale .wsk-sum__tax div,
.wsk .wsk-sum__result.is-stale .wsk-sum__tax dd {
    color: var(--wsk-muted-dark);
}

.wsk .wsk-sum__unit.is-stale-note {
    color: var(--wsk-mint);
    font-weight: 560;
}

.wsk .wsk-sum__after:empty {
    display: none;
}

.wsk .wsk-sum__after {
    margin-top: 0.7rem;
    border-top: 1px solid var(--wsk-line-dark);
}

.wsk .wsk-sum__after .wsk-term {
    border-bottom: 0;
}

.wsk .wsk-sum__after .wsk-term__amount {
    line-height: 1.25;
}

.wsk .wsk-sum__fuss {
    margin: 0.55rem 0 0;
    color: var(--wsk-muted-dark);
    font-size: 0.8rem;
    line-height: 1.4;
}

/* Die Platte: Mint, Spitzen links und rechts wie das Zeichen, Schnittlinie im 60°-Winkel.
   Der Navy-Schrägstrich aus dem Logo teilt sie; die Hälften gleiten senkrecht zur Linie auseinander. */
.wsk .wsk-cover {
    --cc: calc(var(--wsk-plate-h) * 0.2887);
    --cx: var(--wsk-cx);
    position: absolute;
    z-index: 1;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--wsk-ink);
    cursor: default;
    font: inherit;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.wsk .wsk-cover:disabled {
    opacity: 1;
}

.wsk .wsk-cover:is([data-state="ready"], [data-state="cutting"]) {
    cursor: pointer;
    touch-action: pan-y;
}

.wsk .wsk-cover.is-dragging {
    cursor: grabbing;
}

.wsk .wsk-cover:focus-visible {
    outline-offset: 4px;
    box-shadow: none;
}

.wsk .wsk-cover__plate,
.wsk .wsk-cover__half {
    position: absolute;
    inset: 0;
    background: var(--wsk-mint);
}

.wsk .wsk-cover__plate {
    clip-path: polygon(var(--cc) 0, calc(100% - var(--cc)) 0, 100% 50%, calc(100% - var(--cc)) 100%, var(--cc) 100%, 0 50%);
}

.wsk .wsk-cover__half {
    opacity: 0;
}

.wsk .wsk-cover__half--a {
    clip-path: polygon(var(--cc) 0, calc(var(--cx) + var(--cc)) 0, calc(var(--cx) - var(--cc)) 100%, var(--cc) 100%, 0 50%);
}

.wsk .wsk-cover__half--b {
    clip-path: polygon(calc(var(--cx) + var(--cc)) 0, calc(100% - var(--cc)) 0, 100% 50%, calc(100% - var(--cc)) 100%, calc(var(--cx) - var(--cc)) 100%);
}

.wsk .wsk-cover[data-state="split"] .wsk-cover__plate,
.wsk .wsk-cover[data-state="split"] .wsk-cover__perf {
    visibility: hidden;
}

.wsk .wsk-cover[data-state="split"] .wsk-cover__half {
    opacity: 1;
}

.wsk .wsk-cover__text {
    position: absolute;
    top: 50%;
    left: calc(var(--cc) * 0.62 + 0.35rem);
    display: grid;
    width: calc(var(--cx) - var(--cc) * 0.62 - 1.75rem);
    gap: 0.25rem;
    font-size: 0.98rem;
    font-weight: 620;
    line-height: 1.25;
    transform: translateY(-50%);
}

.wsk .wsk-cover__hint {
    font-size: 0.78rem;
    font-weight: 540;
    line-height: 1.3;
}

.wsk .wsk-cover__hint-kurz {
    display: none;
}

/* Schnittlinie: kräftige Perforation, in Bereitschaft deutlich */
.wsk .wsk-cover__perf,
.wsk .wsk-cover__slash,
.wsk .wsk-cover__track {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--cx);
    transform: skewX(-30deg);
}

.wsk .wsk-cover__perf {
    width: 2px;
    margin-left: -1px;
    background: repeating-linear-gradient(to bottom, var(--wsk-ink) 0 5px, transparent 5px 10px);
    opacity: 0.28;
    pointer-events: none;
    transition: opacity 240ms ease;
}

.wsk .wsk-cover:is([data-state="ready"], [data-state="cutting"]) .wsk-cover__perf {
    opacity: 0.85;
}

.wsk .wsk-cover__slash {
    width: 10px;
    margin-left: -5px;
    background: var(--wsk-navy);
    clip-path: inset(100% 0 0% 0);
    pointer-events: none;
}

.wsk .wsk-cover[data-state="ready"]:not(.is-dragging) .wsk-cover__slash {
    transition: clip-path 260ms var(--wsk-ease);
}

/* Korridor entlang der Linie (44 px): nur hier beginnt per Touch ein Schnitt. */
.wsk .wsk-cover__track {
    z-index: 2;
    display: none;
    width: 44px;
    margin-left: -22px;
    touch-action: none;
}

/* Griff in Logoform (Sechseck mit Schrägstrich) am unteren Linienende, Trefferfläche 44 px */
.wsk .wsk-cover__grip {
    position: absolute;
    z-index: 3;
    top: calc(100% - 44px);
    left: calc(var(--cx) - var(--wsk-plate-h) * 0.2887 + 12.7px - 22px);
    display: none;
    width: 44px;
    height: 44px;
    place-items: center;
    touch-action: none;
}

.wsk .wsk-cover[data-state="ready"]:not(.is-dragging) .wsk-cover__grip {
    transition: transform 320ms var(--wsk-ease);
}

.wsk .wsk-cover__grip-hex {
    position: relative;
    display: grid;
    width: 34px;
    aspect-ratio: 2 / 1.732;
    place-items: center;
    background: var(--wsk-navy);
    clip-path: var(--wsk-hex);
}

.wsk .wsk-cover__grip-hex i {
    display: block;
    width: 5px;
    height: 17px;
    background: var(--wsk-mint);
    transform: skewX(-30deg);
}

.wsk .wsk-cover:is([data-state="ready"], [data-state="cutting"]) .wsk-cover__track {
    display: block;
}

.wsk .wsk-cover:is([data-state="ready"], [data-state="cutting"]) .wsk-cover__grip {
    display: grid;
}

@media (hover: hover) and (pointer: fine) {
    .wsk .wsk-cover[data-state="ready"]:not(.is-dragging):hover .wsk-cover__slash {
        clip-path: inset(72% 0 0% 0);
    }

    .wsk .wsk-cover[data-state="ready"]:not(.is-dragging):hover .wsk-cover__grip {
        transform: translate(4px, -6.9px);
    }
}

/* Einmal nach dem Absenden: die Linie zeichnet sich, der Griff stupst an. Kein Dauerpulsieren. */
.wsk .wsk-cover.is-cue .wsk-cover__perf {
    animation: wsk-perf-in 560ms var(--wsk-ease) both;
}

.wsk .wsk-cover.is-cue .wsk-cover__grip {
    animation: wsk-nudge 900ms var(--wsk-ease) 520ms both;
}

@keyframes wsk-perf-in {
    from {
        clip-path: inset(100% 0 0 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes wsk-nudge {
    0%,
    100% {
        transform: translate(0, 0);
    }

    30% {
        transform: translate(6px, -10.4px);
    }

    55% {
        transform: translate(0, 0);
    }

    75% {
        transform: translate(3px, -5.2px);
    }
}

/* Schmale Werkbank: Schnitt nach rechts versetzt, damit der Text links höchstens zwei Zeilen braucht */
@container werkbank (max-width: 27rem) {
    .wsk .wsk-sum {
        --wsk-cx: 72%;
    }

    .wsk .wsk-cover__text {
        font-size: 0.92rem;
    }
}

/* Touch: „Tippen“ statt „Klicken“ */
@media (pointer: coarse) {
    .wsk .wsk-cover .wsk-cover__hint-lang {
        display: none;
    }

    .wsk .wsk-cover .wsk-cover__hint-kurz {
        display: inline;
    }
}

/* Arbeitsblatt schmal (Handy, aber auch 1024 px mit Panel daneben): Knoten ohne Namen */
@container blatt (max-width: 42rem) {
    .wsk .wsk-route {
        --node-w: 1.8rem;
        padding-block: 0.55rem 0.4rem;
    }

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

/* Zähler als Datenblattzeile, sobald das Blatt breit genug ist */
@container blatt (min-width: 40rem) {
    .wsk .wsk-field--anzahl {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        padding-top: 1.1rem;
        border-top: 1px solid var(--wsk-line);
    }

    .wsk .wsk-field--anzahl + .wsk-field--anzahl {
        margin-top: 1.4rem;
    }

    .wsk .wsk-field--anzahl .wsk-field__control {
        min-width: 15rem;
    }
}

/* Schmales Blatt: Querkarten, eine Spalte für Listen, Formular und Aufzählungen */
@container blatt (max-width: 36rem) {
    .wsk .wsk-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.65rem;
    }

    .wsk .wsk-card {
        --c: 1.1rem;
        min-height: 0;
        grid-template-columns: 3rem minmax(0, 1fr) auto;
        grid-template-rows: auto;
        align-items: start;
        gap: 0 0.9rem;
        padding: 0.9rem 1rem 0.95rem;
    }

    .wsk .wsk-card__icon {
        grid-column: 1;
        grid-row: 1;
        padding: 0.1rem 0 0;
    }

    .wsk .wsk-icon {
        width: 3rem;
        height: 3rem;
    }

    .wsk .wsk-card__body {
        grid-column: 2;
        grid-row: 1;
        gap: 0.3rem;
    }

    .wsk .wsk-card > .wsk-mark {
        grid-column: 3;
        grid-row: 1;
        margin-top: 0.15rem;
    }

    .wsk .wsk-card__title {
        font-size: 1.25rem;
    }

    .wsk .wsk-card__text {
        font-size: 0.88rem;
        line-height: 1.45;
    }

    .wsk .wsk-options,
    .wsk .wsk-form,
    .wsk .wsk-hexlist {
        grid-template-columns: minmax(0, 1fr);
    }

    .wsk .wsk-segments {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wsk .wsk-segment:nth-child(3) {
        border-left: 0;
    }

    .wsk .wsk-segment:nth-child(n + 3) {
        border-top: 1px solid var(--wsk-line-mid);
    }

    .wsk .wsk-nav__main {
        flex: 1 1 auto;
    }

    .wsk .wsk-nav__main .wsk-btn:last-child {
        flex: 1 1 auto;
    }
}

/* ------------------------------------------------------------- Responsiv */
@media (max-width: 1180px) {
    .wsk-hero .wsk-hero__facts {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1023px) {
    .wsk-hero .wsk-hero__inner,
    .wsk .wsk-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .wsk-hero .wsk-hero__inner {
        grid-template-areas:
            "kicker"
            "title"
            "lead"
            "actions"
            "facts"
            "value"
            "formula";
    }

    .wsk-hero .wsk-hero__facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 1.5rem;
    }

    .wsk .wsk-project {
        position: relative;
        top: auto;
        margin-top: 1rem;
    }

    .wsk .wsk-final__next {
        display: none;
    }

    .wsk .wsk-mobile-next {
        display: block;
        margin-top: 1rem;
        padding: 0.2rem clamp(1.15rem, 2.6vw, 2.5rem) 1.6rem;
        border: 1px solid var(--wsk-line);
    }

    .wsk .wsk-mobile-next[hidden] {
        display: none;
    }

    .wsk .wsk-mobile-next .wsk-block {
        border-top: 0;
    }
}

@media (max-width: 640px) {
    .wsk,
    .wsk-hero {
        --wsk-gutter: 1.15rem;
    }

    .wsk-hero {
        padding-top: 6.6rem;
    }

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

    /* Handy: Blatt und Werkbank laufen bis an den Rand, damit die Knoten volle 44 px bekommen */
    .wsk .wsk-layout {
        padding-inline: 0;
    }

    .wsk .wsk-work {
        border-inline: 0;
    }

    .wsk .wsk-route {
        padding-inline: 0;
    }

    .wsk .wsk-body {
        padding-inline: var(--wsk-gutter);
    }

    .wsk .wsk-project {
        --c: 1.6rem;
        padding-inline: var(--wsk-gutter);
    }

    .wsk .wsk-mobile-next {
        padding-inline: var(--wsk-gutter);
        border-inline: 0;
    }

    .wsk .wsk-sum__result {
        padding-left: 0.2rem;
    }

    .wsk .wsk-sum__tax {
        padding-right: 0;
    }

    .wsk .wsk-term__row {
        column-gap: 0.55rem;
    }

    .wsk .wsk-actions .wsk-btn,
    .wsk .wsk-termin .wsk-btn {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .wsk .wsk-term__title,
    .wsk .wsk-sum__label {
        font-size: 1.2rem;
    }

    .wsk .wsk-term__amount {
        font-size: 0.88rem;
    }

    .wsk .wsk-term__row {
        grid-template-columns: 0.9rem 1.05rem minmax(0, 1fr) auto 1.1rem;
        column-gap: 0.5rem;
    }

    .wsk .wsk-term__toggle,
    .wsk .wsk-swatch {
        width: 1.05rem;
    }
}

@media (max-width: 380px) {
    .wsk .wsk-counter {
        gap: 0.75rem 0.55rem;
    }

    .wsk .wsk-hexbtn {
        width: 3.2rem;
        height: 2.78rem;
    }

    .wsk .wsk-counter__value {
        min-width: 6.25rem;
        gap: 0.4rem;
    }

    .wsk .wsk-counter__input {
        font-size: 2.4rem;
    }

    .wsk .wsk-counter__unit {
        font-size: 0.98rem;
    }

    .wsk .wsk-btn {
        padding-inline: 1.15rem 1.25rem;
    }

    .wsk .wsk-title {
        font-size: 1.8rem;
    }
}

/* Schmale Werkbank (Handy bis gut 380 px, Desktop knapp über 1024 px): kleinere Titel und Beträge, damit
   „Funktionsumfang“ und „Nach dem Start“ einzeilig neben dem Betrag Platz haben. Steht nach den Breakpoints oben. */
@container werkbank (max-width: 21.5rem) {
    .wsk .wsk-term__row {
        grid-template-columns: 0.8rem 1.05rem minmax(0, 1fr) auto 1.1rem;
        column-gap: 0.35rem;
    }

    .wsk .wsk-term__title {
        font-size: 1.05rem;
        letter-spacing: -0.025em;
    }

    .wsk .wsk-term__amount {
        font-size: 0.8rem;
    }

    .wsk .wsk-term__amount small {
        font-size: 0.72rem;
    }

    .wsk .wsk-term__toggle,
    .wsk .wsk-swatch {
        width: 1.05rem;
    }
}

/* Weniger Bewegung: keine Flüge, Zustände wechseln sofort. */
@media (prefers-reduced-motion: reduce) {
    .wsk *,
    .wsk *::before,
    .wsk *::after,
    .wsk-hero *,
    .wsk-hero *::before,
    .wsk-hero *::after {
        animation: none !important;
        transition: none !important;
    }
}