/* ===========================================================================
   BERGNET Konfigurator – Gestaltung
   ---------------------------------------------------------------------------
   Farben und Schrift stammen aus dem Design von bergnet.de:
     Primär/Akzent   #0B9A33   (Elementor-Kit: --e-global-color-primary)
     Zweites Grün    #82B821   (aus dem „30 Jahre"-Logo abgenommen)
     Text            #1D1D1B   (--e-global-color-text)
     Sekundärtext    #777777   (--e-global-color-secondary)
     Schrift         Exo       (--e-global-typography-*-font-family)

   Die Schrift liegt bewusst lokal im Projekt statt beim Google-CDN – genau wie
   bergnet.de selbst keine Google Fonts einbindet.
   =========================================================================== */

/* --- Schrift ------------------------------------------------------------ */

@font-face {
    font-family: 'Exo';
    font-style: normal;
    font-weight: 100 900;             /* variable Schrift: eine Datei für alle Schnitte */
    font-display: swap;
    src: url("../fonts/exo-latin-ext-mVsNVTl.woff2") format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Exo';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/exo-latin-X4Mul3f.woff2") format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                   U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Gestaltungsmarken -------------------------------------------------- */

:root {
    --bn-gruen:         #0B9A33;
    --bn-gruen-dunkel:  #087A28;
    --bn-gruen-zart:    #E9F6ED;
    --bn-limette:       #82B821;
    --bn-text:          #1D1D1B;
    --bn-gedaempft:     #777777;
    --bn-linie:         #E0E0E0;
    --bn-linie-zart:    #EFEFEF;
    --bn-weiss:         #FFFFFF;
    --bn-sanft:         #F5F7F5;
    --bn-rot:           #C0392B;
    --bn-rot-zart:      #FCEDEB;

    --bn-radius:        6px;
    --bn-radius-gross:  10px;
    --bn-schatten:      0 2px 10px rgb(29 29 27 / 6%);
    --bn-schatten-tief: 0 8px 24px rgb(11 154 51 / 14%);
    --bn-huelle:        1180px;
    --bn-tempo:         .18s ease;
}

/* --- Grundgerüst -------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: 'Exo', 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    color: var(--bn-text);
    background: var(--bn-weiss);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; }

h1, h2, h3 {
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.01em;
    margin: 0;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--bn-gruen); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--bn-gruen-dunkel); }

img { max-width: 100%; height: auto; }

fieldset { margin: 0; padding: 0; border: 0; }
legend { padding: 0; }

::selection { background: var(--bn-gruen); color: var(--bn-weiss); }

:focus-visible {
    outline: 2px solid var(--bn-gruen);
    outline-offset: 2px;
    border-radius: 2px;
}

.sprunglink {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 12px 18px;
    background: var(--bn-gruen);
    color: var(--bn-weiss);
    text-decoration: none;
}
.sprunglink:focus { left: 0; color: var(--bn-weiss); }

.huelle {
    width: 100%;
    max-width: var(--bn-huelle);
    margin-inline: auto;
    padding-inline: 24px;
}
.huelle--schmal { max-width: 860px; }

.icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    display: inline-block;
    vertical-align: -.22em;
}

/* --- Kopfzeile ---------------------------------------------------------- */

.kopf {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--bn-weiss);
    border-bottom: 1px solid var(--bn-linie);
}

.kopf__inhalt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 74px;
}

.kopf__logo { display: flex; align-items: center; flex: none; }
.kopf__logo img { width: auto; height: 38px; display: block; }

.kopf__nav {
    display: flex;
    align-items: center;
    gap: 26px;
    font-size: 15px;
}

.kopf__nav > a:not(.knopf) {
    color: var(--bn-text);
    text-decoration: none;
    font-weight: 500;
    padding-block: 4px;
    border-bottom: 2px solid transparent;
    transition: color var(--bn-tempo), border-color var(--bn-tempo);
}
.kopf__nav > a:not(.knopf):hover {
    color: var(--bn-gruen);
    border-bottom-color: var(--bn-gruen);
}

/* --- Knöpfe ------------------------------------------------------------- */

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 26px;
    border: 1px solid var(--bn-gruen);
    border-radius: var(--bn-radius);
    background: var(--bn-gruen);
    color: var(--bn-weiss);
    font: inherit;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--bn-tempo), border-color var(--bn-tempo),
                color var(--bn-tempo), transform var(--bn-tempo);
}
.knopf:hover {
    background: var(--bn-gruen-dunkel);
    border-color: var(--bn-gruen-dunkel);
    color: var(--bn-weiss);
    transform: translateY(-1px);
}
.knopf:active { transform: none; }

.knopf--leer {
    background: transparent;
    color: var(--bn-text);
    border-color: var(--bn-linie);
}
.knopf--leer:hover {
    background: var(--bn-sanft);
    border-color: var(--bn-gedaempft);
    color: var(--bn-text);
}

.knopf--klein { padding: 9px 18px; font-size: 15px; }

.knopf[disabled] { opacity: .35; cursor: not-allowed; }
.knopf[disabled]:hover {
    transform: none;
    background: transparent;
    border-color: var(--bn-linie);
    color: var(--bn-text);
}

/* --- Bausteine ---------------------------------------------------------- */

.augenbraue {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bn-gedaempft);
    margin-bottom: 14px;
}
.augenbraue strong { color: var(--bn-gruen); font-weight: 600; }

.abschnitt { padding-block: 72px; }
.abschnitt--gedaempft { background: var(--bn-sanft); border-block: 1px solid var(--bn-linie); }

.abschnitt__titel { font-size: clamp(26px, 3.4vw, 34px); }
.abschnitt__text {
    margin-top: 10px;
    color: var(--bn-gedaempft);
    max-width: 60ch;
}

.hinweis {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 22px;
    padding: 14px 18px;
    border: 1px solid var(--bn-linie);
    border-left: 3px solid var(--bn-gruen);
    border-radius: var(--bn-radius);
    background: var(--bn-gruen-zart);
    font-size: 15px;
    line-height: 1.55;
}
.hinweis .icon { color: var(--bn-gruen); margin-top: .2em; }

.hinweis--fehler {
    background: var(--bn-rot-zart);
    border-left-color: var(--bn-rot);
}
.hinweis--fehler .icon { color: var(--bn-rot); }

/* --- Startseite: Bühne -------------------------------------------------- */

.held {
    padding-block: 84px 68px;
    background:
        radial-gradient(60rem 26rem at 8% -14%, var(--bn-gruen-zart), transparent 65%),
        var(--bn-weiss);
    border-bottom: 1px solid var(--bn-linie);
}

.held__titel {
    font-size: clamp(34px, 5.6vw, 54px);
    max-width: 17ch;
}
.held__titel::after {
    content: '';
    display: block;
    width: 72px;
    height: 4px;
    margin-top: 24px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--bn-gruen), var(--bn-limette));
}

.held__text {
    margin-top: 24px;
    max-width: 58ch;
    font-size: 19px;
    color: var(--bn-gedaempft);
}

/* --- Startseite: Kacheln ------------------------------------------------ */

.kacheln {
    list-style: none;
    margin: 38px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: 20px;
}

.kachel {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 28px 26px 24px;
    border: 1px solid var(--bn-linie);
    border-radius: var(--bn-radius-gross);
    background: var(--bn-weiss);
    color: var(--bn-text);
    text-decoration: none;
    transition: border-color var(--bn-tempo), box-shadow var(--bn-tempo), transform var(--bn-tempo);
}
.kachel:hover {
    border-color: var(--bn-gruen);
    box-shadow: var(--bn-schatten-tief);
    transform: translateY(-3px);
    color: var(--bn-text);
}

.kachel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 20px;
    border-radius: var(--bn-radius);
    background: var(--bn-gruen-zart);
    color: var(--bn-gruen);
    transition: background var(--bn-tempo), color var(--bn-tempo);
}
.kachel__icon .icon { width: 26px; height: 26px; }
.kachel:hover .kachel__icon { background: var(--bn-gruen); color: var(--bn-weiss); }

.kachel__titel { font-size: 21px; font-weight: 600; line-height: 1.25; }

.kachel__text {
    margin-top: 10px;
    color: var(--bn-gedaempft);
    font-size: 15.5px;
    line-height: 1.55;
    flex: 1;
}

.kachel__mehr {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 22px;
    font-weight: 600;
    font-size: 15px;
    color: var(--bn-gruen);
}
.kachel__mehr .icon { width: 1.05em; height: 1.05em; transition: transform var(--bn-tempo); }
.kachel:hover .kachel__mehr .icon { transform: translateX(4px); }

/* --- Startseite: Ablauf ------------------------------------------------- */

.ablauf {
    list-style: none;
    margin: 34px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 28px;
}

.ablauf__nummer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--bn-weiss);
    border: 1px solid var(--bn-gruen);
    color: var(--bn-gruen);
    font-weight: 600;
}

.ablauf__titel { font-size: 19px; margin-bottom: 6px; }
.ablauf__schritt p { color: var(--bn-gedaempft); font-size: 15.5px; }

/* --- Wizard: Rahmen ----------------------------------------------------- */

.wizard-seite { padding-block: 40px 76px; }

.krumen {
    max-width: 840px;
    margin: 0 auto 22px;
    display: flex;
    gap: 9px;
    align-items: center;
    font-size: 14px;
    color: var(--bn-gedaempft);
}
.krumen a { color: var(--bn-gedaempft); text-decoration: none; }
.krumen a:hover { color: var(--bn-gruen); }

.wizard { max-width: 840px; margin-inline: auto; }
.wizard-seite .hinweis { max-width: 840px; margin-inline: auto; }

/* --- Wizard: Fortschritt ------------------------------------------------ */

.fortschritt { margin-bottom: 34px; }

.fortschritt__text {
    margin: 0 0 9px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--bn-gedaempft);
}

.fortschritt__bahn {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: var(--bn-linie-zart);
    overflow: hidden;
}

.fortschritt__balken {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--bn-gruen), var(--bn-limette));
    transition: width .34s cubic-bezier(.4, 0, .2, 1);
}

/* --- Wizard: Schritte --------------------------------------------------- */

.schritt__marke {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--bn-gruen);
    margin-bottom: 10px;
}

.schritt__titel { font-size: clamp(26px, 3.6vw, 34px); }

.schritt__intro {
    margin-top: 12px;
    color: var(--bn-gedaempft);
    max-width: 62ch;
}

.schritt + .schritt {
    margin-top: 56px;
    padding-top: 44px;
    border-top: 1px solid var(--bn-linie);
}

/* --- Wizard: Fragen ----------------------------------------------------- */

.frage { margin-top: 34px; }
.frage[hidden] { display: none; }

.frage__label {
    display: block;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: 4px;
}

.frage__optional {
    display: inline-block;
    margin-left: 9px;
    padding: 2px 8px;
    border-radius: 20px;
    background: var(--bn-sanft);
    border: 1px solid var(--bn-linie);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--bn-gedaempft);
    vertical-align: 2px;
}

.frage__hinweis {
    margin: 0 0 4px;
    font-size: 14.5px;
    color: var(--bn-gedaempft);
    max-width: 62ch;
}
.frage__hinweis--zart { font-style: italic; }

.frage__fehler {
    margin: 12px 0 0;
    padding: 9px 13px;
    border-radius: var(--bn-radius);
    background: var(--bn-rot-zart);
    border-left: 3px solid var(--bn-rot);
    color: var(--bn-rot);
    font-size: 14.5px;
    font-weight: 500;
}
.frage__fehler[hidden] { display: none; }

/* --- Wizard: Auswahlkarten ---------------------------------------------- */

/* Zwei Spalten statt drei: Zusammensetzungen wie „Softwareentwicklung" sind
   159 px breit und lassen sich nicht umbrechen. In einem Dreispalter blieben
   davon nur 146 px übrig – deutsche Fachbegriffe brauchen schlicht Platz. */
.optionen {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
}

.option { display: block; cursor: pointer; height: 100%; }

/* Der echte Radio-/Checkbox-Knopf bleibt im Dokument – nur unsichtbar. So
   funktionieren Tastaturbedienung, Pfeiltasten und Screenreader ohne
   Zusatzarbeit, und ohne JavaScript ist das Formular trotzdem bedienbar. */
.option__eingabe {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.option__karte {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    height: 100%;
    padding: 17px 18px;
    border: 1px solid var(--bn-linie);
    border-radius: var(--bn-radius);
    background: var(--bn-weiss);
    transition: border-color var(--bn-tempo), background var(--bn-tempo),
                box-shadow var(--bn-tempo), transform var(--bn-tempo);
}

.option:hover .option__karte {
    border-color: var(--bn-gruen);
    box-shadow: var(--bn-schatten);
    transform: translateY(-1px);
}

.option__eingabe:checked + .option__karte {
    border-color: var(--bn-gruen);
    background: var(--bn-gruen-zart);
    box-shadow: inset 0 0 0 1px var(--bn-gruen);
}

.option__eingabe:focus-visible + .option__karte {
    outline: 2px solid var(--bn-gruen);
    outline-offset: 2px;
}

.option__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: var(--bn-radius);
    background: var(--bn-sanft);
    color: var(--bn-gruen);
    transition: background var(--bn-tempo), color var(--bn-tempo);
}
.option__icon .icon { width: 21px; height: 21px; }
.option__eingabe:checked + .option__karte .option__icon {
    background: var(--bn-gruen);
    color: var(--bn-weiss);
}

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

.option__titel {
    display: block;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.35;
    /* Lange Wörter wie „Softwareentwicklung" dürfen nicht in das Häkchen
       hineinlaufen, wenn die Karte schmal wird. */
    overflow-wrap: break-word;
    hyphens: auto;
}

.option__hinweis {
    display: block;
    margin-top: 3px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--bn-gedaempft);
    overflow-wrap: break-word;
}

.option__haken {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: none;
    margin-top: 1px;
    border-radius: 50%;
    border: 1px solid var(--bn-linie);
    background: var(--bn-weiss);
    color: transparent;
    transition: background var(--bn-tempo), border-color var(--bn-tempo), color var(--bn-tempo);
}
.option__haken .icon { width: 13px; height: 13px; stroke-width: 2.6; }

.option__eingabe:checked + .option__karte .option__haken {
    background: var(--bn-gruen);
    border-color: var(--bn-gruen);
    color: var(--bn-weiss);
}

/* --- Wizard: Freitext und Zahlen ---------------------------------------- */

.eingabe {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: 14px;
    padding: 13px 15px;
    border: 1px solid var(--bn-linie);
    border-radius: var(--bn-radius);
    background: var(--bn-weiss);
    font: inherit;
    font-size: 16px;
    color: var(--bn-text);
    transition: border-color var(--bn-tempo), box-shadow var(--bn-tempo);
}
.eingabe:hover { border-color: var(--bn-gedaempft); }
.eingabe:focus {
    outline: none;
    border-color: var(--bn-gruen);
    box-shadow: 0 0 0 3px var(--bn-gruen-zart);
}
.eingabe::placeholder { color: #ABABAB; }

.eingabe--mehrzeilig { resize: vertical; min-height: 120px; line-height: 1.6; }

.eingabe__zeile { display: flex; align-items: center; gap: 11px; }
.eingabe--zahl { width: 140px; }
.eingabe__einheit { margin-top: 14px; color: var(--bn-gedaempft); font-size: 15px; }

/* --- Wizard: Übersicht im letzten Schritt ------------------------------- */

.uebersicht { margin-top: 26px; }
.uebersicht__block + .uebersicht__block { margin-top: 26px; }

.uebersicht__titel,
.quittung__blocktitel {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--bn-gruen);
    padding-bottom: 9px;
    border-bottom: 1px solid var(--bn-linie);
}

.uebersicht__liste { list-style: none; margin: 0; padding: 0; }

.uebersicht__zeile,
.quittung__zeile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto;
    gap: 16px;
    align-items: baseline;
    padding: 13px 0;
    border-bottom: 1px solid var(--bn-linie-zart);
}
.quittung__zeile { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }

.uebersicht__frage,
.quittung__zeile dt {
    color: var(--bn-gedaempft);
    font-size: 15px;
    line-height: 1.5;
}

.uebersicht__wert,
.quittung__zeile dd {
    margin: 0;
    font-weight: 600;
    font-size: 15.5px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.uebersicht__aendern {
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: var(--bn-radius);
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--bn-gruen);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--bn-tempo), border-color var(--bn-tempo);
}
.uebersicht__aendern:hover { background: var(--bn-gruen-zart); border-color: var(--bn-gruen); }

.uebersicht__leer {
    padding: 22px;
    border: 1px dashed var(--bn-linie);
    border-radius: var(--bn-radius);
    color: var(--bn-gedaempft);
    text-align: center;
}

/* --- Wizard: Leiste ----------------------------------------------------- */

.wizard__leiste {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 42px;
    padding-top: 26px;
    border-top: 1px solid var(--bn-linie);
}

/* --- Abschlussseite ----------------------------------------------------- */

.quittung__kopf { text-align: center; margin-bottom: 34px; }

.quittung__haken {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--bn-gruen);
    color: var(--bn-weiss);
}
.quittung__haken .icon { width: 28px; height: 28px; stroke-width: 2.4; }

.quittung__titel { font-size: clamp(28px, 4vw, 38px); }
.quittung__text { margin-top: 14px; color: var(--bn-gedaempft); }

.quittung {
    padding: 30px 32px;
    border: 1px solid var(--bn-linie);
    border-radius: var(--bn-radius-gross);
    background: var(--bn-weiss);
    box-shadow: var(--bn-schatten);
}

.quittung__block + .quittung__block { margin-top: 28px; }
.quittung__liste { margin: 0; }
.quittung__zeile:last-child { border-bottom: 0; }
.quittung__freitext { display: block; font-weight: 400; }

.quittung__leiste {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 14px;
    margin-top: 30px;
}

/* --- Fußzeile ----------------------------------------------------------- */

.fuss {
    margin-top: 80px;
    background: var(--bn-text);
    color: #C9C9C7;
    font-size: 15px;
}

.fuss__inhalt {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 34px;
    padding-block: 54px 40px;
}

.fuss__marke {
    font-size: 24px;
    font-weight: 300;
    letter-spacing: .22em;
    color: var(--bn-weiss);
    margin-bottom: 12px;
}
.fuss__marke::before {
    content: '';
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 12px;
    border-radius: 50%;
    background: var(--bn-gruen);
    vertical-align: 1px;
}

.fuss__claim { color: #9C9C9A; font-size: 14.5px; }
.fuss__claim strong { color: var(--bn-limette); font-weight: 600; }

.fuss__titel {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--bn-weiss);
    margin-bottom: 14px;
}

.fuss__liste { list-style: none; margin: 0; padding: 0; }
.fuss__liste li + li { margin-top: 7px; }

.fuss a { color: #C9C9C7; text-decoration: none; }
.fuss a:hover { color: var(--bn-limette); text-decoration: underline; }

.fuss__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-block: 20px;
    border-top: 1px solid rgb(255 255 255 / 12%);
    font-size: 13.5px;
    color: #8E8E8C;
}
.fuss__zeile p { margin: 0; }

.fuss__hinweis { display: flex; align-items: center; gap: 9px; }
.fuss__hinweis .icon { color: var(--bn-limette); }

/* --- Ablaufsteuerung: mit und ohne JavaScript ---------------------------
   Der Grundzustand ist die Fassung OHNE JavaScript: alle Schritte stehen
   untereinander, es gibt nur den Absenden-Knopf. Sobald sich das Dokument als
   `.js` ausweist, übernimmt wizard.js und blendet Schritt für Schritt ein.
   Die Kennung wird bereits im <head> gesetzt – hier blitzt also nichts auf. */

[data-zurueck],
[data-weiter],
[data-fortschritt],
[data-uebersicht-schritt] { display: none; }

.js [data-fortschritt] { display: block; }
.js [data-zurueck],
.js [data-weiter] { display: inline-flex; }
.js [data-weiter].ist-versteckt { display: none; }

.js [data-schritt] { display: none; }
.js [data-schritt].ist-aktiv { display: block; animation: einblenden .26s ease both; }

/* Im Stepper füllt jeder Schritt seine eigene Seite – die Trennlinie zwischen
   den Schritten braucht es nur in der Fassung ohne JavaScript. */
.js .schritt + .schritt { margin-top: 0; padding-top: 0; border-top: 0; }

.js [data-absenden] { display: none; }
.js [data-absenden].ist-sichtbar { display: inline-flex; }

@keyframes einblenden {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: none; }
}

/* --- Enge Bildschirme --------------------------------------------------- */

@media (max-width: 860px) {
    body { font-size: 16px; }

    .kopf__inhalt { min-height: 64px; gap: 14px; }
    .kopf__logo img { height: 30px; }
    .kopf__nav { gap: 14px; font-size: 14px; }
    .kopf__nav > a:not(.knopf) { display: none; }

    .abschnitt { padding-block: 52px; }
    .held { padding-block: 56px 46px; }

    .uebersicht__zeile,
    .quittung__zeile { grid-template-columns: 1fr; gap: 3px; }
    .uebersicht__aendern { justify-self: start; margin-top: 5px; margin-left: -10px; }

    .quittung { padding: 22px 20px; }
}

@media (max-width: 620px) {
    .huelle { padding-inline: 18px; }

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

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

    .wizard-seite { padding-block: 26px 30px; }

    /* Die Navigation bleibt am unteren Rand griffbereit. */
    .js .wizard__leiste {
        position: sticky;
        bottom: 0;
        margin-top: 30px;
        margin-inline: -18px;
        padding: 14px 18px;
        background: var(--bn-weiss);
        border-top: 1px solid var(--bn-linie);
        box-shadow: 0 -3px 14px rgb(29 29 27 / 7%);
    }
    .wizard__leiste .knopf { flex: 1; padding-inline: 14px; }

    .quittung__leiste { flex-direction: column-reverse; }
    .quittung__leiste .knopf { width: 100%; }
}

/* --- Rücksicht auf Bewegungsempfindlichkeit ----------------------------- */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --- Druck -------------------------------------------------------------- */

@media print {
    .kopf, .fuss, .wizard__leiste, .krumen, .uebersicht__aendern { display: none; }
    body { font-size: 12pt; }
    .quittung { border: 0; box-shadow: none; padding: 0; }
}