@font-face {
    font-family: 'Mulish';
    src: url('/css/fonts/mulish-variable.woff2') format('woff2-variations');
    font-weight: 200 1000;
    font-display: swap;
}

:root {
    --rp-kopf-hoehe: 65px;
    --rp-bg: #f4f5f7;
    --rp-text: #1f2430;
    --rp-kopf-bg: #fff;
    --rp-kopf-text: #1f2430;
    --rp-kopf-rand: rgba(0,0,0,.1);
    --rp-kopf-hover: rgba(0,0,0,.05);
    --rp-kopf-text-schwach: rgba(31,36,48,.6);
    --rp-flaeche: #fff;
    --rp-flaeche-alt: #f9fafb;
    --rp-rand: #eee;
    --rp-rand-stark: #d5d8de;
    --rp-grau-text: #555;
    --rp-grau-text-schwach: #888;
    --rp-schatten: rgba(0,0,0,.06);
    --rp-akzent: #2563eb;
    --rp-akzent-hover: #1d4ed8;
    --rp-fehler-bg: #fdecea;
    --rp-fehler-text: #b91c1c;
}

:root[data-theme="dark"] {
    --rp-bg: #14161c;
    --rp-text: #e7e9ee;
    --rp-kopf-bg: #1a1c22;
    --rp-kopf-text: #e7e9ee;
    --rp-kopf-rand: rgba(255,255,255,.1);
    --rp-kopf-hover: rgba(255,255,255,.08);
    --rp-kopf-text-schwach: rgba(231,233,238,.6);
    --rp-flaeche: #1f2228;
    --rp-flaeche-alt: #262a32;
    --rp-rand: #343842;
    --rp-rand-stark: #3d424d;
    --rp-grau-text: #a6abb8;
    --rp-grau-text-schwach: #767c8a;
    --rp-schatten: rgba(0,0,0,.4);
    --rp-akzent: #3b82f6;
    --rp-akzent-hover: #60a5fa;
    --rp-fehler-bg: #3a1c1c;
    --rp-fehler-text: #f87171;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Mulish', system-ui, sans-serif;
    background: var(--rp-bg);
    color: var(--rp-text);
}

.rp-versteckt { display: none !important; }

.rp-kopf {
    background: var(--rp-kopf-bg);
    color: var(--rp-kopf-text);
    border-bottom: 1px solid var(--rp-kopf-rand);
}

.rp-kopf-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 760px;
    height: calc(var(--rp-kopf-hoehe) - 1px);
    margin: 0 auto;
    padding: 0 1.2rem;
}
.rp-kopf-marke { display: inline-flex; align-items: center; gap: .5rem; }
.rp-kopf-logo { flex-shrink: 0; color: var(--rp-kopf-text); }
.rp-kopf-titel { font-size: 1.15rem; font-weight: 700; }

.rp-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: none;
    border: 1px solid var(--rp-kopf-rand);
    color: var(--rp-kopf-text);
    border-radius: 8px;
    padding: .4rem .8rem;
    font-family: inherit;
    font-size: .85rem;
    cursor: pointer;
    white-space: nowrap;
}
.rp-refresh-btn:hover { background: var(--rp-kopf-hover); }

.rp-theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background: none;
    border: 1px solid var(--rp-kopf-rand);
    color: var(--rp-kopf-text);
    border-radius: 8px;
    font-size: 1.1rem;
    cursor: pointer;
}
.rp-theme-btn:hover { background: var(--rp-kopf-hover); }
.rp-theme-btn .ti-moon { display: none; }
:root[data-theme="dark"] .rp-theme-btn .ti-sun { display: none; }
:root[data-theme="dark"] .rp-theme-btn .ti-moon { display: inline; }

.rp-main {
    max-width: 760px;
    margin: 0 auto;
    padding: 1.2rem 1rem 5rem;
}

.rp-tab-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--rp-kopf-bg);
    border-top: 1px solid var(--rp-kopf-rand);
    z-index: 400;
    padding-bottom: env(safe-area-inset-bottom);
}

.rp-tab-bar-inner {
    display: flex;
    max-width: 760px;
    height: 64px;
    margin: 0 auto;
}

/* Ab Desktop-Breite wandert die Tab-Leiste von unten nach oben,
   direkt unter den Header, und bleibt dort beim Scrollen fixiert. */
@media (min-width: 900px) {
    .rp-kopf {
        position: sticky;
        top: 0;
        z-index: 410;
    }
    .rp-tab-bar {
        top: var(--rp-kopf-hoehe);
        bottom: auto;
        border-top: none;
        border-bottom: 1px solid var(--rp-kopf-rand);
        padding-bottom: 0;
    }
    .rp-main {
        padding-top: calc(var(--rp-kopf-hoehe) + 64px + 1.2rem);
        padding-bottom: 1.2rem;
    }
}

.rp-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: none;
    background: none;
    color: var(--rp-kopf-text-schwach);
    text-decoration: none;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    transition: color .15s;
}
.rp-tab:hover { color: var(--rp-kopf-text); }
.rp-tab .ti { font-size: 1.35rem; line-height: 1; }
.rp-tab--active { color: var(--rp-akzent); }


.rp-hinweis {
    padding: 1rem;
    border-radius: 10px;
    background: var(--rp-flaeche);
    text-align: center;
    color: var(--rp-grau-text);
}
.rp-hinweis--fehler { background: var(--rp-fehler-bg); color: var(--rp-fehler-text); }

.rp-pin-box {
    max-width: 320px;
    margin: 3rem auto 0;
    display: flex;
    flex-direction: column;
    gap: .8rem;
    background: var(--rp-flaeche);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 10px var(--rp-schatten);
}
.rp-pin-label { font-weight: 600; }
.rp-pin-eingabe {
    padding: .7rem .8rem;
    font-size: 1.3rem;
    letter-spacing: .3em;
    text-align: center;
    border: 1.2px solid var(--rp-rand-stark);
    border-radius: 8px;
    font-family: inherit;
    background: var(--rp-flaeche);
    color: var(--rp-text);
}

.rp-btn {
    padding: .65rem 1.2rem;
    border: none;
    border-radius: 8px;
    background: var(--rp-akzent);
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}
.rp-btn--block { width: 100%; }
.rp-btn:hover { background: var(--rp-akzent-hover); }

.rp-box { background: var(--rp-flaeche); border-radius: 12px; padding: 1rem; margin-bottom: 1.2rem; }
.rp-box-titel { font-size: 1rem; margin: 0 0 .8rem; }

.rp-tabelle-wrap { overflow-x: auto; }
.rp-tabelle { border-collapse: collapse; font-size: .82rem; white-space: nowrap; width: 100%; }
.rp-tabelle th, .rp-tabelle td { padding: .35rem .6rem; text-align: right; border-bottom: 1px solid var(--rp-rand); }
.rp-tabelle th:first-child, .rp-tabelle td:first-child { text-align: left; font-weight: 600; }
.rp-tabelle thead th { color: var(--rp-grau-text-schwach); font-weight: 500; }

.rp-liste { display: flex; flex-direction: column; gap: .7rem; }
.rp-liste:empty::after { content: 'Keine Einträge.'; color: var(--rp-grau-text-schwach); font-size: .9rem; }

/* ── Termin-Karte (Vorbild Altsystem: Status-Badge + Spalten) ─────────────── */
.rp-karte { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .9rem; padding: .8rem .9rem; border-radius: 10px; background: var(--rp-flaeche-alt); }

.rp-badge {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    border-radius: 8px;
    background: var(--rp-badge-farbe, #999);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
}

.rp-art { flex-shrink: 0; min-width: 90px; font-size: .85rem; }
.rp-art-label { font-weight: 700; }
.rp-art-tage { color: var(--rp-grau-text); }
.rp-art-tage b { color: var(--rp-text); }

.rp-typ { flex-shrink: 0; min-width: 120px; font-size: .85rem; color: var(--rp-grau-text); }
.rp-typ-objekt { display: block; }

.rp-gast { flex: 1 1 160px; min-width: 140px; }
.rp-gast-name { font-weight: 700; }
.rp-gast-personen { margin-top: .25rem; display: flex; gap: .7rem; flex-wrap: wrap; font-size: .85rem; color: var(--rp-grau-text); }
.rp-gast-personen span { display: inline-flex; align-items: center; gap: .25rem; }

.rp-waesche { flex-shrink: 0; min-width: 70px; text-align: center; font-size: .8rem; color: var(--rp-grau-text); }
.rp-waesche b { display: block; font-size: 1.1rem; color: var(--rp-text); }

.rp-daten { flex-shrink: 0; min-width: 150px; font-size: .82rem; color: var(--rp-grau-text); }

.rp-naechte { flex-shrink: 0; display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; color: var(--rp-grau-text); white-space: nowrap; }

.rp-notiz {
    flex-basis: 100%;
    margin-top: .3rem;
    padding-top: .6rem;
    border-top: 1px dashed var(--rp-rand-stark);
    font-size: .85rem;
    color: var(--rp-grau-text);
}

@media (max-width: 640px) {
    .rp-karte { gap: .5rem; }
    .rp-art { min-width: 70px; }
    .rp-typ { order: 5; flex-basis: 100%; text-align: right; }
    .rp-gast { order: 2; flex-basis: calc(100% - 45px - 90px - .5rem - .5rem); }
    .rp-waesche { order: 3; }
    .rp-daten { order: 4; flex-basis: 100%; }
    .rp-naechte { order: 4; }
}