/* Gemeinsame Gestaltung für Website und Verwaltung.
 * Spätere Regeln ergänzen ältere Komponenten bewusst; die Reihenfolge der Kaskade bleibt erhalten.
 * Farbpaletten überschreiben die zentralen Variablen über das data-palette-Attribut.
 */
/* Grundwerte: Farben, Schriften, Abstände und gemeinsame Gestaltung. */
:root {
    --cream: #f8f7f3;
    --green: #344b3f;
    --sage: #8c9b80;
    --ink: #303e35;
    --muted: #74796f;
    --line: #e0e2d9;
}
* {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px;
}
body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: 'DM Sans', Arial, sans-serif;
    font-size: 15px;
    line-height: 1.65;
}
button,
input,
select,
textarea {
    font: inherit;
}
button,
a {
    -webkit-tap-highlight-color: transparent;
}
button {
    cursor: pointer;
}
a {
    color: inherit;
    text-decoration: none;
}
img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
button {
    color: inherit;
}
h1,
h2,
h3,
p {
    margin: 0;
}
h1,
h2,
h3 {
    font-weight: 400;
}
button:focus-visible,
a:focus-visible {
    outline: 3px solid #9b805c;
    outline-offset: 5px;
}
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--sage);
    outline-offset: 2px;
}
button:disabled {
    opacity: 0.5;
    cursor: default;
}
.topline {
    background: #e9ede5;
    text-align: center;
    font-size: 11px;
    letter-spacing: 0.065em;
    padding: 8px;
}
.header {
    height: 102px;
    max-width: 1440px;
    margin: auto;
    padding: 0 5.5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}
.brand {
    display: flex;
    gap: 11px;
    align-items: center;
}
.brand span {
    font-family: 'Manrope', sans-serif;
    font-size: 29px;
    letter-spacing: 0.18em;
    line-height: 1.1;
}
.brand small {
    font-family: 'DM Sans', sans-serif;
    display: block;
    font-size: 8px;
    letter-spacing: 0.18em;
    margin-top: 8px;
}
.nav {
    display: flex;
    gap: 31px;
    font-size: 13px;
}
.nav a:hover {
    color: #839078;
}
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    border: 1px solid var(--green);
    background: var(--green);
    color: white;
    padding: 15px 22px;
    font-size: 12px;
    line-height: 1.5;
    border-radius: 3px;
    transition: background 0.2s;
}
.button:hover {
    background: #4b6251;
}
.navcta {
    padding: 13px 19px;
}
.menu {
    display: none;
}
.hero {
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    display: grid;
    grid-template-columns: 46% 54%;
    min-height: 650px;
    padding: 0 4% 0 5.5%;
}
.herotext {
    padding: 47px 30px 15px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}
.heroslides {
    display: grid;
    width: 100%;
}
.heroslide {
    grid-area: 1 / 1;
    min-width: 0;
    visibility: hidden;
    pointer-events: none;
}
.heroslide.active {
    visibility: visible;
    pointer-events: auto;
    animation: appear 0.6s;
}
.eyebrow {
    font-size: 10px;
    letter-spacing: 0.18em;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #67755f;
}
.eyebrow > span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #8e9d80;
}
h1 {
    font-family: Georgia, serif;
    font-size: clamp(56px, 5.8vw, 86px);
    line-height: 1.02;
    letter-spacing: -0.04em;
    white-space: pre-line;
    margin: 24px 0;
}
h2 {
    font-family: Georgia, serif;
    font-size: clamp(32px, 3.15vw, 48px);
    line-height: 1.2;
    letter-spacing: -0.025em;
}
h2 em {
    font-weight: 400;
    color: #78866b;
}
h3 {
    font-family: Georgia, serif;
    font-size: 26px;
    line-height: 1.25;
}
.heroslide > p {
    max-width: 330px;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.85;
    margin: 25px 0;
}
.heronote {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #7a8274;
    font-size: 10px;
    margin-top: 21px;
}
.heroimage {
    position: relative;
    min-height: 620px;
    border-radius: 160px 4px 4px 4px;
    overflow: hidden;
}
.heroimage > img {
    position: absolute;
    inset: 0;
    animation: appear 0.8s;
    object-position: center;
}
.heroimage:after {
    content: '';
    position: absolute;
    inset: 55% 0 0;
    background: linear-gradient(transparent, #152d2140);
}
.imagebadge {
    z-index: 1;
    position: absolute;
    bottom: 56px;
    left: 30px;
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 17px 23px;
    background: #fcfaf2ee;
    border: 1px solid #fff7;
    border-radius: 3px;
    box-shadow: 0 6px 30px #344b3f10;
}
.imagebadge span {
    font-size: 13px;
}
.imagebadge em {
    font-family: Georgia, serif;
    color: #6c7d60;
    font-size: 17px;
}
.imagecaption {
    position: absolute;
    z-index: 1;
    bottom: 20px;
    left: 31px;
    font-size: 8px;
    letter-spacing: 0.2em;
    color: white;
}
.vertical {
    position: absolute;
    right: 14px;
    top: 50%;
    writing-mode: vertical-rl;
    letter-spacing: 0.2em;
    font-size: 8px;
    color: #8c937f;
}
.slidercontrols {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 40px;
    flex-shrink: 0;
}
.slidercontrols .count {
    width: 49px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.slidercontrols .dots {
    width: 50px;
    flex-shrink: 0;
}
.slidercontrols .pause {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.count {
    font-size: 12px;
    font-weight: 500;
}
.count i {
    font-style: normal;
    color: #a4aa9e;
    font-size: 10px;
}
.dots {
    display: flex;
    gap: 7px;
    margin: 0 28px 0 12px;
}
.dots button {
    border: 0;
    background: #d8ded1;
    width: 6px;
    height: 6px;
    padding: 0;
    border-radius: 10px;
}
.dots button.active {
    width: 24px;
    background: #7f9071;
}
.round {
    width: 33px;
    height: 33px;
    border: 1px solid #d8ddd0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: transparent;
}
.round:hover {
    background: #e6ebdf;
}
.pause {
    border: 0;
    background: transparent;
    padding: 5px;
    display: grid;
    place-items: center;
}
.values {
    max-width: 1280px;
    display: flex;
    justify-content: center;
    gap: 80px;
    margin: 44px auto 0;
    padding: 24px 20px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.values span {
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.values svg {
    width: 19px;
    stroke-width: 1.1;
    color: #899775;
}
.section {
    max-width: 1280px;
    padding: 95px 30px;
    margin: auto;
}
.intro {
    text-align: center;
    padding-bottom: 100px;
    max-width: 760px;
}
.intro .eyebrow,
.ritual .eyebrow {
    justify-content: center;
}
.intro h2 {
    margin: 20px 0;
}
.intro p {
    max-width: 515px;
    margin: auto;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.9;
}
.treatments {
    padding-top: 0;
}
.sectionhead {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 35px;
}
.sectionhead h2 {
    margin-top: 14px;
}
.sectionhead > p {
    font-size: 12px;
    color: var(--muted);
}
.servicegrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}
.service {
    border-bottom: 1px solid #d4dacc;
}
.serviceimage {
    height: 260px;
    position: relative;
    overflow: hidden;
    border-radius: 3px;
}
.serviceimage img {
    transition: transform 0.6s;
}
.service:hover img {
    transform: scale(1.045);
}
.serviceimage > span {
    position: absolute;
    top: 15px;
    left: 16px;
    color: white;
    font-size: 11px;
    letter-spacing: 0.1em;
}
.servicetext {
    padding: 24px 0 22px;
}
.servicetext h3 {
    font-size: 25px;
    margin-bottom: 12px;
}
.servicetext > p {
    font-size: 12px;
    line-height: 1.8;
    color: var(--muted);
    max-width: 320px;
    min-height: 65px;
}
.servicebottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 22px;
}
.servicebottom > span {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}
.servicebottom b {
    font-size: 15px;
    font-weight: 500;
    margin-left: 16px;
}
.servicebottom button {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 50%;
}
.demotext {
    font-size: 10px;
    color: #8a8e82;
    margin-top: 20px;
}
.about {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 90px;
    padding-top: 10px;
    align-items: center;
}
.aboutimage {
    position: relative;
    height: 500px;
}
.aboutimage > img {
    border-radius: 4px 120px 4px 4px;
}
.aboutstamp {
    position: absolute;
    right: -27px;
    bottom: 35px;
    background: #e6eadf;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 9px;
}
.aboutstamp span {
    text-align: center;
    font-size: 8px;
    letter-spacing: 0.14em;
    line-height: 1.6;
}
.abouttext h2 {
    white-space: pre-line;
    margin: 23px 0;
}
.abouttext > p {
    font-size: 13px;
    line-height: 1.9;
    color: var(--muted);
    max-width: 390px;
}
.signature {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 27px;
    margin-top: 25px;
}
.abouttext > small {
    color: var(--muted);
    font-size: 10px;
}
.textlink {
    display: flex;
    width: fit-content;
    align-items: center;
    gap: 20px;
    font-size: 12px;
    border-bottom: 1px solid #b5bca9;
    padding-bottom: 9px;
    margin-top: 27px;
}
.ritual {
    max-width: none;
    text-align: center;
    background: #edf0e7;
}
.ritual h2 {
    margin: 18px 0;
}
.ritual > p {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.9;
}
.steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1000px;
    margin: 50px auto 0;
    gap: 50px;
}
.steps > div > span {
    font-family: Georgia, serif;
    font-size: 29px;
    color: #94a185;
}
.steps h3 {
    margin: 12px 0;
    font-size: 24px;
}
.steps p {
    font-size: 12px;
    color: var(--muted);
    max-width: 250px;
    margin: auto;
}
.contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 100px;
    align-items: center;
}
.contact h2 {
    margin: 22px 0;
}
.contact > div > p {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.9;
}
.contactdetails {
    margin-top: 35px;
    display: grid;
    gap: 12px;
    font-size: 12px;
}
.contactdetails a,
.contactdetails p {
    display: flex;
    align-items: center;
    gap: 12px;
    white-space: pre-line;
}
.requestform {
    background: white;
    padding: 33px;
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: 0 12px 40px #334b3f04;
}
.requestform > p {
    font-size: 11px;
    color: var(--muted);
    margin: 10px 0 23px;
}
label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    margin-bottom: 15px;
}
input,
select,
textarea {
    display: block;
    width: 100%;
    background: #fafaf7;
    color: var(--ink);
    border: 1px solid #dfe2d8;
    border-radius: 3px;
    padding: 10px 11px;
    font-size: 12px;
    margin-top: 6px;
}
textarea {
    resize: vertical;
}
.formrow {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 13px;
}
.consent {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 10px;
}
.consent input {
    width: auto;
    margin: 0;
}
.requestform > .button {
    width: 100%;
    gap: 15px;
}
.requestform > small {
    display: block;
    font-size: 9px;
    line-height: 1.6;
    color: var(--muted);
    margin-top: 13px;
}
footer {
    max-width: 1220px;
    margin: auto;
    border-top: 1px solid var(--line);
    padding: 38px 0 24px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}
footer .brand span {
    font-size: 23px;
}
footer .brand small {
    font-size: 6px;
}
footer > p {
    font-family: Georgia, serif;
    color: #829074;
    font-style: italic;
    font-size: 16px;
}
footer > div:last-of-type {
    display: flex;
    align-items: center;
    gap: 22px;
    font-size: 10px;
}
footer button {
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 10px;
}
footer a {
    display: flex;
    align-items: center;
    gap: 5px;
}
footer > small {
    flex-basis: 100%;
    border-top: 1px solid var(--line);
    padding-top: 20px;
    font-size: 9px;
    color: #8a9183;
}
.toast {
    position: fixed;
    z-index: 20;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 90vw;
    background: var(--green);
    color: white;
    padding: 15px 20px;
    box-shadow: 0 8px 30px #0002;
    border-radius: 4px;
    font-size: 12px;
    display: flex;
    gap: 20px;
    align-items: center;
}
.toast button {
    background: none;
    color: inherit;
    border: 0;
}
.modalback {
    position: fixed;
    inset: 0;
    background: #21342977;
    z-index: 30;
    display: grid;
    place-items: center;
    padding: 20px;
}
.legal {
    background: var(--cream);
    max-width: 700px;
    width: 100%;
    padding: 40px;
    border-radius: 6px;
    max-height: 85vh;
    overflow: auto;
}
.legal > button {
    float: right;
    border: 0;
    background: transparent;
}
.legal p {
    white-space: pre-wrap;
    font-size: 13px;
    margin-top: 20px;
}
.skip {
    position: fixed;
    top: -100px;
    background: white;
    padding: 12px;
    z-index: 40;
}
.skip:focus {
    top: 0;
}
.admin {
    display: flex;
    min-height: 100vh;
    background: #f7f8f3;
}
.admin aside {
    width: 245px;
    flex-shrink: 0;
    background: #ecf0e7;
    padding: 35px 23px;
    position: sticky;
    top: 0;
    height: 100vh;
}
.admin aside > p {
    font-size: 9px;
    color: var(--muted);
    letter-spacing: 0.12em;
    margin: 50px 10px 15px;
}
.admin aside > button {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 4px;
    padding: 13px;
    font-size: 12px;
}
.admin aside > button.selected {
    background: #dbe3d2;
    color: var(--green);
    font-weight: 600;
}
.backsite {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    margin: 45px 12px;
}
.admin main {
    width: 100%;
    max-width: 1200px;
    padding: 45px 55px;
}
.admin header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
}
.admin h1 {
    font-family: Georgia, serif;
    font-size: 38px;
    margin: 12px 0;
}
.admin header > div:last-child {
    display: flex;
    gap: 10px;
}
.outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #cbd3c4;
    background: transparent;
    padding: 13px 17px;
    border-radius: 3px;
    font-size: 12px;
}
.adminhint {
    font-size: 12px;
    color: var(--muted);
    margin: 15px 0 30px;
}
.editorpanel {
    background: white;
    border: 1px solid var(--line);
    padding: 30px;
    border-radius: 5px;
    max-width: 850px;
}
.editorpanel p {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 20px;
}
.editorpanel label {
    font-size: 12px;
}
.editorpanel input,
.editorpanel textarea {
    font-size: 13px;
}
.editorpanel fieldset {
    border: 1px solid var(--line);
    padding: 25px;
    margin: 20px 0;
}
.editorpanel legend {
    font-family: Georgia, serif;
    font-size: 22px;
    padding: 0 10px;
}
.editimage {
    height: 180px;
    max-width: 320px;
    border-radius: 4px;
}
.adminfoot {
    font-size: 11px;
    color: #75846b;
    margin: 20px 0;
}
.savestatus {
    padding: 14px 18px;
    background: #e6eddf;
    border-radius: 4px;
    font-size: 12px;
    margin-bottom: 20px;
}
.previewbar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--green);
    color: white;
    padding: 12px 5%;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.previewbar button {
    background: transparent;
    border: 1px solid #ffffff50;
    color: white;
    padding: 5px 12px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    gap: 8px;
}
@keyframes appear {
    from {
        opacity: 0.5;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
/* Zusätzlicher Raum auf sehr breiten Bildschirmen. */
@media (min-width: 1600px) {
    .hero {
        min-height: 720px;
    }
    .heroimage {
        min-height: 690px;
    }
    .herotext {
        padding-top: 70px;
    }
}
/* Anpassungen für Tablets und schmalere Fenster. */
@media (max-width: 1000px) {
    .header {
        padding: 0 4%;
        gap: 20px;
    }
    .nav {
        gap: 17px;
    }
    .hero {
        padding-left: 4%;
        min-height: 590px;
    }
    .heroimage {
        min-height: 570px;
    }
    .herotext {
        padding-top: 35px;
    }
    h1 {
        font-size: 65px;
    }
    .values {
        gap: 35px;
    }
    .section {
        padding-left: 5%;
        padding-right: 5%;
    }
    .serviceimage {
        height: 210px;
    }
    .about {
        gap: 60px;
    }
    .aboutimage {
        height: 440px;
    }
    .contact {
        gap: 40px;
    }
    footer {
        margin: 0 5%;
    }
    .admin main {
        padding: 30px;
    }
    .admin aside {
        width: 210px;
    }
    .admin header {
        align-items: start;
        flex-direction: column;
    }
}
/* Mobile Darstellung mit angepasster Navigation und einspaltigen Inhalten. */
@media (max-width: 700px) {
    .topline {
        font-size: 9px;
    }
    .header {
        height: 85px;
        padding: 0 6%;
        gap: 10px;
    }
    .brand span {
        font-size: 25px;
    }
    .brand small {
        font-size: 7px;
    }
    .brand svg {
        width: 30px;
    }
    .navcta {
        margin-left: auto;
        padding: 10px;
        font-size: 10px;
        gap: 8px;
    }
    .menu {
        display: grid;
        place-items: center;
        border: 0;
        background: transparent;
        padding: 5px;
    }
    .nav {
        display: none;
    }
    .nav.open {
        display: flex;
        position: absolute;
        left: 0;
        right: 0;
        top: 116px;
        background: var(--cream);
        padding: 25px 7%;
        z-index: 10;
        box-shadow: 0 15px 20px #0001;
        flex-direction: column;
        gap: 18px;
    }
    .hero {
        grid-template-columns: 1fr;
        padding: 0 6%;
        min-height: auto;
    }
    .herotext {
        padding: 25px 0 30px;
    }
    .herotext h1 {
        font-size: 64px;
        margin: 20px 0;
    }
    .heroslide > p {
        font-size: 13px;
        max-width: 340px;
    }
    .heronote {
        margin-top: 17px;
    }
    .slidercontrols {
        margin-top: auto;
        padding-top: 28px;
    }
    .heroimage {
        min-height: 400px;
        border-radius: 100px 3px 3px 3px;
    }
    .imagebadge {
        bottom: 46px;
        left: 20px;
        padding: 13px 17px;
    }
    .imagecaption {
        left: 20px;
    }
    .vertical {
        display: none;
    }
    .values {
        gap: 17px;
        flex-direction: column;
        align-items: center;
        margin: 30px 6% 0;
        padding: 22px;
    }
    .values span {
        font-size: 11px;
    }
    .section {
        padding: 65px 6%;
    }
    .intro {
        padding-bottom: 60px;
    }
    h2 {
        font-size: 35px;
    }
    .intro p {
        font-size: 12px;
    }
    .treatments {
        padding-top: 0;
    }
    .sectionhead {
        display: block;
    }
    .sectionhead > p {
        margin-top: 17px;
    }
    .servicegrid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .serviceimage {
        height: 300px;
    }
    .servicetext > p {
        min-height: auto;
        max-width: none;
    }
    .servicetext h3 {
        font-size: 28px;
    }
    .servicebottom {
        margin-top: 18px;
    }
    .about {
        grid-template-columns: 1fr;
        gap: 35px;
        padding-top: 0;
    }
    .aboutimage {
        height: 390px;
        margin-right: 15px;
    }
    .aboutstamp {
        right: -15px;
        width: 110px;
        height: 110px;
    }
    .abouttext h2 {
        font-size: 36px;
    }
    .steps {
        grid-template-columns: 1fr;
        gap: 25px;
        margin-top: 35px;
    }
    .steps > div {
        border-top: 1px solid #dce2d3;
        padding-top: 20px;
    }
    .steps p {
        max-width: 290px;
    }
    .contact {
        grid-template-columns: 1fr;
        gap: 35px;
    }
    .requestform {
        padding: 25px;
    }
    .formrow {
        grid-template-columns: 1fr;
    }
    .formrow label {
        margin-bottom: 15px;
    }
    footer {
        padding-top: 30px;
        gap: 25px;
    }
    footer > p {
        flex-basis: 100%;
    }
    .admin {
        display: block;
    }
    .admin aside {
        position: static;
        width: 100%;
        height: auto;
        padding: 22px;
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
    }
    .admin aside .brand {
        flex-basis: 100%;
        margin-bottom: 15px;
    }
    .admin aside > p {
        display: none;
    }
    .admin aside > button {
        width: auto;
        padding: 8px;
        font-size: 10px;
    }
    .backsite {
        margin: 10px;
        font-size: 11px;
    }
    .admin main {
        padding: 25px 20px;
    }
    .admin h1 {
        font-size: 34px;
    }
    .admin header > div:last-child {
        width: 100%;
        flex-wrap: wrap;
    }
    .admin header .button {
        font-size: 11px;
        padding: 12px;
    }
    .editorpanel {
        padding: 20px;
    }
    .editorpanel fieldset {
        padding: 16px;
    }
    .previewbar {
        gap: 15px;
        font-size: 10px;
    }
    .previewbar button {
        font-size: 10px;
    }
    .legal {
        padding: 25px;
    }
}
/* Systemwunsch nach reduzierter Bewegung respektieren. */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    *,
    *:before,
    *:after {
        animation: none !important;
        transition: none !important;
    }
}

/* PHP-Version: stabile Folienhöhe und Bilder ohne Layoutwechsel. */
[hidden] {
    display: none !important;
}
.heroimage .slide-photo {
    visibility: hidden;
    animation: none;
}
.heroimage .slide-photo.active {
    visibility: visible;
    animation: appear 0.8s;
}
.legal {
    color: var(--ink);
    border: 1px solid var(--line);
}
.legal::backdrop {
    background: #21342977;
}
.inline-link {
    font: inherit;
    padding: 0;
    border: 0;
    background: none;
    text-decoration: underline;
}
.requestform .consent {
    flex-wrap: wrap;
    gap: 5px;
}
.requestform .consent input {
    margin-right: 3px;
}
.authscreen {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 25px;
}
.authbox {
    background: white;
    border: 1px solid var(--line);
    border-radius: 6px;
    width: 100%;
    max-width: 480px;
    padding: 35px;
}
.authbox h1 {
    font-size: 36px;
    margin: 25px 0 15px;
}
.authbox p {
    font-size: 12px;
    color: var(--muted);
    margin: 15px 0;
}
.authbox .button {
    width: 100%;
}
.autherror {
    color: #8b3e25 !important;
    background: #fff1e9;
    padding: 12px;
}
.adminlogout {
    margin-top: 20px;
}
.adminlogout button {
    width: 100%;
}
.editorpanel .fieldrow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.savestatus.error {
    background: #fff0e8;
    color: #8b3e25;
}
.adminfoot {
    white-space: pre-line;
}
.editorpanel fieldset {
    min-width: 0;
}
.editorpanel .editimage {
    margin-top: 10px;
}
.authbox .brand span {
    font-size: 25px;
}
@media (max-width: 700px) {
    .editorpanel .fieldrow {
        grid-template-columns: 1fr;
    }
}

/* Slider über die gesamte Breite, Text und Navigation liegen über dem Bild. */
.hero {
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    width: 100%;
    min-height: clamp(660px, 80svh, 880px);
    margin: 0;
    padding: 0;
    background: #344b3f;
    color: #fff;
}
.hero .heroimage {
    position: absolute;
    inset: 0;
    z-index: 0;
    min-height: 0;
    border-radius: 0;
}
.hero .heroimage > img {
    object-position: center 45%;
}
.hero .heroimage .slide-photo.active {
    animation: hero-photo-fade 0.8s;
}
.hero .heroimage::after {
    inset: 0;
    background: linear-gradient(
        90deg,
        rgb(18 36 27 / 78%) 0%,
        rgb(18 36 27 / 61%) 36%,
        rgb(18 36 27 / 18%) 72%,
        rgb(18 36 27 / 10%) 100%
    );
}
.hero .herotext {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1280px;
    min-height: inherit;
    margin: 0 auto;
    padding: 58px 30px 30px;
}
.hero .heroslides {
    max-width: 680px;
    /* Freien Platz oberhalb und unterhalb der Texte gleichmäßig verteilen. */
    margin-top: auto;
}
.hero .herotext h1 {
    font-size: clamp(54px, 5.8vw, 86px);
    color: #fff;
    text-shadow: 0 2px 22px rgb(0 0 0 / 12%);
}
.hero .eyebrow {
    color: #f1f3e9;
}
.hero .eyebrow > span {
    background: #d6e3c8;
}
.hero .heroslide > p {
    max-width: 380px;
    color: #f3f4ef;
    font-size: 18px;
    text-shadow: 0 1px 8px rgb(0 0 0 / 18%);
}
.hero .heroslide > .button {
    background: #f7f6ed;
    color: #304536;
    border-color: #f7f6ed;
}
.hero .heroslide > .button:hover {
    background: #e5eadc;
    border-color: #e5eadc;
}
.hero .heronote {
    color: #e4eadc;
    margin-bottom: auto;
}
.hero .slidercontrols {
    color: #fff;
    margin-top: 0;
}
.hero .count i {
    color: #e0e5db;
}
.hero .dots button {
    background: rgb(255 255 255 / 42%);
}
.hero .dots button.active {
    background: #fff;
}
.hero .round {
    border-color: rgb(255 255 255 / 55%);
}
.hero .round:hover,
.hero .pause:hover {
    background: rgb(255 255 255 / 17%);
}
.hero .imagebadge {
    left: auto;
    right: max(5.5%, calc((100% - 1220px) / 2));
    bottom: 72px;
    color: var(--green);
}
.hero .imagecaption {
    left: auto;
    right: max(5.5%, calc((100% - 1220px) / 2));
    bottom: 40px;
}
.hero .vertical {
    z-index: 1;
    color: #edf0e6;
}
@keyframes hero-photo-fade {
    from {
        opacity: 0.6;
    }
    to {
        opacity: 1;
    }
}
@media (max-width: 1000px) {
    .hero .herotext {
        padding-left: 6%;
        padding-right: 6%;
    }
    .hero .imagebadge,
    .hero .imagecaption {
        display: none;
    }
}
@media (max-width: 700px) {
    .hero {
        min-height: 660px;
    }
    .hero .herotext {
        padding: 42px 6% 26px;
    }
    .hero .herotext h1 {
        font-size: clamp(46px, 10.8vw, 64px);
    }
    .hero .heroslide > p {
        max-width: 340px;
        font-size: 13px;
    }
    .hero .heroimage::after {
        background: linear-gradient(90deg, rgb(18 36 27 / 79%), rgb(18 36 27 / 49%));
    }
    .hero .heroimage > img {
        object-position: 58% center;
    }
}

/* Variable Folienanzahl: Navigationsbreite bleibt unabhängig von den Punkten. */
.slidercontrols .count {
    width: 64px;
}
.slidercontrols .dots {
    width: 110px;
    margin: 0 12px 0 8px;
    overflow-x: auto;
    align-items: center;
    height: 24px;
    scrollbar-width: none;
}
.slidercontrols .dots::-webkit-scrollbar {
    display: none;
}
.slidercontrols .dots button {
    flex-shrink: 0;
}
.slidercontrols .round:disabled,
.slidercontrols .pause:disabled {
    cursor: default;
    opacity: 0.35;
}
.slide-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 25px 0 12px;
    flex-wrap: wrap;
}
#slide-count {
    font-size: 12px;
    color: var(--muted);
}
.slide-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.slide-actions .outline {
    padding: 6px 12px;
}
.slide-actions .remove-slide {
    color: #8b3e25;
}
@media (max-width: 700px) {
    .slidercontrols {
        gap: 8px;
    }
    .slidercontrols .dots {
        width: 60px;
        margin: 0 4px;
    }
}

.image-picker {
    margin-bottom: 18px;
}
.image-picker label {
    margin-bottom: 9px;
}
.image-picker-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.image-picker-actions span {
    font-size: 10px;
    color: var(--muted);
}
.image-picker-actions .outline {
    padding: 10px 16px;
}
.editorpanel .image-upload-status {
    font-size: 11px;
    margin: 8px 0 0;
    color: #526d42;
    overflow-wrap: anywhere;
}
.editorpanel .image-upload-status:empty {
    display: none;
}
.editorpanel .image-upload-status.error {
    color: #8b3e25;
}

.media-dialog {
    width: min(1120px, 94vw);
    max-width: none;
    max-height: 92vh;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 28px;
    color: var(--ink);
    background: var(--cream);
}
.media-dialog::backdrop {
    background: #18322599;
}
.media-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: flex-start;
}
.media-header h2 {
    margin: 8px 0;
    font-size: 32px;
}
.media-header p,
.watermark-settings > p {
    font-size: 12px;
    color: var(--muted);
}
.media-toolbar {
    display: flex;
    gap: 12px;
    align-items: end;
    flex-wrap: wrap;
    margin: 24px 0;
}
.media-toolbar label {
    flex: 1;
    min-width: 200px;
    margin: 0;
}
.media-toolbar input {
    background: #fff;
}
.watermark-settings {
    border: 1px solid var(--line);
    padding: 14px 18px;
    background: #fff;
    border-radius: 4px;
}
.watermark-settings summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}
.watermark-controls {
    display: grid;
    grid-template-columns: 1fr 1.6fr;
    gap: 22px;
    margin: 18px 0 10px;
}
.watermark-image {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 11px;
}
.watermark-image img {
    width: 64px;
    height: 64px;
    object-fit: contain;
    background: repeating-conic-gradient(#e2e5dd 0% 25%, white 0% 50%) 50%/12px 12px;
}
.watermark-image .outline {
    padding: 8px 10px;
    font-size: 11px;
}
.watermark-options {
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: 12px;
}
.media-status {
    font-size: 12px;
    color: #526d42;
    margin: 15px 0;
    white-space: pre-line;
}
.media-status:empty {
    display: none;
}
.media-status.error {
    color: #8b3e25;
}
.media-results {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0;
    font-size: 12px;
    color: var(--muted);
}
.media-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.media-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 10px;
    min-width: 0;
}
.media-card.selected {
    border-color: #607a4b;
    box-shadow: 0 0 0 2px #607a4b;
}
.media-thumb {
    display: block;
    width: 100%;
    height: 155px;
    border: 0;
    padding: 0;
    background: repeating-conic-gradient(#e2e5dd 0% 25%, white 0% 50%) 50%/16px 16px;
}
.media-thumb img {
    object-fit: contain;
}
.media-card h3 {
    font-family: Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    margin: 13px 0 6px;
    overflow-wrap: anywhere;
}
.media-card p {
    font-size: 10px;
    color: var(--muted);
    margin: 6px 0;
}
.media-card .media-usage {
    min-height: 30px;
    color: #697e59;
}
.media-card-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.media-card-actions .outline {
    padding: 6px 9px;
    font-size: 10px;
}
.media-empty {
    grid-column: 1/-1;
    padding: 35px;
    text-align: center;
    font-size: 13px;
}
@media (max-width: 800px) {
    .media-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .watermark-controls {
        grid-template-columns: 1fr;
    }
    .media-dialog {
        padding: 18px;
    }
}
@media (max-width: 480px) {
    .media-grid {
        grid-template-columns: 1fr;
    }
    .watermark-options {
        grid-template-columns: 1fr 1fr;
    }
    .watermark-options label:last-child {
        grid-column: 1/-1;
    }
    .media-toolbar .button {
        width: 100%;
    }
}

/* Kurze Kundengeschichten, mit eigenständiger Seite und Startseiten-Auszug. */
.customer-stories {
    background: #eef1e9;
}
.customer-stories .section {
    padding-top: 76px;
    padding-bottom: 76px;
}
.stories-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 28px;
    margin-bottom: 35px;
}
.stories-heading h2,
.stories-heading h1 {
    margin: 14px 0 18px;
}
.stories-heading h1 {
    white-space: normal;
    font-size: clamp(42px, 5vw, 68px);
}
.stories-heading p {
    color: var(--muted);
    font-size: 13px;
    max-width: 580px;
    line-height: 1.9;
    white-space: pre-line;
}
.stories-heading .textlink {
    flex-shrink: 0;
}
.stories-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}
.story-card {
    background: #fffdf8;
    border: 1px solid #dde3d5;
    border-radius: 5px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.story-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 26px;
    color: #8b9b78;
}
.story-example {
    font-size: 9px;
    letter-spacing: 0.02em;
    background: #edf0e7;
    padding: 4px 8px;
    border-radius: 20px;
    color: #6d795f;
}
.story-context {
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7e8b70;
}
.story-card h3 {
    font-size: 25px;
    margin: 12px 0 16px;
    overflow-wrap: anywhere;
}
.story-text {
    font-size: 12px;
    color: #6d7668;
    line-height: 1.95;
    white-space: pre-line;
    overflow-wrap: anywhere;
}
.story-author {
    padding-top: 24px;
    margin-top: auto;
    font-size: 12px;
    font-weight: 600;
}
.story-card small {
    font-size: 9px;
    color: #8c937f;
    line-height: 1.6;
    margin-top: 8px;
}
.stories-invitation {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 55px;
    padding-top: 40px;
    border-top: 1px solid #d5decc;
}
.stories-invitation h2 {
    font-size: 31px;
}
.stories-invitation p,
.stories-empty p {
    font-size: 13px;
    color: var(--muted);
    margin-top: 12px;
}
.stories-empty {
    padding: 35px;
    background: #fffdf8;
    border: 1px solid var(--line);
    border-radius: 5px;
}
.header .nav {
    gap: 22px;
}
.header {
    gap: 24px;
}
.admin aside {
    overflow-y: auto;
}
@media (max-width: 1100px) and (min-width: 701px) {
    .header {
        padding: 0 3%;
        gap: 15px;
    }
    .header .nav {
        gap: 12px;
        font-size: 11px;
    }
    .header .brand span {
        font-size: 24px;
    }
    .header .navcta {
        font-size: 10px;
        padding: 11px 12px;
        gap: 10px;
    }
}
@media (max-width: 900px) {
    .stories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .stories-heading {
        align-items: start;
        flex-direction: column;
    }
    .stories-heading .textlink {
        margin-top: 0;
    }
}
@media (max-width: 600px) {
    .stories-grid {
        grid-template-columns: 1fr;
    }
    .customer-stories .section {
        padding-top: 52px;
        padding-bottom: 52px;
    }
    .story-card {
        padding: 24px;
    }
    .stories-invitation {
        align-items: start;
        flex-direction: column;
    }
    .stories-page .stories-heading h1 {
        font-size: 43px;
    }
}

/* Kompakte, dauerhaft sichtbare Kopfzeile. */
:root {
    --site-header-height: 80px;
}
html {
    scroll-padding-top: calc(var(--site-header-height) + 20px);
}
.website > .header {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--site-header-height);
    max-width: none;
    width: 100%;
    padding: 0 max(4%, calc((100% - 1280px) / 2));
    background: rgb(248 247 243 / 97%);
    border-bottom: 1px solid rgb(52 75 63 / 9%);
    backdrop-filter: blur(12px);
    transition:
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}
.website > .header.is-scrolled {
    background: rgb(248 247 243 / 99%);
    box-shadow: 0 5px 24px rgb(33 52 41 / 9%);
}
.website > .header .brand span {
    font-size: 25px;
}
.website > .header .brand > svg {
    width: 31px;
    height: 31px;
}
.website > .header .brand small {
    font-size: 7px;
    margin-top: 6px;
}
.website > .header .navcta {
    padding: 11px 17px;
}
/* In der Entwurfsvorschau scrollt die Werkzeugleiste weg, die Seitennavigation bleibt. */
.previewbar {
    position: relative;
}
/* Inhalte bleiben ohne JavaScript sichtbar. Nur geeignete Elemente unterhalb des
   sichtbaren Bereichs erhalten die Animation durch den IntersectionObserver. */
.scroll-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition:
        opacity 0.65s ease,
        transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.scroll-reveal.is-visible,
.scroll-reveal:focus-within {
    opacity: 1;
    transform: none;
}
@media (min-width: 701px) and (max-width: 1100px) {
    .website > .header {
        padding-left: 3%;
        padding-right: 3%;
        gap: 15px;
    }
    .website > .header .brand span {
        font-size: 23px;
    }
    .website > .header .navcta {
        padding: 10px 12px;
    }
}
@media (max-width: 700px) {
    :root {
        --site-header-height: 70px;
    }
    .website > .header {
        padding: 0 6%;
        gap: 10px;
    }
    .website > .header .brand span {
        font-size: 23px;
    }
    .website > .header .brand > svg {
        width: 28px;
        height: 28px;
    }
    .website > .header .navcta {
        padding: 9px 10px;
    }
    .website > .header .nav.open {
        top: 100%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* Druckausgabe ohne interaktive Bedienelemente. */
@media print {
    .website > .header {
        position: static;
    }
    .scroll-reveal {
        opacity: 1;
        transform: none;
    }
}

.scroll-reveal {
    transition-duration: var(--reveal-duration, 1100ms);
    transition-delay: var(--reveal-delay, 180ms);
}
.scroll-reveal:focus-within {
    transition-delay: 0s;
}
#panel-appearance h3 {
    margin-bottom: 16px;
}
#panel-appearance label:not(.consent) {
    max-width: 570px;
    margin-top: 24px;
}
#panel-appearance label small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
    margin-top: 7px;
}
#panel-appearance .appearance-intro {
    margin-bottom: 24px;
}
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal {
        transition: none;
    }
}

/* Gutscheine */
.voucher-teaser {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    background: #eeeee6;
    border-radius: 4px;
    margin-block: 45px;
}
.voucher-teaser p {
    max-width: 650px;
    line-height: 1.8;
}
.voucher-teaser .button {
    flex-shrink: 0;
}
.voucher-heading {
    max-width: 720px;
    margin-bottom: 48px;
}
.voucher-heading h1 {
    font-family: Georgia, serif;
    font-size: clamp(38px, 5vw, 64px);
    font-weight: 400;
    margin: 20px 0;
    line-height: 1.15;
}
.voucher-heading p {
    line-height: 1.9;
    font-size: 18px;
}
.voucher-layout {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    align-items: start;
}
.voucher-offers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.voucher-card {
    padding: 28px;
    background: #eeeee6;
    border: 1px solid #d7ddd1;
    border-radius: 5px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
}
.voucher-card > span {
    font-size: 10px;
    letter-spacing: 1.4px;
    color: #55634e;
}
.voucher-card h2 {
    font-size: 27px;
    line-height: 1.25;
    margin: 0;
    overflow-wrap: anywhere;
    hyphens: auto;
}
.voucher-card .textlink {
    margin-top: auto;
    text-align: left;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
}
.voucher-info {
    margin-top: 35px;
}
.voucher-info p {
    white-space: pre-line;
    line-height: 1.9;
}
.voucher-form {
    background: #fffdf8;
    border: 1px solid #e0e1d6;
    border-radius: 5px;
    padding: 36px;
    scroll-margin-top: 110px;
}
.voucher-form h2 {
    margin-top: 0;
    font-size: 32px;
}
.voucher-form label {
    display: block;
    margin: 20px 0;
    font-size: 13px;
}
.voucher-form input:not([type='checkbox']),
.voucher-form select,
.voucher-form textarea {
    display: block;
    width: 100%;
    padding: 13px;
    border: 1px solid #d9ddd2;
    background: #fffdf8;
    font: inherit;
    margin-top: 8px;
    border-radius: 3px;
    box-sizing: border-box;
}
.voucher-form .consent {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 12px;
    flex-wrap: wrap;
}
.voucher-form .consent input {
    flex-shrink: 0;
}
.voucher-form small {
    display: block;
    margin-top: 14px;
    line-height: 1.7;
    color: #62685d;
}
.voucher-form .button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.voucher-form .button {
    width: 100%;
    justify-content: center;
}
.voucher-page p {
    white-space: pre-line;
}
@media (min-width: 981px) {
    .nav {
        gap: 18px;
        font-size: 12px;
    }
    .navcta {
        font-size: 12px;
        padding: 12px 15px;
    }
}
@media (max-width: 1000px) {
    .voucher-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .voucher-teaser {
        flex-direction: column;
        align-items: flex-start;
    }
}
@media (max-width: 560px) {
    .voucher-offers {
        grid-template-columns: 1fr;
    }
    .voucher-form {
        padding: 24px;
    }
    .voucher-heading {
        margin-bottom: 30px;
    }
}

/* Seitenverwaltung */
.page-card-heading,
.page-card-links,
.page-switches {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.page-card-heading {
    justify-content: space-between;
    margin-bottom: 16px;
}
.page-card-heading > div {
    display: flex;
    align-items: center;
    gap: 12px;
}
.page-kind {
    font-size: 11px;
    padding: 5px 9px;
    border-radius: 20px;
    background: #e7ecdf;
    color: #43523f;
}
.page-card-heading code {
    font-size: 12px;
    color: #68705e;
}
.page-switches {
    align-items: flex-start;
    gap: 10px 30px;
}
.page-seo {
    margin: 18px 0;
    border-top: 1px solid #e1e4d9;
    border-bottom: 1px solid #e1e4d9;
    padding: 15px 0;
}
.page-seo summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #40543e;
}
.page-seo > p,
#panel-pages > p {
    font-size: 13px;
    line-height: 1.8;
    color: #68705e;
}
.page-card-links {
    margin-top: 18px;
}
.page-unavailable {
    min-height: 50vh;
}
#page-list fieldset {
    scroll-margin-top: 100px;
}
#page-list small {
    display: block;
    color: #68705e;
    line-height: 1.7;
}
@media (max-width: 600px) {
    .page-card-heading > div {
        flex-wrap: wrap;
    }
    .page-card-heading {
        align-items: flex-start;
    }
    .page-switches {
        display: block;
    }
}
/* Baumansicht und Seiteninhalte */
.page-manager-toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.page-manager-toolbar > div {
    flex: 1;
    min-width: 220px;
}
.page-manager-toolbar h3 {
    margin-bottom: 8px;
}
.page-manager {
    display: grid;
    grid-template-columns: minmax(200px, 0.8fr) minmax(0, 1.5fr);
    gap: 24px;
    align-items: start;
}
.page-tree {
    background: #f3f5ee;
    border: 1px solid #dde3d4;
    border-radius: 5px;
    padding: 12px;
    position: sticky;
    top: 20px;
    max-height: 80vh;
    overflow: auto;
}
.page-tree ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.page-tree ul ul {
    border-left: 1px solid #c9d3be;
    margin-left: 10px;
    padding-left: 12px;
}
.tree-line {
    display: flex;
    gap: 4px;
    align-items: center;
    margin: 5px 0;
}
.tree-pick {
    flex: 1;
    min-width: 0;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 9px;
    border-radius: 4px;
    color: #354a38;
    font-size: 13px;
    overflow-wrap: anywhere;
}
.tree-pick small {
    display: block;
    font-size: 10px;
    color: #6a7663;
    margin-top: 4px;
}
.tree-pick[aria-current='true'] {
    background: #dce6d2;
}
.tree-state {
    font-style: italic;
}
.tree-line > .outline {
    padding: 6px 8px;
    font-size: 12px;
}
.page-editor {
    min-width: 0;
}
.page-editor h3 {
    overflow-wrap: anywhere;
}
.page-editor h4 {
    font-family: Georgia, serif;
    font-weight: 400;
    font-size: 22px;
    margin: 25px 0 16px;
}
.page-editor select {
    display: block;
    width: 100%;
    padding: 12px;
    border: 1px solid #dce1d5;
    background: #fafbf7;
    color: #344436;
    border-radius: 3px;
    font: inherit;
    margin: 8px 0 20px;
}
.node-actions,
.block-actions,
.module-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.page-editor .consent {
    margin: 12px 0;
}
.page-editor .content-block {
    padding: 15px;
    margin: 20px 0;
}
.content-block legend {
    font-size: 19px;
}
.block-actions .outline,
.node-actions .outline {
    padding: 8px 10px;
    font-size: 11px;
}
.page-editor .add-block {
    background: #f3f5ee;
    padding: 15px;
    border-radius: 4px;
}
.page-editor .add-block select {
    background: #fff;
}
.module-tabs {
    border-bottom: 1px solid #dde3d4;
    padding-bottom: 18px;
    margin-bottom: 25px;
}
.module-tabs [aria-pressed='true'] {
    background: #405b45;
    color: white;
}
.admin main:has(#panel-pages:not([hidden])) {
    max-width: 1600px;
}
.editorpanel:has(#panel-pages:not([hidden])) {
    max-width: 1250px;
}
.node-heading h1 {
    font-family: Georgia, serif;
    font-size: clamp(34px, 5vw, 58px);
    font-weight: 400;
    line-height: 1.15;
}
.node-heading p,
.node-text p {
    line-height: 1.9;
    max-width: 800px;
}
.node-heading:has(h1) {
    padding-bottom: 20px;
}
.node-text {
    text-align: center;
}
.node-text-image {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 55px;
    align-items: center;
    text-align: left;
}
.node-text-image img {
    width: 100%;
    max-height: 550px;
    object-fit: cover;
    border-radius: 4px;
}
.node-text:not(.node-text-image) p {
    margin-left: auto;
    margin-right: auto;
}
.content-node {
    scroll-margin-top: 100px;
}
.vouchers-page .voucher-heading > h2 {
    font-family: Georgia, serif;
    font-size: clamp(35px, 5vw, 58px);
    font-weight: 400;
    line-height: 1.15;
}
.servicebottom > a {
    display: inline-flex;
    padding: 8px;
    border-radius: 50%;
    border: 1px solid #c9d3c3;
}
.heroslide h2 {
    font-family: Georgia, serif;
    font-size: clamp(40px, 5vw, 72px);
    font-weight: 400;
    white-space: pre-line;
    line-height: 1.1;
}
.content-node .hero {
    margin: 0;
}
.page-tree button:disabled {
    opacity: 0.35;
}
@media (max-width: 1000px) {
    .page-manager {
        grid-template-columns: 1fr;
    }
    .page-tree {
        position: static;
        max-height: 400px;
    }
    .node-text-image {
        gap: 25px;
    }
}
@media (max-width: 650px) {
    .node-text-image {
        grid-template-columns: 1fr;
    }
    .page-manager-toolbar > div {
        flex-basis: 100%;
    }
    .page-editor .content-block {
        padding: 12px;
    }
    .module-tabs {
        gap: 6px;
    }
    .module-tabs .outline {
        padding: 8px;
        font-size: 11px;
    }
}

@media (min-width: 1001px) {
    .nav {
        max-width: 58%;
        overflow-x: auto;
        scrollbar-width: thin;
    }
    .nav > a {
        flex-shrink: 0;
    }
    .page-manager {
        grid-template-columns: minmax(205px, 0.8fr) minmax(0, 1.5fr);
    }
}

/* Baumzweige auf- und zuklappen */
.tree-controls {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    border-bottom: 1px solid #dce3d4;
    margin-bottom: 8px;
}
.tree-controls .outline {
    padding: 7px 8px;
    font-size: 11px;
}
.tree-toggle {
    flex: 0 0 25px;
    width: 25px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #405b45;
    font-size: 20px;
    cursor: pointer;
}
.tree-toggle:hover {
    background: #dce6d2;
}
.tree-toggle:focus-visible {
    outline: 2px solid #405b45;
    outline-offset: 1px;
}
.tree-spacer {
    flex: 0 0 25px;
    width: 25px;
}
.page-tree ul[hidden] {
    display: none;
}

/* Inhaltsauswahl direkt am Bereich */
.area-content-heading h4 {
    margin: 12px 0 8px;
}
.area-content-heading p {
    line-height: 1.7;
}
.empty-area-content {
    border: 1px dashed #c8d4be;
    border-radius: 4px;
    padding: 20px;
    background: #fbfcf8;
}
.page-editor .node-settings,
.page-editor .node-content {
    margin: 22px 0;
    border-top: 1px solid #dce3d4;
    padding-top: 16px;
}
.page-editor .node-settings summary,
.page-editor .node-content summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #405b45;
}
.page-editor {
    scroll-margin-top: 20px;
}
.content-block > label > select {
    margin-bottom: 16px;
}
.page-editor .add-block {
    margin: 16px 0 22px;
}
.page-editor .add-block > .outline {
    width: 100%;
    background: #405b45;
    color: #fff;
}
.block-actions {
    margin-bottom: 12px;
}

/* Aufklappbare Slider-Bibliothek */
#slider-groups {
    display: grid;
    gap: 1rem;
}
#slider-groups details[data-slider-group] {
    border: 1px solid var(--line);
    background: #fff;
    padding: 0;
}
#slider-groups details[data-slider-group] > summary {
    cursor: pointer;
    padding: 1rem 1.1rem;
    font-family: Georgia, serif;
    font-size: 1.15rem;
    color: var(--ink);
}
#slider-groups details[data-slider-group][open] > summary {
    border-bottom: 1px solid var(--line);
}
#slider-groups details[data-slider-group] > :not(summary) {
    margin-left: 1.1rem;
    margin-right: 1.1rem;
}
#slider-groups .slider-group-name {
    color: var(--sage);
    font-family: inherit;
}
#slider-groups .slide-actions {
    margin-top: 1rem;
}
#slider-groups .slider-slide-list {
    display: grid;
    gap: 1rem;
    margin-top: 1rem;
}
#slider-groups [data-slider-slide-add] {
    margin: 0 1.1rem 1.1rem;
}

/* Aufklappbare Massagen und Kundenstories */
#module-services,
#story-list {
    display: grid;
    gap: 1rem;
}
#module-services details,
#story-list details {
    border: 1px solid var(--line);
    background: #fff;
    padding: 0;
}
#module-services summary,
#story-list summary {
    cursor: pointer;
    padding: 1rem 1.1rem;
    font-family: Georgia, serif;
    font-size: 1.1rem;
    color: var(--ink);
}
#module-services details[open] > summary,
#story-list details[open] > summary {
    border-bottom: 1px solid var(--line);
}
#module-services details > :not(summary),
#story-list details > :not(summary) {
    margin-left: 1.1rem;
    margin-right: 1.1rem;
}
#module-services .editimage,
#story-list .slide-actions + label {
    margin-top: 1rem;
}
#module-services .editimage,
#story-list .consent:last-child {
    margin-bottom: 1.1rem;
}

/* Farbpaletten: Die gewählte Palette wird als data-palette am öffentlichen body gesetzt. */
body[data-palette='sage'] {
    --cream: #f7f5ef;
    --green: #4c6654;
    --sage: #8aa086;
    --ink: #293b31;
    --muted: #65756c;
    --line: #dde5d8;
    --palette-soft: #eaf0e5;
    --palette-card: #fffdf8;
    --palette-input: #fcfbf7;
    --palette-header: #f7f5eff7;
    --palette-header-solid: #f7f5effe;
    --palette-header-line: #4c665417;
    --palette-accent: #c99068;
    --palette-overlay: #293b3140;
    --palette-hero-dark: #293b31d9;
    --palette-hero-mid: #293b3199;
}
body[data-palette='rose'] {
    --cream: #fbf4f0;
    --green: #91685b;
    --sage: #b9887a;
    --ink: #493730;
    --muted: #76655f;
    --line: #eacfc5;
    --palette-soft: #f3e3db;
    --palette-card: #fff9f6;
    --palette-input: #fffaf8;
    --palette-header: #fbf4f0f7;
    --palette-header-solid: #fbf4f0fe;
    --palette-header-line: #91685b17;
    --palette-accent: #c69365;
    --palette-overlay: #49373040;
    --palette-hero-dark: #493730d9;
    --palette-hero-mid: #49373099;
}
body[data-palette='eucalyptus'] {
    --cream: #f4f8f7;
    --green: #547a73;
    --sage: #86aaa1;
    --ink: #294e48;
    --muted: #617671;
    --line: #d5e7e2;
    --palette-soft: #e3f0ec;
    --palette-card: #fcfffe;
    --palette-input: #fafdfc;
    --palette-header: #f4f8f7f7;
    --palette-header-solid: #f4f8f7fe;
    --palette-header-line: #547a7317;
    --palette-accent: #d7a26a;
    --palette-overlay: #294e4840;
    --palette-hero-dark: #294e48d9;
    --palette-hero-mid: #294e4899;
}
body[data-palette='lavender'] {
    --cream: #f7f5fa;
    --green: #6b5b7a;
    --sage: #998aaa;
    --ink: #352e3c;
    --muted: #6e6675;
    --line: #e1daeb;
    --palette-soft: #ece7f2;
    --palette-card: #fdfcff;
    --palette-input: #fcfafe;
    --palette-header: #f7f5faf7;
    --palette-header-solid: #f7f5fafe;
    --palette-header-line: #6b5b7a17;
    --palette-accent: #b88b6b;
    --palette-overlay: #352e3c40;
    --palette-hero-dark: #352e3cd9;
    --palette-hero-mid: #352e3c99;
}
body[data-palette='terracotta'] {
    --cream: #faf6f0;
    --green: #6a7654;
    --sage: #99a283;
    --ink: #33412d;
    --muted: #687064;
    --line: #e7ddc8;
    --palette-soft: #f0e8d8;
    --palette-card: #fffcf7;
    --palette-input: #fdfbf7;
    --palette-header: #faf6f0f7;
    --palette-header-solid: #faf6f0fe;
    --palette-header-line: #6a765417;
    --palette-accent: #b8724a;
    --palette-overlay: #33412d40;
    --palette-hero-dark: #33412dd9;
    --palette-hero-mid: #33412d99;
}
body[data-palette] button:focus-visible,
body[data-palette] a:focus-visible {
    outline-color: var(--palette-accent);
}
body[data-palette] .topline,
body[data-palette] .ritual,
body[data-palette] .customer-stories,
body[data-palette] .voucher-teaser,
body[data-palette] .voucher-card {
    background: var(--palette-soft);
}
body[data-palette] .website > .header {
    background: var(--palette-header);
    border-bottom-color: var(--palette-header-line);
}
body[data-palette] .website > .header.is-scrolled {
    background: var(--palette-header-solid);
    box-shadow: 0 5px 24px var(--palette-header-line);
}
body[data-palette] .story-card,
body[data-palette] .voucher-form,
body[data-palette] .stories-empty {
    background: var(--palette-card);
    border-color: var(--line);
}
body[data-palette] input,
body[data-palette] select,
body[data-palette] textarea {
    background: var(--palette-input);
    border-color: var(--line);
}
body[data-palette] .heroimage:after {
    background: linear-gradient(transparent, var(--palette-overlay));
}
body[data-palette] .imagebadge {
    background: var(--palette-card);
    box-shadow: 0 6px 30px var(--palette-header-line);
}
body[data-palette] .imagebadge em,
body[data-palette] .eyebrow,
body[data-palette] h2 em,
body[data-palette] .steps > div > span,
body[data-palette] .story-top {
    color: var(--sage);
}
body[data-palette] .eyebrow > span {
    background: var(--sage);
}
body[data-palette] .nav a:hover {
    color: var(--sage);
}
body[data-palette] .button:hover {
    background: var(--sage);
}
body[data-palette] .hero {
    background: var(--green);
}
body[data-palette] .hero .heroimage::after {
    background: linear-gradient(
        90deg,
        var(--palette-hero-dark) 0%,
        var(--palette-hero-mid) 43%,
        var(--palette-overlay) 74%,
        #0000 100%
    );
}
body[data-palette] .hero .eyebrow {
    color: var(--palette-card);
}
body[data-palette] .hero .eyebrow > span {
    background: var(--palette-accent);
}
body[data-palette] .hero .heroslide > .button {
    background: var(--palette-card);
    border-color: var(--palette-card);
    color: var(--ink);
}
body[data-palette] .hero .heroslide > .button:hover {
    background: var(--palette-soft);
    border-color: var(--palette-soft);
}
body[data-palette] .aboutstamp,
body[data-palette] .story-example {
    background: var(--palette-soft);
}
body[data-palette] .story-example,
body[data-palette] .voucher-card > span,
body[data-palette] .servicebottom > a {
    color: var(--green);
}
body[data-palette] .service,
body[data-palette] .stories-invitation,
body[data-palette] .voucher-card {
    border-color: var(--line);
}

/* Farbpaletten-Auswahl in der Verwaltung. */
.palette-choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0 36px;
    max-width: 720px;
}
.palette-choice {
    display: flex !important;
    align-items: center;
    gap: 12px;
    border: 1px solid var(--line);
    background: #fff;
    padding: 12px !important;
    margin: 0 !important;
    border-radius: 5px;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}
.palette-choice.palette-sage {
    --palette-1: #f7f5ef;
    --palette-2: #dde5d8;
    --palette-3: #4c6654;
    --palette-4: #293b31;
    --palette-5: #c99068;
}
.palette-choice.palette-rose {
    --palette-1: #fbf4f0;
    --palette-2: #eacfc5;
    --palette-3: #91685b;
    --palette-4: #493730;
    --palette-5: #c69365;
}
.palette-choice.palette-eucalyptus {
    --palette-1: #f4f8f7;
    --palette-2: #d5e7e2;
    --palette-3: #547a73;
    --palette-4: #294e48;
    --palette-5: #d7a26a;
}
.palette-choice.palette-lavender {
    --palette-1: #f7f5fa;
    --palette-2: #e1daeb;
    --palette-3: #6b5b7a;
    --palette-4: #352e3c;
    --palette-5: #b88b6b;
}
.palette-choice.palette-terracotta {
    --palette-1: #faf6f0;
    --palette-2: #e7ddc8;
    --palette-3: #6a7654;
    --palette-4: #33412d;
    --palette-5: #b8724a;
}
.palette-choice:hover {
    transform: translateY(-1px);
    border-color: var(--palette-3);
}
.palette-choice:has(input:checked) {
    border-color: var(--palette-3);
    box-shadow: 0 0 0 2px var(--palette-2);
}
.palette-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.palette-choice:focus-within {
    outline: 2px solid var(--palette-5);
    outline-offset: 2px;
}
.palette-swatch {
    display: flex;
    width: 56px;
    height: 46px;
    overflow: hidden;
    border: 1px solid #00000012;
    border-radius: 4px;
    flex-shrink: 0;
}
.palette-swatch i {
    flex: 1;
}
.palette-swatch i:nth-child(1) {
    background: var(--palette-1);
}
.palette-swatch i:nth-child(2) {
    background: var(--palette-2);
}
.palette-swatch i:nth-child(3) {
    background: var(--palette-3);
}
.palette-swatch i:nth-child(4) {
    background: var(--palette-4);
}
.palette-swatch i:nth-child(5) {
    background: var(--palette-5);
}
.palette-copy {
    display: grid;
    gap: 2px;
    line-height: 1.35;
}
.palette-copy strong {
    font-size: 13px;
}
.palette-copy small {
    font-size: 10px;
    color: var(--muted);
    font-weight: 400;
}
.appearance-subheading {
    padding-top: 28px;
    border-top: 1px solid var(--line);
}
@media (max-width: 620px) {
    .palette-choices {
        grid-template-columns: 1fr;
    }
    .palette-choice {
        min-height: 70px;
    }
}

/* Logo images keep their aspect ratio and fit within the existing header. */
.website .brand > .brand-logo {
    width: auto;
    height: auto;
    max-width: 220px;
    max-height: 62px;
    object-fit: contain;
}
.editorpanel .logo-preview {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 140px;
    object-fit: contain;
}
@media (max-width: 700px) {
    .website .brand > .brand-logo {
        max-width: 160px;
        max-height: 48px;
    }
}

/* Soft crossfade: keep the outgoing image visible until its fade finishes. */
.hero .heroimage .slide-photo {
    opacity: 0;
    visibility: hidden;
    animation: none;
    transition:
        opacity var(--slider-image-fade, 1200ms) ease-in-out,
        visibility 0s linear var(--slider-image-fade, 1200ms);
    pointer-events: none;
}
.hero .heroimage .slide-photo.active {
    opacity: 1;
    visibility: visible;
    animation: none;
    transition:
        opacity var(--slider-image-fade, 1200ms) ease-in-out,
        visibility 0s;
}

/* Text slides share a grid cell and crossfade without shifting the controls. */
.hero .heroslide {
    opacity: 0;
    visibility: hidden;
    animation: none;
    pointer-events: none;
    transition:
        opacity var(--slider-text-fade, 1200ms) ease-in-out,
        visibility 0s linear var(--slider-text-fade, 1200ms);
}
.hero .heroslide.active {
    opacity: 1;
    visibility: visible;
    animation: none;
    pointer-events: auto;
    transition:
        opacity var(--slider-text-fade, 1200ms) ease-in-out,
        visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
    .hero .heroslide,
    .hero .heroimage .slide-photo {
        transition: none !important;
    }
}
/* Subtle depth around the slider image frame. */
.hero .heroimage {
    box-shadow:
        0 12px 32px rgba(32, 48, 38, 0.16),
        0 3px 10px rgba(32, 48, 38, 0.08);
}

/* Match the soft slider shadow on the remaining content images. */
.website .serviceimage,
.website .aboutimage > img,
.website .node-text-image > img {
    box-shadow:
        0 12px 32px rgba(32, 48, 38, 0.16),
        0 3px 10px rgba(32, 48, 38, 0.08);
}

/* The current About section uses a text/image block rather than the legacy template. */
.website #ueber-mich .node-text-image > img {
    border-radius: 4px 120px 4px 4px;
}

/* Gepflegte Schriftgrößen ohne Inline-Styles; gelten auch auf kleinen Bildschirmen. */
.values {
    flex-wrap: wrap;
}
.values span {
    max-width: 100%;
    overflow-wrap: anywhere;
}
.values svg {
    flex-shrink: 0;
}
.values.values-size-10 span {
    font-size: 10px;
}
.values.values-size-11 span {
    font-size: 11px;
}
.values.values-size-12 span {
    font-size: 12px;
}
.values.values-size-13 span {
    font-size: 13px;
}
.values.values-size-14 span {
    font-size: 14px;
}
.values.values-size-15 span {
    font-size: 15px;
}
.values.values-size-16 span {
    font-size: 16px;
}
.values.values-size-17 span {
    font-size: 17px;
}
.values.values-size-18 span {
    font-size: 18px;
}
.values.values-size-19 span {
    font-size: 19px;
}
.values.values-size-20 span {
    font-size: 20px;
}
.values.values-size-21 span {
    font-size: 21px;
}
.values.values-size-22 span {
    font-size: 22px;
}
.values.values-size-23 span {
    font-size: 23px;
}
.values.values-size-24 span {
    font-size: 24px;
}
.values.values-size-25 span {
    font-size: 25px;
}
.values.values-size-26 span {
    font-size: 26px;
}
.values.values-size-27 span {
    font-size: 27px;
}
.values.values-size-28 span {
    font-size: 28px;
}
.values.values-size-29 span {
    font-size: 29px;
}
.values.values-size-30 span {
    font-size: 30px;
}
.values.values-size-31 span {
    font-size: 31px;
}
.values.values-size-32 span {
    font-size: 32px;
}

/* Slider-Einstellungen haben Vorrang vor dem Standardverlauf der Farbpalette.
 * Beide Selektoren abdecken: mit und ohne global ausgewählte Palette. */
.hero .heroimage::after,
body[data-palette] .hero .heroimage::after {
    background: linear-gradient(
        var(--hero-gradient-angle, 90deg),
        rgb(var(--hero-gradient-color, 18 36 27) / var(--hero-gradient-start, 0.78)) 0%,
        rgb(var(--hero-gradient-color, 18 36 27) / var(--hero-gradient-middle, 0.61)) 36%,
        rgb(var(--hero-gradient-color, 18 36 27) / var(--hero-gradient-end, 0.10)) 100%
    );
}