:root {
    --tinte: #152d29;
    --gruen: #165b46;
    --hellgruen: #e3efe5;
    --text: #435851;
    --linie: #d8e1d9;
    --weiss: #fff;
    --papier: #f8faf6;
    --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    color-scheme: light;
}

* {
    box-sizing: border-box;
}

html {
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    background: var(--weiss);
    color: var(--tinte);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    line-height: 1.5;
}

h1, h2, h3, p, figure {
    margin: 0;
}

a {
    color: inherit;
}

a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
    outline: 3px solid #ac620b;
    outline-offset: 3px;
}

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

.icon {
    display: inline-block;
    flex: none;
    vertical-align: middle;
}

.rahmen {
    width: min(1240px, calc(100% - 96px));
    margin-inline: auto;
}

.sprung {
    position: absolute;
    z-index: 10;
    top: -80px;
    left: 0;
    background: white;
    padding: 12px;
}

.sprung:focus {
    top: 0;
}

.kopf {
    background: #fff;
    border-bottom: 1px solid var(--linie);
    position: sticky;
    top: 0;
    z-index: 5;
}

.kopfzeile, .kapitel, .kundenlinks, .marke, .knopf, .aktionen, .hinweis, .kicker, .weg-innen, .weg-innen span, .textlink, .fuss, .tarif header {
    display: flex;
    align-items: center;
}

.kopfzeile {
    justify-content: space-between;
    gap: 22px;
    min-height: 80px;
}

.marke {
    gap: 9px;
    font-size: 21px;
    font-weight: 750;
    letter-spacing: -.055em;
    text-decoration: none;
    white-space: nowrap;
}

.leicht {
    font-weight: 470;
    margin-left: 3px;
}

.signet, .funktion-icon {
    display: grid;
    place-items: center;
}

.signet {
    width: 35px;
    height: 35px;
    color: #dbf2ce;
    background: var(--gruen);
    border-radius: 11px;
}

.signet .icon {
    width: 26px;
    height: 26px;
}

.kapitel {
    gap: 29px;
}

.kundenlinks {
    gap: 19px;
}

.kapitel a, .login-link {
    font-size: 14px;
    font-weight: 620;
    text-decoration: none;
}

.kapitel a:hover, .login-link:hover, .textlink:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
}

.knopf {
    justify-content: center;
    gap: 12px;
    padding: 13px 21px;
    min-height: 48px;
    border: 1px solid transparent;
    border-radius: 9px;
    text-decoration: none;
    font: inherit;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 650;
    cursor: pointer;
}

.klein {
    min-height: 41px;
    padding: 9px 15px;
    font-size: 14px;
}

.primaer {
    color: var(--weiss);
    background: var(--gruen);
}

.primaer:hover {
    background: #0c4735;
}

.sekund {
    border-color: #b9c9be;
    color: var(--tinte);
    background: var(--weiss);
}

.sekund:hover {
    background: var(--hellgruen);
}

.hero {
    background: linear-gradient(125deg,#fcfdf9 30%,#f2f6ee);
}

.hero-raster {
    display: grid;
    align-items: center;
    grid-template-columns: .93fr 1.07fr;
    gap: clamp(36px,5vw,90px);
    padding-block: clamp(38px,4.8vw,76px);
}

.kicker, .nummer, .handy-text small {
    font-family: var(--mono);
    font-weight: 650;
    font-size: 11px;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: .09em;
}

.kicker {
    gap: 9px;
    color: var(--gruen);
}

.kicker span {
    width: 19px;
    height: 2px;
    background: #52a07e;
}

.hero-text .kicker {
    display: inline-flex;
    padding: 5px 10px;
    border: 1px solid #cadcd0;
    border-radius: 20px;
    background: #eef5eb;
    font-size: 10px;
}

.hero-text .kicker span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

h1 {
    font-size: clamp(50px,5.35vw,82px);
    font-weight: 660;
    letter-spacing: -.064em;
    line-height: 1.03;
}

.hero-text {
    min-width: 0;
    container-type: inline-size;
}

.hero-text h1 {
    font-size: clamp(35px,12.4cqw,70px);
    letter-spacing: -.05em;
    margin: 22px 0 18px;
}

h1 em {
    color: var(--gruen);
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 400;
    letter-spacing: -.072em;
}

.intro {
    max-width: 510px;
    color: var(--text);
    font-size: clamp(17px,1.4vw,21px);
    line-height: 1.55;
}

.aktionen {
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 25px;
}

.hinweis {
    gap: 8px;
    color: #566a61;
    font-size: 13px;
    margin-top: 18px;
}

.hinweis .icon {
    width: 17px;
}

.hero-bild {
    position: relative;
    min-width: 0;
}

.studio {
    width: 100%;
    height: clamp(350px,31vw,475px);
    object-fit: cover;
    object-position: 56% 50%;
    border-radius: 21px;
}

.handy-einblick {
    position: absolute;
    left: 16px;
    bottom: 12px;
}
.handy-einblick a {
    display: flex;
    align-items: end;
    color: var(--tinte);
    text-decoration: none;
}
.handy {
    width: clamp(102px, 9.2vw, 145px);
    height: auto;
    background: white;
    border: 4px solid #243831;
    border-radius: 15px;
    box-shadow: 0 8px 22px #1c2c2640;
}
.handy-text {
    margin: 0 0 10px -2px;
    padding: 8px 11px;
    border-radius: 0 7px 7px 0;
    background: #fff;
    box-shadow: 0 4px 10px #17292317;
}
.handy-text small, .handy-text strong {
    display: block;
}
.handy-text small {
    color: var(--text);
    font-size: 8px;
}
.handy-text strong {
    font-size: 12px;
}
.handy-text .icon {
    width: 13px;
    height: 13px;
}
.handy-einblick a:hover strong {
    text-decoration: underline;
}
.weg {
    border-block: 1px solid var(--linie);
}

.weg-innen {
    justify-content: space-between;
    gap: 16px;
    padding-block: 21px;
}

.weg-innen span {
    gap: 10px;
    font-size: 14px;
    color: var(--text);
    font-weight: 600;
}

.weg-innen .icon {
    color: var(--gruen);
}

.weg-innen i {
    width: 1px;
    height: 19px;
    background: var(--linie);
}

.abschnitt {
    padding-block: clamp(52px,5vw,82px);
}

.titelzeile {
    display: flex;
    gap: 30px;
    align-items: end;
    justify-content: space-between;
    margin: 11px 0 26px;
}

h2 {
    font-size: clamp(33px,3.4vw,52px);
    line-height: 1.08;
    letter-spacing: -.055em;
    font-weight: 650;
}

.titelzeile > p {
    flex: 0 1 335px;
}

.titelzeile p, .fragen details p, .funktionen p, .schritte p, .tarif > p, .bildtext > p:not(.nummer) {
    font-size: 16px;
    line-height: 1.58;
    color: var(--text);
}

.galerie {
    padding: clamp(16px,2.5vw,34px);
    border-radius: 22px;
    background: #eaf1e9;
    border: 1px solid #d7e3d6;
}

.wischhilfe {
    display: none;
}

.auswahl {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding-bottom: 18px;
    border-bottom: 1px solid #ccdbce;
}

.auswahl a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 7px;
    color: #335246;
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
}

.auswahl a:hover {
    background: #dce9dc;
}

.auswahl a[aria-selected=true] {
    background: #204d3e;
    color: white;
}

.auswahl .icon {
    width: 17px;
}

.ansicht {
    display: grid;
    grid-template-columns: minmax(185px,.62fr) minmax(0,1.6fr);
    gap: clamp(24px,4vw,56px);
    align-items: center;
    padding-top: 23px;
}

.ansicht[hidden] {
    display: none;
}

.nummer {
    color: var(--gruen);
    font-size: 10px;
}

.bildtext h3 {
    font-size: clamp(25px,2.5vw,38px);
    line-height: 1.08;
    letter-spacing: -.05em;
    margin: 12px 0;
}

.textlink {
    gap: 7px;
    width: fit-content;
    color: var(--gruen);
    font-weight: 660;
    font-size: 13px;
    margin-top: 21px;
}

.textlink .icon {
    width: 15px;
    height: 15px;
}

.bildschirm {
    overflow: hidden;
    background: white;
    border: 1px solid #acbfb3;
    border-radius: 10px;
    box-shadow: 0 8px 18px #20392f10;
}

.fensterrand {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 11px;
    background: #fafbf8;
    border-bottom: 1px solid var(--linie);
}

.fensterrand i {
    width: 6px;
    height: 6px;
    background: #b9c7ba;
    border-radius: 50%;
}

.fensterrand span {
    margin: auto;
    color: #495c51;
    font: 10px var(--mono);
}

.bildschirm img {
    width: 100%;
    height: auto;
}

.bildschirm a {
    display: block;
}

.funktionsband {
    background: var(--papier);
    border-block: 1px solid var(--linie);
}

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

.funktionen article, .tarif {
    background: white;
    border: 1px solid var(--linie);
    border-radius: 15px;
    padding: clamp(19px,2.1vw,29px);
}

.funktion-icon {
    background: var(--hellgruen);
    width: 39px;
    height: 39px;
    border-radius: 10px;
    color: var(--gruen);
    margin-bottom: 17px;
}

.funktionen h3, .schritte strong {
    font-size: 21px;
    letter-spacing: -.035em;
    line-height: 1.2;
}

.funktionen h3 {
    margin-bottom: 8px;
}

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

.einrichtung {
    display: grid;
    grid-template-columns: 1fr .94fr;
    align-items: center;
    gap: clamp(34px,6vw,84px);
}

.ablaufbild {
    width: 100%;
    height: clamp(360px,31vw,465px);
    object-fit: cover;
    border-radius: 18px;
}

.einrichtung h2, .fragen h2 {
    margin-top: 12px;
}

.schritte {
    list-style: none;
    counter-reset: schritt;
    padding: 0;
    margin: 22px 0 0;
}

.schritte li {
    counter-increment: schritt;
    position: relative;
    padding: 15px 0 15px 45px;
    border-top: 1px solid var(--linie);
}

.schritte li::before {
    content: '0' counter(schritt);
    position: absolute;
    left: 0;
    top: 18px;
    color: var(--gruen);
    background: var(--hellgruen);
    border-radius: 5px;
    padding: 3px 5px;
    font: 600 11px var(--mono);
}

.schritte p {
    margin-top: 4px;
    font-size: 15px;
}

.voraussetzungen {
    border-top: 1px solid var(--linie);
    padding-block: clamp(30px, 4vw, 60px);
}
.voraussetzungen h2 {
    margin: 10px 0 20px;
}
.bedarf {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 24px;
    margin: 0;
}
.bedarf dt {
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 650;
}
.bedarf .icon {
    color: var(--gruen);
}
.bedarf dd {
    margin: 7px 0 0;
    color: var(--text);
    font-size: 15px;
    line-height: 1.55;
}
.tarifband {
    background: #16392f;
    color: white;
}

.tarifband .kicker {
    color: #bde0c5;
}

.tarifband .kicker span {
    background: #bde0c5;
}

.tarifband .titelzeile p {
    color: #d7e7dc;
}

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

.tarif {
    color: var(--tinte);
    border: 0;
}

.tarif header {
    justify-content: space-between;
    gap: 8px;
}

.tarif h3 {
    font-size: 28px;
    letter-spacing: -.04em;
}

.tarif header span {
    padding: 4px 8px;
    border-radius: 5px;
    background: var(--hellgruen);
    font-size: 12px;
}

.tarif > p {
    margin: 10px 0 16px;
}

.tarif ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    border-top: 1px solid var(--linie);
    margin: 0;
    padding: 14px 0 0;
    list-style: none;
}

.tarif li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

.tarif li .icon {
    color: var(--gruen);
    width: 16px;
}

.fragen {
    display: grid;
    grid-template-columns: .69fr 1.31fr;
    gap: 30px;
}

.fragen details {
    border-top: 1px solid var(--linie);
}

.fragen details:last-child {
    border-bottom: 1px solid var(--linie);
}

.fragen summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    list-style: none;
    padding: 18px 0;
    cursor: pointer;
    font-weight: 630;
}

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

.fragen summary::after {
    content: '+';
    font: 22px var(--mono);
    color: var(--gruen);
}

.fragen details[open] summary::after {
    content: '−';
}

.fragen details p {
    margin-bottom: 18px;
}

footer {
    border-top: 1px solid var(--linie);
    background: var(--papier);
}

.fuss {
    padding-block: 24px;
    gap: 12px;
    justify-content: space-between;
}

.fuss > span {
    font-size: 13px;
    color: var(--text);
}

.zugang {
    max-width: 465px;
    width: 100%;
    padding: 24px;
    border: 1px solid var(--linie);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 27px #28352b09;
}

.zugang h1 {
    font-size: 34px;
    letter-spacing: -.05em;
}

.formular-text {
    color: var(--text);
    font-size: 14px;
    margin: 7px 0 15px;
}

.umschalter {
    display: flex;
    padding: 3px;
    border-radius: 8px;
    background: #ebf1e9;
    margin: 15px 0;
}

.umschalter a {
    text-align: center;
    flex: 1;
    border-radius: 5px;
    padding: 7px;
    font-size: 14px;
    text-decoration: none;
    font-weight: 640;
}

.umschalter a[aria-current] {
    background: white;
    box-shadow: 0 1px 4px #163d2f23;
}

.zugang label {
    display: block;
    margin-top: 11px;
    font-size: 13px;
    font-weight: 630;
}

.zugang label span {
    color: var(--text);
    font-weight: 400;
}

.zugang input:not([type=hidden]) {
    margin-top: 4px;
    width: 100%;
    padding: 8px 10px;
    min-height: 42px;
    border: 1px solid #a9b9ae;
    border-radius: 6px;
    font: inherit;
}

.absenden {
    justify-content: space-between;
    margin-top: 15px;
    width: 100%;
    min-height: 42px;
}

.meldung {
    padding: 8px;
    background: var(--hellgruen);
    font-size: 14px;
}

.meldung.error {
    background: #fae9e2;
    color: #802f1c;
}

@media (max-width:950px) {
    .rahmen {
        width: calc(100% - 52px);
    }
    .hero-raster {
        gap: 25px;
    }
    .kapitel {
        gap: 16px;
    }
    .funktionen {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width:740px) {
    html {
        scroll-padding-top: 75px;
    }
    .kopfzeile {
        min-height: 64px;
        gap: 12px;
    }
    .kapitel {
        display: none;
    }
    .rahmen {
        width: calc(100% - 36px);
    }
    .kundenlinks {
        gap: 11px;
    }
    .hero-raster {
        grid-template-columns: 1fr;
        padding-block: 35px 25px;
        gap: 26px;
    }
    .hero-text h1 {
        margin: 15px 0 12px;
    }
    .intro {
        font-size: 17px;
    }
    .aktionen {
        margin-top: 18px;
    }
    .hinweis {
        margin-top: 12px;
    }
    .studio {
        height: clamp(225px,58vw,360px);
    }
    .handy-einblick {
        left: 10px;
        bottom: 8px;
    }
    .handy {
        width: 88px;
        border-width: 3px;
        border-radius: 10px;
    }
    .handy-text {
        margin-bottom: 5px;
        padding: 6px 8px;
    }
    .weg-innen {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding-block: 16px;
    }
    .weg-innen i {
        display: none;
    }
    .weg-innen span {
        font-size: 13px;
        gap: 7px;
    }
    .titelzeile {
        display: block;
    }
    .titelzeile p {
        margin-top: 10px;
    }
    .titelzeile p br {
        display: none;
    }
    .ansicht {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .bildtext h3 {
        margin: 6px 0;
    }
    .bildtext .textlink {
        margin-top: 8px;
    }
    .wischhilfe {
        display: block;
        margin-bottom: 5px;
        font-size: 12px;
        color: var(--text);
    }
    .auswahl {
        display: flex;
        max-width: 100%;
        gap: 3px;
        overflow-x: auto;
        padding: 5px 3px 12px;
    }
    .auswahl a {
        flex-shrink: 0;
    }
    .auswahl a {
        padding: 7px 9px;
    }
    .einrichtung, .fragen {
        grid-template-columns: 1fr;
    }
    .ablaufbild {
        height: auto;
    }
    .tarife {
        grid-template-columns: 1fr;
    }
    .fuss {
        flex-wrap: wrap;
    }
    .fuss>span {
        order: 3;
        width: 100%;
    }
    .zugang {
        max-width: none;
    }
    .hero-raster:has(.zugang) {
        padding-top: 18px;
    }
}

@media (max-width:450px) {
    .marke {
        font-size: 17px;
        gap: 6px;
    }
    .signet {
        width: 29px;
        height: 29px;
        border-radius: 8px;
    }
    .signet .icon {
        width: 22px;
        height: 22px;
    }
    .klein {
        font-size: 13px;
        padding: 8px 10px;
        min-height: 38px;
    }
    .klein .icon {
        display: none;
    }
    .login-link {
        font-size: 13px;
    }
    h1 {
        font-size: clamp(43px,11.3vw,53px);
    }
    .aktionen .knopf {
        padding: 10px 12px;
        font-size: 14px;
        min-height: 44px;
    }
    .funktionen {
        grid-template-columns: 1fr;
    }

    .auswahl a {
        justify-content: center;
    }
}

@media (max-width: 370px) {
    .kopf .marke {
        line-height: 1.02;
        font-size: 15px;
    }
    .kopf .leicht {
        display: block;
        margin-left: 0;
    }
    .kundenlinks {
        gap: 9px;
    }
}

.produkt-werkstatt{padding-bottom:0}.werk-raster{display:grid;grid-template-columns:1.5fr 1fr;gap:20px}.werk-karte{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--linie);border-radius:18px;background:var(--papier)}
.werk-karte header{padding:clamp(18px,2.5vw,32px);background:white;border-bottom:1px solid var(--linie)}.werk-karte header small,.werk-legende{font:600 11px/1.5 var(--mono);color:var(--gruen);letter-spacing:.06em}
.werk-karte h3{font-size:clamp(21px,2.3vw,32px);line-height:1.16;letter-spacing:-.045em;margin:8px 0}.werk-karte p,.volumen-fuss p{color:var(--text);max-width:56ch}.werk-bild{flex:1;display:flex;align-items:center;justify-content:center;min-width:0;padding:clamp(12px,1.7vw,24px);background:linear-gradient(135deg,#eaf0e7,#f5f7f1)}
.werk-bild img{display:block;height:auto;width:100%;border-radius:8px;border:1px solid #c3d0c5;box-shadow:0 8px 22px #173c2514}.werk-popup img{width:auto;max-height:330px;max-width:100%}.werk-legende{margin-top:12px;font-weight:400;letter-spacing:0}
.volumen-preise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.volumen-preise a{display:grid;gap:3px;color:var(--tinte);border:1px solid var(--linie);background:white;padding:clamp(16px,2.4vw,32px);border-radius:14px;text-decoration:none}
.volumen-preise a:hover{border-color:var(--gruen)}.volumen-preise small,.volumen-preise span{color:var(--text);font-size:14px}.volumen-preise strong{font-size:clamp(26px,3.8vw,49px);letter-spacing:-.055em;line-height:1.25}
.volumen-fuss{display:flex;gap:20px;align-items:center;justify-content:space-between;margin-top:23px}.volumen-fuss p{line-height:1.5}
@media(max-width:740px){.werk-raster{grid-template-columns:1fr}.werk-popup img{max-height:350px}.volumen-preise{grid-template-columns:1fr}.volumen-preise a{grid-template-columns:1fr auto;align-items:center;gap:0 10px}.volumen-preise strong{grid-column:2;grid-row:1/3}.volumen-fuss{align-items:flex-start;flex-direction:column}}

.tarifband .volumen-fuss p{color:#d5e7dd}.tarifband .volumen-fuss .primaer{background:white;color:var(--gruen)}
@media(min-width:741px){.werk-raster{grid-template-rows:auto 1fr}.werk-karte{grid-row:span 2;display:grid;grid-template-rows:subgrid;row-gap:0}.werk-raster{row-gap:0}}