/* EquaMind Stable 2.17.1 – getrennte Handy-, Tablet- und Desktop-Oberfläche */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#e3ecd9;
  --card:rgba(250,252,247,.52);
  --ink:#142119;
  --muted:#5c695f;
  --line:rgba(255,255,255,.68);
  --gold:#6f7d55;
  --green:#2b8c4c;
  --danger:#c93b45;
  --warn:#c98212;
  --lime:#84936a;
  --lime-soft:#cbd4bd;
  --accent-glass:rgba(132,147,106,.76);
  --accent-glass-soft:rgba(211,220,198,.9);
  --accent-border:rgba(108,124,82,.58);
  --accent-shadow:rgba(63,78,42,.18);
  --accent-wash:rgba(111,125,85,.16);
  --surface:rgba(249,252,246,.42);
  --surface-solid:rgba(248,251,244,.76);
  --surface-soft:rgba(245,249,241,.38);
  --surface-faint:rgba(255,255,255,.26);
  --external-card:rgba(222,204,174,.68);
  --external-card-open:rgba(232,217,192,.78);
  --external-border:rgba(139,112,73,.58);
  --external-badge:rgba(124,94,55,.18);
  --field:rgba(255,255,255,.76);
  --button-bg:rgba(255,255,255,.3);
  --button-hover:rgba(255,255,255,.48);
  --button-ink:#17251b;
  --nav-bg:rgba(249,251,246,.5);
  --nav-ink:#68756c;
  --scene-ink:#17251b;
  --scene-muted:rgba(20,36,25,.72);
  --glass-line:rgba(255,255,255,.68);
  --shadow:0 24px 70px rgba(25,50,23,.18);
  --desktop-veil:linear-gradient(90deg,rgba(224,236,215,.34) 0%,rgba(224,236,215,.2) 54%,rgba(224,236,215,.08) 76%,transparent 100%);
  --desktop-scene-opacity:.12;
  --scene-image:url("stable-light-horses.webp");
  --scene-desktop-image:url("stable-light-horses-desktop.webp");
  --scene-overlay:linear-gradient(180deg,rgba(246,250,241,.04) 0%,rgba(245,249,239,.02) 47%,rgba(226,237,214,.22) 72%,rgba(217,231,204,.44) 100%);
}

:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#08150c;
  --card:rgba(9,23,13,.48);
  --ink:#f5f8f2;
  --muted:#b6c1b8;
  --line:rgba(255,255,255,.17);
  --gold:#a8b58d;
  --green:#76d88d;
  --danger:#ef6a73;
  --warn:#f2b34c;
  --lime:#91a27a;
  --lime-soft:#c8d2b7;
  --accent-glass:rgba(126,145,96,.78);
  --accent-glass-soft:rgba(190,202,170,.86);
  --accent-border:rgba(165,182,135,.5);
  --accent-shadow:rgba(3,12,5,.3);
  --accent-wash:rgba(156,172,126,.16);
  --surface:rgba(9,23,13,.42);
  --surface-solid:rgba(13,30,18,.76);
  --surface-soft:rgba(27,49,32,.4);
  --surface-faint:rgba(255,255,255,.08);
  --external-card:rgba(76,57,35,.66);
  --external-card-open:rgba(92,70,43,.76);
  --external-border:rgba(200,172,126,.52);
  --external-badge:rgba(213,184,137,.18);
  --field:rgba(13,29,18,.78);
  --button-bg:rgba(18,38,24,.36);
  --button-hover:rgba(30,58,38,.54);
  --button-ink:#f5f8f2;
  --nav-bg:rgba(10,26,15,.52);
  --nav-ink:#69766d;
  --scene-ink:#fff;
  --scene-muted:rgba(255,255,255,.7);
  --glass-line:rgba(255,255,255,.19);
  --shadow:0 28px 75px rgba(1,9,3,.46);
  --desktop-veil:linear-gradient(90deg,rgba(5,17,9,.56) 0%,rgba(5,17,9,.38) 54%,rgba(5,17,9,.14) 78%,transparent 100%);
  --desktop-scene-opacity:.15;
  --scene-image:url("stable-dark-pasture.webp");
  --scene-desktop-image:url("stable-dark-pasture-desktop.webp");
  --scene-overlay:linear-gradient(180deg,rgba(2,10,4,.46) 0%,rgba(3,12,5,.08) 32%,rgba(3,12,5,.31) 62%,rgba(2,10,4,.88) 100%);
}

html{min-height:100%;background:var(--bg)}
body{
  min-height:100dvh;
  overflow-x:hidden;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background-color .22s ease,color .22s ease;
}
body::before{
  position:fixed;
  z-index:0;
  inset:0;
  background-image:var(--scene-overlay),var(--scene-image);
  background-position:center;
  background-size:cover;
  content:"";
  pointer-events:none;
  transition:background-image .24s ease;
}
body::after{display:none}
:root[data-theme="light"] body::before{background-position:right center}
#app{position:relative;z-index:1;background:transparent;color:var(--ink);padding-top:calc(14px + env(safe-area-inset-top));padding-bottom:132px}

h1,h2,h3,.brand h1,.status-priority span,.horse-name-wrap strong,.competition-summary b,.training-session-head b{
  font-family:inherit;
  letter-spacing:-.035em;
}
#app>h1,#app>.section-title,#app>.page-intro,.task-page-head+h1{
  color:var(--scene-ink);
  text-shadow:0 2px 16px rgba(255,255,255,.18);
}
:root[data-theme="dark"] #app>h1,
:root[data-theme="dark"] #app>.section-title,
:root[data-theme="dark"] #app>.page-intro,
:root[data-theme="dark"] .task-page-head+h1{text-shadow:0 3px 20px rgba(0,0,0,.5)}

.topbar{
  position:sticky;
  z-index:30;
  top:calc(8px + env(safe-area-inset-top));
  min-height:48px;
  gap:8px;
  margin:0 0 12px;
}
.topbar-center{flex:1;min-width:0;gap:4px;padding:0 3px}
.topbar-actions{display:flex;align-items:center;gap:7px}
.circle{
  width:46px;
  height:46px;
  flex:0 0 46px;
  border-color:var(--glass-line);
  background:linear-gradient(145deg,var(--surface-faint),rgba(8,21,11,.14));
  box-shadow:inset 0 1px rgba(255,255,255,.2),0 12px 30px rgba(4,18,8,.16);
  color:var(--scene-ink);
  font-size:17px;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
.build-badge{background:rgba(8,21,12,.72);color:#fff;border:1px solid rgba(255,255,255,.18);font-size:10px;padding:4px 9px;backdrop-filter:blur(14px)}
.cloud-top-status{
  max-width:170px;
  overflow:hidden;
  border-color:var(--glass-line);
  background:var(--surface);
  color:var(--ink);
  box-shadow:0 8px 24px rgba(4,18,8,.12);
  padding:7px 11px;
  text-overflow:ellipsis;
  white-space:nowrap;
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
.cloud-top-status.ok{background:rgba(229,247,230,.92);color:#236e3d;border-color:rgba(177,220,185,.82)}
.cloud-top-status.warn{background:rgba(255,240,218,.92);color:#8b4c1d;border-color:rgba(235,190,147,.8)}

.theme-toggle{
  position:relative;
  display:grid;
  width:66px;
  height:42px;
  grid-template-columns:1fr 1fr;
  align-items:center;
  overflow:hidden;
  border:1px solid var(--glass-line);
  border-radius:999px;
  background:linear-gradient(145deg,var(--surface-faint),rgba(8,21,11,.15));
  box-shadow:inset 0 1px rgba(255,255,255,.2),0 10px 25px rgba(4,18,8,.14);
  padding:0 5px;
  color:var(--scene-ink);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
.theme-toggle span{position:relative;z-index:2;display:grid;place-items:center;font-size:15px;line-height:1}
.theme-toggle i{position:absolute;z-index:1;top:5px;left:5px;width:30px;height:30px;border-radius:50%;background:var(--lime);box-shadow:0 6px 14px rgba(66,102,20,.25);transition:transform .2s ease}
:root[data-theme="dark"] .theme-toggle i{transform:translateX(26px)}
:root[data-theme="light"] .theme-sun,:root[data-theme="dark"] .theme-moon{color:#17301b}
:root[data-theme="light"] .theme-moon,:root[data-theme="dark"] .theme-sun{color:var(--scene-muted)}

.brand{
  display:flex;
  min-height:clamp(300px,48svh,520px);
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  margin:-60px 0 18px;
  padding:80px 8px 28px;
  text-align:left;
  color:var(--scene-ink);
}
.wordmark{margin:0 0 8px;color:var(--lime-soft);font-family:inherit;font-size:13px;letter-spacing:.24em;text-shadow:0 2px 14px rgba(0,0,0,.24)}
:root[data-theme="light"] .wordmark{color:#65734d;text-shadow:0 1px 12px rgba(255,255,255,.72)}
.brand h1{margin:0;font-size:clamp(43px,11vw,60px);font-weight:670;line-height:.9;text-shadow:0 4px 28px rgba(0,0,0,.25)}
.edition{margin:12px 0 0;color:var(--scene-ink);font-size:11px;letter-spacing:.15em;text-shadow:0 2px 14px rgba(0,0,0,.16)}
.powered{margin:6px 0 13px;color:var(--scene-muted);font-size:11px}
.stable-pill{
  border-color:var(--glass-line);
  background:linear-gradient(145deg,var(--surface-faint),rgba(8,21,11,.12));
  color:var(--scene-ink);
  box-shadow:inset 0 1px rgba(255,255,255,.2),0 14px 34px rgba(4,18,8,.15);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
}

.status,.card,.metric,.subcard,.horse-list-card,.task-filter,dialog{
  border-color:var(--glass-line);
  background:var(--surface);
  color:var(--ink);
  box-shadow:inset 0 1px rgba(255,255,255,.16),var(--shadow);
  -webkit-backdrop-filter:blur(22px) saturate(1.08);
  backdrop-filter:blur(22px) saturate(1.08);
}
.status{border-radius:26px;padding:19px}
.status small,.edition,.section-title{color:var(--gold)}
.status-priority span{font-size:30px;font-weight:690}
.status-total{color:var(--muted)}
.grid{gap:10px}
.metric{border-radius:20px;box-shadow:inset 0 1px rgba(255,255,255,.14),0 12px 28px rgba(4,18,8,.11)}
.metric b{font-weight:650}
.metric-action:hover,.metric-action:focus-visible{background:var(--surface-soft)}
.card{border-radius:24px;box-shadow:inset 0 1px rgba(255,255,255,.14),0 18px 46px rgba(4,18,8,.14)}
.subcard{background:var(--surface-soft)}
.row{border-color:var(--line)}
.row-meta,.page-intro,.footerText{color:var(--muted)}

button{
  border:1px solid var(--glass-line);
  border-radius:16px;
  background:var(--button-bg);
  color:var(--button-ink);
  box-shadow:inset 0 1px rgba(255,255,255,.2),0 9px 22px rgba(4,18,8,.11);
  -webkit-backdrop-filter:blur(16px) saturate(1.08);
  backdrop-filter:blur(16px) saturate(1.08);
  transition:transform .12s ease,filter .12s ease,background-color .2s ease;
}
button:hover{background:var(--button-hover)}
button:active{transform:scale(.985)}
button.gold,.button-like.gold{border-color:var(--accent-border);background:linear-gradient(145deg,var(--accent-glass-soft),var(--accent-glass));color:#182016;box-shadow:inset 0 1px rgba(255,255,255,.42),0 9px 22px var(--accent-shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
button.gold:hover,.button-like.gold:hover{background:linear-gradient(145deg,var(--accent-glass-soft),var(--accent-glass));filter:brightness(1.045)}
button.light,.button-like.light,.button-link{border:1px solid var(--glass-line);background:var(--button-bg);color:var(--ink);box-shadow:inset 0 1px rgba(255,255,255,.18),0 8px 20px rgba(4,18,8,.09);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
button.danger{background:var(--danger);color:#fff}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--accent-border);outline-offset:3px}

input,select,textarea{
  border-color:var(--line);
  background:var(--field);
  color:var(--ink);
  box-shadow:inset 0 1px rgba(255,255,255,.12);
}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.78}
label{color:var(--muted)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--lime)}

.nav{
  width:min(720px,calc(100% - 24px));
  grid-template-columns:repeat(6,1fr);
  gap:4px;
  border-color:rgba(255,255,255,.56);
  border-radius:25px;
  background:var(--nav-bg);
  box-shadow:0 18px 50px rgba(4,18,8,.28),inset 0 1px #fff;
  padding:7px;
  -webkit-backdrop-filter:blur(22px);
  backdrop-filter:blur(22px);
}
.nav button{min-width:0;border-radius:18px;background:transparent;color:var(--nav-ink);font-size:9px;font-weight:760;letter-spacing:0;padding:8px 2px}
.nav button:hover{background:var(--surface-faint)}
.nav i{font-size:20px}
.nav button.active{background:linear-gradient(145deg,var(--lime-soft),var(--lime));color:#182016;box-shadow:0 8px 18px var(--accent-shadow)}

dialog{background:var(--surface-solid)}
dialog::backdrop{background:rgba(2,10,4,.66);backdrop-filter:blur(7px)}
.sheet{color:var(--ink)}
.menu-dialog{background:var(--surface-solid);color:var(--ink)}
.app-menu{background:transparent}
.app-menu-head{background:var(--surface-solid)}

:root :is(
  .empty,.checkitem,.check-list,.cal-cell,.horse-list-card,.pedigree-card,
  .observation-entry,.observation-vet,.app-menu>button,.ops-home-card,.inventory-row,
  .ops-subcard,.vacc-check-row,.more-menu-group,.more-settings-group,.cockpit-quick,
  .more-menu-row,.cloud-account,.cloud-user-row,.training-check-grid,.training-health,
  .training-day-row,.dental-record-teeth,.dental-tooth-editor,.dental-tooth-entry,
  .dental-status-row,.dental-horse-dates>span,.task-filter,.treatment-occurrence-list,
  .treatment-occurrence-row,.horse-filter-body,.archive-case-card>summary,
  .archive-treatment-card>summary,.work-history-section,.medical-photo-section,
  .medical-photo-thumb,.horse-form-section,.horse-form-section-body,.horse-repeat-row,
  .day-check span,.horse-info-grid>div,.sale-cockpit-grid>div,.weather-location-result,
  .weather-selected-location
){border-color:var(--line);background:var(--surface-solid);color:var(--ink)}

.more-menu-group[open]>summary,.more-settings-group[open]>summary{border-color:var(--line);background:var(--surface-soft)}
.more-menu-group>summary>i,.more-settings-group>summary>i,.cockpit-quick>summary>i,.ops-home-card i{
  background:var(--accent-wash);
  color:var(--gold);
}
.more-menu-row.menu-locked,.app-menu>button.menu-locked{border-color:var(--line);background:var(--surface-soft);color:var(--muted)}
.sticky-form-actions{border-color:var(--line);background:linear-gradient(180deg,transparent,var(--surface-solid) 26%)}
.location-history summary{color:var(--gold)}
.task-filter.active{border-color:var(--accent-border);background:var(--accent-wash)}
.task-filter.active span{color:var(--ink)}
.treatment-occurrence-date{background:var(--surface-soft);color:var(--ink)}

.work-cockpit-card>button,.training-cockpit-card>button,.equipment-cockpit-card>button{
  border-color:var(--line);
  background:var(--button-bg);
  color:var(--ink);
  box-shadow:inset 0 1px rgba(255,255,255,.14),0 15px 38px rgba(4,18,8,.13);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
}
.work-cockpit-card i,.training-cockpit-card i,.equipment-cockpit-card i{background:var(--accent-wash);color:var(--gold)}
.work-cockpit-card strong,.training-cockpit-card strong,.equipment-cockpit-card strong{color:var(--gold)}

.weather-widget{border-color:var(--line);background:var(--surface-solid)}
.weather-chips,.weather-details{background:var(--surface-soft)}
.weather-chip,.weather-day{border-color:var(--line);background:var(--surface-solid);color:var(--ink)}
.weather-details>summary,.weather-info-card>strong,.weather-info-card>p,.weather-info-card>em,.weather-info-extra p,.weather-info-extra em{color:var(--muted)}
.weather-now-meta>span{border-color:var(--line);background:var(--surface-faint)}
.weather-travel-bar,.weather-travel-bar.stable{border-color:var(--line);background:var(--surface-soft);color:var(--ink)}
.weather-pasture-detail{border-color:var(--line)}

:root .horse-list-card.external-location,
:root .horse-list-card.external-location.open{
  border-color:var(--external-border);
  background:var(--external-card);
  box-shadow:inset 0 1px rgba(255,255,255,.2),0 16px 38px rgba(73,52,24,.18);
}
:root .horse-list-card.external-location.open{background:var(--external-card-open)}
:root .horse-external-badge{border-color:var(--external-border);background:var(--external-badge);color:var(--ink)}
:root .external-horse-section{border-top-color:var(--external-border)}
:root .external-horse-heading{
  border-color:var(--external-border);
  background:var(--external-card);
}
:root .external-horse-heading b{color:var(--ink)}
:root .external-horse-heading small{color:var(--muted)}
:root .external-horse-heading em{border-color:var(--external-border);background:var(--external-badge);color:var(--ink)}
:root[data-theme="dark"] .medical-entry,
:root[data-theme="dark"] .medical-record-summary,
:root[data-theme="dark"] .monthly-report-card,
:root[data-theme="dark"] .cloud-card{background:var(--surface)}
:root[data-theme="dark"] .weather-info-card header b,
:root[data-theme="dark"] .weather-now-meta b,
:root[data-theme="dark"] .weather-day>b,
:root[data-theme="dark"] .weather-day>strong{color:var(--ink)}
:root[data-theme="dark"] .weather-details>summary{color:var(--muted)}
:root[data-theme="dark"] .weather-alert{
  border-color:rgba(214,177,105,.34);
  background:rgba(31,31,20,.72);
  color:var(--ink);
  box-shadow:inset 0 1px rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
:root[data-theme="dark"] .weather-alert.severe,
:root[data-theme="dark"] .weather-alert.extreme{border-color:rgba(222,107,113,.34);background:rgba(47,22,24,.72)}
:root[data-theme="dark"] .weather-alert>i{background:rgba(205,164,83,.13);color:#e5bf73}
:root[data-theme="dark"] .weather-alert.severe>i,
:root[data-theme="dark"] .weather-alert.extreme>i{background:rgba(222,107,113,.13);color:#f18b91}
:root[data-theme="dark"] .weather-alert span>b{color:#dfbd79}
:root[data-theme="dark"] .weather-alert.severe span>b,
:root[data-theme="dark"] .weather-alert.extreme span>b{color:#ee9297}
:root[data-theme="dark"] .weather-alert small{color:var(--muted)}
:root[data-theme="dark"] .weather-chip,
:root[data-theme="dark"] .weather-chip.high,
:root[data-theme="dark"] .weather-chip.very_high,
:root[data-theme="dark"] .weather-chip.poor,
:root[data-theme="dark"] .weather-chip.very_poor,
:root[data-theme="dark"] .weather-chip.extremely_poor,
:root[data-theme="dark"] .weather-chip.increased_caution,
:root[data-theme="dark"] .weather-chip.moderate,
:root[data-theme="dark"] .weather-chip.caution,
:root[data-theme="dark"] .weather-chip.fair,
:root[data-theme="dark"] .weather-chip.low,
:root[data-theme="dark"] .weather-chip.good,
:root[data-theme="dark"] .weather-chip.favorable,
:root[data-theme="dark"] .weather-chip.none{
  border-color:rgba(255,255,255,.16);
  background:rgba(8,24,13,.7);
  color:var(--ink);
  box-shadow:inset 0 1px rgba(255,255,255,.06),0 10px 26px rgba(0,0,0,.18);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
}
:root[data-theme="dark"] .weather-chip.high,
:root[data-theme="dark"] .weather-chip.very_high,
:root[data-theme="dark"] .weather-chip.poor,
:root[data-theme="dark"] .weather-chip.very_poor,
:root[data-theme="dark"] .weather-chip.extremely_poor,
:root[data-theme="dark"] .weather-chip.increased_caution{border-color:rgba(226,112,117,.32)}
:root[data-theme="dark"] .weather-chip.moderate,
:root[data-theme="dark"] .weather-chip.caution,
:root[data-theme="dark"] .weather-chip.fair{border-color:rgba(218,181,105,.3)}
:root[data-theme="dark"] .weather-chip.low,
:root[data-theme="dark"] .weather-chip.good,
:root[data-theme="dark"] .weather-chip.favorable,
:root[data-theme="dark"] .weather-chip.none{border-color:rgba(131,178,139,.28)}
:root[data-theme="dark"] .weather-info-card header>i,
:root[data-theme="dark"] .weather-chip.high header>i,
:root[data-theme="dark"] .weather-chip.very_high header>i,
:root[data-theme="dark"] .weather-chip.poor header>i,
:root[data-theme="dark"] .weather-chip.very_poor header>i,
:root[data-theme="dark"] .weather-chip.extremely_poor header>i,
:root[data-theme="dark"] .weather-chip.increased_caution header>i,
:root[data-theme="dark"] .weather-chip.moderate header>i,
:root[data-theme="dark"] .weather-chip.caution header>i,
:root[data-theme="dark"] .weather-chip.fair header>i,
:root[data-theme="dark"] .weather-chip.low header>i,
:root[data-theme="dark"] .weather-chip.good header>i,
:root[data-theme="dark"] .weather-chip.favorable header>i,
:root[data-theme="dark"] .weather-chip.none header>i,
:root[data-theme="dark"] .weather-chip.moon header>i{background:rgba(255,255,255,.08);color:var(--gold)}
:root[data-theme="dark"] .weather-info-card header small,
:root[data-theme="dark"] .weather-info-card>strong,
:root[data-theme="dark"] .weather-info-card>p,
:root[data-theme="dark"] .weather-info-card>em,
:root[data-theme="dark"] .weather-info-extra p,
:root[data-theme="dark"] .weather-info-extra em{color:var(--muted)}
:root[data-theme="dark"] .weather-pasture-detail{background:rgba(24,28,18,.68);color:var(--ink)}
:root[data-theme="dark"] .weather-pasture-detail p{color:var(--muted)}
:root[data-theme="dark"] .weather-partial{background:rgba(42,34,18,.66);color:#dfbd79}
:root[data-theme="dark"] .progress-track{background:rgba(255,255,255,.12)}
:root[data-theme="dark"] .term-date.done{border-color:rgba(255,255,255,.15);background:#334239;color:#e2e9e3}
:root[data-theme="dark"] .success-check{background:#11271a;border-color:var(--lime);color:var(--lime)}

@media(max-width:520px){
  :root[data-theme="light"] body::before{
    background-position:center,right -44px bottom 60px;
    background-repeat:no-repeat;
    background-size:100% 100%,auto 118dvh;
    background-color:var(--bg);
  }
  :root[data-theme="light"] #app:has(>.brand)>.status{
    margin-top:124px;
  }
  #app{padding-right:14px;padding-left:14px}
  .topbar{gap:6px}
  .topbar-actions{gap:5px}
  .circle{width:42px;height:42px;flex-basis:42px}
  .theme-toggle{width:62px;height:40px}
  .theme-toggle i{top:5px;left:5px;width:28px;height:28px}
  :root[data-theme="dark"] .theme-toggle i{transform:translateX(24px)}
  .cloud-top-status{max-width:116px;padding:6px 8px;font-size:9px}
  .brand{width:52%;min-height:clamp(292px,47svh,470px);margin-top:-56px;padding:0 0 22px 4px}
  .brand h1{max-width:190px;font-size:37px;line-height:.94}
  .wordmark{font-size:12px}
  .edition{font-size:10px;letter-spacing:.12em}
  .powered{font-size:10px}
  .stable-pill{padding:9px 13px;font-size:14px;white-space:nowrap}
  .status-priority span{font-size:27px}
  .nav{bottom:calc(10px + env(safe-area-inset-bottom));width:calc(100% - 20px);padding:6px}
  .nav button{font-size:8px;padding:7px 1px}
}

@media(max-width:380px){
  .cloud-top-status{max-width:92px}
  .theme-toggle{width:58px}
  :root[data-theme="dark"] .theme-toggle i{transform:translateX(20px)}
  .brand{width:56%}
  .brand h1{font-size:35px}
}

/* Tablet im Hochformat: eigener Bildausschnitt und vollständige Pferdeköpfe oberhalb des Stallstatus. */
@media(min-width:521px) and (max-width:1179px) and (orientation:portrait){
  :root[data-theme="light"] body::before{
    background-color:var(--bg);
    background-position:center,right -18px bottom 4dvh;
    background-repeat:no-repeat;
    background-size:100% 100%,auto 134dvh;
  }
  #app{
    max-width:780px;
    padding-right:clamp(24px,4vw,42px);
    padding-left:clamp(24px,4vw,42px);
  }
  .brand{
    width:48%;
    min-height:clamp(600px,50svh,720px);
    margin-top:-64px;
    padding:92px 4px 104px;
  }
  .brand h1{
    max-width:330px;
    font-size:clamp(46px,7vw,56px);
    line-height:.92;
  }
  .edition{font-size:10px;letter-spacing:.13em}
  .powered{font-size:10px}
  #app:has(>.brand)>.status{margin-top:18px}
}

/* Tablet im Querformat: breite Landschaft, aber weiterhin die vertraute untere Navigation. */
@media(min-width:800px) and (max-width:1179px) and (orientation:landscape){
  :root[data-theme] body::before{
    background-image:var(--desktop-veil),var(--scene-overlay),var(--scene-desktop-image);
    background-position:center,center,center;
    background-repeat:no-repeat;
    background-size:100% 100%,100% 100%,cover;
  }
  #app{width:auto;max-width:none;padding:22px clamp(210px,22vw,270px) 132px clamp(28px,4vw,52px)}
  #app:has(>.brand){display:grid;grid-template-columns:minmax(240px,.8fr) minmax(300px,1.2fr);align-items:end;gap:18px}
  #app:has(>.brand)>.topbar,
  #app:has(>.brand)>.weather-widget,
  #app:has(>.brand)>.grid,
  #app:has(>.brand)>.cockpit-quick,
  #app:has(>.brand)>.breeding-sync-warning,
  #app:has(>.brand)>.training-cockpit-card,
  #app:has(>.brand)>.equipment-cockpit-card,
  #app:has(>.brand)>.work-cockpit-card,
  #app:has(>.brand)>.sale-cockpit-card,
  #app:has(>.brand)>.card{grid-column:1/-1}
  #app:has(>.brand)>.brand{grid-column:1;min-height:286px;margin:0;padding:30px 8px 24px}
  #app:has(>.brand)>.brand h1{font-size:clamp(44px,5.2vw,58px)}
  #app:has(>.brand)>.status{grid-column:2;min-height:186px;margin:0;display:flex;flex-direction:column;justify-content:center}
}

@media(min-width:900px){
  #app{padding-top:24px;padding-bottom:132px}
  .nav{width:min(760px,calc(100% - 40px))}
}

/* Echte Desktopansicht: breite Inhalte, Hamburger-Menü und vertraute untere Navigation. */
@media(min-width:1180px){
  body::after{
    position:fixed;
    z-index:0;
    inset:-28px;
    display:block;
    background-image:var(--scene-desktop-image);
    background-position:center;
    background-size:cover;
    content:"";
    filter:blur(25px) saturate(.82);
    opacity:var(--desktop-scene-opacity);
    pointer-events:none;
  }
  :root[data-theme] body::before{
    z-index:1;
    background-image:var(--desktop-veil),var(--scene-overlay),var(--scene-desktop-image);
    background-position:center,center,center;
    background-repeat:no-repeat;
    background-size:100% 100%,100% 100%,cover;
  }
  #app{
    z-index:2;
    width:auto;
    max-width:none;
    min-height:100dvh;
    margin:0;
    padding:22px clamp(280px,26vw,500px) 132px clamp(36px,5vw,82px);
  }
  .topbar{
    top:14px;
    min-height:58px;
    margin:0 0 18px;
    border:1px solid var(--glass-line);
    border-radius:25px;
    background:var(--surface-faint);
    box-shadow:inset 0 1px rgba(255,255,255,.2),0 16px 38px rgba(4,18,8,.12);
    padding:7px 9px;
    -webkit-backdrop-filter:blur(20px) saturate(1.08);
    backdrop-filter:blur(20px) saturate(1.08);
  }
  .topbar .hamburger{display:grid}
  .topbar-center{flex-direction:row;justify-content:flex-start;gap:8px;padding:0}
  .cloud-top-status{max-width:min(360px,44vw)}
  .nav.nav-primary{
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    top:auto;
    right:auto;
    bottom:calc(16px + env(safe-area-inset-bottom));
    left:50%;
    width:min(760px,calc(100% - 40px));
    height:auto;
    gap:4px;
    transform:translateX(-50%);
    border-radius:25px;
    padding:7px;
    overflow:visible;
  }
  .nav::before{
    display:none;
    content:none;
  }
  .nav button{
    display:block;
    min-height:0;
    width:auto;
    border:0;
    border-radius:18px;
    padding:8px 3px 9px;
    color:var(--nav-ink);
    font-size:11px;
    text-align:center;
  }
  .nav i{display:block;font-size:20px;text-align:center}
  .nav button.active{border-color:var(--accent-border);background:linear-gradient(145deg,var(--accent-glass-soft),var(--accent-glass))}
  #app:has(>.brand){
    display:grid;
    grid-template-columns:minmax(220px,.78fr) minmax(300px,1.22fr);
    align-items:end;
    gap:18px;
  }
  #app:has(>.brand)>.topbar,
  #app:has(>.brand)>.weather-widget,
  #app:has(>.brand)>.grid,
  #app:has(>.brand)>.cockpit-quick,
  #app:has(>.brand)>.breeding-sync-warning,
  #app:has(>.brand)>.training-cockpit-card,
  #app:has(>.brand)>.equipment-cockpit-card,
  #app:has(>.brand)>.work-cockpit-card,
  #app:has(>.brand)>.sale-cockpit-card,
  #app:has(>.brand)>.card{grid-column:1/-1}
  #app:has(>.brand)>.brand{
    grid-column:1;
    min-height:228px;
    margin:0;
    padding:28px 8px 24px;
    justify-content:flex-end;
  }
  #app:has(>.brand)>.brand h1{font-size:clamp(44px,3.35vw,64px)}
  #app:has(>.brand)>.status{
    grid-column:2;
    min-height:182px;
    margin:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  #app:has(>.brand)>.weather-widget,
  #app:has(>.brand)>.grid,
  #app:has(>.brand)>.cockpit-quick,
  #app:has(>.brand)>.card{margin:0}
  #app:has(>.brand)>.grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cockpit-quick-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px 14px 14px}
  .cockpit-quick-body button.full{height:100%;margin:0}
  dialog{width:min(760px,calc(100% - 64px))}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition:none!important}
}