:root {
    --green: #7c9f5b;
    --green-dark: #52773a;
    --cream: #f7f7f2;
    --card: #ffffff;
    --text: #20251e;
    --muted: #737a70;
    --danger: #c95b5b;
    --warning: #d59b3a;
    --border: #e5e7e1;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "Segoe UI",
        sans-serif;
    background: var(--cream);
    color: var(--text);
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    border: 0;
}

#app {
    min-height: 100vh;
    padding-bottom: 90px;
}

.header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(247,247,242,.94);
    backdrop-filter: blur(15px);
    padding:
        calc(env(safe-area-inset-top) + 16px)
        18px
        14px;
    border-bottom: 1px solid var(--border);
}

.header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.logo {
    font-weight: 800;
    font-size: 22px;
}

.content {
    max-width: 900px;
    margin: auto;
    padding: 18px;
}

.card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 18px;
    margin-bottom: 14px;
    box-shadow: 0 5px 20px rgba(0,0,0,.03);
}

.card h2,
.card h3 {
    margin-top: 0;
}

.animal-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.animal-avatar {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: #e5efd9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 29px;
}

.animal-left {
    display: flex;
    align-items: center;
    gap: 13px;
}

.weight {
    font-size: 23px;
    font-weight: 800;
}

.muted {
    color: var(--muted);
}

.button {
    background: var(--green);
    color: white;
    padding: 13px 17px;
    border-radius: 14px;
    font-weight: 700;
    cursor: pointer;
}

.button.secondary {
    background: #edf1e8;
    color: var(--green-dark);
}

.button.danger {
    background: var(--danger);
}

.button.small-button {
    padding: 8px 11px;
    font-size: 13px;
}

.button.full {
    width: 100%;
}

input,
textarea,
select {
    width: 100%;
    border: 1px solid var(--border);
    background: white;
    border-radius: 13px;
    padding: 13px;
    margin-top: 6px;
    margin-bottom: 13px;
    outline: none;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--green);
}

label {
    font-weight: 700;
    font-size: 14px;
}

textarea {
    min-height: 110px;
    resize: vertical;
}

.logo img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
}

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.quick {
    text-align: center;
    padding: 16px 10px;
    border-radius: 18px;
    background: white;
    border: 1px solid var(--border);
    cursor: pointer;
}

.quick-icon {
    font-size: 27px;
}

.nav {
    position: fixed;
    bottom: 5px;
    left: 0;
    right: 0;
    z-index: 50;
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(15px);
    border-top: 1px solid var(--border);
    padding:
        8px
        8px
        calc(env(safe-area-inset-bottom) + 8px);
    display: flex;
    justify-content: space-around;
}

.nav button {
    background: none;
    color: var(--muted);
    font-size: 11px;
    cursor: pointer;
}

.nav button.active {
    color: var(--green-dark);
    font-weight: 800;
}

.nav-icon {
    display: block;
    font-size: 22px;
    margin-bottom: 2px;
}

.badge {
    display: inline-block;
    padding: 5px 9px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    background: #edf1e8;
    color: var(--green-dark);
}

.badge.warning {
    background: #fff0d0;
    color: #8a621c;
}

.badge.danger {
    background: #ffe1e1;
    color: #963d3d;
}

.timeline-item {
    border-left: 3px solid var(--green);
    padding-left: 14px;
    margin-bottom: 20px;
}

.entry {
    background: white;
    border: 1px solid var(--border);
    border-radius: 17px;
    padding: 15px;
    margin-bottom: 10px;
}

.entry-header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: flex-start;
}

.entry-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.entry-actions button {
    background: #edf1e8;
    color: var(--green-dark);
    border-radius: 10px;
    padding: 7px 9px;
    cursor: pointer;
}

.entry-actions button.delete {
    background: #ffe1e1;
    color: #963d3d;
}

.entry-photo {
    width: 100%;
    max-height: 300px;
    object-fit: cover;
    border-radius: 14px;
    margin-top: 12px;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 25px;
    margin-bottom: 12px;
}

.section-title h2 {
    margin: 0;
}

.modal-bg {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: flex-end;
    z-index: 100;
}

.modal {
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--cream);
    border-radius: 24px 24px 0 0;
    padding:
        20px
        18px
        calc(env(safe-area-inset-bottom) + 25px);
}

.close {
    float: right;
    background: #e9ebe5;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
}

.login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-box {
    width: 100%;
    max-width: 430px;
}

.empty {
    text-align: center;
    padding: 40px 15px;
    color: var(--muted);
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
    gap: 10px;
}

.small {
    font-size: 13px;
}

.notice {
    padding: 13px;
    border-radius: 13px;
    background: #edf1e8;
    margin-bottom: 12px;
}


.health-alert {
    border-left: 5px solid var(--warning);
    background: #fff9ec;
}
.health-alert.danger {
    border-left-color: var(--danger);
    background: #fff1f1;
}
.health-alert.good {
    border-left-color: var(--green);
    background: #f2f7ed;
}
.dose-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
}
.dose-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.dose-actions button { padding:8px 10px; border-radius:10px; cursor:pointer; }
.document-row {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:10px 0; border-top:1px solid var(--border);
}
.document-link { color:var(--green-dark); font-weight:700; text-decoration:none; overflow-wrap:anywhere; }
.emergency-pass {
    background:white; border:2px solid var(--green-dark); border-radius:20px; padding:18px;
}
.emergency-pass-grid { display:grid; grid-template-columns:1fr 140px; gap:18px; align-items:start; }
.emergency-pass-qr { width:140px; height:140px; border-radius:10px; }
.med-stock { font-weight:800; }
.push-status { display:flex; align-items:center; gap:8px; margin:10px 0 14px; }
@media (max-width:520px) {
    .emergency-pass-grid { grid-template-columns:1fr; }
    .emergency-pass-qr { width:180px; height:180px; margin:auto; }
}

@media (min-width: 700px) {

    .content {
        padding: 30px;
    }

    .grid {
        grid-template-columns: repeat(4, 1fr);
    }
}


.animal-avatar img,
.profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.profile-photo {
    width: 92px;
    height: 92px;
    border-radius: 26px;
    background: #e5efd9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    overflow: hidden;
    margin-bottom: 10px;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: #edf4e8;
    font-size: 12px;
    font-weight: 800;
}

.status-pill.watch { background: #fff4dc; }
.status-pill.concern { background: #fde7e7; }

.health-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.health-choice {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 11px;
    background: white;
}

.member-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.member-row:last-child { border-bottom: 0; }
.member-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #edf1e8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex: 0 0 auto;
}

.code-box {
    font-size: 24px;
    letter-spacing: 3px;
    font-weight: 800;
    background: #f3f5ef;
    padding: 12px;
    border-radius: 14px;
    text-align: center;
    word-break: break-all;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 12px 0 20px;
}

.stat-card {
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 13px;
    text-align: center;
}

.stat-card strong { display:block; font-size:22px; }

@media (max-width: 560px) {
    .stat-grid { grid-template-columns: 1fr 1fr; }
}


.reminder-card.completed,
.reminder-entry.completed {
    opacity: .78;
    background: #f7f9f5;
}

.reminder-card.overdue,
.reminder-entry.overdue {
    border-color: #e7b0b0;
}

.reminder-toggle {
    margin-top: 12px;
}

.completed-meta {
    margin-top: 6px;
    color: var(--green-dark);
    font-size: 12px;
    font-weight: 700;
}

.emergency-banner {
    background: #fff2f2;
    border: 1px solid #efc7c7;
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 16px;
}

.emergency-banner h2 {
    margin: 0 0 8px;
    color: #8f3838;
}

.help-species-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}

.help-species-button {
    background: white;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 12px;
    cursor: pointer;
    font-weight: 700;
    color: var(--text);
}

.help-species-button.active {
    border-color: var(--green);
    background: #edf4e8;
    color: var(--green-dark);
}

.help-resource {
    border-top: 1px solid var(--border);
    padding: 14px 0;
}

.help-resource:first-of-type {
    border-top: 0;
}

.contact-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.contact-actions a,
.contact-actions button {
    text-decoration: none;
}

.emergency-contact-card.primary {
    border-color: #b8d19f;
    box-shadow: 0 5px 20px rgba(82,119,58,.08);
}

.help-note {
    padding: 12px;
    border-radius: 13px;
    background: #f1f4ee;
    margin-top: 12px;
}


.health-alert {
    border-left: 5px solid var(--warning);
    background: #fff9ec;
}
.health-alert.danger {
    border-left-color: var(--danger);
    background: #fff1f1;
}
.health-alert.good {
    border-left-color: var(--green);
    background: #f2f7ed;
}
.dose-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-top: 1px solid var(--border);
}
.dose-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.dose-actions button { padding:8px 10px; border-radius:10px; cursor:pointer; }
.document-row {
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:10px 0; border-top:1px solid var(--border);
}
.document-link { color:var(--green-dark); font-weight:700; text-decoration:none; overflow-wrap:anywhere; }
.emergency-pass {
    background:white; border:2px solid var(--green-dark); border-radius:20px; padding:18px;
}
.emergency-pass-grid { display:grid; grid-template-columns:1fr 140px; gap:18px; align-items:start; }
.emergency-pass-qr { width:140px; height:140px; border-radius:10px; }
.med-stock { font-weight:800; }
.push-status { display:flex; align-items:center; gap:8px; margin:10px 0 14px; }
@media (max-width:520px) {
    .emergency-pass-grid { grid-template-columns:1fr; }
    .emergency-pass-qr { width:180px; height:180px; margin:auto; }
}

@media (min-width: 700px) {
    .help-species-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* =========================================================
   V5 UI
========================================================= */
:root {
    --surface-soft: #f0f4eb;
    --surface-strong: #e7efdf;
    --shadow: 0 12px 34px rgba(52, 70, 43, .08);
    --radius-lg: 24px;
}
html { scroll-behavior: smooth; }
body {
    background:
        radial-gradient(circle at top right, rgba(124,159,91,.12), transparent 30%),
        var(--cream);
}
.header { box-shadow: 0 5px 24px rgba(0,0,0,.035); }
.header-actions { display:flex; gap:8px; }
.icon-button {
    width:42px; height:42px; border-radius:14px; background:var(--card); color:var(--text);
    border:1px solid var(--border); cursor:pointer; font-size:18px; box-shadow:0 4px 14px rgba(0,0,0,.035);
}
.card { border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.button { transition: transform .14s ease, filter .14s ease; }
.button:active, .quick:active, .icon-button:active { transform: scale(.97); }
.quick { box-shadow: 0 7px 20px rgba(0,0,0,.035); transition:transform .14s ease,border-color .14s ease; }
.quick:hover { border-color:#cbd9bd; transform:translateY(-1px); }
.nav button { min-width:56px; border-radius:12px; padding:4px 6px; }
.nav button.active { background:#f0f5eb; }
.fab {
    position:fixed; right:20px; bottom:calc(env(safe-area-inset-bottom) + 84px); z-index:60;
    width:58px; height:58px; border-radius:20px; background:var(--green-dark); color:white;
    font-size:30px; line-height:1; box-shadow:0 12px 28px rgba(82,119,58,.3); cursor:pointer;
}
.today-hero {
    border-radius:28px; padding:22px; margin-bottom:16px; color:white;
    background:linear-gradient(135deg, #52773a, #7c9f5b); box-shadow:0 18px 38px rgba(82,119,58,.22);
}
.today-hero h1 { margin:0 0 6px; font-size:30px; }
.today-hero .muted { color:rgba(255,255,255,.78); }
.today-count { font-size:44px; font-weight:900; line-height:1; margin-top:18px; }
.today-progress { height:9px; background:rgba(255,255,255,.24); border-radius:99px; overflow:hidden; margin-top:12px; }
.today-progress > div { height:100%; background:white; border-radius:99px; }
.task-list { display:grid; gap:10px; }
.task-card {
    display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--card);
    border:1px solid var(--border); border-radius:18px; padding:14px; box-shadow:0 5px 16px rgba(0,0,0,.025);
}
.task-card.done { opacity:.72; background:var(--surface-soft); }
.task-main { display:flex; gap:12px; align-items:center; min-width:0; }
.task-icon { width:42px; height:42px; display:grid; place-items:center; border-radius:14px; background:var(--surface-soft); font-size:21px; flex:0 0 auto; }
.task-title { font-weight:800; }
.task-meta { color:var(--muted); font-size:12px; margin-top:3px; }
.task-actions { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.task-actions button { white-space:nowrap; }
.chip { display:inline-flex; align-items:center; gap:5px; padding:6px 10px; border-radius:999px; background:var(--surface-soft); font-size:12px; font-weight:800; }
.chip.danger { background:#ffe6e6; color:#8e3737; }
.chip.success { background:#e8f3df; color:#3f642b; }
.section-sub { color:var(--muted); margin-top:-7px; margin-bottom:13px; font-size:13px; }
.group-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:18px; }
.group-card { cursor:pointer; padding:15px; border-radius:18px; background:var(--card); border:1px solid var(--border); box-shadow:0 5px 16px rgba(0,0,0,.025); }
.group-card strong { display:block; }
.photo-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.photo-card { overflow:hidden; border:1px solid var(--border); border-radius:18px; background:var(--card); }
.photo-card img { width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.photo-card-body { padding:11px; }
.photo-select { display:flex; align-items:center; gap:7px; margin-top:8px; font-size:12px; font-weight:700; }
.photo-select input { width:auto; margin:0; }
.photo-compare { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.photo-compare img { width:100%; border-radius:16px; object-fit:cover; max-height:55vh; }
.search-shell { position:sticky; top:0; background:var(--cream); padding-bottom:8px; z-index:2; }
.search-input { font-size:18px; padding:15px 16px; }
.search-result { display:flex; gap:11px; align-items:center; padding:13px 0; border-bottom:1px solid var(--border); cursor:pointer; }
.search-result:last-child { border-bottom:0; }
.search-result-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:12px; background:var(--surface-soft); }
.segmented { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; }
.segmented button { padding:10px 8px; border-radius:12px; background:var(--surface-soft); color:var(--text); cursor:pointer; }
.weekday-row { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 14px; }
.weekday-row label { padding:8px 10px; border:1px solid var(--border); border-radius:12px; background:var(--card); font-size:12px; }
.weekday-row input { width:auto; margin:0 5px 0 0; }
.skeleton { height:84px; border-radius:18px; margin-bottom:10px; background:linear-gradient(90deg,var(--surface-soft),var(--card),var(--surface-soft)); background-size:200% 100%; animation:shimmer 1.25s infinite; }
@keyframes shimmer { to { background-position:-200% 0; } }
@media (min-width:700px) { .photo-grid{grid-template-columns:repeat(4,1fr)} .group-grid{grid-template-columns:repeat(4,1fr)} .fab{right:max(28px, calc((100vw - 900px)/2 + 28px));} }
@media (max-width:560px) { .today-hero h1{font-size:26px}.task-card{align-items:flex-start}.task-actions{max-width:120px}.stat-grid{grid-template-columns:repeat(3,1fr)} }

html[data-theme="dark"] {
    --cream:#111510; --card:#1b2119; --text:#f0f4ed; --muted:#9ca797; --border:#30372d;
    --surface-soft:#242c21; --surface-strong:#2c3728; --green:#86ab64; --green-dark:#9bc477;
    color-scheme:dark;
}
html[data-theme="dark"] body { background:radial-gradient(circle at top right,rgba(124,159,91,.12),transparent 30%),var(--cream); }
html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background:#171c16; color:var(--text); }
html[data-theme="dark"] .header { background:rgba(17,21,16,.94); }
html[data-theme="dark"] .nav { background:rgba(27,33,25,.96); }
html[data-theme="dark"] .nav button.active { background:#273120; }
html[data-theme="dark"] .modal { background:var(--cream); }
html[data-theme="dark"] .entry, html[data-theme="dark"] .quick, html[data-theme="dark"] .stat-card { background:var(--card); }



/* =========================================================
   V5.1 VISUAL REFRESH — clean / neutral / petrol
   Nur Design: bestehende Funktionen bleiben unverändert.
========================================================= */

:root {
    --green: #347c78;
    --green-dark: #27635f;
    --cream: #f5f7f8;
    --card: #ffffff;
    --text: #171a1f;
    --muted: #717781;
    --danger: #c55757;
    --warning: #c88735;
    --border: #e4e7eb;

    --accent: #347c78;
    --accent-strong: #27635f;
    --accent-soft: #e8f2f1;
    --surface-soft: #f1f3f5;
    --surface-strong: #e8ecef;
    --shadow: 0 8px 28px rgba(18, 28, 35, .055);
    --shadow-hover: 0 14px 34px rgba(18, 28, 35, .09);
    --radius-lg: 20px;
    --radius-md: 15px;
}

html {
    background: var(--cream);
}

body {
    background: var(--cream);
    color: var(--text);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Text",
        "SF Pro Display",
        "Segoe UI",
        system-ui,
        sans-serif;
    letter-spacing: -.01em;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: rgba(52, 124, 120, .18);
}

#app {
    padding-bottom: 118px;
}

/* ---------- Header / Branding ---------- */

.header {
    padding:
        calc(env(safe-area-inset-top) + 12px)
        18px
        12px;
    background: rgba(245, 247, 248, .88);
    border-bottom: 1px solid rgba(228, 231, 235, .82);
    backdrop-filter: blur(20px) saturate(145%);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
    box-shadow: none;
}

.header-row {
    max-width: 980px;
    margin-inline: auto;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 19px;
    font-weight: 850;
    letter-spacing: -.035em;
    color: #20252b;
}

.header-actions {
    gap: 7px;
}

.icon-button {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: rgba(255,255,255,.9);
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(18,28,35,.035);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.icon-button:hover {
    border-color: #cfd6da;
    box-shadow: 0 6px 16px rgba(18,28,35,.07);
}

/* ---------- Main layout ---------- */

.content {
    max-width: 980px;
    padding: 24px 18px 34px;
}

.content > h1,
.content .header-row h1 {
    letter-spacing: -.045em;
}

h1, h2, h3 {
    color: var(--text);
}

h1 {
    font-weight: 850;
}

h2 {
    font-weight: 800;
    letter-spacing: -.025em;
}

.muted {
    color: var(--muted);
}

/* ---------- Cards ---------- */

.card,
.entry,
.task-card,
.group-card,
.photo-card,
.quick,
.stat-card {
    border-color: var(--border);
}

.card {
    border-radius: var(--radius-lg);
    padding: 18px;
    box-shadow: var(--shadow);
    background: rgba(255,255,255,.96);
}

.card:hover {
    box-shadow: var(--shadow-hover);
}

.entry {
    border-radius: 16px;
    background: var(--card);
    box-shadow: 0 4px 18px rgba(18,28,35,.035);
}

.stat-grid {
    gap: 10px;
}

.stat-card {
    border-radius: 16px;
    padding: 15px 12px;
    box-shadow: 0 3px 14px rgba(18,28,35,.035);
}

.stat-card strong {
    font-size: 24px;
    letter-spacing: -.045em;
}

/* ---------- Today hero ---------- */

.today-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 24px;
    border-radius: 24px;
    background:
        radial-gradient(circle at 92% 8%, rgba(103,191,184,.34), transparent 30%),
        linear-gradient(135deg, #1e292d 0%, #24373a 55%, #2d5f5c 100%);
    box-shadow: 0 18px 42px rgba(24, 49, 51, .18);
}

.today-hero::after {
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    right: -70px;
    bottom: -110px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
    z-index: -1;
}

.today-hero h1 {
    font-size: clamp(27px, 5vw, 34px);
    letter-spacing: -.045em;
    color: white;
}

.today-hero .muted {
    color: rgba(255,255,255,.68);
    font-weight: 650;
}

.today-count {
    font-size: 46px;
    letter-spacing: -.055em;
}

.today-progress {
    height: 7px;
    background: rgba(255,255,255,.16);
}

.today-progress > div {
    background: #8ed0ca;
}

/* ---------- Quick actions ---------- */

.grid {
    gap: 10px;
}

.quick {
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    padding: 15px;
    border-radius: 17px;
    background: var(--card);
    box-shadow: 0 4px 18px rgba(18,28,35,.035);
    font-weight: 750;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.quick:hover {
    border-color: #cfd7db;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(18,28,35,.07);
}

.quick-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--accent-soft);
    font-size: 21px;
}

/* ---------- Buttons ---------- */

.button {
    border-radius: 12px;
    padding: 12px 16px;
    background: var(--accent);
    color: #fff;
    font-weight: 760;
    box-shadow: 0 3px 10px rgba(52,124,120,.14);
    transition:
        transform .14s ease,
        box-shadow .14s ease,
        background .14s ease;
}

.button:hover {
    background: var(--accent-strong);
    box-shadow: 0 7px 18px rgba(52,124,120,.18);
}

.button.secondary {
    background: var(--accent-soft);
    color: var(--accent-strong);
    box-shadow: none;
}

.button.secondary:hover {
    background: #ddeceb;
}

.button.danger {
    background: var(--danger);
    box-shadow: 0 3px 10px rgba(197,87,87,.15);
}

.button.small-button {
    border-radius: 10px;
}

/* ---------- Inputs / forms ---------- */

input,
textarea,
select {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text);
    border-radius: 12px;
    padding: 13px 14px;
    box-shadow: 0 1px 2px rgba(18,28,35,.02);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

input:hover,
textarea:hover,
select:hover {
    border-color: #ccd3d8;
}

input:focus,
textarea:focus,
select:focus {
    border-color: rgba(52,124,120,.72);
    box-shadow: 0 0 0 4px rgba(52,124,120,.10);
}

label {
    color: #353b42;
    font-weight: 720;
}

/* ---------- Animal cards ---------- */

.animal-card {
    padding: 16px;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.animal-card:hover {
    transform: translateY(-2px);
    border-color: #cfd7db;
}

.animal-avatar {
    width: 56px;
    height: 56px;
    border-radius: 17px;
    background: var(--accent-soft);
    font-size: 27px;
    overflow: hidden;
}

.profile-photo {
    width: 100px;
    height: 100px;
    border-radius: 25px;
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--border);
}

.weight {
    letter-spacing: -.045em;
}

/* ---------- Task cards ---------- */

.task-list {
    gap: 9px;
}

.task-card {
    padding: 14px 15px;
    border-radius: 16px;
    background: var(--card);
    box-shadow: 0 3px 14px rgba(18,28,35,.035);
}

.task-card.done {
    opacity: .7;
    background: #f4f6f7;
}

.task-icon,
.search-result-icon {
    background: var(--accent-soft);
    border-radius: 12px;
}

.task-title {
    font-weight: 790;
    letter-spacing: -.015em;
}

.task-meta {
    line-height: 1.45;
}

.section-title {
    margin-top: 30px;
    margin-bottom: 10px;
}

.section-title h2 {
    font-size: 20px;
}

.section-sub {
    color: var(--muted);
}

/* ---------- Status / badges ---------- */

.badge,
.chip,
.status-pill {
    border: 1px solid transparent;
    font-weight: 760;
}

.badge,
.status-pill,
.chip {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

.badge.warning,
.status-pill.watch {
    background: #fff5e4;
    color: #8b5b1c;
}

.badge.danger,
.status-pill.concern,
.chip.danger {
    background: #fff0f0;
    color: #9c4545;
}

.chip.success {
    background: #eaf5ee;
    color: #39704d;
}

/* ---------- Health / emergency ---------- */

.health-alert {
    border-left: 0;
    border: 1px solid #eedfbf;
    background: #fffbf2;
}

.health-alert.danger {
    border-left: 0;
    border-color: #efcdcd;
    background: #fff5f5;
}

.health-alert.good {
    border-left: 0;
    border-color: #cfe3d5;
    background: #f4faf6;
}

.emergency-banner {
    border-radius: 18px;
    background: #fff6f6;
    border-color: #eed3d3;
}

.emergency-contact-card.primary {
    border-color: #bdd9d6;
    box-shadow: 0 8px 26px rgba(52,124,120,.08);
}

.help-note,
.notice {
    background: var(--surface-soft);
}

/* ---------- Groups / photos / search ---------- */

.group-card,
.photo-card {
    border-radius: 17px;
    box-shadow: 0 3px 14px rgba(18,28,35,.035);
    transition: transform .16s ease, box-shadow .16s ease;
}

.group-card:hover,
.photo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(18,28,35,.07);
}

.search-shell {
    top: 66px;
    background: rgba(245,247,248,.92);
    backdrop-filter: blur(14px);
}

.search-input {
    border-radius: 15px;
}

.search-result {
    border-bottom-color: var(--border);
}

/* ---------- Bottom navigation ---------- */

.nav {
    left: 50%;
    right: auto;
    
    transform: translateX(-50%);
    width: min(calc(100% - 22px), 650px);
    padding: 7px;
    border: 1px solid rgba(220,224,228,.92);
    border-radius: 21px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    box-shadow: 0 12px 38px rgba(18,28,35,.13);
    justify-content: stretch;
    gap: 3px;
}

.nav button {
    flex: 1;
    min-width: 0;
    padding: 7px 5px;
    border-radius: 15px;
    color: #7b8189;
    font-size: 10.5px;
    transition: background .15s ease, color .15s ease, transform .15s ease;
}

.nav button.active {
    color: var(--accent-strong);
    background: var(--accent-soft);
    font-weight: 800;
}

.nav-icon {
    font-size: 19px;
    margin-bottom: 1px;
}

/* ---------- Floating action ---------- */

.fab {
    right: max(18px, calc((100vw - 980px)/2 + 18px));
    bottom: calc(max(10px, env(safe-area-inset-bottom)) + 78px);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #202a2d;
    color: white;
    font-size: 28px;
    box-shadow: 0 12px 28px rgba(20,31,35,.22);
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.fab:hover {
    background: var(--accent-strong);
    transform: translateY(-2px);
    box-shadow: 0 16px 32px rgba(20,31,35,.26);
}

/* ---------- Modals ---------- */

.modal-bg {
    background: rgba(15,20,24,.46);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.modal {
    max-width: 680px;
    margin-inline: auto;
    border-radius: 24px 24px 0 0;
    background: #f7f8f9;
    box-shadow: 0 -18px 50px rgba(16,24,30,.18);
}

.close {
    background: #eceff1;
    color: #4d555d;
}

/* ---------- Login / registration ---------- */

.login {
    padding: 24px;
    background:
        radial-gradient(circle at 50% -10%, rgba(52,124,120,.12), transparent 35%),
        #f5f7f8;
}

.login-box {
    max-width: 410px;
}

.login-box .card {
    padding: 28px;
    border-radius: 24px;
    border-color: rgba(224,228,232,.9);
    box-shadow: 0 18px 55px rgba(24,35,42,.09);
}

.login-box h1 {
    letter-spacing: -.045em;
}

/* ---------- Skeleton ---------- */

.skeleton {
    border-radius: 16px;
    background:
        linear-gradient(
            90deg,
            #eceff1 25%,
            #f7f8f9 50%,
            #eceff1 75%
        );
    background-size: 200% 100%;
}

/* ---------- Dark mode ---------- */

html[data-theme="dark"] {
    --cream: #101417;
    --card: #171c20;
    --text: #eef1f3;
    --muted: #98a1a8;
    --border: #2a3136;
    --green: #5fa8a3;
    --green-dark: #77c1bb;
    --accent: #559e99;
    --accent-strong: #7bc1bc;
    --accent-soft: #1d3132;
    --surface-soft: #1d2327;
    --surface-strong: #252c31;
    --shadow: 0 8px 28px rgba(0,0,0,.18);
    --shadow-hover: 0 14px 34px rgba(0,0,0,.27);
    color-scheme: dark;
}

html[data-theme="dark"] body {
    background: var(--cream);
}

html[data-theme="dark"] .header {
    background: rgba(16,20,23,.88);
    border-bottom-color: rgba(42,49,54,.8);
}

html[data-theme="dark"] .logo {
    color: #f1f4f5;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .entry,
html[data-theme="dark"] .quick,
html[data-theme="dark"] .task-card,
html[data-theme="dark"] .group-card,
html[data-theme="dark"] .photo-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .icon-button {
    background: var(--card);
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: #13191c;
    border-color: var(--border);
    color: var(--text);
}

html[data-theme="dark"] label {
    color: #d7dde0;
}

html[data-theme="dark"] .nav {
    background: rgba(23,28,32,.94);
    border-color: #30383d;
}

html[data-theme="dark"] .nav button.active {
    background: var(--accent-soft);
    color: var(--accent-strong);
}

html[data-theme="dark"] .modal {
    background: #12171a;
}

html[data-theme="dark"] .close {
    background: #242b30;
    color: #d7dde0;
}

html[data-theme="dark"] .search-shell {
    background: rgba(16,20,23,.92);
}

html[data-theme="dark"] .task-card.done {
    background: #1c2226;
}

html[data-theme="dark"] .login {
    background:
        radial-gradient(circle at 50% -10%, rgba(85,158,153,.12), transparent 35%),
        #101417;
}

html[data-theme="dark"] .skeleton {
    background:
        linear-gradient(
            90deg,
            #1d2327 25%,
            #293035 50%,
            #1d2327 75%
        );
    background-size: 200% 100%;
}

/* ---------- Responsive ---------- */

@media (min-width: 700px) {
    .content {
        padding: 32px 26px 44px;
    }

    .modal {
        align-self: center;
        border-radius: 24px;
        max-height: min(88vh, 900px);
    }

    .modal-bg {
        align-items: center;
        padding: 24px;
    }
}

@media (max-width: 560px) {
    .content {
        padding: 18px 14px 28px;
    }

    .header {
        padding-left: 14px;
        padding-right: 14px;
    }

    .today-hero {
        padding: 20px;
        border-radius: 21px;
    }

    .today-count {
        font-size: 42px;
    }

    .quick {
        min-height: 94px;
        padding: 14px;
    }

    .task-card {
        align-items: stretch;
        flex-direction: column;
    }

    .task-actions {
        max-width: none;
        width: 100%;
        justify-content: flex-start;
    }

    .task-actions .button {
        flex: 1;
    }

    .animal-card {
        align-items: flex-start;
    }

    .nav {
        width: calc(100% - 16px);
        bottom: 0;
        padding-bottom: calc(7px + env(safe-area-inset-bottom));
    }

    .nav button {
        font-size: 9.5px;
        padding-inline: 2px;
    }

    .fab {
        right: 16px;
        bottom: calc(max(8px, env(safe-area-inset-bottom)) + 76px);
    }

    .login {
        padding: 14px;
    }

    .login-box .card {
        padding: 22px 18px;
    }
}



/* =========================================================
   V5.2 LIGHT REFRESH — heller / freundlicher / luftiger
========================================================= */

:root {
    --green: #65a7a1;
    --green-dark: #4d8d87;
    --cream: #f8fafb;
    --card: #ffffff;
    --text: #252a2f;
    --muted: #7f8790;
    --danger: #d36b6b;
    --warning: #d79a4b;
    --border: #e9edef;

    --accent: #65a7a1;
    --accent-strong: #4d8d87;
    --accent-soft: #edf7f6;
    --surface-soft: #f5f7f8;
    --surface-strong: #eef2f3;
    --shadow: 0 6px 22px rgba(40, 55, 65, .045);
    --shadow-hover: 0 10px 28px rgba(40, 55, 65, .07);
}

html,
body {
    background: #f8fafb;
}

body {
    color: var(--text);
}

.header {
    background: rgba(248,250,251,.94);
    border-bottom-color: rgba(233,237,239,.9);
}

.logo {
    color: #2b3136;
}

.icon-button {
    background: #ffffff;
    border-color: #e8edef;
    box-shadow: 0 2px 8px rgba(40,55,65,.025);
}

.card,
.entry,
.task-card,
.group-card,
.photo-card,
.quick,
.stat-card {
    background: #ffffff;
    border-color: #e9edef;
}

.card {
    box-shadow: 0 5px 18px rgba(40,55,65,.035);
}

/* Helleres Dashboard statt dunklem Hero */
.today-hero {
    color: #2b3438;
    background:
        radial-gradient(circle at 88% 8%, rgba(126, 199, 192, .30), transparent 34%),
        linear-gradient(135deg, #eef8f7 0%, #f8fbfb 52%, #e8f5f3 100%);
    border: 1px solid #dceceb;
    box-shadow: 0 10px 30px rgba(73, 128, 123, .08);
}

.today-hero::after {
    border-color: rgba(77,141,135,.10);
}

.today-hero h1 {
    color: #263034;
}

.today-hero .muted {
    color: #718085;
}

.today-count {
    color: #3d7f7a;
}

.today-progress {
    background: rgba(77,141,135,.13);
}

.today-progress > div {
    background: #74b8b2;
}

.quick {
    background: #ffffff;
    box-shadow: 0 3px 14px rgba(40,55,65,.03);
}

.quick-icon,
.task-icon,
.search-result-icon {
    background: #eff8f7;
}

.button {
    background: #6aa9a3;
    box-shadow: 0 3px 10px rgba(101,167,161,.12);
}

.button:hover {
    background: #5b9994;
}

.button.secondary {
    background: #eff8f7;
    color: #477f7a;
}

.button.secondary:hover {
    background: #e6f3f1;
}

input,
textarea,
select {
    background: #ffffff;
    border-color: #e6ebed;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #78b5af;
    box-shadow: 0 0 0 4px rgba(101,167,161,.09);
}

.animal-avatar,
.profile-photo {
    background: #edf7f6;
}

.badge,
.status-pill,
.chip {
    background: #edf7f6;
    color: #4e817d;
}

.task-card.done {
    background: #f7f9fa;
}

.notice,
.help-note {
    background: #f4f7f8;
}

.health-alert {
    background: #fffcf5;
    border-color: #f0e4cb;
}

.health-alert.good {
    background: #f5fbf7;
    border-color: #d8e9dc;
}

.health-alert.danger {
    background: #fff7f7;
    border-color: #efd6d6;
}

.emergency-banner {
    background: #fff8f8;
}

.search-shell {
    background: rgba(248,250,251,.95);
}

/* Navigation leichter und weniger massiv */
.nav {
    background: rgba(255,255,255,.96);
    border-color: #e6ebed;
    box-shadow: 0 8px 28px rgba(40,55,65,.09);
}

.nav button {
    color: #879096;
}

.nav button.active {
    color: #4d8d87;
    background: #edf7f6;
}

.fab {
    background: #70aaa5;
    box-shadow: 0 10px 24px rgba(91,153,148,.20);
}

.fab:hover {
    background: #5f9994;
}

.modal {
    background: #fafbfc;
}

.modal-bg {
    background: rgba(45,55,60,.30);
}

.close {
    background: #f0f3f4;
}

.login {
    background:
        radial-gradient(circle at 50% -8%, rgba(126,199,192,.16), transparent 38%),
        #f8fafb;
}

.login-box .card {
    box-shadow: 0 14px 42px rgba(40,55,65,.065);
}

/* Dark Mode bleibt vorhanden, aber etwas weicher */
html[data-theme="dark"] {
    --cream: #171b1d;
    --card: #202629;
    --text: #f1f3f4;
    --muted: #a8b0b5;
    --border: #343c40;
    --green: #76b7b1;
    --green-dark: #92cbc6;
    --accent: #76b7b1;
    --accent-strong: #92cbc6;
    --accent-soft: #253636;
    --surface-soft: #252b2e;
    --surface-strong: #2d3437;
}

html[data-theme="dark"] .today-hero {
    color: #edf4f3;
    background:
        radial-gradient(circle at 88% 8%, rgba(118,183,177,.18), transparent 34%),
        linear-gradient(135deg, #223033, #263638);
    border-color: #35494b;
}

html[data-theme="dark"] .today-hero h1,
html[data-theme="dark"] .today-count {
    color: #e8f4f2;
}

html[data-theme="dark"] .today-hero .muted {
    color: #a8bbb9;
}



/* =========================================================
   V5.3 LIGHT PASTEL THEME — nur hell
   Blau / Lavendel / warmes Weiß
========================================================= */

:root {
    --green: #7d8fd8;
    --green-dark: #6577c3;
    --cream: #f8f9fd;
    --card: #ffffff;
    --text: #272b38;
    --muted: #808697;
    --danger: #d96974;
    --warning: #d79a52;
    --border: #e8eaf2;

    --accent: #7d8fd8;
    --accent-strong: #6577c3;
    --accent-soft: #eef1ff;
    --accent-lilac: #f3edfb;
    --accent-rose: #fff0f3;
    --surface-soft: #f5f6fb;
    --surface-strong: #eceef7;
    --shadow: 0 6px 20px rgba(71, 78, 116, .045);
    --shadow-hover: 0 12px 28px rgba(71, 78, 116, .075);
}

html,
html[data-theme="light"],
html[data-theme="dark"],
body {
    color-scheme: light !important;
    background: #f8f9fd !important;
}

body {
    color: var(--text);
}

/* Header */
.header,
html[data-theme="dark"] .header {
    background: rgba(248,249,253,.95) !important;
    border-bottom: 1px solid rgba(232,234,242,.92) !important;
    box-shadow: none !important;
}

.logo,
html[data-theme="dark"] .logo {
    color: #303545 !important;
}

.icon-button,
html[data-theme="dark"] .icon-button {
    color: #5d6477 !important;
    background: #fff !important;
    border-color: #e7e9f1 !important;
    box-shadow: 0 3px 10px rgba(71,78,116,.035) !important;
}

.icon-button:hover {
    border-color: #d8dced !important;
    background: #fafbff !important;
}

/* Cards */
.card,
.entry,
.task-card,
.group-card,
.photo-card,
.quick,
.stat-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .entry,
html[data-theme="dark"] .quick,
html[data-theme="dark"] .task-card,
html[data-theme="dark"] .group-card,
html[data-theme="dark"] .photo-card,
html[data-theme="dark"] .stat-card {
    background: #ffffff !important;
    border-color: #e8eaf2 !important;
    color: var(--text) !important;
}

.card {
    box-shadow: 0 5px 18px rgba(71,78,116,.04) !important;
}

.card:hover {
    box-shadow: 0 10px 26px rgba(71,78,116,.07) !important;
}

/* Heute */
.today-hero,
html[data-theme="dark"] .today-hero {
    color: #31364a !important;
    background:
        radial-gradient(circle at 90% 8%, rgba(205,184,234,.38), transparent 31%),
        radial-gradient(circle at 4% 92%, rgba(174,199,247,.26), transparent 34%),
        linear-gradient(135deg, #f0f4ff 0%, #f8f5ff 52%, #fff7fa 100%) !important;
    border: 1px solid #e0e5f6 !important;
    box-shadow: 0 10px 28px rgba(101,119,195,.08) !important;
}

.today-hero::after {
    border-color: rgba(125,143,216,.10) !important;
}

.today-hero h1,
html[data-theme="dark"] .today-hero h1 {
    color: #30364b !important;
}

.today-hero .muted,
html[data-theme="dark"] .today-hero .muted {
    color: #7b8194 !important;
}

.today-count,
html[data-theme="dark"] .today-count {
    color: #687bc8 !important;
}

.today-progress {
    background: rgba(125,143,216,.13) !important;
}

.today-progress > div {
    background: linear-gradient(90deg, #7d8fd8, #a18bd3) !important;
}

/* Quick Actions */
.quick {
    background: #fff !important;
}

.quick:nth-child(3n+1) .quick-icon {
    background: #eef2ff !important;
}

.quick:nth-child(3n+2) .quick-icon {
    background: #f3edfb !important;
}

.quick:nth-child(3n) .quick-icon {
    background: #fff0f3 !important;
}

.quick-icon,
.task-icon,
.search-result-icon {
    color: #5f6fb7;
}

/* Buttons */
.button {
    background: #7d8fd8 !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(125,143,216,.16) !important;
}

.button:hover {
    background: #6f82cf !important;
    box-shadow: 0 7px 17px rgba(125,143,216,.20) !important;
}

.button.secondary {
    background: #eef1ff !important;
    color: #596dbb !important;
    box-shadow: none !important;
}

.button.secondary:hover {
    background: #e5e9fc !important;
}

.button.danger {
    background: #d96974 !important;
    color: #fff !important;
}

/* Formulare */
input,
textarea,
select,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: #fff !important;
    color: #272b38 !important;
    border-color: #e4e7f0 !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: #98a6e0 !important;
    box-shadow: 0 0 0 4px rgba(125,143,216,.10) !important;
}

label,
html[data-theme="dark"] label {
    color: #3d4252 !important;
}

/* Tiere */
.animal-avatar,
.profile-photo {
    background: linear-gradient(145deg, #eef2ff, #f6f0fb) !important;
}

/* Status */
.badge,
.status-pill,
.chip {
    background: #eef1ff !important;
    color: #5e70bd !important;
}

.badge.warning,
.status-pill.watch {
    background: #fff5e8 !important;
    color: #936326 !important;
}

.badge.danger,
.status-pill.concern,
.chip.danger {
    background: #fff0f2 !important;
    color: #a64d58 !important;
}

.chip.success {
    background: #edf8f2 !important;
    color: #4c7d60 !important;
}

/* Aufgaben */
.task-card.done,
html[data-theme="dark"] .task-card.done {
    background: #f6f7fb !important;
}

.task-icon,
.search-result-icon {
    background: #f0f2fc !important;
}

/* Notices */
.notice,
.help-note {
    background: #f4f5fb !important;
}

.health-alert {
    background: #fffbf4 !important;
    border-color: #f0e3c9 !important;
}

.health-alert.good {
    background: #f4faf6 !important;
    border-color: #d8e9dd !important;
}

.health-alert.danger {
    background: #fff5f6 !important;
    border-color: #efd5d9 !important;
}

.emergency-banner {
    background: #fff6f7 !important;
    border-color: #efd8dc !important;
}

/* Suche */
.search-shell,
html[data-theme="dark"] .search-shell {
    background: rgba(248,249,253,.96) !important;
}

/* Navigation */
.nav,
html[data-theme="dark"] .nav {
    background: rgba(255,255,255,.97) !important;
    border-color: #e5e8f0 !important;
    box-shadow: 0 9px 28px rgba(71,78,116,.10) !important;
}

.nav button {
    color: #8b91a1 !important;
}

.nav button.active,
html[data-theme="dark"] .nav button.active {
    color: #5f72bd !important;
    background: #eef1ff !important;
}

/* FAB */
.fab {
    background: linear-gradient(135deg, #7d8fd8, #9b82ce) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(125,143,216,.24) !important;
}

.fab:hover {
    background: linear-gradient(135deg, #7184d0, #9279c7) !important;
}

/* Modals */
.modal,
html[data-theme="dark"] .modal {
    background: #fafbfe !important;
    color: #272b38 !important;
}

.modal-bg {
    background: rgba(55,59,78,.24) !important;
}

.close,
html[data-theme="dark"] .close {
    background: #f0f1f6 !important;
    color: #646b7d !important;
}

/* Login */
.login,
html[data-theme="dark"] .login {
    background:
        radial-gradient(circle at 15% 0%, rgba(175,199,246,.22), transparent 30%),
        radial-gradient(circle at 90% 12%, rgba(207,185,233,.22), transparent 30%),
        #f8f9fd !important;
}

.login-box .card {
    background: #fff !important;
    box-shadow: 0 16px 42px rgba(71,78,116,.07) !important;
}

/* Hilfe-Arten */
.help-species-button {
    background: #fff !important;
    color: #444a5b !important;
    border-color: #e7e9f1 !important;
}

.help-species-button.active {
    background: #eef1ff !important;
    color: #5d70bc !important;
    border-color: #cdd5f4 !important;
}

/* Segmented Controls */
.segmented button {
    background: #f2f3f9 !important;
    color: #555c70 !important;
}

/* Skeleton */
.skeleton,
html[data-theme="dark"] .skeleton {
    background:
        linear-gradient(
            90deg,
            #eef0f6 25%,
            #f9fafe 50%,
            #eef0f6 75%
        ) !important;
    background-size: 200% 100% !important;
}

/* Dark Theme explizit neutralisieren */
html[data-theme="dark"] body {
    background: #f8f9fd !important;
    color: #272b38 !important;
}


/* =========================================================
   V6 QUALITY UI
========================================================= */
.empty-state{padding:34px 20px;text-align:center;border:1px dashed #dfe3ee;border-radius:20px;background:rgba(255,255,255,.7)}
.empty-state-icon{font-size:36px;margin-bottom:8px}.empty-state h3{margin:0 0 6px}.empty-state p{max-width:470px;margin:0 auto 15px;color:var(--muted)}
.toast-stack{position:fixed;right:16px;bottom:105px;z-index:500;display:grid;gap:8px;width:min(390px,calc(100vw - 32px))}
.toast{background:#31364a;color:white;border-radius:15px;padding:12px 14px;box-shadow:0 14px 34px rgba(38,42,61,.22);display:flex;align-items:center;justify-content:space-between;gap:12px;animation:toastIn .18s ease}.toast button{background:#eef1ff;color:#5265b1;border-radius:10px;padding:7px 10px;font-weight:800;cursor:pointer}.toast.error{background:#963f49}.toast.success{background:#435d56}@keyframes toastIn{from{transform:translateY(12px);opacity:0}}
.confirm-overlay{position:fixed;inset:0;z-index:600;background:rgba(55,59,78,.28);backdrop-filter:blur(5px);display:grid;place-items:center;padding:18px}.confirm-box{width:min(430px,100%);background:white;border:1px solid var(--border);border-radius:22px;padding:20px;box-shadow:0 22px 60px rgba(43,48,75,.18)}.confirm-box h3{margin:0 0 7px}.confirm-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:18px}.confirm-actions button{min-width:105px}
.today-toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:18px 0 6px}.today-toolbar select{width:auto;min-width:180px;margin:0}.today-toolbar .chip-button{background:white;border:1px solid var(--border);padding:9px 12px;border-radius:12px;color:var(--text);cursor:pointer;font-weight:750}.today-toolbar .chip-button.active{background:#eef1ff;color:#5f72bd;border-color:#d8def7}.today-all-done{padding:18px;border-radius:18px;background:linear-gradient(135deg,#f1f7ff,#f8f2ff);border:1px solid #e2e6f7;text-align:center;margin-top:14px}.today-section-details>summary{list-style:none;cursor:pointer;font-weight:800;padding:12px 0}.today-section-details>summary::-webkit-details-marker{display:none}.task-card.optimistic{opacity:.65;pointer-events:none}.task-card.is-hidden{display:none}
.calendar-shell{min-height:480px}.calendar-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.calendar-head h2{margin:0}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.calendar-weekday{text-align:center;color:var(--muted);font-size:11px;font-weight:800;padding:6px}.calendar-day{min-height:78px;border:1px solid var(--border);border-radius:14px;background:white;padding:7px;cursor:pointer;overflow:hidden}.calendar-day.outside{opacity:.38}.calendar-day.today{border-color:#aeb9e8;box-shadow:inset 0 0 0 1px #aeb9e8}.calendar-number{font-weight:800;font-size:12px}.calendar-dots{display:flex;gap:3px;flex-wrap:wrap;margin-top:7px}.calendar-dot{width:7px;height:7px;border-radius:50%;background:#7d8fd8}.calendar-dot.vet{background:#d96974}.calendar-dot.medication{background:#9a82cf}.calendar-dot.care{background:#d79a52}.calendar-dot.done{opacity:.3}.calendar-day-detail{margin-top:14px}.calendar-event{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid var(--border)}.calendar-event:last-child{border-bottom:0}
.compare-stage{position:relative;width:100%;aspect-ratio:4/3;background:#eef0f6;border-radius:18px;overflow:hidden;touch-action:none}.compare-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#eef0f6}.compare-top-wrap{position:absolute;inset:0;overflow:hidden;width:50%;border-right:2px solid white;box-shadow:4px 0 12px rgba(0,0,0,.08)}.compare-top-wrap img{width:100vw;max-width:none;height:100%}.compare-range{width:100%;margin:12px 0}.compare-labels{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}
.activity-row,.trash-row{padding:13px 0;border-bottom:1px solid var(--border);display:flex;gap:11px;align-items:flex-start;justify-content:space-between}.activity-row:last-child,.trash-row:last-child{border-bottom:0}.activity-icon{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:#f1f3fb;flex:0 0 auto}.trash-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.search-filters{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:9px}.search-filters select,.search-filters input{margin:0}.search-recent{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.search-recent button{background:#f2f3f9;color:#5d6477;border-radius:999px;padding:6px 9px;cursor:pointer}
.med-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:9px}.med-detail{background:#f7f8fc;border-radius:12px;padding:9px}.late-pill{background:#fff4e6;color:#8d5f24}.photo-filter-row{display:flex;gap:8px;align-items:center;margin:10px 0 14px}.photo-filter-row select{margin:0;width:auto;min-width:170px}
@media(max-width:560px){.calendar-day{min-height:58px;padding:5px}.calendar-grid{gap:4px}.calendar-dot{width:5px;height:5px}.search-filters,.med-detail-grid{grid-template-columns:1fr}.confirm-actions{flex-direction:column-reverse}.confirm-actions button{width:100%}}


.security-note{padding:11px 13px;border:1px solid #dfe4f5;background:#f5f7ff;border-radius:14px;color:#596276;font-size:13px;margin-bottom:12px}
body.viewer-mode .fab{display:none!important}




:root {
    --pk-bg: #f7f8fb;
    --pk-surface: #ffffff;
    --pk-surface-soft: #f3f4f8;
    --pk-surface-strong: #eceef4;
    --pk-text: #292d3a;
    --pk-muted: #777d8d;
    --pk-border: #e6e8ef;
    --pk-accent: #7181c4;
    --pk-accent-strong: #5f70b7;
    --pk-accent-soft: #eef1fb;
    --pk-success: #5f8c75;
    --pk-success-soft: #edf6f1;
    --pk-warning: #a97836;
    --pk-warning-soft: #fbf4e8;
    --pk-danger: #b85e68;
    --pk-danger-soft: #fbf0f2;
    --pk-shadow: 0 4px 18px rgba(48, 54, 78, .045);
    --pk-shadow-up: 0 10px 28px rgba(48, 54, 78, .08);
    --pk-radius: 16px;
    --pk-radius-sm: 12px;
}

html, html[data-theme="dark"] { background: var(--pk-bg) !important; color-scheme: light !important; }
body, html[data-theme="dark"] body {
    background: var(--pk-bg) !important;
    color: var(--pk-text) !important;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif !important;
    font-size: 15px;
    letter-spacing: -.012em;
}
#app { min-height: 100vh; padding-bottom: 88px !important; }

/* ---------- Typografie ---------- */
h1, h2, h3 { color: var(--pk-text); letter-spacing: -.035em; }
h1 { font-size: clamp(25px, 4.7vw, 31px); line-height: 1.08; margin: 0 0 5px; }
h2 { font-size: clamp(19px, 3.6vw, 23px); line-height: 1.15; }
h3 { font-size: 16px; line-height: 1.25; }
p { line-height: 1.55; }
.muted { color: var(--pk-muted) !important; }
.small { font-size: 12.5px !important; }

/* ---------- App-Shell ---------- */
.header, html[data-theme="dark"] .header {
    background: rgba(247,248,251,.93) !important;
    border-bottom: 1px solid rgba(230,232,239,.92) !important;
    box-shadow: none !important;
    padding: calc(env(safe-area-inset-top) + 10px) 16px 10px !important;
    backdrop-filter: blur(18px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
}
.header-row { gap: 10px !important; }
.logo, .pk-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 19px !important;
    font-weight: 820 !important;
    letter-spacing: -.035em;
}
.pk-brandmark {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--pk-accent);
    color: white;
}
.pk-brandmark svg { width: 18px; height: 18px; }
.header-actions { gap: 6px !important; }
.icon-button {
    width: 38px !important;
    height: 38px !important;
    border-radius: 11px !important;
    background: var(--pk-surface) !important;
    color: #62697a !important;
    border: 1px solid var(--pk-border) !important;
    box-shadow: none !important;
    display: inline-grid;
    place-items: center;
}
.icon-button:hover { background: var(--pk-accent-soft) !important; color: var(--pk-accent-strong) !important; }

.content {
    width: min(100%, 840px) !important;
    max-width: 840px !important;
    margin: 0 auto !important;
    padding: 16px 16px 30px !important;
}

/* ---------- Navigation ---------- */
.nav, html[data-theme="dark"] .nav {
    left: 50% !important;
    right: auto !important;
    bottom: max(7px, env(safe-area-inset-bottom)) !important;
    transform: translateX(-50%);
    width: min(720px, calc(100% - 16px));
    min-height: 62px;
    padding: 6px 8px !important;
    background: rgba(255,255,255,.95) !important;
    border: 1px solid var(--pk-border) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 34px rgba(52,57,79,.11) !important;
    backdrop-filter: blur(18px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
}
.nav button {
    min-width: 0 !important;
    min-height: 48px;
    flex: 1;
    padding: 5px 3px !important;
    border-radius: 12px !important;
    color: #8a90a0 !important;
    font-size: 10.5px !important;
    font-weight: 650 !important;
    line-height: 1.08;
}
.nav button.active, html[data-theme="dark"] .nav button.active {
    color: var(--pk-accent-strong) !important;
    background: var(--pk-accent-soft) !important;
    font-weight: 800 !important;
}
.nav-icon { height: 20px; margin: 0 auto 3px !important; display: grid !important; place-items: center; font-size: 0 !important; }
.nav-icon svg { width: 19px; height: 19px; }
.fab {
    width: 50px !important;
    height: 50px !important;
    right: max(16px, calc((100vw - 840px)/2 + 16px)) !important;
    bottom: calc(max(7px, env(safe-area-inset-bottom)) + 72px) !important;
    border-radius: 16px !important;
    background: var(--pk-accent) !important;
    color: white !important;
    box-shadow: 0 10px 24px rgba(93,112,183,.22) !important;
    font-size: 0 !important;
    display: grid;
    place-items: center;
}
.fab svg { width: 23px; height: 23px; }
body.page-home .fab { display: none !important; }

/* ---------- Seitenkopf ---------- */
.pk-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin: 2px 0 15px;
}
.pk-page-head-copy { min-width: 0; }
.pk-page-head p { margin: 4px 0 0; }
.pk-page-actions { display: flex; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Karten ---------- */
.card,
.entry,
.task-card,
.group-card,
.photo-card,
.stat-card,
.quick,
html[data-theme="dark"] .card,
html[data-theme="dark"] .entry,
html[data-theme="dark"] .task-card,
html[data-theme="dark"] .group-card,
html[data-theme="dark"] .photo-card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .quick {
    background: var(--pk-surface) !important;
    color: var(--pk-text) !important;
    border-color: var(--pk-border) !important;
}
.card {
    border-radius: var(--pk-radius) !important;
    padding: 14px !important;
    margin-bottom: 10px !important;
    box-shadow: var(--pk-shadow) !important;
}
.card:hover { box-shadow: var(--pk-shadow) !important; }
.entry {
    border-radius: 14px !important;
    padding: 12px !important;
    margin-bottom: 8px !important;
    box-shadow: none !important;
}
.entry:last-child { margin-bottom: 0 !important; }
.entry-header { gap: 10px !important; }
.entry-actions { gap: 5px !important; }
.entry-actions button,
.dose-actions button,
.document-row button.delete {
    min-width: 34px;
    min-height: 34px;
    padding: 7px 8px !important;
    border-radius: 10px !important;
    background: var(--pk-surface-soft) !important;
    color: #687080 !important;
}
.entry-actions button.delete,
.document-row button.delete { background: var(--pk-danger-soft) !important; color: var(--pk-danger) !important; }

/* ---------- Buttons ---------- */
.button {
    min-height: 40px;
    padding: 0 14px !important;
    border-radius: 11px !important;
    background: var(--pk-accent) !important;
    color: white !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    font-size: 13.5px !important;
    font-weight: 760 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}
.button:hover { background: var(--pk-accent-strong) !important; box-shadow: none !important; }
.button.secondary {
    background: var(--pk-surface) !important;
    color: #5f6676 !important;
    border-color: var(--pk-border) !important;
}
.button.secondary:hover { background: var(--pk-surface-soft) !important; }
.button.danger { background: var(--pk-danger) !important; color: white !important; }
.button.small-button { min-height: 34px; padding: 0 10px !important; font-size: 12px !important; border-radius: 10px !important; }
.button.full { width: 100%; }
.pk-button-icon { width: 17px; height: 17px; flex: 0 0 auto; }

/* ---------- Inputs / Formulare ---------- */
label { font-size: 12.5px !important; font-weight: 760 !important; color: #525969 !important; }
input, textarea, select,
html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select {
    background: var(--pk-surface) !important;
    color: var(--pk-text) !important;
    border: 1px solid var(--pk-border) !important;
    border-radius: 11px !important;
    padding: 10px 11px !important;
    margin-top: 5px !important;
    margin-bottom: 11px !important;
    min-height: 41px;
    box-shadow: none !important;
}
textarea { min-height: 86px !important; }
input:focus, textarea:focus, select:focus {
    border-color: #b9c1e5 !important;
    box-shadow: 0 0 0 3px rgba(113,129,196,.10) !important;
}

/* ---------- Modals ---------- */
.modal-bg { background: rgba(45,49,67,.28) !important; backdrop-filter: blur(5px); padding: 14px; }
.modal, html[data-theme="dark"] .modal {
    width: min(100%, 650px) !important;
    max-height: min(88vh, 820px) !important;
    margin: auto !important;
    border: 1px solid var(--pk-border) !important;
    border-radius: 22px !important;
    background: var(--pk-bg) !important;
    color: var(--pk-text) !important;
    padding: 18px !important;
    box-shadow: 0 24px 70px rgba(43,48,72,.18) !important;
}
.modal > h2:first-of-type { padding-right: 44px; margin-bottom: 15px; }
.close, html[data-theme="dark"] .close {
    width: 34px !important;
    height: 34px !important;
    background: var(--pk-surface-strong) !important;
    color: #6a7080 !important;
    font-size: 19px !important;
}

/* ---------- Badges / Status ---------- */
.badge, .status-pill, .chip {
    background: var(--pk-accent-soft) !important;
    color: var(--pk-accent-strong) !important;
    padding: 5px 8px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
    font-weight: 760 !important;
}
.badge.warning, .late-pill { background: var(--pk-warning-soft) !important; color: var(--pk-warning) !important; }
.badge.danger, .chip.danger { background: var(--pk-danger-soft) !important; color: var(--pk-danger) !important; }
.chip.success, .completed-meta { color: var(--pk-success) !important; }
.chip.success { background: var(--pk-success-soft) !important; }

/* ---------- Sections ---------- */
.section-title {
    margin: 21px 0 9px !important;
    gap: 10px !important;
}
.section-title h2, .section-title h3 { margin: 0 !important; }
.section-sub { margin: -4px 0 9px !important; font-size: 12.5px !important; }
.grid { gap: 8px !important; }
.stat-grid { gap: 7px !important; margin: 10px 0 14px !important; }
.stat-card { border-radius: 13px !important; padding: 10px !important; box-shadow: none !important; }
.stat-card strong { font-size: 20px !important; }

/* ---------- Heute ---------- */
.pk-today-summary {
    padding: 16px 17px;
    margin-bottom: 10px;
    border: 1px solid #dfe4f4;
    border-radius: 18px;
    background: linear-gradient(135deg, #f4f6fd 0%, #fafbfe 100%);
    box-shadow: none;
}
.pk-today-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pk-today-kicker { color: var(--pk-muted); font-size: 11.5px; font-weight: 700; margin-bottom: 3px; }
.pk-today-summary h1 { font-size: clamp(23px, 5vw, 28px); margin: 0; }
.pk-open-count { text-align: right; flex: 0 0 auto; }
.pk-open-count strong { display: block; color: var(--pk-accent-strong); font-size: 33px; line-height: .95; letter-spacing: -.05em; }
.pk-open-count span { display: block; color: var(--pk-muted); font-size: 11px; margin-top: 3px; }
.pk-progress-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin-top: 13px; }
.pk-progress { height: 5px; background: #e5e8f2; border-radius: 99px; overflow: hidden; }
.pk-progress > div { height: 100%; background: var(--pk-accent); border-radius: inherit; }
.pk-progress-label { color: var(--pk-muted); font-size: 11.5px; white-space: nowrap; }
.today-toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 7px !important;
    margin: 9px 0 !important;
    align-items: center !important;
}
.today-toolbar select { min-width: 0 !important; width: 100% !important; margin: 0 !important; min-height: 38px; }
.pk-segmented { display: inline-flex; padding: 3px; border: 1px solid var(--pk-border); background: var(--pk-surface); border-radius: 11px; }
.today-toolbar .chip-button {
    border: 0 !important;
    min-height: 31px;
    padding: 0 10px !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #777e8e !important;
    font-size: 11.5px !important;
    font-weight: 750 !important;
}
.today-toolbar .chip-button.active { background: var(--pk-accent-soft) !important; color: var(--pk-accent-strong) !important; }
.pk-action-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 7px;
    margin: 9px 0 17px;
}
.pk-quick {
    min-width: 0;
    min-height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 5px;
    border: 1px solid var(--pk-border);
    border-radius: 13px;
    background: var(--pk-surface);
    color: #565d6d;
    font-size: 11.5px;
    font-weight: 740;
    cursor: pointer;
}
.pk-quick:hover { border-color: #d2d8ed; background: #fbfbfd; }
.pk-quick-icon { width: 23px; height: 23px; color: var(--pk-accent-strong); display: grid; place-items: center; }
.pk-quick-icon svg { width: 21px; height: 21px; }
.pk-today-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 16px 1px 8px; }
.pk-today-section-head h2 { margin: 0; font-size: 18px; }
.pk-today-section-head span { color: var(--pk-muted); font-size: 11.5px; }
.task-list { gap: 7px !important; }
.task-card {
    padding: 10px 11px !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    min-height: 58px;
}
.task-main { gap: 10px !important; }
.task-title { font-size: 13.5px !important; line-height: 1.25; }
.task-meta { font-size: 11.5px !important; margin-top: 2px !important; line-height: 1.35; }
.task-icon, .search-result-icon, .activity-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    background: var(--pk-accent-soft) !important;
    color: var(--pk-accent-strong) !important;
    font-size: 0 !important;
}
.task-icon svg, .search-result-icon svg, .activity-icon svg { width: 17px; height: 17px; }
.task-actions { gap: 5px !important; flex-wrap: nowrap !important; }
.task-actions .button { white-space: nowrap; }
.task-card.done, html[data-theme="dark"] .task-card.done { opacity: .62 !important; background: #f7f8fa !important; }
.today-section-details > summary { padding: 10px 1px !important; font-size: 12.5px; color: var(--pk-muted); }

/* ---------- Tiere ---------- */
.group-grid { gap: 7px !important; margin-bottom: 12px !important; }
.group-card { padding: 11px !important; border-radius: 13px !important; box-shadow: none !important; }
.group-card strong { font-size: 13px; margin-bottom: 2px; }
.animal-card { padding: 12px !important; min-height: 78px; }
.animal-left { gap: 11px !important; min-width: 0; }
.animal-avatar { width: 48px !important; height: 48px !important; font-size: 24px !important; flex: 0 0 auto; }
.weight { font-size: 18px !important; }
.pk-animal-main { min-width: 0; }
.pk-animal-name { font-size: 15px; font-weight: 820; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-animal-meta { color: var(--pk-muted); font-size: 11.5px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-animal-side { text-align: right; flex: 0 0 auto; }
.pk-animal-health { margin-top: 5px; display: flex; justify-content: flex-end; }

/* ---------- Tierprofil ---------- */
.pk-back { margin-bottom: 10px; }
.pk-profile-card { padding: 15px !important; }
.pk-profile-top { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 13px; }
.pk-profile-top .profile-photo { margin: 0 !important; width: 72px !important; height: 72px !important; border-radius: 20px !important; font-size: 35px !important; }
.pk-profile-copy { min-width: 0; }
.pk-profile-copy h1 { margin: 0 0 3px; }
.pk-profile-sub { color: var(--pk-muted); font-size: 12.5px; }
.pk-meta-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px; }
.pk-meta-chip { padding: 5px 8px; border-radius: 999px; background: var(--pk-surface-soft); color: #656c7b; font-size: 11.5px; font-weight: 700; }
.pk-profile-notes { display: grid; gap: 7px; margin-top: 12px; }
.pk-profile-note { padding: 9px 10px; border-radius: 11px; background: var(--pk-surface-soft); font-size: 12.5px; line-height: 1.45; }
.pk-profile-note.warning { background: var(--pk-warning-soft); color: #76572d; }
.pk-profile-note.danger { background: var(--pk-danger-soft); color: #8f4851; }
.pk-profile-actions { grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: 10px; }
.pk-profile-actions .pk-quick { min-height: 60px; }
.pk-delete-zone { margin-top: 24px; padding-top: 13px; border-top: 1px solid var(--pk-border); }

/* ---------- Timeline ---------- */
.pk-timeline { position: relative; margin-top: 4px; }
.pk-timeline::before { content: ""; position: absolute; left: 16px; top: 7px; bottom: 7px; width: 1px; background: var(--pk-border); }
.pk-timeline-item { position: relative; display: grid; grid-template-columns: 33px minmax(0,1fr); gap: 10px; padding: 7px 0; }
.pk-timeline-dot { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 11px; background: var(--pk-accent-soft); color: var(--pk-accent-strong); z-index: 1; }
.pk-timeline-dot svg { width: 16px; height: 16px; }
.pk-timeline-card { padding: 10px 12px; border: 1px solid var(--pk-border); border-radius: 13px; background: var(--pk-surface); }
.pk-timeline-card strong { font-size: 13.5px; }
.pk-timeline-card p { margin: 6px 0 0; font-size: 12.5px; }
.pk-timeline-meta { margin-top: 3px; color: var(--pk-muted); font-size: 11.5px; }

/* ---------- Termine ---------- */
.reminder-stats { grid-template-columns: repeat(3,1fr) !important; }
.reminder-card { padding: 12px !important; }
.reminder-toggle { margin-top: 9px !important; }
.reminder-card.completed, .reminder-entry.completed { opacity: .68 !important; }
.pk-collapsible > summary { cursor: pointer; list-style: none; color: var(--pk-muted); font-weight: 760; font-size: 12.5px; padding: 11px 1px; }
.pk-collapsible > summary::-webkit-details-marker { display: none; }

/* ---------- Hilfe ---------- */
.emergency-banner {
    padding: 14px !important;
    margin-bottom: 12px !important;
    border-radius: 15px !important;
    background: var(--pk-danger-soft) !important;
    border: 1px solid #efdadd !important;
}
.emergency-banner h2 { color: #8f4851 !important; font-size: 18px; margin: 0 0 6px !important; }
.help-species-grid { gap: 7px !important; margin-bottom: 12px !important; }
.help-species-button {
    min-height: 40px;
    padding: 8px 9px !important;
    border-radius: 11px !important;
    background: var(--pk-surface) !important;
    color: #596070 !important;
    border-color: var(--pk-border) !important;
    font-size: 12px;
}
.help-species-button.active { background: var(--pk-accent-soft) !important; color: var(--pk-accent-strong) !important; border-color: #d3d9ef !important; }
.help-note, .notice { background: var(--pk-surface-soft) !important; border-radius: 11px !important; }
.emergency-contact-card.primary { border-color: #d4daee !important; box-shadow: none !important; }

/* ---------- Gesundheit / Inhalte ---------- */
.health-alert { border-left-width: 3px !important; border-radius: 13px !important; padding: 11px !important; }
.health-alert.good { background: var(--pk-success-soft) !important; border-color: #d9e9df !important; }
.health-alert.danger { background: var(--pk-danger-soft) !important; border-color: #eed7da !important; }
.health-alert:not(.good):not(.danger) { background: var(--pk-warning-soft) !important; border-color: #eee0c7 !important; }
.health-grid { gap: 7px !important; }
.health-choice { padding: 9px !important; border-radius: 11px !important; }
.dose-row, .document-row { padding: 9px 0 !important; }
.med-detail-grid { gap: 6px !important; }
.med-detail { padding: 8px !important; border-radius: 10px !important; background: var(--pk-surface-soft) !important; }
.timeline-item { border-left-width: 2px !important; padding-left: 12px !important; margin-bottom: 13px !important; }

/* ---------- Kalender ---------- */
.calendar-shell { min-height: 430px !important; }
.calendar-grid { gap: 4px !important; }
.calendar-day { min-height: 68px !important; padding: 6px !important; border-radius: 11px !important; box-shadow: none !important; }
.calendar-day.today { border-color: #b7c0e5 !important; box-shadow: inset 0 0 0 1px #b7c0e5 !important; }
.calendar-dot { width: 5px !important; height: 5px !important; background: var(--pk-accent) !important; }
.calendar-dot.vet { background: var(--pk-danger) !important; }
.calendar-dot.medication { background: #8a76b8 !important; }
.calendar-dot.care { background: var(--pk-warning) !important; }

/* ---------- Einstellungen / Konto ---------- */
.pk-settings-intro { display: flex; align-items: center; gap: 11px; }
.pk-account-avatar { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--pk-accent-soft); color: var(--pk-accent-strong); font-weight: 850; }
.pk-settings-section h3 { margin: 0 0 4px; }
.member-row { padding: 10px 0 !important; gap: 9px !important; }
.member-avatar { width: 36px !important; height: 36px !important; background: var(--pk-accent-soft) !important; color: var(--pk-accent-strong) !important; }
.code-box { font-size: 20px !important; padding: 10px !important; border-radius: 11px !important; background: var(--pk-surface-soft) !important; }
.security-note { background: var(--pk-accent-soft) !important; border-color: #dfe4f5 !important; }

/* ---------- Empty / Suche / Fotos ---------- */
.empty-state { padding: 25px 16px !important; border-radius: 15px !important; background: rgba(255,255,255,.65) !important; }
.empty-state-icon { font-size: 28px !important; filter: grayscale(.55); opacity: .78; }
.search-shell, html[data-theme="dark"] .search-shell { background: var(--pk-bg) !important; }
.search-input { font-size: 15px !important; padding: 11px 12px !important; }
.search-result { padding: 10px 0 !important; }
.photo-grid { gap: 8px !important; }
.photo-card { border-radius: 13px !important; box-shadow: none !important; }
.photo-card-body { padding: 9px !important; }

/* ---------- Login ---------- */
.login, html[data-theme="dark"] .login { background: var(--pk-bg) !important; padding: 16px !important; }
.login-box { max-width: 400px !important; }
.login-box .card { padding: 22px 18px !important; box-shadow: var(--pk-shadow-up) !important; }

/* ---------- Desktop ---------- */
@media (min-width: 700px) {
    .content { padding: 22px 24px 34px !important; }
    .modal-bg { align-items: center !important; }
    .modal { border-radius: 22px !important; }
    .pk-profile-actions { grid-template-columns: repeat(8,minmax(0,1fr)); }
}

/* ---------- Mobile ---------- */
@media (max-width: 560px) {
    .content { padding: 13px 12px 28px !important; }
    .header { padding-left: 12px !important; padding-right: 12px !important; }
    .pk-page-head { align-items: flex-start; margin-bottom: 12px; }
    .pk-page-actions .button span.pk-btn-label.optional { display: none; }
    .card { padding: 12px !important; }
    .pk-action-grid, .pk-profile-actions { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .pk-quick { min-height: 59px; font-size: 10.5px; }
    .today-toolbar { grid-template-columns: minmax(0,1fr) auto !important; }
    .task-card { align-items: center !important; flex-direction: row !important; }
    .task-actions { width: auto !important; max-width: 116px !important; justify-content: flex-end !important; }
    .task-actions .button { flex: 0 0 auto !important; min-height: 34px; padding: 0 9px !important; font-size: 11.5px !important; }
    .pk-profile-top { grid-template-columns: auto minmax(0,1fr); }
    .pk-profile-top > .button { grid-column: 1 / -1; width: 100%; }
    .pk-profile-top .profile-photo { width: 62px !important; height: 62px !important; border-radius: 17px !important; }
    .modal-bg { align-items: flex-end !important; padding: 0 !important; }
    .modal, html[data-theme="dark"] .modal {
        width: 100% !important;
        max-height: 92vh !important;
        margin: 0 !important;
        border-left: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-radius: 20px 20px 0 0 !important;
        padding: 17px 14px calc(env(safe-area-inset-bottom) + 20px) !important;
    }
    .stat-grid { grid-template-columns: repeat(3,1fr) !important; }
    .calendar-day { min-height: 54px !important; }
    .nav { width: calc(100% - 12px) !important; }
}

@media (max-width: 390px) {
    .nav button { font-size: 9.5px !important; }
    .pk-quick { padding-inline: 3px; }
    .pk-open-count strong { font-size: 30px; }
}




.pk-history-archive {
    margin-top: 10px;
    border-top: 1px solid var(--border);
}

.pk-history-archive > summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
    padding: 11px 2px 4px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
    cursor: pointer;
    user-select: none;
}

.pk-history-archive > summary::-webkit-details-marker {
    display: none;
}

.pk-history-archive > summary:hover {
    color: var(--text);
}

.pk-history-chevron {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--card);
    color: var(--muted);
    transition: transform .16s ease;
}

.pk-history-archive[open] .pk-history-chevron {
    transform: rotate(180deg);
}

.pk-history-old {
    padding-top: 8px;
}

.pk-history-caption {
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 12px;
}

.pk-med-history {
    margin-top: 10px;
}

@media (max-width: 560px) {
    .pk-history-archive > summary {
        min-height: 42px;
        padding-top: 10px;
    }
}




.pk-household-switch{display:flex;align-items:center;min-width:0;margin-left:auto;margin-right:2px}
.pk-household-switch select{width:auto;max-width:190px;margin:0;padding:8px 29px 8px 10px;border-radius:12px;background:#fff;font-size:12px;font-weight:750;color:#4c5263;border:1px solid #e5e8f0}
.pk-file-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.pk-file-actions .button{min-height:34px;padding:0 10px;font-size:12px}
.pk-emergency-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.pk-emergency-animal{display:flex;align-items:center;gap:10px;text-align:left;background:white;border:1px solid var(--border);border-radius:15px;padding:11px;cursor:pointer;color:var(--text)}
.pk-emergency-animal .animal-avatar{width:40px;height:40px;font-size:20px}
.pk-calendar-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:4px;border-radius:13px;background:#f2f3f8;margin-bottom:14px}
.pk-calendar-tabs button{border:0;background:transparent;border-radius:10px;padding:9px 10px;font-weight:800;color:#72798b;cursor:pointer}
.pk-calendar-tabs button.active{background:#fff;color:#5f72bd;box-shadow:0 2px 8px rgba(50,55,80,.07)}
.pk-agenda{display:grid;gap:10px}.pk-agenda-day{background:#fff;border:1px solid var(--border);border-radius:16px;padding:13px}.pk-agenda-day h3{font-size:14px;margin:0 0 7px}.pk-agenda-event{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid #eceef3}.pk-agenda-event:first-of-type{border-top:0}
.pk-agenda-icon{width:32px;height:32px;border-radius:10px;background:#f1f3fb;display:grid;place-items:center;flex:0 0 auto}
.pk-calculator{margin-top:26px}.pk-calculator-form{display:grid;grid-template-columns:1fr 120px;gap:9px}.pk-calculator-form select,.pk-calculator-form input{margin:0}
.pk-calculator-result{margin-top:12px;padding:15px;border-radius:15px;background:#f6f7fb;border:1px solid #e5e8f0}.pk-calculator-result strong{font-size:20px}.pk-source{font-size:11px;color:#858b99;margin-top:9px}.pk-source a{color:#687bc8}
.pk-notify-grid{display:grid;gap:8px;margin-top:10px}.pk-notify-row{display:grid;grid-template-columns:22px 1fr auto;gap:9px;align-items:center;padding:9px 0;border-top:1px solid var(--border)}.pk-notify-row:first-child{border-top:0}.pk-notify-row input[type=checkbox]{width:18px;height:18px;margin:0}.pk-notify-row input[type=time]{width:96px;margin:0;padding:8px}
.pk-household-list{display:grid;gap:8px;margin-top:10px}.pk-household-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:11px;border:1px solid var(--border);border-radius:14px;background:#fafbfe}.pk-household-row.active{border-color:#cfd6f3;background:#f5f7ff}
.pk-public-link{word-break:break-all;font-size:12px;background:#f5f7fb;border:1px solid #e5e8f0;border-radius:12px;padding:9px;margin-top:8px}
@media(max-width:560px){.pk-household-switch select{max-width:135px}.pk-emergency-grid{grid-template-columns:1fr}.pk-calculator-form{grid-template-columns:1fr 96px}.pk-notify-row{grid-template-columns:22px 1fr}.pk-notify-row input[type=time]{grid-column:2;width:110px}}



.pk-offline-banner{position:sticky;top:0;z-index:85;margin:0 auto 10px;max-width:900px;padding:8px 12px;border:1px solid #ead9ae;background:#fff9e9;color:#76591e;border-radius:12px;font-size:12px;font-weight:750;display:flex;align-items:center;justify-content:center;gap:7px}
.pk-filter-select optgroup{font-weight:850;color:#33394a}.pk-filter-select option{font-weight:600;color:#4b5263}
.pk-v9-action{display:flex;align-items:center;gap:8px}.pk-v9-action svg{flex:0 0 auto}
.pk-emergency-settings{margin-top:14px;padding:14px;border:1px solid var(--border);border-radius:16px;background:#f9fafc}.pk-emergency-settings h3{margin:0 0 4px}.pk-emergency-settings p{margin:0 0 10px}.pk-emergency-toggle{display:grid;grid-template-columns:22px 1fr;align-items:start;gap:9px;padding:8px 0;border-top:1px solid #eceef3}.pk-emergency-toggle:first-of-type{border-top:0}.pk-emergency-toggle input{margin-top:2px;width:17px;height:17px;accent-color:#7486d4}
.pk-emergency-dose{padding:10px 12px;border:1px solid var(--border);border-radius:13px;background:#fff;margin-top:7px}.pk-emergency-dose strong{display:block}.pk-emergency-dose .dose{font-size:17px;font-weight:850;margin-top:2px}
.pk-report-range{display:grid;grid-template-columns:1fr 1fr;gap:10px}.pk-report-option{display:flex;gap:9px;align-items:flex-start;padding:10px 0}.pk-report-option input{margin-top:2px;width:17px;height:17px;accent-color:#7486d4}
.pk-move-household-list{display:grid;gap:8px;margin:12px 0}.pk-move-note{padding:11px 12px;background:#fff8eb;border:1px solid #f0dfb7;border-radius:13px;color:#6e5727;font-size:12px}
.pk-onboarding{max-width:520px}.pk-onboarding-hero{text-align:center;padding:8px 0 12px}.pk-onboarding-badge{display:inline-flex;padding:6px 10px;border-radius:999px;background:#eef1ff;color:#586bb8;font-weight:800;font-size:12px}.pk-onboarding-hero h2{font-size:28px;margin:10px 0 5px}.pk-onboarding-steps{display:grid;gap:9px;margin:12px 0}.pk-onboarding-step{display:grid;grid-template-columns:36px 1fr;gap:11px;padding:12px;border:1px solid var(--border);border-radius:15px;background:#fafbfe}.pk-onboarding-step-num{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#eef1ff;color:#5d70bd;font-weight:900}.pk-onboarding-step strong{display:block;margin-bottom:2px}
.pk-settings-extra{margin-top:9px}.pk-cache-state{font-size:12px;color:var(--muted);margin-top:7px}
@media(max-width:560px){.pk-report-range{grid-template-columns:1fr}.pk-emergency-dose .dose{font-size:16px}}


/* =========================================================
   Nagernotes V9.1 · Brand + Tier-Menü + Bericht
========================================================= */
.pk-brandmark.pk-brandmark-v91{
    width:36px;
    height:36px;
    border-radius:12px;
    background:linear-gradient(145deg,#6f82d8 0%,#846fc8 58%,#a27fc6 100%);
    box-shadow:0 7px 18px rgba(103,115,187,.24), inset 0 1px 0 rgba(255,255,255,.22);
    position:relative;
    overflow:hidden;
}
.pk-brandmark.pk-brandmark-v91::after{
    content:"";
    position:absolute;
    width:17px;height:17px;border-radius:50%;
    background:rgba(255,255,255,.10);
    right:-4px;top:-4px;
}
.pk-brandmark.pk-brandmark-v91 svg{width:24px;height:24px;position:relative;z-index:1}
.pk-wordmark-v91{font-size:20px;font-weight:850;letter-spacing:-.045em;color:var(--pk-text)}
.pk-login-brand-v91{display:flex;justify-content:center;margin:2px 0 12px}.pk-login-brand-v91 .pk-brandmark-v91{width:56px;height:56px;border-radius:17px}.pk-login-brand-v91 .pk-brandmark-v91 svg{width:36px;height:36px}
.pk-brand-v91{gap:10px}
.pk-profile-top{position:relative}
.pk-profile-menu-wrap{position:relative;align-self:start;justify-self:end;z-index:40}
.pk-profile-more{
    width:40px!important;height:40px!important;
    padding:0!important;border-radius:12px!important;
    display:grid!important;place-items:center!important;
    flex:0 0 auto;
}
.pk-profile-menu{
    position:absolute;
    right:0;
    top:calc(100% + 7px);
    width:min(292px,calc(100vw - 34px));
    padding:7px;
    border:1px solid var(--pk-border);
    border-radius:16px;
    background:rgba(255,255,255,.98);
    box-shadow:0 18px 48px rgba(39,44,69,.16);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    display:none;
    transform-origin:top right;
}
.pk-profile-menu.open{display:block;animation:pkMenuIn .13s ease-out}
@keyframes pkMenuIn{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}}
.pk-profile-menu-item{
    width:100%;
    border:0;
    background:transparent;
    color:var(--pk-text);
    border-radius:11px;
    padding:10px 11px;
    display:flex;
    align-items:center;
    gap:10px;
    text-align:left;
    cursor:pointer;
    font:inherit;
    font-size:13px;
    font-weight:760;
}
.pk-profile-menu-item:hover,.pk-profile-menu-item:focus-visible{background:var(--pk-accent-soft);outline:none}
.pk-profile-menu-item svg{color:var(--pk-accent-strong);flex:0 0 auto}
.pk-profile-menu-separator{height:1px;background:var(--pk-border);margin:5px 4px}
.pk-profile-menu-item.disabled{opacity:.48;cursor:not-allowed}
.pk-profile-menu-item.disabled:hover{background:transparent}
.pk-v91-report-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.pk-v91-report-actions .button{width:100%}
@media(max-width:560px){
    .pk-profile-top{grid-template-columns:auto minmax(0,1fr) auto!important;align-items:start!important}
    .pk-profile-top .pk-profile-menu-wrap{grid-column:auto!important}
    .pk-v91-report-actions{grid-template-columns:1fr}
}


/* =========================================================
   Nagernotes V9.2 · tatsächliches Tier-Menü + neues Brandmark
========================================================= */
.pk-brand-v92{
    display:flex;
    align-items:center;
    gap:9px;
    min-width:0;
}
.pk-brandmark-v92{
    width:80px;
    height:80px;
    border-radius:0;
    display:grid;
    place-items:center;
    flex:0 0 auto;
    background:transparent;
    box-shadow:none;
}
.pk-brandmark-v92 svg{
    width:27px;
    height:27px;
    display:block;
}
.pk-brandmark-v92 img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
}
.pk-wordmark-v92{
    color:var(--pk-text,var(--text,#292d3a));
    font-size:20px;
    font-weight:900;
    letter-spacing:-.045em;
    white-space:nowrap;
}
.pk-login-brand-v92{
    display:flex;
    justify-content:center;
    margin:2px 0 11px;
}
.pk-login-brand-v92 .pk-brandmark-v92{
    width:280px;
    height:280px;
    border-radius:0;
}
.pk-login-brand-v92 .pk-brandmark-v92 svg{
    width:43px;
    height:43px;
}
.pk-login-brand-v92 .pk-brandmark-v92{
    width:280px;
    height:280px;
    background:transparent;
    box-shadow:none;
}

/* Das Menü sitzt wirklich im Profil-Header. */
.pk-profile-card{overflow:visible!important}
.pk-profile-top{overflow:visible!important}
.pk-profile-menu-wrap{
    margin-left:auto;
    position:relative;
    z-index:60;
    flex:0 0 auto;
}
.pk-profile-more{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    padding:0!important;
    display:grid!important;
    place-items:center!important;
    border-radius:13px!important;
}
.pk-profile-menu{
    z-index:90!important;
}
.pk-profile-menu-item .pk-menu-copy{
    display:flex;
    flex-direction:column;
    gap:1px;
    min-width:0;
}
.pk-profile-menu-item .pk-menu-copy small{
    color:var(--muted);
    font-weight:600;
    font-size:11px;
}
.pk-profile-menu-item[disabled]{
    opacity:.42;
    cursor:not-allowed;
}

/* Alte V9-Aktionen verschwinden, sobald V9.2 aktiv ist. */
.pk-v92-hidden{display:none!important}

@media(max-width:560px){
    .pk-wordmark-v92{font-size:19px}
    .pk-brandmark-v92{width:62px;height:62px;border-radius:0}
}


/* =========================================================
   Nagernotes V10 · Tier-Tabs, Plus, Account & Haushalt
========================================================= */
.pk-animal-tabs{
    display:flex;
    gap:7px;
    overflow-x:auto;
    scrollbar-width:none;
    margin:14px 0 12px;
    padding:2px 1px 5px;
    position:sticky;
    top:66px;
    z-index:25;
    background:linear-gradient(to bottom,var(--pk-canvas,#f7f8fb) 76%,rgba(247,248,251,0));
}
.pk-animal-tabs::-webkit-scrollbar{display:none}
.pk-animal-tab{
    border:1px solid var(--pk-border);
    background:var(--pk-surface);
    color:var(--pk-muted);
    border-radius:999px;
    min-height:36px;
    padding:0 12px;
    white-space:nowrap;
    font-weight:780;
    font-size:12px;
    cursor:pointer;
}
.pk-animal-tab.active{
    background:var(--pk-accent-soft);
    color:var(--pk-accent-strong);
    border-color:#d7dcef;
}
.pk-animal-panel{display:none}
.pk-animal-panel.active{display:block}
.pk-animal-overview-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin:9px 0 4px;
}
.pk-animal-overview-stat{
    background:var(--pk-surface);
    border:1px solid var(--pk-border);
    border-radius:15px;
    padding:12px;
    min-width:0;
}
.pk-animal-overview-stat .label{
    display:flex;align-items:center;gap:6px;
    color:var(--pk-muted);font-size:11.5px;font-weight:720;margin-bottom:4px
}
.pk-animal-overview-stat strong{
    font-size:16px;
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.pk-care-panel .entry:last-child{border-bottom:0}
.pk-profile-menu-item.danger{color:var(--pk-danger,#c9656d)!important}
.pk-profile-menu-item.danger svg{color:inherit}
.pk-profile-menu-separator{height:1px;background:var(--pk-border);margin:5px 7px}

.pk-plan-card{
    position:relative;
    overflow:hidden;
    border:1px solid #dfe3f2!important;
    background:linear-gradient(145deg,#fbfcff,#f1f4ff)!important;
}
.pk-plan-card.plus{
    background:linear-gradient(145deg,#f8f7ff,#eef1ff)!important;
    border-color:#d6dcf2!important;
}
.pk-plan-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.pk-plan-name{font-size:19px;font-weight:900;letter-spacing:-.03em}
.pk-plan-badge{
    display:inline-flex;align-items:center;gap:5px;
    border-radius:999px;padding:5px 9px;
    background:#e9edff;color:#596dc2;font-size:11px;font-weight:850
}
.pk-plan-features{
    display:grid;gap:6px;margin:12px 0 0;padding:0;list-style:none
}
.pk-plan-features li{display:flex;gap:7px;align-items:flex-start;font-size:13px}
.pk-plan-features li::before{content:"✓";font-weight:900;color:var(--pk-success,#4f8a6a)}
.pk-settings-actions-3{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px;
    margin-top:10px;
}
.pk-settings-actions-3 .button{min-width:0}
.pk-danger-outline{
    color:var(--pk-danger,#c9656d)!important;
    border-color:#ecd0d4!important;
    background:#fffafb!important;
}
.pk-email-row{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    margin-top:10px;padding-top:10px;border-top:1px solid var(--pk-border)
}
.pk-email-row .copy{min-width:0}
.pk-email-row .copy strong,.pk-email-row .copy span{display:block;overflow:hidden;text-overflow:ellipsis}
.pk-plus-compare{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0
}
.pk-plus-column{border:1px solid var(--pk-border);border-radius:14px;padding:12px}
.pk-plus-column.featured{border-color:#cfd7f3;background:#f5f7ff}
.pk-code-input{font-size:24px!important;letter-spacing:.25em;text-align:center;font-weight:850}
.pk-settings-section h3{margin-bottom:8px}
@media(min-width:700px){
    .pk-animal-overview-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:560px){
    .pk-animal-tabs{top:60px;margin-left:-2px;margin-right:-2px}
    .pk-settings-actions-3{grid-template-columns:1fr}
    .pk-plus-compare{grid-template-columns:1fr}
}



.pk-legal-links{
    max-width:980px;
    margin:14px auto 96px;
    padding:0 18px;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:9px;
    flex-wrap:wrap;
    color:var(--muted);
    font-size:12px;
}
.login-box > .pk-legal-links{
    margin:14px auto 0;
    padding:0;
}
.pk-legal-link{
    appearance:none;
    border:0;
    background:transparent;
    color:var(--muted);
    padding:5px 3px;
    cursor:pointer;
    text-decoration:underline;
    text-underline-offset:3px;
}
.pk-legal-link:hover{color:var(--accent-strong,var(--green-dark));}
.pk-legal{
    max-width:760px;
    margin:0 auto;
    line-height:1.62;
    overflow-wrap:anywhere;
}
.pk-legal h2{margin:0 0 6px;font-size:25px;}
.pk-legal h1{font-size:25px;line-height:1.25;overflow-wrap:anywhere;margin:0 0 16px;}
.pk-legal h1 ~ h2,.pk-legal section h2{font-size:18px;margin:24px 0 8px;}
.pk-legal .legal-action{display:inline-block;background:var(--accent,#414fa0);color:#fff;border-radius:12px;padding:12px 16px;text-decoration:none;font-weight:650;}
.pk-legal p,.pk-legal li{overflow-wrap:anywhere;}
.pk-legal h3{margin:25px 0 7px;font-size:17px;}
.pk-legal p{margin:8px 0;}
.pk-legal ul{padding-left:22px;}
.pk-legal li{margin:5px 0;}
.pk-legal-meta{color:var(--muted);font-size:12px;margin-bottom:18px;}
.pk-legal-warning{
    border:1px solid #ecd9a9;
    background:#fffaf0;
    border-radius:14px;
    padding:12px 14px;
    margin:12px 0 18px;
    font-size:13px;
}
.pk-legal-address{font-style:normal;}
.pk-legal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;}
html[data-theme="dark"] .pk-legal-warning{background:#2a2519;border-color:#5e5030;}
@media(max-width:560px){
    .pk-legal-links{margin-bottom:90px;padding-inline:14px;}
    .pk-legal-actions{grid-template-columns:1fr;}
}


/* Passwort anzeigen / ausblenden */
.password-field {
    position: relative;
    margin-bottom: 13px;
}
.password-field input {
    margin-bottom: 0;
    padding-right: 52px;
}
.password-toggle {
    position: absolute;
    right: 8px;
    top: calc(50% + 3px);
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}
.password-toggle:hover {
    background: var(--surface-soft);
}
.password-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}


.pk-animal-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;background:var(--pk-surface-soft,#f1f3f8);padding:5px;border-radius:15px;margin-top:16px}
.pk-animal-tab{border-radius:11px;border-color:transparent;min-height:44px;background:transparent;font-size:13px}
.pk-animal-tab.active{background:white;border-color:var(--pk-border);box-shadow:0 2px 5px #32374d08}
.pk-animal-panel[hidden]{display:none!important}
.pet-profile-toolbar{display:flex;justify-content:space-between;gap:10px;align-items:center;margin:14px 0}
.pet-profile-tools{display:flex;gap:8px;flex-wrap:wrap}
.pet-profile-section{border:1px solid var(--pk-border);background:var(--pk-surface);border-radius:18px;margin:12px 0;overflow:hidden;scroll-margin-top:130px}
.pet-profile-section>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;padding:18px;list-style:none}
.pet-profile-section>summary::-webkit-details-marker{display:none}
.pet-profile-section>summary strong{display:block;font-size:15px}.pet-profile-section>summary .small{display:block;margin-top:4px}
.pet-section-chevron{font-size:21px;color:var(--pk-muted)}.pet-profile-section[open] .pet-section-chevron{transform:rotate(180deg)}
.pet-section-body{padding:0 16px 8px}.pet-section-body>.section-title{margin-top:4px}.pet-section-body>.card{box-shadow:none}
.pet-weekly-card{display:flex;gap:14px;align-items:center;padding:19px;border:1px solid #dce8df;background:#f2f8f4;border-radius:18px;margin:16px 0}
.pet-weekly-card.is-due{background:#f0f3ff;border-color:#dce1f5}.pet-weekly-card>div:nth-child(2){flex:1;min-width:0}.pet-weekly-card strong{display:block;margin:4px 0;font-size:17px}.pet-weekly-card p{margin:5px 0 0;line-height:1.6}.pet-weekly-icon{color:var(--pk-accent-strong)}
.pet-next-appointment{display:flex;align-items:center;justify-content:space-between;gap:12px}.pet-next-appointment .small{margin-top:5px}.pet-calm-state{color:var(--pk-muted);font-size:13px}
.pet-stat-button{text-align:left;cursor:pointer;color:var(--pk-text)}.pet-stat-button .label{display:block}.pet-stat-link{display:block;margin-top:10px;font-size:11px;color:var(--pk-accent-strong)}
.pet-overview-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.pet-add-options{display:grid;gap:7px}.pet-add-choice{display:flex;align-items:center;gap:12px;text-align:left;border:1px solid var(--pk-border);border-radius:13px;padding:13px;background:white;cursor:pointer;color:var(--pk-text);width:100%}.pet-add-choice>span:nth-child(2){flex:1}.pet-add-choice strong{display:block;font-size:14px}.pet-add-choice span span{display:block;color:var(--pk-muted);font-size:12px;line-height:1.4;margin-top:4px}.pet-add-icon{color:var(--pk-accent-strong)}
.pet-add-choice:hover,.pet-stat-button:hover{background:var(--pk-accent-soft)}
body.profile-open .fab{display:none!important}
.pet-profile-toolbar button:focus-visible,.pk-animal-tab:focus-visible,.pet-profile-section summary:focus-visible,.pet-add-choice:focus-visible,.pet-stat-button:focus-visible{outline:3px solid #8c9be0;outline-offset:3px}
body.viewer-mode .pk-animal-panel .task-actions button{display:none}
@media(max-width:520px){.pet-profile-toolbar{flex-wrap:wrap}.pet-profile-toolbar>.button{flex:1}.pet-profile-tools{gap:6px}.pet-profile-tools .button{padding:10px;font-size:12px}.pet-weekly-card{flex-wrap:wrap;padding:15px}.pet-weekly-card>.button{width:100%;margin-top:2px}.pet-weekly-icon{align-self:flex-start;margin-top:8px}.pet-profile-section>summary{padding:15px}.pet-section-body{padding:0 10px 5px}.pk-animal-tab{font-size:12px;padding:0 6px}}
/* Clear feedback without expanding the normal mobile layout. */
.form-feedback { padding:12px; margin:0 0 14px; border-radius:10px; background:#fff0f1; color:#8c2637; font-size:14px; }
button[aria-busy="true"] { cursor:wait; opacity:.7; }
.load-error .button { margin:4px; }
:focus-visible { outline:3px solid #5968bb; outline-offset:3px; }
@media (prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}