/* ==========================================================
   style.css
   ----------------------------------------------------------
   Eigenes Haupt-Stylesheet der Website

   WICHTIG:
   - Fokus auf Lesbarkeit
   - ruhige Gestaltung
   - gute Kontraste
   - große Klickflächen
   - klare Struktur
   ========================================================== */

/* ---------- Grundfarben als CSS-Variablen ---------- */
:root {
    --color-primary: #66C3D0;
    --color-secondary: #2f343a;
    --color-light: #f5f7f8;
    --color-white: #ffffff;
    --color-text: #2f343a;
    --color-border: #d7dfe3;
    --color-focus: #0d6efd;

    --font-size-base: 100%;
    --border-radius: 1rem;
    --transition-fast: 0.2s ease-in-out;
}

/* ---------- Kontrastmodus ---------- */
body.high-contrast {
    --color-primary: #008b85;
    --color-secondary: #111111;
    --color-light: #ffffff;
    --color-text: #111111;
    --color-border: #000000;
    background-color: #ffffff;
    color: #111111;
}

/* ---------- Grundlayout ---------- */
html {
    font-size: var(--font-size-base);
    scroll-behavior: smooth;
}

body {
    color: var(--color-text);
    background-color: var(--color-white);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.7;
}

/* ---------- Skip-Link ---------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    z-index: 9999;
    background: #000;
    color: #fff;
    padding: 0.75rem 1rem;
    text-decoration: none;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
}

/* ---------- Fokus-Stil für Tastaturnavigation ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 3px;
}

/* ---------- Überschriften ---------- */
h1, h2, h3 {
    color: var(--color-secondary);
    line-height: 1.3;
    font-weight: 700;
}

h1 {
    font-size: 2.2rem;
    margin-bottom: 1rem;
}

h2 {
    font-size: 1.65rem;
    margin-bottom: 1rem;
}

h3 {
    font-size: 1.2rem;
    margin-bottom: 0.75rem;
}

.lead {
    font-size: 1.15rem;
}

/* ---------- Abschnitte ---------- */
.section-space {
    padding: 4rem 0;
}

.section-light {
    background-color: var(--color-light);
}

.section-heading {
    max-width: 800px;
    margin-bottom: 2rem;
}

/* ---------- Header ---------- */
.site-header {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}

.topbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-start;
    align-items: center;
}

.site-brand {
    display: inline-flex;
    flex-direction: column;
    text-decoration: none;
}

.site-brand__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-secondary);
}

.site-brand__subtitle {
    font-size: 0.95rem;
    color: var(--color-primary);
}

.contact-phone {
    color: var(--color-secondary);
    font-weight: 700;
    text-decoration: none;
}

.accessibility-btn {
    border: 1px solid var(--color-border);
    background: var(--color-white);
    color: var(--color-secondary);
    padding: 0.55rem 0.85rem;
    border-radius: 0.75rem;
    min-height: 44px;
    transition: var(--transition-fast);
}

.accessibility-btn:hover {
    background-color: var(--color-light);
}

/* ---------- Navigation ---------- */
.main-nav {
    background-color: var(--color-white);
    border-bottom: 1px solid var(--color-border);
}

.navbar-toggler {
    border-color: var(--color-border);
}

.nav-link {
    color: var(--color-secondary);
    font-weight: 600;
    padding: 0.9rem 1rem !important;
    border-radius: 0.75rem;
}

.nav-link:hover,
.nav-link:focus {
    color: var(--color-primary);
}

.nav-link.active {
    color: var(--color-primary);
}

.nav-link--button {
    background-color: var(--color-primary);
    color: var(--color-white) !important;
    border-radius: 0.75rem;
    padding-inline: 1rem !important;
}

.nav-link--button:hover,
.nav-link--button:focus {
    background-color: var(--color-secondary);
    color: var(--color-white) !important;
}

/* ---------- Buttons ---------- */
.btn-primary-custom,
.btn-outline-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0.8rem 1.2rem;
    border-radius: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    transition: var(--transition-fast);
}

.btn-primary-custom {
    background-color: var(--color-primary);
    border: 2px solid var(--color-primary);
    color: var(--color-white);
}

.btn-primary-custom:hover,
.btn-primary-custom:focus {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
}

.btn-outline-custom {
    background-color: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-secondary);
}

.btn-outline-custom:hover,
.btn-outline-custom:focus {
    background-color: var(--color-light);
    color: var(--color-secondary);
}

/* ---------- Gruppen ---------- */
.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* ---------- Karten ---------- */
.content-card {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}

.hero-card {
    min-height: 260px;
    display: flex;
    align-items: center;
}

/* ---------- Listen ---------- */
.simple-list {
    padding-left: 1.2rem;
}
/* ---------- Main ---------- */
main {
    min-height: 65vh;
}
/* ---------- Footer ---------- */
.site-footer {
    background-color: var(--color-secondary);
    color: var(--color-white);
    padding: 3rem 0 1.5rem;
}

.site-footer a {
    color: var(--color-white);
}

.footer-title {
    color: var(--color-white);
    font-size: 1.15rem;
}

.footer-links {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.footer-links li + li {
    margin-top: 0.5rem;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    margin-top: 2rem;
    padding-top: 1rem;
}

/* ---------- Responsive Anpassungen ---------- */
@media (max-width: 991.98px) {
    .topbar-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.45rem;
    }

    .section-space {
        padding: 3rem 0;
    }

    .content-card {
        padding: 1.2rem;
    }
}
/* ==========================================================
   Zusätzliche Form- und Hilfsstile
   ----------------------------------------------------------
   Für Rückrufformular, Pflichtfeld-Markierung und
   größere, besser klickbare Auswahlfelder
   ========================================================== */

.form-hint {
    color: var(--color-secondary);
    margin-bottom: 1rem;
}

.form-optional {
    font-size: 0.95rem;
    color: #5f6b73;
}

.required-mark {
    color: #b00020;
    font-weight: 700;
}

.form-label {
    font-weight: 700;
    color: var(--color-secondary);
}

.form-control,
.form-select {
    min-height: 48px;
    border-radius: 0.85rem;
    border: 1px solid var(--color-border);
    padding: 0.75rem 1rem;
}

textarea.form-control {
    min-height: 140px;
}

/* Auswahl für Tageszeiten
   Große klickbare Felder statt winziger Standard-Radios */
.callback-time-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.callback-option {
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    padding: 1rem;
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background-color: var(--color-white);
}

.callback-option .form-check-input {
    margin-top: 0;
    flex-shrink: 0;
}

.callback-option .form-check-label {
    font-weight: 600;
}

/* Auf kleineren Geräten untereinander,
   damit nichts gequetscht wirkt */
@media (max-width: 767.98px) {
    .callback-time-grid {
        grid-template-columns: 1fr;
    }
}
/* ==========================================================
   Feinschliff für die Seite "Hilfe & Leistungen"
   ----------------------------------------------------------
   Ziel:
   - bessere Lesbarkeit
   - mehr Ruhe
   - seniorengerechtere Typografie
   - gleichmäßigere Abstände
   ========================================================== */

.leistungen-intro {
    max-width: 960px;
    margin-bottom: 3.5rem;
}

.leistungen-lead {
    font-size: 1.2rem;
    line-height: 1.8;
    max-width: 900px;
    margin-bottom: 1rem;
}

.leistungen-subintro {
    font-size: 1.08rem;
    line-height: 1.8;
    max-width: 820px;
    margin-bottom: 0;
}

.service-block + .service-block {
    margin-top: 5rem;
}

.service-content {
    padding-inline: 0.5rem;
}

.service-content h2 {
    font-size: 2rem;
    line-height: 1.3;
    margin-bottom: 1.25rem;
}

.service-content h3 {
    font-size: 1.25rem;
    margin-top: 1.75rem;
    margin-bottom: 0.9rem;
}

.service-content p {
    font-size: 1.08rem;
    line-height: 1.85;
    margin-bottom: 1rem;
}

.service-content ul {
    margin-top: 1rem;
    margin-bottom: 0;
    padding-left: 1.4rem;
}

.service-content li {
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 0.45rem;
}

.service-image-wrap {
    border: 1px solid var(--color-border);
    border-radius: 1.25rem;
    overflow: hidden;
    background-color: var(--color-white);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}

.service-image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
}

/* Ablaufbereich unten ruhiger und passender */
.leistungen-ablauf {
    margin-top: 5rem;
    padding: 3rem 0;
    border-radius: 1.5rem;
}

.leistungen-ablauf .section-heading {
    max-width: 860px;
    margin-bottom: 2.5rem;
}

.leistungen-ablauf .section-heading p {
    font-size: 1.08rem;
    line-height: 1.8;
}

.leistungen-ablauf .content-card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.9rem;
}

.leistungen-ablauf .content-card p {
    font-size: 1.02rem;
    line-height: 1.75;
}

/* Abschlussbereich */
.leistungen-abschluss {
    margin-top: 5rem;
}

.leistungen-abschluss .content-card {
    padding: 2rem;
}

.leistungen-abschluss p {
    font-size: 1.08rem;
    line-height: 1.8;
    max-width: 760px;
    margin-inline: auto;
}

/* Mobile Feinschliff */
@media (max-width: 991.98px) {
    .service-image {
        min-height: 320px;
    }

    .service-content {
        padding-top: 0.5rem;
        padding-inline: 0;
    }

    .service-content h2 {
        font-size: 1.7rem;
    }
}

@media (max-width: 767.98px) {
    .leistungen-intro {
        margin-bottom: 4rem;
    }

    .leistungen-lead {
        font-size: 1.08rem;
        line-height: 1.75;
    }

    .leistungen-subintro {
        font-size: 1rem;
        line-height: 1.75;
    }

    .service-block + .service-block {
        margin-top: 3rem;
    }

    .service-image {
        min-height: 240px;
    }

    .service-content h2 {
        font-size: 1.45rem;
    }

    .service-content h3 {
        font-size: 1.12rem;
    }

    .service-content p,
    .service-content li {
        font-size: 1rem;
        line-height: 1.75;
    }

    .leistungen-ablauf,
    .leistungen-abschluss {
        margin-top: 3rem;
    }
}
/* ==========================================================
   Preis-Seite
   ----------------------------------------------------------
   Zusätzliche Styles für "Preise & Anfahrt"
   ========================================================== */

.preise-intro {
    max-width: 920px;
    margin-bottom: 3.5rem;
}

.preise-lead {
    font-size: 1.2rem;
    line-height: 1.8;
    max-width: 860px;
    margin-bottom: 1rem;
}

.preise-subintro {
    font-size: 1.08rem;
    line-height: 1.8;
    max-width: 760px;
    margin-bottom: 0;
}

.preise-vorgespräch,
.preise-leistungsblock,
.preise-anfahrt,
.preise-hinweise,
.preise-abschluss {
    margin-top: 4rem;
}

.preise-highlight-card {
    padding: 2rem;
}

.preise-highlight-badge {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 160px;
    border-radius: 1.25rem;
    background: var(--color-light);
    border: 1px solid var(--color-border);
    text-align: center;
}

.preise-highlight-badge__top {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
}

.preise-highlight-badge__bottom {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-secondary);
}

.preise-card {
    padding: 1.5rem;
}

.preise-card__dauer {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: 0.5rem;
}

.preise-card__preis {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
    margin-bottom: 1rem;
}

.preise-card p:last-child {
    font-size: 1.02rem;
    line-height: 1.75;
}

.zonenliste {
    list-style: none;
    padding-left: 0;
    margin: 1.5rem 0;
}

.zonenliste li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--color-border);
}

.zonenliste__name {
    font-weight: 700;
    color: var(--color-secondary);
}

.zonenliste__info {
    text-align: right;
}

.preise-hinweis {
    font-size: 0.98rem;
    line-height: 1.7;
    color: #5f6b73;
}

.preise-map-wrap {
    border: 1px solid var(--color-border);
    border-radius: 1.25rem;
    overflow: hidden;
    background-color: var(--color-white);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}

.preise-map {
    display: block;
    width: 100%;
    height: auto;
}

.preise-hinweise-list li {
    margin-bottom: 0.6rem;
}

.preise-abschluss .content-card {
    padding: 2rem;
}

.preise-abschluss p {
    max-width: 760px;
    margin-inline: auto;
    font-size: 1.08rem;
    line-height: 1.8;
}

/* Mobile Anpassungen */
@media (max-width: 991.98px) {
    .preise-highlight-badge {
        min-height: 120px;
    }

    .preise-card__preis {
        font-size: 1.8rem;
    }
}

@media (max-width: 767.98px) {
    .preise-intro {
        margin-bottom: 2.5rem;
    }

    .preise-lead {
        font-size: 1.08rem;
        line-height: 1.75;
    }

    .preise-subintro {
        font-size: 1rem;
        line-height: 1.75;
    }

    .preise-vorgespräch,
    .preise-leistungsblock,
    .preise-anfahrt,
    .preise-hinweise,
    .preise-abschluss {
        margin-top: 3rem;
    }

    .zonenliste li {
        flex-direction: column;
        align-items: flex-start;
    }

    .zonenliste__info {
        text-align: left;
    }
}
/* ==========================================================
   Für Angehörige
   ----------------------------------------------------------
   Zusätzliche Styles für die Seite "Für Angehörige"
   ========================================================== */

.angehoerige-intro {
    max-width: 920px;
    margin-bottom: 3.5rem;
}

.angehoerige-lead {
    font-size: 1.2rem;
    line-height: 1.8;
    max-width: 860px;
    margin-bottom: 1rem;
}

.angehoerige-subintro {
    font-size: 1.08rem;
    line-height: 1.8;
    max-width: 780px;
    margin-bottom: 0;
}

.angehoerige-hero-block,
.angehoerige-situationen,
.angehoerige-beispiele,
.angehoerige-gutschein,
.angehoerige-abschluss {
    margin-top: 4rem;
}

.angehoerige-gutschein .content-card,
.angehoerige-abschluss .content-card {
    padding: 2rem;
}

.angehoerige-abschluss p {
    max-width: 760px;
    margin-inline: auto;
    font-size: 1.08rem;
    line-height: 1.8;
}

/* Mobile Anpassungen */
@media (max-width: 767.98px) {
    .angehoerige-intro {
        margin-bottom: 2.5rem;
    }

    .angehoerige-lead {
        font-size: 1.08rem;
        line-height: 1.75;
    }

    .angehoerige-subintro {
        font-size: 1rem;
        line-height: 1.75;
    }

    .angehoerige-hero-block,
    .angehoerige-situationen,
    .angehoerige-beispiele,
    .angehoerige-gutschein,
    .angehoerige-abschluss {
        margin-top: 3rem;
    }
}

/* ==========================================================
   Anleitungen
   ----------------------------------------------------------
   Zusätzliche Styles für die Seite "Anleitungen"
   ========================================================== */

.anleitungen-intro {
    max-width: 920px;
    margin-bottom: 3.5rem;
}

.anleitungen-lead {
    font-size: 1.2rem;
    line-height: 1.8;
    max-width: 860px;
    margin-bottom: 1rem;
}

.anleitungen-subintro {
    font-size: 1.08rem;
    line-height: 1.8;
    max-width: 780px;
    margin-bottom: 0;
}

.anleitungen-grid,
.anleitungen-hinweis,
.anleitungen-abschluss {
    margin-top: 4rem;
}

.anleitungen-hinweis .content-card,
.anleitungen-abschluss .content-card {
    padding: 2rem;
}

.anleitungen-abschluss p {
    max-width: 760px;
    margin-inline: auto;
    font-size: 1.08rem;
    line-height: 1.8;
}

/* Mobile Anpassungen */
@media (max-width: 767.98px) {
    .anleitungen-intro {
        margin-bottom: 2.5rem;
    }

    .anleitungen-lead {
        font-size: 1.08rem;
        line-height: 1.75;
    }

    .anleitungen-subintro {
        font-size: 1rem;
        line-height: 1.75;
    }

    .anleitungen-grid,
    .anleitungen-hinweis,
    .anleitungen-abschluss {
        margin-top: 3rem;
    }
}

/* ==========================================================
   Anleitung-Template
   ----------------------------------------------------------
   Einheitliches Layout für alle Anleitungen
   ========================================================== */

.anleitung-breadcrumb {
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    color: #5f6b73;
}

.anleitung-breadcrumb a {
    text-decoration: none;
    color: var(--color-primary);
}

.anleitung-intro {
    max-width: 920px;
    margin-bottom: 3rem;
}

.anleitung-lead {
    font-size: 1.2rem;
    line-height: 1.8;
    max-width: 860px;
    margin-bottom: 1rem;
}

.anleitung-subintro {
    font-size: 1.08rem;
    line-height: 1.8;
    max-width: 780px;
    margin-bottom: 0;
}

.anleitung-meta,
.anleitung-steps-section,
.anleitung-tips,
.anleitung-problems,
.anleitung-abschluss {
    margin-top: 3rem;
}

.anleitung-meta-card h3 {
    font-size: 1.15rem;
    margin-bottom: 0.8rem;
}

.anleitung-meta-card p {
    font-size: 1.05rem;
    line-height: 1.75;
}

.anleitung-step + .anleitung-step {
    margin-top: 2rem;
}

.anleitung-step__content {
    position: relative;
    padding-left: 4.25rem;
}

.anleitung-step__number {
    position: absolute;
    top: 0;
    left: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px;
    background-color: var(--color-primary);
    color: var(--color-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.15rem;
}

.anleitung-step__content h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.anleitung-step__content p {
    font-size: 1.08rem;
    line-height: 1.85;
    margin-bottom: 1rem;
}

.anleitung-step__content li {
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 0.45rem;
}

.anleitung-step__image-wrap {
    border: 1px solid var(--color-border);
    border-radius: 1.25rem;
    overflow: hidden;
    background-color: var(--color-white);
}

.anleitung-step__image {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
}

.anleitung-abschluss .content-card {
    padding: 2rem;
}

.anleitung-abschluss p {
    max-width: 760px;
    margin-inline: auto;
    font-size: 1.08rem;
    line-height: 1.8;
}

/* Mobile Anpassungen */
@media (max-width: 767.98px) {
    .anleitung-intro {
        margin-bottom: 2.5rem;
    }

    .anleitung-lead {
        font-size: 1.08rem;
        line-height: 1.75;
    }

    .anleitung-subintro {
        font-size: 1rem;
        line-height: 1.75;
    }

    .anleitung-step__content {
        padding-left: 0;
        padding-top: 3.5rem;
    }

    .anleitung-step__number {
        top: 0;
        left: 0;
    }

    .anleitung-step__content h3 {
        font-size: 1.3rem;
    }

    .anleitung-step__content p,
    .anleitung-step__content li {
        font-size: 1rem;
        line-height: 1.75;
    }

    .anleitung-step__image {
        min-height: 220px;
    }
}
/* ==========================================================
   Gutscheine
   ----------------------------------------------------------
   Styles für Gutschein-Seite und Prüfseite
   ========================================================== */

.gutscheine-intro,
.gutschein-pruefen-intro {
    max-width: 920px;
    margin-bottom: 3rem;
}

.gutscheine-lead,
.gutschein-pruefen-lead {
    font-size: 1.2rem;
    line-height: 1.8;
    max-width: 860px;
    margin-bottom: 1rem;
}

.gutscheine-subintro,
.gutschein-pruefen-subintro {
    font-size: 1.08rem;
    line-height: 1.8;
    max-width: 780px;
    margin-bottom: 0;
}

.gutscheine-vorlagen,
.gutscheine-werte,
.gutscheine-ablauf,
.gutscheine-kaufen,
.gutscheine-pruefung-hinweis {
    margin-top: 4rem;
}

.gutscheine-template-card__image-wrap {
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 1rem;
    background-color: var(--color-white);
}

.gutscheine-template-card__image {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.gutscheine-value-card__value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
    margin-bottom: 1rem;
}

.gutscheine-pruefung-hinweis .content-card,
.gutschein-pruefen-result,
.gutschein-pruefen-page .content-card {
    padding: 2rem;
}

.gutschein-pruefen-result {
    margin-top: 2rem;
}

/* Mobile Anpassungen */
@media (max-width: 767.98px) {
    .gutscheine-intro,
    .gutschein-pruefen-intro {
        margin-bottom: 2.5rem;
    }

    .gutscheine-lead,
    .gutschein-pruefen-lead {
        font-size: 1.08rem;
        line-height: 1.75;
    }

    .gutscheine-subintro,
    .gutschein-pruefen-subintro {
        font-size: 1rem;
        line-height: 1.75;
    }

    .gutscheine-vorlagen,
    .gutscheine-werte,
    .gutscheine-ablauf,
    .gutscheine-kaufen,
    .gutscheine-pruefung-hinweis {
        margin-top: 3rem;
    }

    .gutscheine-template-card__image {
        height: 200px;
    }

    .gutscheine-value-card__value {
        font-size: 1.8rem;
    }
}
/* ==========================================================
   Gutschein-Bestellung und Prüfung
   ----------------------------------------------------------
   Zusätzlicher Feinschliff für Formulare, Vorschauen
   und Prüf-Ergebnis
   ========================================================== */

.gutscheine-template-card__image-wrap {
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 1rem;
    background-color: var(--color-white);
}

.gutscheine-template-card__image {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.gutscheine-value-card__value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
    margin-bottom: 1rem;
}

.gutschein-pruefen-result {
    margin-top: 2rem;
}

.gutscheine-pruefung-hinweis .content-card,
.gutschein-pruefen-page .content-card,
.gutschein-pruefen-result {
    padding: 2rem;
}

@media (max-width: 767.98px) {
    .gutscheine-template-card__image {
        height: 200px;
    }

    .gutscheine-value-card__value {
        font-size: 1.8rem;
    }
}
/* ==========================================================
   Live-Vorschau Gutschein
   ----------------------------------------------------------
   Vorschau direkt auf der Gutschein-Seite
   ========================================================== */

.voucher-live-preview-card {
    position: sticky;
    top: 2rem;
}

.voucher-live-preview-hint {
    font-size: 0.98rem;
    line-height: 1.7;
    color: #5f6b73;
    margin-bottom: 1rem;
}

.voucher-preview-canvas-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background-color: var(--color-white);
}

.voucher-preview-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 1123px;
    height: 794px;
    transform-origin: top left;
}

.voucher-preview-bg {
    position: absolute;
    inset: 0;
    width: 1123px;
    height: 794px;
    object-fit: cover;
}

.voucher-preview-field {
    position: absolute;
}

@media (max-width: 991.98px) {
    .voucher-live-preview-card {
        position: static;
        top: auto;
    }
}
/* ==========================================================
   Über mich
   ----------------------------------------------------------
   Zusätzliche Styles für die Seite "Über mich"
   ========================================================== */

.ueber-mich-intro {
    max-width: 920px;
    margin-bottom: 0;
}

.ueber-mich-lead {
    font-size: 1.2rem;
    line-height: 1.8;
    max-width: 860px;
    margin-bottom: 1rem;
}

.ueber-mich-subintro {
    font-size: 1.08rem;
    line-height: 1.8;
    max-width: 780px;
    margin-bottom: 0;
}

.ueber-mich-werte,
.ueber-mich-arbeitsweise,
.ueber-mich-zielgruppen,
.ueber-mich-motivation,
.ueber-mich-abschluss {
    margin-top: 4rem;
}

.ueber-mich-motivation .content-card,
.ueber-mich-abschluss .content-card {
    padding: 2rem;
}

.ueber-mich-abschluss p {
    max-width: 760px;
    margin-inline: auto;
    font-size: 1.08rem;
    line-height: 1.8;
}

@media (max-width: 767.98px) {
    .ueber-mich-lead {
        font-size: 1.08rem;
        line-height: 1.75;
    }

    .ueber-mich-subintro {
        font-size: 1rem;
        line-height: 1.75;
    }

    .ueber-mich-werte,
    .ueber-mich-arbeitsweise,
    .ueber-mich-zielgruppen,
    .ueber-mich-motivation,
    .ueber-mich-abschluss {
        margin-top: 3rem;
    }
}