html, body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    margin: 0;
    background: #FBF6EF;
    color: #33302A;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

a { color: #6FA287; }

/* Blazor setzt nach dem Navigieren den Fokus auf die erste Überschrift
   (FocusOnNavigate). Den sichtbaren Rahmen dabei ausblenden. */
h1:focus, h1:focus-visible { outline: none; }

/* ---- Info-/Rechtsseiten (Impressum, Datenschutz, Kontakt, AGB, worum-gehts) ---- */
.page { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.page-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 22px 0; }
.page-nav .brand { font-family: Georgia, 'Times New Roman', serif; font-size: 23px; font-weight: 600; color: #33302A; }
.page-nav .brand span { color: #DD7A54; }
.page-nav .back { font-size: 14px; color: #877E70; text-decoration: none; }
.page-nav .back:hover { text-decoration: underline; }
.page .card { background: #fff; border: 1px solid rgba(51,48,42,.10); border-radius: 22px; padding: 40px 34px; margin: 14px auto 40px; box-shadow: 0 18px 46px rgba(120,90,50,.12); }
.page h1 { font-family: Georgia, 'Times New Roman', serif; font-size: 31px; font-weight: 600; margin: 0 0 8px; line-height: 1.2; }
.page .sub { color: #877E70; font-size: 15.5px; margin-bottom: 24px; }
.page h2 { font-family: Georgia, 'Times New Roman', serif; font-size: 20px; font-weight: 600; margin: 28px 0 10px; }
.page p { margin-bottom: 12px; font-size: 15.5px; }
.page ul { margin: 0 0 12px 22px; }
.page li { margin-bottom: 7px; font-size: 15.5px; }
.page a { color: #6FA287; }
.page b { color: #33302A; }
.page .muted { color: #877E70; font-size: 14px; }
.page .promise { background: linear-gradient(120deg, rgba(221,122,84,.08), rgba(111,162,135,.08)); border: 1px solid rgba(221,122,84,.22); border-radius: 16px; padding: 22px 24px; margin: 8px 0 24px; }
.page .promise h2 { margin-top: 0; }
.page .mail { display: inline-block; margin: 14px 0 6px; padding: 14px 26px; border-radius: 14px; background: linear-gradient(120deg, #6FA287, #5b8f74); color: #fff; font-weight: 700; text-decoration: none; }
.page .mail:hover { text-decoration: none; color: #fff; }
.page .pfoot { border-top: 1px solid rgba(51,48,42,.10); margin-top: 10px; padding: 22px 0 44px; text-align: center; color: #877E70; font-size: 13px; }
.page .pfoot a { color: #877E70; text-decoration: underline; }

/* Beispielkarten in "worum-gehts" */
.ex { display: flex; gap: 18px; align-items: center; background: rgba(51,48,42,.025); border: 1px solid rgba(51,48,42,.10); border-radius: 18px; padding: 16px; margin: 16px 0; }
.ex img { width: 120px; height: 120px; flex: 0 0 auto; border-radius: 14px; object-fit: cover; background: #F3ECE2; }
.ex .said { font-family: Georgia, 'Times New Roman', serif; font-size: 18px; font-weight: 600; line-height: 1.35; margin-bottom: 8px; }
.ex .why { font-size: 14.5px; color: #877E70; margin: 0; }
.step { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.step .no { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: rgba(221,122,84,.12); color: #DD7A54; font-family: Georgia, serif; font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center; }
@media (max-width: 560px) { .ex { flex-direction: column; align-items: flex-start; } .ex img { width: 100%; height: auto; aspect-ratio: 1/1; } }

/* Blazor-Fehleranzeige */
#blazor-error-ui {
    color-scheme: light only;
    background: #fff3cd;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: #b32121;
    padding: 1rem;
    color: white;
}