:root {
  --primary:       #2d6a4f;
  --primary-light: #40916c;
  --primary-dark:  #1b4332;
  --accent:        #d4a017;
  --accent-light:  #f0c040;
  --bg:            #f4f6f0;
  --sidebar-bg:    #1b4332;
  --card-bg:       #ffffff;
  --surface:       #f1f5f9;
  --text:          #1a1a2e;
  --text-muted:    #6b7280;
  --border:        #e2e8f0;
  --danger:        #e63946;
  --success:       #52b788;
  --warning:       #f4a261;
  --info:          #4361ee;
  --radius:        12px;
  --shadow:        0 2px 12px rgba(0,0,0,0.08);
  --shadow-lg:     0 8px 30px rgba(0,0,0,0.12);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);display:flex;height:100vh;overflow:hidden}
a{text-decoration:none;color:inherit}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}

/* ── Login ── */
body.login-body{display:flex;justify-content:center;overflow-y:auto;min-height:100dvh;height:auto;padding:24px 16px;background:linear-gradient(135deg,var(--primary-dark),var(--primary))}
.login-card{background:#fff;border-radius:16px;padding:40px;width:380px;max-width:100%;margin:auto;box-shadow:0 20px 60px rgba(0,0,0,0.3)}
.login-logo{font-size:56px;text-align:center;margin-bottom:8px}
.login-title{font-size:22px;font-weight:800;text-align:center;color:var(--primary-dark)}
.login-sub{font-size:13px;color:var(--text-muted);text-align:center;margin-bottom:24px;margin-top:4px}
.account-type{display:flex;gap:10px;margin-top:6px}
.account-option{flex:1;position:relative;cursor:pointer}
.account-option input{position:absolute;opacity:0;inset:0;cursor:pointer}
.account-option span{display:flex;align-items:center;justify-content:center;gap:6px;padding:12px 8px;border:2px solid var(--border);border-radius:10px;font-size:14px;font-weight:600;color:var(--text);transition:all .15s;text-align:center}
.account-option input:checked+span{border-color:var(--primary);background:rgba(45,106,79,0.08);color:var(--primary-dark)}

/* ── Sidebar ── */
.sidebar{width:240px;background:var(--sidebar-bg);color:#fff;display:flex;flex-direction:column;flex-shrink:0;box-shadow:4px 0 20px rgba(0,0,0,0.2);z-index:100}
.sidebar-logo{padding:24px 20px 16px;border-bottom:1px solid rgba(255,255,255,0.1)}
.sidebar-logo h1{font-size:18px;font-weight:700;color:var(--accent-light)}
.sidebar-logo span{font-size:11px;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:1px}
.sidebar-nav{flex:1;padding:16px 0;overflow-y:auto}
.nav-section{padding:8px 16px 4px;font-size:10px;color:rgba(255,255,255,0.4);text-transform:uppercase;letter-spacing:1.2px}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 20px;cursor:pointer;transition:all .2s;border-left:3px solid transparent;font-size:14px;color:rgba(255,255,255,0.75)}
.nav-item:hover{background:rgba(255,255,255,0.08);color:#fff}
.nav-item.active{background:rgba(255,255,255,0.12);color:#fff;border-left-color:var(--accent-light);font-weight:600}
.nav-item .icon{width:18px;text-align:center;font-size:16px}
.pro-badge{display:inline-block;background:linear-gradient(135deg,#d4a017,#f0c040);color:#1a1a2e;
  font-size:9px;font-weight:800;letter-spacing:.5px;padding:1px 6px;border-radius:99px;vertical-align:middle;margin-left:4px}
.nav-group{border:none}
.nav-group summary{list-style:none;display:flex;align-items:center;gap:10px;padding:10px 20px;cursor:pointer;font-size:14px;color:rgba(255,255,255,0.75);transition:background .2s,color .2s;border-left:3px solid transparent;user-select:none}
.nav-group summary::-webkit-details-marker{display:none}
.nav-group summary:hover{background:rgba(255,255,255,0.08);color:#fff}
.nav-group summary .icon{width:18px;text-align:center;font-size:16px}
.nav-group summary .chevron{margin-left:auto;font-size:11px;opacity:.55;transition:transform .2s}
.nav-group[open] summary .chevron{transform:rotate(90deg)}
.nav-group .nav-item{padding-left:34px;font-size:13px}
.mobile-menu-nav .nav-group .nav-item{padding-left:40px}
.mobile-menu-nav .nav-group summary{padding:13px 20px;font-size:15px}
.sidebar-footer{padding:16px 20px;border-top:1px solid rgba(255,255,255,0.1);display:flex;align-items:center;justify-content:space-between}
.user-badge{display:flex;align-items:center;gap:10px}
.user-avatar{width:34px;height:34px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;flex-shrink:0}
.user-info{font-size:13px;color:rgba(255,255,255,0.8)}
.user-info small{display:block;color:rgba(255,255,255,0.4);font-size:11px}
.logout-link{color:rgba(255,255,255,0.5);font-size:18px;transition:color .2s}
.logout-link:hover{color:#fff}

/* ── Main ── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{background:#fff;border-bottom:1px solid var(--border);padding:0 28px;height:64px;display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 4px rgba(0,0,0,0.06);flex-shrink:0}
.topbar-left h2{font-size:18px;font-weight:700;color:var(--primary-dark)}
.topbar-left p{font-size:12px;color:var(--text-muted)}
.topbar-right{display:flex;align-items:center;gap:10px}
.mobile-user-btn{display:none}
.mobile-user-avatar{width:34px;height:34px;background:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;flex-shrink:0}
.mobile-nav{display:none}
.hamburger-btn{display:none}
.mobile-menu{display:none}
.mobile-menu-overlay{display:none}
.content{flex:1;overflow-y:auto;padding:24px 28px}

/* ── Buttons ── */
.btn{padding:8px 16px;border-radius:8px;border:none;cursor:pointer;font-size:13px;font-weight:600;transition:all .2s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-light);transform:translateY(-1px);box-shadow:0 4px 12px rgba(45,106,79,.3)}
.btn-outline{background:transparent;color:var(--primary);border:1.5px solid var(--primary)}
.btn-outline:hover{background:var(--primary);color:#fff}
.btn-accent{background:var(--accent);color:#fff}
.btn-danger{background:var(--danger);color:#fff}
.btn-sm{padding:5px 10px;font-size:12px}

/* ── Cards ── */
.card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.card-title{font-size:15px;font-weight:700;color:var(--primary-dark)}

/* ── Stats ── */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}
.stats-grid.stats-grid-3{grid-template-columns:repeat(3,1fr)}
.stat-card{background:var(--card-bg);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);border-left:4px solid var(--primary);transition:transform .2s}
.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.stat-card.accent{border-left-color:var(--accent)}
.stat-card.danger{border-left-color:var(--danger)}
.stat-card.info{border-left-color:var(--info)}
.stat-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}
.stat-value{font-size:26px;font-weight:800;color:var(--primary-dark)}
.stat-sub{font-size:12px;color:var(--text-muted);margin-top:4px}

/* ── Horse Cards ── */
.horses-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.horse-card-link{text-decoration:none;color:inherit}
.horse-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:all .25s;cursor:pointer}
.horse-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.horse-img{height:150px;display:flex;align-items:center;justify-content:center;font-size:64px;position:relative}
/* Horse colours */
.horse-img.dunkelbraun,.bay{background:linear-gradient(135deg,#7a3b1e,#a85a35)}
.horse-img.braun{background:linear-gradient(135deg,#8b5e3c,#b8844f)}
.horse-img.fuchs,.chestnut{background:linear-gradient(135deg,#c8813a,#e8a86c)}
.horse-img.schimmel,.gray{background:linear-gradient(135deg,#8b9db0,#c5d0db)}
.horse-img.rappe,.black{background:linear-gradient(135deg,#2c2c3e,#4a4a5e)}
.horse-img.cremello{background:linear-gradient(135deg,#e8d5a3,#f5e8c8)}
.horse-img.palomino,.isabelle{background:linear-gradient(135deg,#d4a849,#e8c878)}
.horse-img.apfelschimmel{background:linear-gradient(135deg,#9aafa0,#c2d4ca)}
.horse-img.fliegenschimmel{background:linear-gradient(135deg,#7a8a8a,#aababa)}
.horse-badge{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;background:rgba(255,255,255,0.9);color:var(--primary-dark)}
.horse-body{padding:16px}
.horse-name{font-size:16px;font-weight:800;color:var(--primary-dark);margin-bottom:3px}
.horse-breed{font-size:12px;color:var(--text-muted);margin-bottom:12px}
.horse-meta{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.horse-meta-item label{font-size:10px;color:var(--text-muted);text-transform:uppercase;display:block;margin-bottom:1px}
.horse-meta-item span{font-size:13px;font-weight:600;color:var(--text)}
.horse-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}

/* ── Tags / Pills ── */
.tag{padding:3px 8px;border-radius:20px;font-size:11px;font-weight:600;display:inline-flex;align-items:center}
.tag-green{background:#d1fae5;color:#065f46}
.tag-red{background:#fee2e2;color:#991b1b}
.tag-yellow{background:#fef3c7;color:#92400e}
.tag-blue{background:#dbeafe;color:#1e40af}
.tag-purple{background:#ede9fe;color:#5b21b6}
.horse-pill{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:20px;font-size:11px;font-weight:600;background:#d1fae5;color:#065f46;margin:2px}

/* ── Alerts ── */
.alert{padding:12px 16px;border-radius:8px;margin-bottom:14px;font-size:13px;display:flex;align-items:flex-start;gap:10px}
.alert-warning{background:#fef3c7;color:#92400e;border-left:4px solid var(--warning)}
.alert-danger{background:#fee2e2;color:#991b1b;border-left:4px solid var(--danger)}
.alert-info{background:#dbeafe;color:#1e40af;border-left:4px solid var(--info)}
.alert-success{background:#d1fae5;color:#065f46;border-left:4px solid var(--success)}

/* ── Dashboard ── */
.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.upcoming-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.upcoming-item:last-child{border-bottom:none}
.upcoming-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.upcoming-info{flex:1}
.upcoming-info strong{font-size:13px;font-weight:600;display:block}
.upcoming-info span{font-size:11px;color:var(--text-muted)}
.upcoming-date{font-size:12px;font-weight:700;color:var(--text-muted);white-space:nowrap}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;margin-top:8px}
.cost-bar-item{margin-bottom:12px}
.cost-bar-label{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px}
.cost-bar-track{background:#f1f5f9;border-radius:20px;height:8px;overflow:hidden}
.cost-bar-fill{height:100%;border-radius:20px;transition:width .8s ease}

/* ── Calendar ── */
.calendar-layout{display:grid;grid-template-columns:1fr 300px;gap:20px}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);border-radius:var(--radius);overflow:hidden}
.cal-header{background:var(--primary);color:#fff;text-align:center;padding:10px 4px;font-size:12px;font-weight:700}
.cal-day{background:#fff;min-height:88px;padding:6px;cursor:pointer;transition:background .2s;position:relative}
.cal-day:hover{background:#f0fdf4}
.cal-day.other-month{background:#fafafa}
.cal-day.today{background:#f0fdf4}
.cal-day-num{font-size:13px;font-weight:600;margin-bottom:3px;color:var(--text);line-height:1}
.cal-day.today .cal-day-num{width:24px;height:24px;background:var(--primary);color:#fff;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:12px}
.cal-day.other-month .cal-day-num{color:#ccc}
.cal-event{padding:2px 5px;border-radius:4px;font-size:10px;font-weight:600;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.cal-event.tierarzt{background:#fee2e2;color:#991b1b}
.cal-event.tournament{background:#dbeafe;color:#1e40af}
.cal-event.training{background:#d1fae5;color:#065f46}
.cal-event.farrier{background:#fef3c7;color:#92400e}
.cal-event.vaccination{background:#ede9fe;color:#5b21b6}
.cal-event.sonstiges{background:#f1f5f9;color:#374151}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.cal-nav-btn{padding:6px 14px;border-radius:8px;border:1.5px solid var(--border);background:#fff;cursor:pointer;font-size:15px;transition:all .2s;text-decoration:none;color:var(--text)}
.cal-nav-btn:hover{border-color:var(--primary);color:var(--primary)}
.agenda-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.agenda-item:last-child{border-bottom:none}
.agenda-color{width:4px;border-radius:2px;flex-shrink:0}
.agenda-info{flex:1}
.agenda-info strong{font-size:13px;font-weight:700;display:block}
.agenda-info span{font-size:12px;color:var(--text-muted)}
.horse-ref{margin-top:3px}

/* ── Costs / Tables ── */
.costs-filter{display:flex;gap:8px;flex-wrap:wrap}
.filter-btn{padding:6px 14px;border-radius:20px;border:1.5px solid var(--border);background:#fff;cursor:pointer;font-size:12px;transition:all .2s;text-decoration:none;color:var(--text);font-weight:500}
.filter-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.filter-btn:hover:not(.active){border-color:var(--primary);color:var(--primary)}
.cost-table{width:100%;border-collapse:collapse}
.cost-table th{text-align:left;padding:10px 14px;font-size:11px;color:var(--text-muted);text-transform:uppercase;border-bottom:2px solid var(--border)}
.cost-table td{padding:11px 14px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle}
.cost-table tr:hover td{background:#f8fafc}
.cost-table tr:last-child td{border-bottom:none}
.cost-table tfoot td{border-top:2px solid var(--border)!important}

/* ── Reports ── */
.report-horse-card{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:16px}
.report-horse-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.report-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.report-total{margin-left:auto;font-size:22px;font-weight:800;color:var(--primary-dark)}
.report-breakdown{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:10px}
.report-cat{text-align:center;background:#f8fafc;border-radius:8px;padding:10px 6px}
.report-cat-amount{font-size:16px;font-weight:800;color:var(--primary)}
.report-cat-label{font-size:10px;color:var(--text-muted);margin-top:2px}
.chart-bar{border-radius:4px 4px 0 0;background:var(--primary-light);opacity:.7;transition:opacity .2s;cursor:pointer}
.chart-bar:hover,.chart-bar.active{opacity:1;background:var(--primary)}
.cost-month-chart{display:flex;align-items:flex-end;gap:6px;height:120px;padding:0 4px}

/* ── Horse Detail ── */
.detail-header{display:flex;gap:24px;align-items:flex-start;margin-bottom:24px}
.detail-avatar{width:130px;height:130px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:64px;flex-shrink:0}
.detail-name{font-size:26px;font-weight:800;color:var(--primary-dark)}
.detail-breed{font-size:15px;color:var(--text-muted);margin-bottom:10px}
.detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.detail-section-title{font-size:12px;font-weight:700;color:var(--primary-dark);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;padding-bottom:6px;border-bottom:2px solid var(--border)}
.vaccination-item{display:flex;align-items:center;justify-content:space-between;padding:12px;background:#f8fafc;border-radius:8px;margin-bottom:8px;flex-wrap:wrap;gap:8px}
.vacc-info strong{font-size:13px;font-weight:700;display:block}
.vacc-info span{font-size:12px;color:var(--text-muted)}
.vacc-next{text-align:right}
.vacc-next .due{font-size:11px;color:var(--text-muted)}
.vacc-next .date{font-size:13px;font-weight:700;color:var(--primary)}

/* ── Training ── */
.training-week{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-bottom:20px}
.training-day-card{background:var(--card-bg);border-radius:10px;padding:12px;box-shadow:var(--shadow);min-height:110px}
.today-card{border:2px solid var(--primary)}
.training-day-name{font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px;display:flex;justify-content:space-between}
.training-slot{padding:5px 7px;border-radius:6px;font-size:11px;font-weight:600;margin-bottom:5px;cursor:pointer;line-height:1.4}
.training-slot.dressur{background:#dbeafe;color:#1e40af}
.training-slot.springen{background:#fef3c7;color:#92400e}
.training-slot.ausritt{background:#d1fae5;color:#065f46}
.training-slot.pause{background:#f1f5f9;color:#94a3b8}
.training-slot.longe{background:#ede9fe;color:#5b21b6}
.training-slot.gelaende{background:#fee2e2;color:#991b1b}
.training-log{display:flex;flex-direction:column;gap:8px}
.training-entry{display:flex;gap:12px;padding:12px;background:#f8fafc;border-radius:8px}
.training-date-box{width:44px;height:44px;background:var(--primary);border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.training-date-box .day{font-size:15px;font-weight:800;line-height:1}
.training-date-box .month{font-size:9px;text-transform:uppercase}
.training-content strong{font-size:13px;font-weight:700;display:block}
.training-content span{font-size:12px;color:var(--text-muted)}

/* ── Tabs ── */
.tabs{display:flex;gap:0;border-bottom:2px solid var(--border);margin-bottom:20px;overflow-x:auto}
.tab{padding:10px 18px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s;white-space:nowrap}
.tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.tab:hover:not(.active){color:var(--primary)}
.tab-content{display:none}
.tab-content.active{display:block}

/* ── Forms ── */
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;margin-bottom:5px;letter-spacing:.4px}
.form-control{width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:13px;outline:none;transition:border-color .2s;background:#fff;color:var(--text)}
.form-control:focus{border-color:var(--primary)}
select.form-control{cursor:pointer}
textarea.form-control{resize:vertical;min-height:70px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-section-title{font-size:13px;font-weight:700;color:var(--primary-dark);padding:12px 0 6px;border-bottom:2px solid var(--border);margin-bottom:14px;text-transform:uppercase;letter-spacing:.5px}

/* ── Modal ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:1000;align-items:center;justify-content:center}
.modal-overlay.show{display:flex}
.modal{background:#fff;border-radius:16px;padding:28px;width:540px;max-width:95vw;max-height:88vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.2)}
.modal-title{font-size:17px;font-weight:800;color:var(--primary-dark);margin-bottom:20px}
.modal-footer{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}

/* ── Empty state ── */
.empty-state{text-align:center;padding:48px 24px;color:var(--text-muted)}
.empty-state .emoji{font-size:48px;margin-bottom:12px}

/* ── Breadcrumb ── */
.breadcrumb{font-size:13px;color:var(--text-muted);margin-bottom:14px}
.breadcrumb a{color:var(--primary);cursor:pointer}
.breadcrumb a:hover{text-decoration:underline}

/* ── Profile photo ── */
.detail-avatar-photo{width:130px;height:130px;border-radius:var(--radius);flex-shrink:0;position:relative;cursor:pointer;overflow:hidden;box-shadow:var(--shadow-lg)}
.detail-avatar-photo img{transition:transform .3s}
.detail-avatar-photo:hover img{transform:scale(1.05)}
.profile-photo-badge{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.55);color:#fff;font-size:11px;font-weight:700;text-align:center;padding:4px 0;opacity:0;transition:opacity .2s}
.detail-avatar-photo:hover .profile-photo-badge,.detail-avatar:hover .profile-photo-badge{opacity:1}
.detail-avatar{position:relative;cursor:pointer}
.profile-star{position:absolute;top:6px;left:6px;background:var(--accent);color:#fff;font-size:10px;font-weight:700;padding:2px 6px;border-radius:10px}

/* ── Photo gallery ── */
.photo-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.photo-item{background:var(--card-bg);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;transition:transform .2s}
.photo-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.photo-thumb{position:relative;height:180px;overflow:hidden;cursor:pointer;background:#f1f5f9}
.photo-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.photo-thumb:hover img{transform:scale(1.05)}
.photo-type-badge{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:12px;font-size:10px;font-weight:700;backdrop-filter:blur(4px)}
.photo-type-badge.gallery{background:rgba(255,255,255,0.85);color:var(--primary-dark)}
.photo-type-badge.injury{background:rgba(230,57,70,0.85);color:#fff}
.photo-type-badge.xray{background:rgba(67,97,238,0.85);color:#fff}
.photo-type-badge.progress{background:rgba(82,183,136,0.85);color:#fff}
.photo-info{padding:12px}
.photo-caption{font-size:13px;font-weight:700;margin-bottom:4px;color:var(--primary-dark)}
.photo-date{font-size:11px;color:var(--text-muted);margin-bottom:6px}
.photo-vet-comment{font-size:12px;background:#fff8f8;border-left:3px solid var(--danger);padding:6px 8px;border-radius:0 6px 6px 0;margin-top:6px;line-height:1.5;color:var(--text)}
.appt-link-badge{display:inline-flex;align-items:center;gap:3px;background:#dbeafe;color:#1e40af;border-radius:10px;padding:2px 7px;font-size:11px;font-weight:600;margin:2px 2px 2px 0;text-decoration:none;transition:background .2s}
.appt-link-badge:hover{background:#bfdbfe}
.unlink-btn{background:none;border:none;cursor:pointer;color:var(--danger);font-size:11px;padding:1px 3px;opacity:.6;vertical-align:middle}
.unlink-btn:hover{opacity:1}
.photo-actions{padding:8px 12px;border-top:1px solid var(--border);display:flex;gap:6px;justify-content:flex-end}

/* ── Upload dropzone ── */
.photo-dropzone{border:2px dashed var(--border);border-radius:10px;padding:24px;text-align:center;cursor:pointer;transition:all .2s;background:#fafcf9}
.photo-dropzone:hover,.photo-dropzone.drag-over{border-color:var(--primary);background:#f0fdf4}
.photo-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;margin-top:10px}
.preview-thumb{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:1}
.preview-thumb img{width:100%;height:100%;object-fit:cover}
.preview-thumb span{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.5);color:#fff;font-size:9px;padding:2px 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Lightbox ── */
.lightbox-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:2000;align-items:center;justify-content:center;flex-direction:column}
.lightbox-overlay.show{display:flex}
.lightbox-close{position:absolute;top:20px;right:24px;background:rgba(255,255,255,.15);border:none;color:#fff;font-size:22px;width:44px;height:44px;border-radius:50%;cursor:pointer;transition:background .2s;z-index:2001}
.lightbox-close:hover{background:rgba(255,255,255,.3)}
.lightbox-content{max-width:90vw;max-height:90vh;display:flex;flex-direction:column;align-items:center;gap:16px}
.lightbox-content img{max-width:88vw;max-height:78vh;object-fit:contain;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox-info{text-align:center;color:#fff}
.lightbox-caption{font-size:16px;font-weight:700;margin-bottom:4px}
.lightbox-vet{font-size:13px;color:rgba(255,255,255,.8);max-width:600px;line-height:1.5}
.lightbox-date{font-size:12px;color:rgba(255,255,255,.5);margin-top:4px}

/* ── Calendar photo badge ── */
.cal-photo-badge{display:inline-flex;align-items:center;gap:2px;background:var(--accent);color:#fff;border-radius:8px;padding:0 5px;font-size:9px;font-weight:700;margin-left:3px;vertical-align:middle}
.appt-photos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px;margin-top:12px}
.appt-photo-thumb{border-radius:6px;overflow:hidden;aspect-ratio:1;cursor:pointer;position:relative}
.appt-photo-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .2s}
.appt-photo-thumb:hover img{transform:scale(1.05)}
.appt-photo-thumb .caption-overlay{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,.55);color:#fff;font-size:9px;padding:3px 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Horse card with real photo ── */
.horse-card-photo{height:150px;overflow:hidden;position:relative}
.horse-card-photo img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.horse-card:hover .horse-card-photo img{transform:scale(1.05)}

/* ── Responsive ── */
@media(max-width:1100px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stats-grid.stats-grid-3{grid-template-columns:repeat(2,1fr)}
  .horses-grid{grid-template-columns:repeat(2,1fr)}
  .detail-grid{grid-template-columns:repeat(2,1fr)}
  .training-week{grid-template-columns:repeat(4,1fr)}
}

/* ════════════════════════════════════════════
   MOBILE – alles unter 768px
   ════════════════════════════════════════════ */
@media(max-width:768px){

  /* ── Layout ── */
  body{flex-direction:column;height:100dvh;overflow:hidden}
  .sidebar{display:none !important}
  .mobile-nav{display:none !important}
  .mobile-user-btn{display:none !important}
  .main{flex:1;display:flex;flex-direction:column;overflow:hidden}
  .content{flex:1;overflow-y:auto;padding:14px 14px calc(88px + env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch}

  /* ── Topbar ── */
  .topbar{padding:0 10px 0 4px;height:54px;flex-shrink:0}
  .topbar-left{display:flex;align-items:center;flex:1;min-width:0;gap:0}
  .topbar-left h2{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .topbar-left p{display:none}
  .topbar-right{gap:6px}
  .topbar-right .btn{padding:7px 10px;font-size:12px}
  .topbar-right .btn-outline{display:none}

  /* ── Hamburger Button ── */
  .hamburger-btn{
    display:flex !important;flex-direction:column;justify-content:center;align-items:center;
    gap:5px;width:44px;height:44px;background:none;border:none;cursor:pointer;
    padding:8px;margin-right:6px;flex-shrink:0;border-radius:8px;
    -webkit-tap-highlight-color:transparent;
  }
  .hamburger-btn:active{background:rgba(0,0,0,0.07)}
  .hamburger-btn span{
    display:block;width:22px;height:2.5px;background:var(--primary-dark);
    border-radius:2px;transition:all .28s;
  }

  /* ── Overlay hinter dem Menü ── */
  .mobile-menu-overlay{
    display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);
    z-index:998;-webkit-tap-highlight-color:transparent;
  }
  .mobile-menu-overlay.open{display:block}

  /* ── Slide-out Menü ── */
  .mobile-menu{
    position:fixed;top:0;left:-295px;width:295px;height:100dvh;
    background:var(--sidebar-bg);color:#fff;z-index:999;
    transition:left .28s cubic-bezier(.4,0,.2,1);
    display:flex !important;flex-direction:column;
    box-shadow:4px 0 28px rgba(0,0,0,0.35);
  }
  .mobile-menu.open{left:0}

  .mobile-menu-header{
    padding:22px 16px 16px;border-bottom:1px solid rgba(255,255,255,0.1);
    display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
  }
  .mobile-menu-close{
    background:none;border:none;color:rgba(255,255,255,0.55);font-size:22px;
    cursor:pointer;padding:4px 8px;border-radius:6px;line-height:1;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-menu-close:active{background:rgba(255,255,255,0.1)}

  .mobile-menu-nav{flex:1;padding:8px 0;overflow-y:auto}
  .mobile-menu-nav .nav-section{
    padding:10px 16px 4px;font-size:10px;color:rgba(255,255,255,0.4);
    text-transform:uppercase;letter-spacing:1.2px;
  }
  .mobile-menu-nav .nav-item{
    display:flex;align-items:center;gap:12px;padding:13px 20px;
    color:rgba(255,255,255,0.75);font-size:15px;
    border-left:3px solid transparent;transition:background .15s,color .15s;
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-menu-nav .nav-item.active{
    background:rgba(255,255,255,0.12);color:#fff;
    border-left-color:var(--accent-light);font-weight:600;
  }
  .mobile-menu-nav .nav-item:active{background:rgba(255,255,255,0.1)}
  .mobile-menu-nav .nav-item .icon{font-size:18px;width:22px;text-align:center;flex-shrink:0}

  .mobile-menu-footer{
    padding:16px 20px;border-top:1px solid rgba(255,255,255,0.1);flex-shrink:0;
  }
  .mobile-menu-footer a{
    display:flex;align-items:center;justify-content:center;gap:8px;
    padding:11px;border-radius:10px;
    background:rgba(255,255,255,0.08);color:rgba(255,255,255,0.8);
    font-size:14px;font-weight:600;border:1px solid rgba(255,255,255,0.15);
    -webkit-tap-highlight-color:transparent;
  }
  .mobile-menu-footer a:active{background:rgba(255,255,255,0.15)}

  /* ── Stats Grid ── */
  .stats-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
  .stats-grid.stats-grid-3{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
  .stat-card{padding:13px}
  .stat-value{font-size:20px}

  /* ── Horses ── */
  .horses-grid{grid-template-columns:1fr 1fr;gap:10px}
  .horse-img{height:100px;font-size:42px}
  .horse-card-photo{height:100px}
  .horse-body{padding:10px}
  .horse-name{font-size:14px}
  .horse-meta{grid-template-columns:1fr 1fr;gap:4px}
  .horse-meta-item span{font-size:11px}
  .section-header{flex-direction:column;align-items:flex-start;gap:8px}

  /* ── Dashboard ── */
  .dashboard-grid{grid-template-columns:1fr;gap:12px;margin-top:12px}

  /* ── Horse Detail Header ── */
  .detail-header{flex-direction:column;gap:12px;align-items:flex-start}
  .detail-avatar,.detail-avatar-photo{width:72px;height:72px;font-size:36px;flex-shrink:0}
  .detail-name{font-size:19px}
  .detail-breed{font-size:12px}
  .detail-info{width:100%}
  .detail-grid{grid-template-columns:1fr 1fr;gap:8px}
  .horse-meta-item label{font-size:10px}
  .horse-meta-item span{font-size:13px}

  /* Aktions-Buttons in Detail-Header kleiner & umbruchfähig */
  .detail-info > div[style*="display:flex"][style*="gap:8px"]{flex-wrap:wrap;gap:6px !important}
  .detail-info .btn-sm{font-size:11px !important;padding:6px 8px !important;min-height:32px !important}

  /* Topbar: Zurück-Button auf Mobile anzeigen (nicht verstecken) */
  .topbar-right .btn-outline{display:flex !important;padding:7px 9px;font-size:12px}

  /* ── Tabs: horizontales Scrollen mit Snap ── */
  .tabs{
    gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;
    padding-bottom:0;display:flex;flex-wrap:nowrap;
    scroll-snap-type:x mandatory;scrollbar-width:none;
  }
  .tabs::-webkit-scrollbar{display:none}
  .tab{
    padding:10px 12px;font-size:12px;white-space:nowrap;
    flex-shrink:0;scroll-snap-align:start;min-height:40px;
  }

  /* ── Forms ── */
  .form-row{grid-template-columns:1fr}
  .card{padding:12px}
  .modal{padding:16px;border-radius:12px;max-height:93dvh}
  .modal-title{font-size:16px}

  /* ── Calendar ── */
  .calendar-layout{grid-template-columns:1fr;gap:12px}
  .cal-day{min-height:50px;padding:2px}
  .cal-day-num{font-size:11px}
  .cal-event{font-size:9px;padding:1px 3px}
  .cal-header{font-size:10px;padding:6px 2px}

  /* ── Training Week ── */
  .training-week{grid-template-columns:repeat(4,1fr);gap:6px}

  /* ── Tabellen: Card-Layout statt horizontal scrollen ── */
  .table-scroll-wrap{overflow:visible}
  .cost-table{min-width:0;font-size:13px}

  /* Tabellenzeilen als Karten auf Mobile */
  .cost-table thead{display:none}
  .cost-table tbody tr{
    display:block;
    background:#fff;
    border:1px solid var(--border);
    border-radius:10px;
    margin-bottom:10px;
    padding:10px 12px;
    box-shadow:0 1px 4px rgba(0,0,0,0.05);
  }
  .cost-table tbody tr:hover{background:#f8fafc}
  .cost-table td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:5px 0;
    border:none;
    font-size:13px;
    border-bottom:1px solid #f1f5f9;
  }
  .cost-table td:last-child{border-bottom:none}
  /* Label aus data-label Attribut */
  .cost-table td[data-label]::before{
    content:attr(data-label);
    font-size:10px;
    font-weight:600;
    color:var(--text-muted);
    text-transform:uppercase;
    letter-spacing:.4px;
    flex-shrink:0;
    margin-right:8px;
  }
  /* Aktions-Spalten (Löschen-Button) ohne Label, rechtsbündig */
  .cost-table td:last-child{justify-content:flex-end;padding-top:8px}
  .cost-table td:first-child{border-top:none;padding-top:2px}
  /* Leere Zeile (kein Eintrag) bleibt normal */
  .cost-table td[colspan]{
    display:block;border:none;text-align:center;padding:16px 0;
  }
  .cost-table td[colspan]::before{display:none}

  /* ── Buttons ── */
  .btn{padding:9px 12px;font-size:13px;min-height:40px}
  .btn-sm{padding:7px 10px;font-size:12px;min-height:34px}

  /* ── Alerts ── */
  .alert{font-size:12px;padding:10px 12px}

  /* ── Photo Gallery ── */
  .photo-gallery{grid-template-columns:1fr 1fr;gap:8px}
  .photo-thumb{height:120px}

  /* ── Upcoming items ── */
  .upcoming-info strong{font-size:12px}
  .upcoming-info span{font-size:11px}

  /* ── Filter buttons ── */
  .costs-filter{gap:6px;flex-wrap:wrap}
  .filter-btn{padding:5px 10px;font-size:11px}

  /* ── Stats Grid in horse detail ── */
  .stats-grid{grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
  .stat-card{padding:11px}
  .stat-value{font-size:18px}
  .stat-label{font-size:10px}

  /* ── Login ── */
  .login-card{width:92vw;padding:28px 20px}

  /* ── Vaccination items ── */
  .vaccination-item{flex-direction:column;gap:6px;align-items:flex-start}
  .vacc-info{width:100%}
  .vacc-next{margin-left:0}
}

/* ════════════════ Wetter-Übersicht (Dashboard) ════════════════ */
.dash-weather{display:flex;flex-direction:column;background:linear-gradient(135deg,#0ea5e9,#0284c7);
  color:#fff;border-radius:var(--radius);padding:14px 20px;margin-bottom:20px;text-decoration:none;
  box-shadow:var(--shadow);transition:transform .2s}
.dash-weather:hover{transform:translateY(-2px)}
.dw-row{display:flex;align-items:center;gap:16px}
.dw-rec{display:flex;align-items:center;gap:10px;margin-top:12px;background:rgba(255,255,255,.96);
  border-radius:10px;padding:9px 13px;font-size:13px;font-weight:600;color:#0f172a}
.dw-rec-icon{font-size:18px;flex-shrink:0}
.dw-rec-danger{border-left:4px solid #dc2626}
.dw-rec-warning{border-left:4px solid #f59e0b}
.dw-rec-ok{border-left:4px solid #16a34a}
.dw-icon{font-size:46px;line-height:1}
.dw-main{flex:1;min-width:0}
.dw-temp{font-size:28px;font-weight:800;line-height:1}
.dw-label{font-size:13px;opacity:.92;margin-top:2px}
.dw-stats{display:flex;gap:18px;text-align:center;flex-wrap:wrap}
.dw-v{font-size:16px;font-weight:700;white-space:nowrap}
.dw-s{font-size:11px;opacity:.85}
.dw-link{font-size:13px;opacity:.9;white-space:nowrap}
.dash-weather-empty{display:block;background:#f0f9ff;border:1px dashed #7dd3fc;border-radius:var(--radius);
  padding:14px 20px;margin-bottom:20px;text-decoration:none;color:#0369a1;font-size:14px;font-weight:600}

/* ════════════════ Instagram-Style Termin-Ringe ════════════════ */
@property --ring-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes ringspin{to{--ring-angle:360deg}}
@keyframes apptglow{0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}50%{box-shadow:0 0 16px 1px var(--rc1)}}
@keyframes apptbob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.05)}}

/* Desktop: animierter Ring um die Pferdekarte bei anstehendem Termin */
.horse-card-link.has-appt{display:block;padding:3px;border-radius:18px;
  background:conic-gradient(from var(--ring-angle),var(--rc1),var(--rc2),var(--rc1));
  animation:ringspin 4s linear infinite,apptglow 2.4s ease-in-out infinite}
.appt-ribbon{position:absolute;top:10px;left:10px;z-index:3;background:rgba(255,255,255,.96);
  border-radius:20px;padding:4px 11px;font-size:11px;font-weight:800;
  box-shadow:0 2px 8px rgba(0,0,0,.18);animation:apptbob 1.9s ease-in-out infinite}

/* Mobile-Story-Row (Instagram) – standardmäßig versteckt */
.stories-row{display:none}
.story{text-decoration:none;color:inherit;width:78px;flex-shrink:0;text-align:center}
.story-avatar{position:relative;width:74px;height:74px;margin:0 auto}
.story-ring{width:100%;height:100%;border-radius:50%;padding:3px;box-sizing:border-box;
  background:linear-gradient(135deg,#e5e7eb,#d1d5db)}
.story.has-ring .story-ring{background:conic-gradient(from var(--ring-angle),var(--rc1),var(--rc2),var(--rc1));
  animation:ringspin 4s linear infinite,apptglow 2.4s ease-in-out infinite}
.story-inner{width:100%;height:100%;border-radius:50%;overflow:hidden;background:var(--card-bg);
  padding:2px;box-sizing:border-box}
.story-inner img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.story-emoji{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:30px;background:linear-gradient(135deg,#fde68a,#fbbf24)}
.story-badge{position:absolute;bottom:-2px;right:-2px;width:24px;height:24px;border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;
  box-shadow:0 1px 4px rgba(0,0,0,.25)}
.story-name{font-size:12px;font-weight:700;margin-top:7px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.story-date{font-size:10px;font-weight:700;margin-top:1px}

@media(max-width:768px){
  .horses-grid{display:none !important}
  .stories-row{display:flex;flex-wrap:wrap;gap:16px 10px;justify-content:flex-start;padding:6px 2px 4px}
  .dash-weather{padding:12px 14px;gap:12px}
  .dw-icon{font-size:38px}
  .dw-temp{font-size:24px}
  .dw-link{display:none}
}

/* Große Instagram-Kacheln auf "Meine Pferde": 2 pro Reihe, bei nur 1 Pferd groß */
@media(max-width:768px){
  .stories-row.stories-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
    gap:22px 14px;
    justify-content:center;
    padding:10px 4px;
  }
  .stories-row.stories-grid .story{width:auto}
  .stories-row.stories-grid .story-avatar{width:132px;height:132px}
  .stories-row.stories-grid .story-name{font-size:15px;margin-top:10px}
  .stories-row.stories-grid .story-date{font-size:12px}
}