/* =========================================================================
   webseo.one Kostenrechner – Ratgeber „Website-Kosten“ unter dem Rechner

   Ruhig und redaktionell, in der Sprache des Rechners: Aufwandsformel, Sechsecke, 60°-Fasen, Mint nur für Akzent
   und Hauptaktion. Kühn ist der Ratgeber nur zweimal: die Formel als Datenblatt (Kostenfaktoren) und das dunkle
   Abschluss-Band mit der Mint-Platte. Bewegung nur als Antwort auf Hover, Fokus und Klick.

   Alles liegt unter .wsk-guide, Variablen mit Ersatzwerten wie in rechner.css. Jede Regel trägt mindestens zwei
   Klassen, damit Element-Regeln des Themes (Listen, Überschriften, Absätze, Links) nicht hineinwirken.
   ========================================================================= */

/* ---------------------------------------------------------------- Tokens */
.wsk-guide {
    --wsk-ink: var(--ink, #07110f);
    --wsk-ink-soft: #14211e;
    --wsk-space: #030807;
    --wsk-mint: var(--accent, #22e6bd);
    --wsk-teal: #33b4a2;
    /* Teal für Zeichen auf hellem Grund (Formel im Faktoren-Abschnitt): 3,9:1 auf Weiß, --wsk-teal nur 2,6:1 */
    --wsk-teal-strong: #24907f;
    --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-ease: cubic-bezier(0.23, 1, 0.32, 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);
    /* Raster des Ratgebers: H2-Spalte und Inhalt, Abstände, Fließtext */
    --g-cols: minmax(0, 5fr) minmax(0, 7fr);
    --g-gap: clamp(2rem, 5vw, 6rem);
    --g-space: clamp(4rem, 7.5vw, 7.5rem);
    --g-body: clamp(1.04rem, 0.99rem + 0.2vw, 1.1rem);
    --g-small: 0.95rem;
    /* Zeilenmaß für Fließtext: höchstens etwa 68 Zeichen je Zeile, im Mittel 58–64 (gemessen mit Instrument Sans bei
       1.440, 1.024 und 768 px). Eine Zahl, die jede Regel mit ihrer eigenen Schriftgröße multipliziert
       (calc(var(--g-measure) * 1em)). Bewusst nicht ch: ch ist die Breite der Ziffer 0, in Instrument Sans deutlich
       breiter als ein durchschnittliches Zeichen – 68ch ergaben bis zu 92 Zeichen. */
    --g-measure: 31;
    position: relative;
    background: var(--wsk-white);
    color: var(--wsk-ink);
    font-family: var(--wsk-font);
    font-synthesis: none;
    overflow-wrap: break-word;
    -webkit-font-smoothing: antialiased;
}

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

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

/* Sichtbarer Fokus: 3 px Mint, 2 px Ink */
.wsk-guide :focus-visible {
    outline: 3px solid var(--wsk-mint);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--wsk-ink);
}

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

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

.wsk-guide .wsk-guide__section {
    margin: 0;
    padding: 0;
    scroll-margin-top: 100px;
}

/* Gleiche Außenkanten und Maximalbreite wie der Rechner (1.480 px); Haarlinien nur über die Inhaltsbreite. */
.wsk-guide .wsk-guide__inner {
    margin-inline: max(var(--wsk-gutter), calc((100% - 92.5rem) / 2));
    padding-block: var(--g-space);
}

.wsk-guide .wsk-guide__section + .wsk-guide__section > .wsk-guide__inner {
    border-top: 1px solid var(--wsk-line);
}

/* ------------------------------------------------- Texte, Listen, Links */
.wsk-guide .wsk-guide__title {
    max-width: 16ch;
    margin: 0;
    padding: 0;
    color: var(--wsk-ink);
    font-family: inherit;
    font-size: clamp(2.1rem, 3.6vw, 3.4rem);
    font-stretch: 80%;
    font-style: normal;
    font-weight: 560;
    letter-spacing: -0.045em;
    line-height: 0.98;
    overflow-wrap: break-word;
    text-transform: none;
    text-wrap: balance;
}

.wsk-guide :is(.wsk-guide__subtitle, .wsk-guide__card-title, .wsk-guide__point-title, .wsk-guide__step-title, .wsk-guide__question, .wsk-guide__factor-title) {
    margin: 0;
    padding: 0;
    color: var(--wsk-ink);
    font-family: inherit;
    font-style: normal;
    font-weight: 600;
    overflow-wrap: break-word;
    text-transform: none;
    text-wrap: balance;
}

.wsk-guide .wsk-guide__subtitle {
    font-size: clamp(1.3rem, 1.45vw, 1.55rem);
    font-stretch: 84%;
    letter-spacing: -0.02em;
    line-height: 1.12;
}

/* Absätze ohne eigene Klasse (Einleitungen, Antworten, Faktoren); Lead, Autorenzeile und Hinweis haben eigene Regeln. */
.wsk-guide .wsk-guide__content > p:not([class]),
.wsk-guide .wsk-guide__text > p {
    max-width: calc(var(--g-measure) * 1em);
    margin: 0;
    padding: 0;
    color: var(--wsk-text);
    font-size: var(--g-body);
    line-height: 1.6;
}

.wsk-guide .wsk-guide__content > p:not([class]) + p:not([class]),
.wsk-guide .wsk-guide__text > p + p {
    margin-top: 0.85em;
}

.wsk-guide :is(.wsk-guide__toc-list, .wsk-guide__cards, .wsk-guide__hexlist, .wsk-guide__formula, .wsk-guide__effort-list, .wsk-guide__lines, .wsk-guide__checks, .wsk-guide__points, .wsk-guide__steps) {
    margin: 0;
    padding: 0;
    list-style: none;
}

.wsk-guide :is(.wsk-guide__toc-list, .wsk-guide__cards, .wsk-guide__hexlist, .wsk-guide__formula, .wsk-guide__effort-list, .wsk-guide__lines, .wsk-guide__checks, .wsk-guide__points, .wsk-guide__steps) > li {
    margin: 0;
    list-style: none;
}

/* Links im Fließtext: unterstrichen, im Ton des Textes */
.wsk-guide :is(p, li, td) a:not([class]) {
    color: var(--wsk-ink);
    font-weight: 560;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: text-decoration-thickness 160ms ease;
}

.wsk-guide :is(p, li, td) strong {
    color: var(--wsk-ink);
    font-weight: 650;
}

@media (hover: hover) and (pointer: fine) {
    .wsk-guide :is(p, li, td) a:not([class]):hover {
        text-decoration-thickness: 2px;
    }
}

/* Raster: H2 links, Einleitung und – wo es passt – Inhalt rechts */
.wsk-guide .wsk-guide__grid {
    display: grid;
    grid-template-columns: var(--g-cols);
    column-gap: var(--g-gap);
    align-items: start;
}

.wsk-guide .wsk-guide__content {
    min-width: 0;
    padding-top: 0.45rem;
}

/* ------------------------------------------- Buttons (Ink-Umriss, Fase) */
.wsk-guide .wsk-guide__btn {
    --cut: 13px;
    --bc: var(--wsk-ink);
    --bg: var(--wsk-white);
    position: relative;
    z-index: 0;
    display: inline-flex;
    max-width: 100%;
    min-height: 3.375rem;
    align-items: center;
    justify-content: center;
    gap: 0.95rem;
    padding: 0.85rem 1.5rem 0.85rem 1.4rem;
    border: 0;
    background: none;
    color: var(--wsk-ink);
    cursor: pointer;
    font-size: 0.98rem;
    font-weight: 620;
    line-height: 1.2;
    text-align: left;
    text-decoration: none;
    transition: color 220ms ease;
}

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

.wsk-guide .wsk-guide__btn::before {
    z-index: -2;
    inset: 0;
    background: var(--bc);
}

.wsk-guide .wsk-guide__btn::after {
    z-index: -1;
    inset: 1.5px;
    background: var(--bg);
    transition: background-color 220ms ease;
}

.wsk-guide .wsk-guide__btn--ink {
    --bg: var(--wsk-ink);
    color: var(--wsk-white);
}

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

/* Hover und Fokus wie bei den Website-Buttons: Der Schrägstrich verdoppelt sich. */
.wsk-guide .wsk-guide__btn:focus-visible .wsk-guide__slash {
    box-shadow: 7px 0 0 currentColor;
    translate: -3px 0;
}

@media (hover: hover) and (pointer: fine) {
    .wsk-guide .wsk-guide__btn:hover {
        --bg: var(--wsk-ink);
        color: var(--wsk-mint);
    }

    .wsk-guide .wsk-guide__btn--ink:hover {
        --bc: var(--wsk-mint);
        --bg: var(--wsk-mint);
        color: var(--wsk-ink);
    }

    .wsk-guide .wsk-guide__btn:hover .wsk-guide__slash {
        box-shadow: 7px 0 0 currentColor;
        translate: -3px 0;
    }
}

.wsk-guide .wsk-guide__actions {
    margin-top: clamp(2rem, 3.5vw, 2.75rem);
}

/* --------------------------------------------------- Inhaltsnavigation */
/* Schmale Leiste im Raster des Ratgebers: Beschriftung in der H2-Spalte, Sprunglinks rechts in umbrechenden Zeilen. */
.wsk-guide .wsk-guide__toc .wsk-guide__inner {
    display: grid;
    grid-template-columns: var(--g-cols);
    column-gap: var(--g-gap);
    align-items: start;
    padding-block: 0.5rem;
    border-top: 1px solid var(--wsk-line);
    border-bottom: 1px solid var(--wsk-line);
}

.wsk-guide .wsk-guide__toc-title {
    margin: 0;
    padding: 0;
    color: var(--wsk-muted);
    font-family: inherit;
    font-size: 0.86rem;
    font-stretch: 100%;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 44px;
}

.wsk-guide .wsk-guide__toc-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0 clamp(1.1rem, 2vw, 1.9rem);
}

.wsk-guide .wsk-guide__toc-link {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--wsk-ink);
    font-size: 0.95rem;
    font-weight: 560;
    line-height: 1.25;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
    transition: text-decoration-color 160ms ease;
}

@media (hover: hover) and (pointer: fine) {
    .wsk-guide .wsk-guide__toc-link:hover {
        text-decoration-color: currentColor;
    }
}

/* ------------------------------------------------------------ Einstieg */
.wsk-guide .wsk-guide__content > .wsk-guide__lead {
    max-width: calc(var(--g-measure) * 1em);
    margin: 0;
    padding: 0;
    color: var(--wsk-ink);
    font-size: clamp(1.18rem, 0.95rem + 0.72vw, 1.45rem);
    font-weight: 450;
    letter-spacing: -0.01em;
    line-height: 1.5;
}

.wsk-guide .wsk-guide__content > .wsk-guide__lead + .wsk-guide__lead {
    margin-top: 0.75em;
}

.wsk-guide .wsk-guide__content > .wsk-guide__autor {
    max-width: calc(var(--g-measure) * 1em);
    margin: 1.25rem 0 0;
    padding: 0;
    color: var(--wsk-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.wsk-guide .wsk-guide__content > .wsk-guide__autor a:not([class]) {
    color: var(--wsk-ink);
}

.wsk-guide .wsk-guide__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 1.8vw, 1.5rem);
    margin-top: clamp(2.75rem, 5vw, 4.25rem);
}

/* Karten wie im Rechner: Haarlinie, 60°-Fase oben rechts */
.wsk-guide .wsk-guide__card {
    --c: 1.6rem;
    position: relative;
    z-index: 0;
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: 1.45rem clamp(1.2rem, 1.8vw, 1.6rem) clamp(1.35rem, 1.8vw, 1.6rem);
    color: var(--wsk-ink);
}

.wsk-guide .wsk-guide__card::before,
.wsk-guide .wsk-guide__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-guide .wsk-guide__card::before {
    z-index: -2;
    inset: 0;
    background: var(--wsk-line-mid);
}

.wsk-guide .wsk-guide__card::after {
    z-index: -1;
    inset: 1px;
    background: var(--wsk-white);
}

.wsk-guide .wsk-guide__icon {
    width: 3.4rem;
    height: 3.4rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
}

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

.wsk-guide .wsk-guide__icon .w {
    fill: var(--wsk-white);
}

.wsk-guide .wsk-guide__card-title {
    margin-top: 1.5rem;
    font-size: clamp(1.32rem, 1.5vw, 1.55rem);
    font-stretch: 84%;
    letter-spacing: -0.025em;
    line-height: 1.05;
}

.wsk-guide .wsk-guide__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.45rem;
    margin: 0.5rem 0 0;
    padding: 0;
    line-height: 1;
}

.wsk-guide .wsk-guide__price-ab {
    color: var(--wsk-muted);
    font-size: 1rem;
    font-weight: 560;
}

.wsk-guide .wsk-guide__price-value {
    color: var(--wsk-ink);
    font-size: clamp(2.35rem, 3.2vw, 3.15rem);
    font-stretch: 75%;
    font-weight: 560;
    letter-spacing: -0.04em;
    white-space: nowrap;
}

.wsk-guide .wsk-guide__card-text {
    margin: 1.05rem 0 0;
    padding: 0;
    color: var(--wsk-text);
    font-size: 0.98rem;
    line-height: 1.55;
}

/* Sechseck-Aufzählung wie „Immer enthalten“ im Rechner */
.wsk-guide .wsk-guide__hexlist {
    display: grid;
    gap: 0.45rem;
    margin-top: 1rem;
}

.wsk-guide .wsk-guide__hexlist > li {
    position: relative;
    padding: 0 0 0 1.55rem;
    color: var(--wsk-text);
    font-size: var(--g-small);
    line-height: 1.5;
}

.wsk-guide .wsk-guide__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-guide .wsk-guide__card-cta {
    margin-top: auto;
    padding-top: 1.6rem;
}

/* In der Karte etwas knapper, damit „Landingpage durchrechnen“ auch bei 1.024 px in einer Zeile bleibt. */
.wsk-guide .wsk-guide__card-cta .wsk-guide__btn {
    gap: 0.8rem;
    padding-inline: 1.15rem 1.3rem;
}

.wsk-guide .wsk-guide__included {
    display: grid;
    grid-template-columns: var(--g-cols);
    column-gap: var(--g-gap);
    margin-top: clamp(2.75rem, 5vw, 4rem);
    padding-top: 1.35rem;
    border-top: 1px solid var(--wsk-line);
}

.wsk-guide .wsk-guide__included-body {
    min-width: 0;
}

.wsk-guide .wsk-guide__hexlist--cols {
    display: block;
    margin-top: 0.2rem;
    columns: 2;
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
}

.wsk-guide .wsk-guide__hexlist--cols > li {
    margin-bottom: 0.5rem;
    break-inside: avoid;
}

.wsk-guide .wsk-guide__fuss {
    margin: 1rem 0 0;
    padding: 0;
    color: var(--wsk-muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

/* ------------------------------------- Kostenfaktoren: die Formel als Datenblatt */
/* Gemeinsame Größe der Formelglieder und der Summe: Pluszeichen, Gleichheitszeichen und Begriffe stehen in einer Flucht. */
.wsk-guide .wsk-guide__section--faktoren {
    --fh: clamp(1.55rem, 2.1vw, 2.15rem);
}

.wsk-guide .wsk-guide__formula {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: clamp(2.75rem, 5vw, 4.25rem);
    border: 1px solid var(--wsk-line);
    border-bottom: 0;
}

.wsk-guide .wsk-guide__factor {
    position: relative;
    min-width: 0;
    padding: clamp(1.4rem, 2.4vw, 2.25rem) clamp(1.15rem, 2.4vw, 2.25rem) clamp(1.6rem, 2.6vw, 2.5rem);
    container: faktor / inline-size;
}

.wsk-guide .wsk-guide__factor:nth-child(2n) {
    border-left: 1px solid var(--wsk-line);
}

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

.wsk-guide .wsk-guide__factor-head {
    display: grid;
    grid-template-columns: 1.15em auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 0.55rem;
    font-size: var(--fh);
}

/* Teal-Pluszeichen zwischen den Gliedern: Die Formel liest sich Zeile für Zeile. Auf Weiß im dunkleren Teal (≥ 3:1). */
.wsk-guide .wsk-guide__op {
    color: var(--wsk-teal-strong);
    font-size: 1em;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    text-align: center;
}

.wsk-guide .wsk-guide__swatch {
    width: 0.72em;
    height: auto;
    overflow: visible;
}

.wsk-guide .wsk-guide__factor-title {
    font-size: 1em;
    font-stretch: 80%;
    font-weight: 560;
    letter-spacing: -0.035em;
    line-height: 1;
}

.wsk-guide .wsk-guide__comb {
    width: clamp(2.6rem, 3.4vw, 3.4rem);
    height: auto;
    margin-left: 0.6rem;
    overflow: visible;
}

.wsk-guide .wsk-guide__cell {
    stroke-width: 1.4;
    stroke-linejoin: round;
}

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

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

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

.wsk-guide .wsk-guide__cell--anbindungen {
    fill: none;
    stroke: rgba(7, 17, 15, 0.45);
}

.wsk-guide .wsk-guide__cell--leer {
    fill: none;
    stroke: var(--wsk-line);
    stroke-width: 1;
}

.wsk-guide .wsk-guide__factor-text {
    margin-top: 1.1rem;
    padding-left: calc(var(--fh) * 1.15 + 0.55rem);
}

.wsk-guide .wsk-guide__factor-text > p {
    font-size: 1rem;
}

.wsk-guide .wsk-guide__efforts {
    display: grid;
    gap: 1rem 1.75rem;
    margin-top: 1.35rem;
    margin-left: calc(var(--fh) * 1.15 + 0.55rem);
    padding-top: 1.1rem;
    border-top: 1px solid var(--wsk-line);
}

@container faktor (min-width: 34rem) {
    .wsk-guide .wsk-guide__efforts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.wsk-guide .wsk-guide__effort {
    min-width: 0;
}

.wsk-guide .wsk-guide__effort-title {
    margin: 0;
    padding: 0;
    color: var(--wsk-ink);
    font-size: 0.86rem;
    font-weight: 650;
    line-height: 1.3;
}

.wsk-guide .wsk-guide__effort-list {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.55rem;
}

.wsk-guide .wsk-guide__effort-list > li {
    position: relative;
    padding-left: 1.3rem;
    color: var(--wsk-text);
    font-size: 0.93rem;
    line-height: 1.45;
}

/* Mehr Aufwand: volles Sechseck (mehr Zellen in der Wabe), weniger Aufwand: nur die Kontur */
.wsk-guide .wsk-guide__effort-list > li::before {
    position: absolute;
    top: 0.45em;
    left: 0;
    width: 0.7rem;
    aspect-ratio: 2 / 1.732;
    content: "";
}

.wsk-guide .wsk-guide__effort--mehr .wsk-guide__effort-list > li::before {
    background: var(--wsk-ink);
    clip-path: var(--wsk-hex);
}

.wsk-guide .wsk-guide__effort--weniger .wsk-guide__effort-list > li::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpolygon points='6.2,1 17.8,1 23,10.5 17.8,20 6.2,20 1,10.5' fill='none' stroke='%2307110f' stroke-width='2.2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* „= Ihre Spanne“: Die Formel wird zu Ende geschrieben, darunter der Weg in den Rechner. */
.wsk-guide .wsk-guide__sum {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 2rem;
    padding: clamp(1.1rem, 2vw, 1.6rem) clamp(1.15rem, 2.4vw, 2.25rem) 0;
    border-top: 2px solid var(--wsk-ink);
}

.wsk-guide .wsk-guide__sum-label {
    display: grid;
    grid-template-columns: 1.15em 0.72em auto;
    align-items: center;
    gap: 0 0.55rem;
    margin: 0;
    padding: 0;
    color: var(--wsk-ink);
    font-size: var(--fh);
    line-height: 1;
}

.wsk-guide .wsk-guide__sum-label i {
    grid-column: 1;
    color: var(--wsk-teal-strong);
    font-style: normal;
    font-weight: 400;
    text-align: center;
}

.wsk-guide .wsk-guide__sum-text {
    grid-column: 3;
    font-size: 1.35em;
    font-stretch: 80%;
    font-weight: 560;
    letter-spacing: -0.04em;
}

/* ------------------------------------------------------ Laufende Kosten */
.wsk-guide .wsk-guide__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem clamp(1.5rem, 3vw, 3rem);
    margin-top: clamp(2rem, 3.5vw, 2.75rem);
}

.wsk-guide .wsk-guide__column {
    min-width: 0;
}

/* Maß wie der Fließtext (Punkte in 0,98 rem), wirkt erst einspaltig unter 760 px */
.wsk-guide .wsk-guide__lines {
    max-width: calc(var(--g-measure) * 0.98rem);
    margin-top: 0.85rem;
    border-bottom: 1px solid var(--wsk-line);
}

.wsk-guide .wsk-guide__lines > li {
    padding: 0.72rem 0;
    border-top: 1px solid var(--wsk-line);
    color: var(--wsk-text);
    font-size: 0.98rem;
    line-height: 1.5;
}

/* Hinweis-Kasten: Mist, 60°-Fase oben rechts; im Maß des Fließtexts, einspaltig bündig mit den Listen darüber */
.wsk-guide .wsk-guide__note {
    --c: 1.25rem;
    max-width: calc(var(--g-measure) * 1em);
    margin: clamp(1.75rem, 3vw, 2.25rem) 0 0;
    padding: 1.05rem 1.6rem 1.15rem 1.25rem;
    background: var(--wsk-mist);
    color: var(--wsk-ink);
    font-size: 0.98rem;
    line-height: 1.55;
    clip-path: polygon(0 0, calc(100% - var(--c) * 0.577) 0, 100% var(--c), 100% 100%, 0 100%);
}

/* ------------------------------------------------------- Vergleich */
.wsk-guide .wsk-guide__table-wrap {
    margin-top: clamp(2.5rem, 4.5vw, 3.75rem);
}

.wsk-guide .wsk-guide__table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
    font-size: 0.98rem;
    line-height: 1.5;
}

.wsk-guide .wsk-guide__table :is(th, td) {
    padding: 1rem clamp(0.75rem, 1.4vw, 1.35rem);
    border: 0;
    border-top: 1px solid var(--wsk-line);
    background: none;
    text-align: left;
    vertical-align: top;
}

.wsk-guide .wsk-guide__table td {
    color: var(--wsk-text);
}

.wsk-guide .wsk-guide__table thead :is(th, td) {
    padding-top: 0.95rem;
    padding-bottom: 0.85rem;
    border-top: 0;
    vertical-align: bottom;
}

.wsk-guide .wsk-guide__table thead th {
    color: var(--wsk-ink);
    font-size: clamp(1.25rem, 1.5vw, 1.5rem);
    font-stretch: 84%;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.wsk-guide .wsk-guide__table tbody th {
    color: var(--wsk-ink);
    font-size: var(--g-small);
    font-weight: 620;
}

.wsk-guide .wsk-guide__table .wsk-guide__corner {
    width: 19%;
}

/* Merkmale in der ersten Spalte bündig mit der Inhaltskante (nur als Tabelle, nicht als Karten) */
@media (min-width: 760px) {
    .wsk-guide .wsk-guide__table :is(.wsk-guide__corner, tbody th) {
        padding-left: 0;
    }
}

.wsk-guide .wsk-guide__table tbody tr:last-child > * {
    border-bottom: 1px solid var(--wsk-line);
}

/* Individuell dezent hervorgehoben: Mist, Mint-Linie oben */
.wsk-guide .wsk-guide__table .is-hervorgehoben {
    background: var(--wsk-mist);
}

.wsk-guide .wsk-guide__table thead .is-hervorgehoben {
    box-shadow: inset 0 3px 0 var(--wsk-mint);
}

.wsk-guide .wsk-guide__checklist {
    display: grid;
    grid-template-columns: var(--g-cols);
    column-gap: var(--g-gap);
    margin-top: clamp(3rem, 5.5vw, 4.75rem);
}

.wsk-guide .wsk-guide__checks {
    display: block;
    padding-top: 0.3rem;
    columns: 2;
    column-gap: clamp(1.5rem, 3vw, 2.75rem);
}

.wsk-guide .wsk-guide__checks > li {
    position: relative;
    max-width: calc(var(--g-measure) * 1em);
    margin-bottom: 1rem;
    padding-left: 2.1rem;
    break-inside: avoid;
    color: var(--wsk-text);
    font-size: 0.98rem;
    line-height: 1.5;
}

/* Sechseck-Häkchen */
.wsk-guide .wsk-guide__checks > li::before {
    position: absolute;
    top: 0.05em;
    left: 0;
    width: 1.4rem;
    aspect-ratio: 24 / 21;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpolygon points='6,0.5 18,0.5 23.5,10.5 18,20.5 6,20.5 0.5,10.5' fill='%2333b4a2'/%3E%3Cpath d='M7.7 10.9l3 3 5.8-6.2' fill='none' stroke='%2307110f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    content: "";
}

/* ---------------------------------------- Unterschätzte Kosten, Budget */
/* Beide Listen einspaltig im Maß des Fließtexts. Zwei Spalten (Zeilenraster oder columns) wirkten bei den sehr
   ungleich langen Punkten unruhig: Lücken bzw. versetzte Spaltenenden, ab 1.200 px nur 33–45 Zeichen je Zeile. */
.wsk-guide .wsk-guide__points {
    display: grid;
    gap: clamp(1.5rem, 2.4vw, 2rem) clamp(1.75rem, 3vw, 2.75rem);
}

.wsk-guide .wsk-guide__point {
    position: relative;
    min-width: 0;
    padding-left: 2.15rem;
}

.wsk-guide .wsk-guide__point::before {
    position: absolute;
    top: 0.12rem;
    left: 0;
    width: 1.35rem;
    aspect-ratio: 24 / 21;
    content: "";
}

/* Gestrichelt wie „individuell, zu klären“ in der Wabe */
.wsk-guide .wsk-guide__points--offen > .wsk-guide__point::before {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpolygon points='6.3,1 17.7,1 23,10.5 17.7,20 6.3,20 1,10.5' fill='none' stroke='%2333b4a2' stroke-width='1.7' stroke-dasharray='3.3 2.5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wsk-guide .wsk-guide__points--tipp > .wsk-guide__point::before {
    top: 0.32rem;
    width: 0.95rem;
    margin-left: 0.2rem;
    background: var(--wsk-teal);
    clip-path: var(--wsk-hex);
}

.wsk-guide .wsk-guide__points--tipp {
    gap: 0;
}

.wsk-guide .wsk-guide__points--tipp > .wsk-guide__point {
    padding-block: 1.05rem 1.15rem;
    border-top: 1px solid var(--wsk-line);
}

.wsk-guide .wsk-guide__points--tipp > .wsk-guide__point::before {
    top: calc(1.05rem + 0.32rem);
}

.wsk-guide .wsk-guide__points--tipp > .wsk-guide__point:last-child {
    border-bottom: 1px solid var(--wsk-line);
}

.wsk-guide .wsk-guide__point-title {
    font-size: clamp(1.22rem, 1.3vw, 1.35rem);
    font-stretch: 84%;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.wsk-guide .wsk-guide__point-text {
    max-width: calc(var(--g-measure) * 1em);
    margin: 0.45rem 0 0;
    padding: 0;
    color: var(--wsk-text);
    font-size: 0.98rem;
    line-height: 1.55;
}

/* Studenten Bieten: ruhiger Kasten wie im Ergebnis des Rechners; Text (--g-small) im Maß des Fließtexts */
.wsk-guide .wsk-guide__studenten {
    max-width: calc(var(--g-measure) * var(--g-small) + 2.4rem + 2px);
    margin-top: clamp(1.75rem, 3vw, 2.25rem);
    padding: 1rem 1.2rem 0.45rem;
    border: 1px solid var(--wsk-line);
}

.wsk-guide .wsk-guide__studenten-text {
    margin: 0;
    padding: 0;
    color: var(--wsk-text);
    font-size: var(--g-small);
    line-height: 1.55;
}

.wsk-guide .wsk-guide__studenten-link {
    margin: 0;
    padding: 0;
}

.wsk-guide .wsk-guide__studenten-link a {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--wsk-ink);
    font-size: var(--g-small);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.25em;
}

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

/* ---------------------------------------------------------------- Ablauf */
.wsk-guide .wsk-guide__steps {
    --node: 2.5rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem clamp(1.25rem, 2.6vw, 2.5rem);
    margin-top: clamp(2.5rem, 4.5vw, 3.75rem);
}

.wsk-guide .wsk-guide__step {
    position: relative;
    min-width: 0;
}

/* Sechseck-Knoten auf einer Linie wie der Fortschritt im Rechner */
.wsk-guide .wsk-guide__step:not(:last-child)::after {
    position: absolute;
    top: calc(var(--node) * 0.433);
    right: calc(clamp(1.25rem, 2.6vw, 2.5rem) * -1 + 0.45rem);
    left: calc(var(--node) + 0.45rem);
    height: 1px;
    background: var(--wsk-line-mid);
    content: "";
}

.wsk-guide .wsk-guide__node {
    display: grid;
    width: var(--node);
    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.8rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1;
}

.wsk-guide .wsk-guide__step:first-child .wsk-guide__node {
    background: var(--wsk-mint);
}

.wsk-guide .wsk-guide__step-body {
    min-width: 0;
}

.wsk-guide .wsk-guide__step-title {
    margin-top: 1.1rem;
    font-size: clamp(1.25rem, 1.35vw, 1.4rem);
    font-stretch: 84%;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.wsk-guide .wsk-guide__step-text {
    max-width: 40ch;
    margin: 0.5rem 0 0;
    padding: 0;
    color: var(--wsk-text);
    font-size: 0.98rem;
    line-height: 1.55;
}

/* ------------------------------------------------------- Häufige Fragen */
.wsk-guide .wsk-guide__faq {
    margin-top: clamp(2.25rem, 4.5vw, 3.5rem);
    border-bottom: 1px solid var(--wsk-line);
}

.wsk-guide .wsk-guide__qa {
    display: grid;
    grid-template-columns: var(--g-cols);
    column-gap: var(--g-gap);
    padding: clamp(1.3rem, 2.3vw, 1.85rem) 0;
    border-top: 1px solid var(--wsk-line);
}

.wsk-guide .wsk-guide__question {
    max-width: 24ch;
    font-size: clamp(1.25rem, 1.45vw, 1.5rem);
    font-stretch: 84%;
    letter-spacing: -0.02em;
    line-height: 1.18;
}

.wsk-guide .wsk-guide__answer {
    min-width: 0;
    padding-top: 0.15rem;
}

/* --------------------------------------------- Abschluss: dunkles Band */
.wsk-guide .wsk-guide__section--abschluss {
    background: var(--wsk-ink);
    color: var(--wsk-white);
}

.wsk-guide .wsk-guide__section + .wsk-guide__section--abschluss > .wsk-guide__inner {
    padding-block: clamp(4.5rem, 9vw, 8.5rem);
    border-top: 0;
}

.wsk-guide .wsk-guide__section--abschluss .wsk-guide__title {
    color: var(--wsk-white);
}

.wsk-guide .wsk-guide__section--abschluss .wsk-guide__content > p {
    max-width: 46ch;
    color: var(--wsk-on-dark);
    font-size: clamp(1.1rem, 0.95rem + 0.45vw, 1.3rem);
    line-height: 1.5;
}

.wsk-guide .wsk-guide__band-formula {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.05em 0.38em;
    margin: clamp(2.75rem, 5.5vw, 4.75rem) 0 0;
    padding: clamp(1rem, 1.6vw, 1.35rem) 0 0;
    border-top: 1px solid var(--wsk-line-dark);
    color: var(--wsk-white);
    font-size: clamp(1.55rem, 3vw, 3rem);
    font-stretch: 80%;
    font-weight: 560;
    letter-spacing: -0.03em;
    line-height: 1.12;
}

.wsk-guide .wsk-guide__band-term {
    display: inline-flex;
    align-items: baseline;
    gap: 0.38em;
}

.wsk-guide .wsk-guide__band-formula i,
.wsk-guide .wsk-guide__band-label i {
    color: var(--wsk-teal);
    font-style: normal;
    font-weight: 400;
}

.wsk-guide .wsk-guide__band-sum {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem clamp(1.5rem, 3vw, 2.75rem);
    margin-top: clamp(0.9rem, 1.8vw, 1.5rem);
}

.wsk-guide .wsk-guide__band-label {
    margin: 0;
    padding: 0;
    color: var(--wsk-white);
    font-size: clamp(1.55rem, 3vw, 3rem);
    font-stretch: 80%;
    font-weight: 560;
    letter-spacing: -0.03em;
    line-height: 1.12;
}

.wsk-guide .wsk-guide__band-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem clamp(1.25rem, 2.5vw, 2.25rem);
}

/* Haupt-CTA: kleine Mint-Platte in der Form der Abdeckung (Spitzen links und rechts, gestrichelte 60°-Linie,
   Navy-Schrägstrich). Die Form liegt auf ::before, damit der Fokusrahmen nicht abgeschnitten wird. */
.wsk-guide .wsk-guide__plate {
    --h: 4.25rem;
    --cc: calc(var(--h) * 0.2887);
    position: relative;
    z-index: 0;
    display: inline-flex;
    max-width: 100%;
    min-height: var(--h);
    align-items: center;
    padding: 0.6rem calc(var(--cc) + 3.5rem) 0.6rem calc(var(--cc) + 1.05rem);
    color: var(--wsk-ink);
    font-size: 1.05rem;
    font-weight: 640;
    line-height: 1.2;
    text-decoration: none;
}

.wsk-guide .wsk-guide__plate::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--wsk-mint);
    content: "";
    clip-path: polygon(var(--cc) 0, calc(100% - var(--cc)) 0, 100% 50%, calc(100% - var(--cc)) 100%, var(--cc) 100%, 0 50%);
}

.wsk-guide .wsk-guide__plate-line {
    position: absolute;
    top: 0;
    right: calc(var(--cc) + 1.5rem);
    bottom: 0;
    width: 0;
    transform: skewX(-30deg);
}

.wsk-guide .wsk-guide__plate-perf {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    width: 2px;
    background: repeating-linear-gradient(to bottom, var(--wsk-ink) 0 5px, transparent 5px 10px);
    opacity: 0.55;
}

.wsk-guide .wsk-guide__plate-slash {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -5px;
    width: 10px;
    background: var(--wsk-navy);
    clip-path: inset(64% 0 0 0);
    transition: clip-path 300ms var(--wsk-ease);
}

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

.wsk-guide .wsk-guide__plate:focus-visible .wsk-guide__plate-slash {
    clip-path: inset(0 0 0 0);
}

@media (hover: hover) and (pointer: fine) {
    .wsk-guide .wsk-guide__plate:hover .wsk-guide__plate-slash {
        clip-path: inset(0 0 0 0);
    }
}

.wsk-guide .wsk-guide__textlink {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    color: var(--wsk-white);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3em;
}

.wsk-guide .wsk-guide__section--abschluss :focus-visible {
    box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
    .wsk-guide .wsk-guide__textlink:hover {
        color: var(--wsk-mint);
        text-decoration-thickness: 2px;
    }
}

/* ------------------------------------------------------------- Breiten */
@media (max-width: 1023.98px) {
    .wsk-guide .wsk-guide__cards {
        grid-template-columns: minmax(0, 1fr);
        max-width: 40rem;
    }

    .wsk-guide .wsk-guide__steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 2.25rem;
    }

    .wsk-guide .wsk-guide__step:nth-child(2n)::after {
        display: none;
    }
}

@media (max-width: 959.98px) {
    .wsk-guide :is(.wsk-guide__grid, .wsk-guide__included, .wsk-guide__checklist, .wsk-guide__qa),
    .wsk-guide .wsk-guide__toc .wsk-guide__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .wsk-guide .wsk-guide__toc-title {
        line-height: 1.3;
        padding-top: 0.35rem;
    }

    .wsk-guide .wsk-guide__title {
        max-width: 20ch;
    }

    .wsk-guide .wsk-guide__content {
        padding-top: 0;
        margin-top: 1.25rem;
    }

    .wsk-guide :is(.wsk-guide__included, .wsk-guide__checklist) > .wsk-guide__subtitle {
        margin-bottom: 0.9rem;
    }

    .wsk-guide .wsk-guide__answer {
        margin-top: 0.6rem;
        padding-top: 0;
    }

    .wsk-guide .wsk-guide__question {
        max-width: 40ch;
    }

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

    .wsk-guide .wsk-guide__factor:nth-child(2n) {
        border-left: 0;
    }

    .wsk-guide .wsk-guide__factor:nth-child(n + 2) {
        border-top: 1px solid var(--wsk-line);
    }
}

/* Unter 760 px: Vergleichstabelle als gestapelte Karten (je Merkmal eine Karte), kein seitliches Scrollen */
@media (max-width: 759.98px) {
    .wsk-guide .wsk-guide__table,
    .wsk-guide .wsk-guide__table tbody,
    .wsk-guide .wsk-guide__table tr,
    .wsk-guide .wsk-guide__table th,
    .wsk-guide .wsk-guide__table td {
        display: block;
        width: auto;
    }

    .wsk-guide .wsk-guide__table thead {
        position: absolute;
        display: block;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .wsk-guide .wsk-guide__table tbody tr {
        border: 1px solid var(--wsk-line);
    }

    .wsk-guide .wsk-guide__table tbody tr + tr {
        margin-top: 0.85rem;
    }

    .wsk-guide .wsk-guide__table tbody th {
        padding: 0.85rem 1rem 0.6rem;
        border-top: 0;
        font-size: 1.22rem;
        font-stretch: 84%;
        font-weight: 600;
        letter-spacing: -0.02em;
        line-height: 1.15;
    }

    .wsk-guide .wsk-guide__table td {
        padding: 0.65rem 1rem 0.75rem;
    }

    /* Spaltenname über dem Wert, nur sichtbar: Screenreader nennen die Spalte schon über die Tabellenrollen (Guide.php),
       das Label soll nicht im Zellnamen landen („Baukasten Sie selbst“). Alternativtext "" nach dem Schrägstrich;
       Browser ohne diese Schreibweise verwerfen die zweite Angabe und nutzen die erste. */
    .wsk-guide .wsk-guide__table td::before {
        display: block;
        margin-bottom: 0.1rem;
        color: var(--wsk-muted);
        content: attr(data-label);
        content: attr(data-label) / "";
        font-size: 0.8rem;
        font-weight: 650;
        line-height: 1.35;
    }

    .wsk-guide .wsk-guide__table td.is-hervorgehoben {
        box-shadow: inset 0 2px 0 var(--wsk-mint);
    }

    .wsk-guide .wsk-guide__table tbody tr:last-child > * {
        border-bottom: 0;
    }

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

    .wsk-guide .wsk-guide__checks,
    .wsk-guide .wsk-guide__hexlist--cols {
        columns: 1;
    }

    .wsk-guide .wsk-guide__toc .wsk-guide__inner {
        padding-block: 0.6rem 0.25rem;
    }

    .wsk-guide .wsk-guide__toc-title {
        line-height: 1.3;
    }
}

@media (max-width: 640px) {
    /* Gleiche Außenkante wie Seitenkopf und Rechner (rechner.css setzt dort dieselbe Variable für .wsk und .wsk-hero) */
    .wsk-guide {
        --wsk-gutter: 1.15rem;
    }

    .wsk-guide :is(.wsk-guide__title, .wsk-guide__content, .wsk-guide__text, .wsk-guide__point, .wsk-guide__qa, .wsk-guide__card, .wsk-guide__table) {
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    .wsk-guide .wsk-guide__steps {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0;
    }

    /* Ablauf senkrecht: Knoten links, Linie nach unten */
    .wsk-guide .wsk-guide__step {
        display: grid;
        grid-template-columns: var(--node) minmax(0, 1fr);
        column-gap: 1rem;
        padding-bottom: 1.6rem;
    }

    .wsk-guide .wsk-guide__step:not(:last-child)::after,
    .wsk-guide .wsk-guide__step:nth-child(2n):not(:last-child)::after {
        display: block;
        top: calc(var(--node) * 0.866 + 0.4rem);
        right: auto;
        bottom: 0.4rem;
        left: calc(var(--node) / 2 - 0.5px);
        width: 1px;
        height: auto;
    }

    .wsk-guide .wsk-guide__step-title {
        margin-top: 0.2rem;
    }

    .wsk-guide .wsk-guide__factor-head {
        grid-template-columns: auto auto minmax(0, 1fr);
    }

    /* Erstes Glied ohne Pluszeichen: keine leere Spalte vor dem Sechseck */
    .wsk-guide .wsk-guide__op:empty {
        display: none;
    }

    .wsk-guide .wsk-guide__sum-label {
        grid-template-columns: auto auto;
    }

    .wsk-guide .wsk-guide__sum-text {
        grid-column: 2;
    }

    .wsk-guide .wsk-guide__comb {
        display: none;
    }

    .wsk-guide :is(.wsk-guide__factor-text, .wsk-guide__efforts) {
        margin-left: 0;
        padding-left: 0;
    }

    .wsk-guide .wsk-guide__sum {
        padding-inline: 0;
    }

    .wsk-guide .wsk-guide__plate {
        --h: 4rem;
    }
}

/* Sehr schmal: Karten-Buttons bleiben einzeilig („Landingpage durchrechnen“ bei 320 px). */
@media (max-width: 360px) {
    .wsk-guide .wsk-guide__card-cta .wsk-guide__btn {
        gap: 0.7rem;
        padding-inline: 1rem 1.15rem;
        font-size: 0.9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wsk-guide *,
    .wsk-guide *::before,
    .wsk-guide *::after {
        transition-duration: 0.01ms !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .wsk-guide .wsk-guide__section--abschluss {
        background: none;
        color: var(--wsk-ink);
    }

    .wsk-guide .wsk-guide__section--abschluss :is(.wsk-guide__title, .wsk-guide__band-formula, .wsk-guide__band-label) {
        color: var(--wsk-ink);
    }
}