:root {
  color-scheme: light;
  --bg: #131009;
  --panel: #1d1811;
  --panel-2: #241e15;
  --line: #2b2521;
  --line-strong: #5f4720;
  --gold: #d59716;
  --gold-soft: #ffd469;
  --text: #f0e6d4;
  --muted: #a89c8c;
  --green: #3ddc84;
  --red: #ff6b4d;
  --card: rgba(5, 5, 5, .42);
  --chip: rgba(23, 19, 16, .8);
  --field: #0c0a07;
  --panel-grad: linear-gradient(180deg, rgba(23, 19, 16, .96), rgba(10, 9, 8, .96));
  --pri-grad: linear-gradient(180deg, #d59716, #8c5e0d);
  --pri-text: #100e0c;
  --gold-tint: rgba(213, 151, 22, .12);
  --shadow-soft: var(--shadow-soft);
}

:root[data-theme="creme"] {
  color-scheme: light;
  --bg: #efe9dc;
  --panel: #faf6ee;
  --panel-2: #f3ecdf;
  --line: rgba(94, 72, 36, .18);
  --line-strong: rgba(94, 72, 36, .40);
  --gold: #a8730d;
  --gold-soft: #8a5d08;
  --text: #2b2116;
  --muted: #7d715f;
  --green: #2e7d4f;
  --red: #b3492e;
  --card: #fffdf8;
  --chip: #fffdf8;
  --field: #fffdf8;
  --panel-grad: linear-gradient(180deg, #faf6ee, #f3ecdf);
  --pri-grad: linear-gradient(180deg, #d9a028, #a8730d);
  --pri-text: #241a08;
  --gold-tint: rgba(168, 115, 13, .10);
  --shadow-soft: rgba(80, 60, 20, .12);
}

:root[data-theme="sand"] {
  color-scheme: light;
  --bg: #e3d5bc;
  --panel: #f1e8d6;
  --panel-2: #e9dec8;
  --line: rgba(84, 60, 24, .22);
  --line-strong: rgba(84, 60, 24, .44);
  --gold: #96650a;
  --gold-soft: #7c5306;
  --text: #241b0f;
  --muted: #6f6350;
  --green: #2b724a;
  --red: #a64429;
  --card: #f8f1e2;
  --chip: #f8f1e2;
  --field: #f8f1e2;
  --panel-grad: linear-gradient(180deg, #f1e8d6, #e9dec8);
  --pri-grad: linear-gradient(180deg, #d09a20, #96650a);
  --pri-text: #241a08;
  --gold-tint: rgba(150, 101, 10, .12);
  --shadow-soft: rgba(70, 50, 15, .16);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 0, var(--gold-tint), transparent 42%),
    var(--bg);
}

button {
  font: inherit;
}

.remote-shell {
  width: min(560px, 100%);
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 18px) 14px calc(env(safe-area-inset-bottom, 0px) + 18px);
}

.remote-header {
  text-align: center;
  margin-bottom: 16px;
}

.logo {
  width: min(270px, 78vw);
  max-height: 118px;
  object-fit: contain;
  filter: drop-shadow(0 14px 28px var(--shadow-soft));
}

.remote-header p,
.light-panel p,
.status-panel p,
.panel-head p,
.booking-card p,
.block-card p {
  color: var(--muted);
}

.remote-header p {
  margin: 8px 0 0;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.light-panel,
.status-panel,
.door-panel,
.booking-card,
.block-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-grad);
  box-shadow: 0 18px 60px var(--shadow-soft);
}

.light-panel {
  padding: 12px;
  margin-bottom: 12px;
}

.light-button {
  width: 100%;
  min-height: 118px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--panel-grad);
  color: var(--text);
  display: grid;
  place-items: center;
  gap: 6px;
  cursor: pointer;
  touch-action: manipulation;
}

.light-button span {
  color: var(--gold-soft);
  font-size: clamp(26px, 9vw, 44px);
  font-weight: 700;
}

.light-button strong {
  min-width: 108px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  padding: 8px 14px;
  color: var(--muted);
  text-transform: uppercase;
}

.light-button.is-on {
  border-color: #2c5c3f;
  background: linear-gradient(180deg, #142217, #0a0f0b);
}

.light-button.is-on strong {
  border-color: #2c5c3f;
  color: var(--green);
}

.light-button:disabled {
  opacity: .65;
}

.light-panel p {
  margin: 10px 2px 0;
  text-align: center;
  font-size: 13px;
}

.status-panel,
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.status-panel {
  padding: 22px;
  margin-bottom: 12px;
}

h1,
h2 {
  margin: 0;
  color: var(--gold-soft);
  line-height: 1.1;
}

h1 {
  font-size: 23px;
}

h2 {
  font-size: 22px;
}

.status-panel p,
.panel-head p {
  margin: 8px 0 0;
}

.status-pill {
  flex: 0 0 auto;
  min-width: 106px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 12px 14px;
  color: var(--gold-soft);
  text-align: center;
  text-transform: uppercase;
}

.status-pill.danger,
.door-tile.is-open strong {
  color: var(--red);
  border-color: #7a3527;
}

.door-panel {
  padding: 22px;
}

.door-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: column;
  grid-template-rows: repeat(4, minmax(76px, auto));
  gap: 10px;
  margin-top: 16px;
}

.door-tile {
  min-height: 76px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

.door-tile span {
  color: var(--text);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.door-tile strong {
  color: var(--green);
  font-size: 13px;
  text-transform: uppercase;
}

.door-tile.is-open {
  border-color: var(--line-strong);
  background: #211707;
}

.booking-shell,
.blocked {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 18px;
}

.booking-card,
.block-card {
  width: min(620px, 100%);
  padding: 28px;
}

.booking-card h1,
.block-card h1 {
  font-size: clamp(30px, 7vw, 48px);
}

.booking-card p,
.block-card p {
  font-size: 17px;
  line-height: 1.5;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--gold);
  text-transform: uppercase;
}

@media (max-width: 430px) {
  .status-panel,
  .door-panel {
    padding: 16px;
  }

  .door-grid {
    gap: 8px;
    grid-template-rows: repeat(4, minmax(68px, auto));
  }

  .door-tile {
    min-height: 68px;
    padding: 11px;
  }

  .door-tile span {
    font-size: 14px;
  }
}

.portal-body {
  background:
    radial-gradient(circle at 15% 4%, var(--gold-tint), transparent 30%),
    linear-gradient(135deg, var(--gold-tint), transparent 34%),
    var(--panel-grad);
}

[hidden] {
  display: none !important;
}

.portal-shell {
  width: min(1320px, 100%);
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px calc(env(safe-area-inset-bottom, 0px) + 18px);
}

.portal-header,
.portal-hero,
.panel-headline,
.task-top,
.booking-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.portal-header {
  min-height: 56px;
  margin-bottom: 10px;
  padding: 0 2px;
}

.portal-logo {
  width: 142px;
  height: 56px;
  object-fit: contain;
}

.portal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.portal-nav a,
.secondary-action,
.portal-subnav button:not(.nav-toggle),
.portal-subnav a,
.payment-actions button {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--chip);
  color: var(--text);
  padding: 8px 11px;
  text-decoration: none;
  cursor: pointer;
}

.portal-subnav a {
  display: block;
}

.portal-nav button {
  font: inherit;
}

.test-user-switch {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.test-user-switch select {
  min-width: 168px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--chip);
  color: var(--gold-soft);
  padding: 7px 9px;
  font: inherit;
  text-transform: none;
}

.portal-app {
  display: grid;
  grid-template-columns: 222px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.portal-body[data-role="pensioner"] .portal-app {
  grid-template-columns: minmax(0, 1fr);
}

.portal-subnav {
  display: grid;
  gap: 9px;
  margin-bottom: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, var(--gold-tint), transparent 30%),
    var(--chip);
  padding: 10px;
  position: sticky;
  top: 16px;
}

.nav-group {
  display: grid;
  gap: 5px;
}

.nav-title {
  color: var(--gold);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  padding: 5px 7px 0;
}

.portal-subnav button:not(.nav-toggle),
.portal-subnav a {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: var(--muted);
  font-weight: 800;
  font: inherit;
  text-align: left;
}

.portal-subnav .nav-group {
  min-width: 0;
}

.portal-subnav button.active,
.portal-subnav a.active {
  border-color: var(--line-strong);
  background: var(--pri-grad);
  color: var(--pri-text);
}

.portal-hero {
  min-height: 88px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, var(--gold-tint), transparent 38%),
    var(--panel-grad);
  padding: 14px 18px;
  margin-bottom: 10px;
}

.portal-hero h1 {
  max-width: 780px;
  font-size: 32px;
  line-height: 1.05;
  color: var(--text);
}

.portal-hero .eyebrow {
  margin-bottom: 6px;
}

.portal-body:not([data-portal-page="dashboard"]) .portal-hero {
  min-height: 54px;
  padding: 10px 14px;
}

.portal-body:not([data-portal-page="dashboard"]) .portal-hero h1 {
  font-size: 22px;
}

.portal-body:not([data-portal-page="dashboard"]) .portal-hero .eyebrow {
  display: none;
}

.account-chip,
.panel-headline span,
.task-top em,
.booking-row em {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--gold-soft);
  padding: 7px 10px;
  white-space: nowrap;
}

.portal-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}

.portal-page-toolbar {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-grad);
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.portal-page-toolbar h2 {
  color: var(--gold-soft);
  font-size: 20px;
  line-height: 1.1;
}

.portal-back-button {
  min-width: 78px;
  min-height: 36px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--card);
  color: var(--gold-soft);
  font-weight: 900;
  cursor: pointer;
}

.span-4 {
  grid-column: span 4;
}

.span-5 {
  grid-column: span 5;
}

.span-6 {
  grid-column: span 6;
}

.span-7 {
  grid-column: span 7;
}

.span-12 {
  grid-column: span 12;
}

.work-panel,
.task-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-grad);
  padding: 14px;
}

.portal-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.portal-body[data-role="pensioner"] .portal-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.metric-card,
.dashboard-card,
.mini-list article {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}

.metric-card {
  min-height: 76px;
  padding: 11px 12px;
  display: grid;
  align-content: center;
  gap: 6px;
}

.metric-card strong {
  color: var(--text);
  font-size: 26px;
  line-height: 1;
}

.metric-card span {
  color: var(--muted);
  line-height: 1.35;
}

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

.pensioner-dashboard {
  display: block;
}

.pensioner-menu-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, var(--gold-tint), transparent 48%),
    var(--card);
  padding: 12px;
}

.pensioner-quick-menu {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.pensioner-quick-menu button,
.pensioner-quick-menu a {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(0, 0, 0, .38);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  padding: 8px 10px;
}

.pensioner-quick-menu button.active,
.pensioner-quick-menu a.active {
  border-color: var(--line-strong);
  background: var(--pri-grad);
  color: var(--pri-text);
}

.dashboard-card {
  padding: 12px;
}

.dashboard-card h3 {
  margin: 0 0 8px;
  color: var(--gold-soft);
}

.week-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.week-strip span {
  min-height: 56px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 7px;
  display: grid;
  align-content: space-between;
}

.week-strip b {
  color: var(--muted);
  font-size: 12px;
}

.week-strip em {
  color: var(--gold-soft);
  font-style: normal;
  font-size: 17px;
  font-weight: 900;
}

.mini-list {
  display: grid;
  gap: 7px;
}

.mini-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 9px;
}

.mini-list strong {
  display: block;
  color: var(--text);
}

.mini-list small {
  color: var(--muted);
  line-height: 1.35;
}

.mini-list span {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--gold-soft);
  padding: 5px 7px;
  font-weight: 900;
  white-space: nowrap;
}

.mini-list span.good {
  color: var(--green);
}

.placeholder-page {
  min-height: 180px;
}

.portal-page {
  display: none;
}

.portal-page.active {
  display: block;
}

.panel-headline {
  margin-bottom: 10px;
}

.panel-headline h2 {
  color: var(--gold-soft);
}

.balance-card {
  min-height: 132px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(61, 220, 132, .11), transparent 40%),
    var(--card);
  padding: 13px;
}

.balance-card span {
  color: var(--muted);
  font-weight: 800;
}

.balance-card strong {
  display: block;
  margin-top: 12px;
  color: var(--green);
  font-size: 34px;
  line-height: 1;
}

.balance-card p {
  margin: 9px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

.topup-form {
  margin-top: 10px;
}

.payment-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.payment-actions button {
  min-height: 40px;
  color: var(--gold-soft);
  font-weight: 800;
}

.stack-form {
  display: grid;
  gap: 9px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.stack-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.stack-form input,
.stack-form textarea,
.stack-form select,
.task-controls input,
.task-controls select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--text);
  padding: 9px 10px;
  font: inherit;
}

.stack-form textarea {
  resize: vertical;
}

.primary-action {
  min-height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--pri-grad);
  color: var(--pri-text);
  font-weight: 800;
  cursor: pointer;
}

.horse-list,
.booking-list,
.team-board {
  display: grid;
  gap: 8px;
}

.horse-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 9px;
}

.horse-card-button {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.horse-card-button:hover,
.horse-card-button:focus-visible {
  border-color: var(--line-strong);
}

.horse-photo {
  width: 64px;
  height: 64px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #120f0c;
  color: var(--gold-soft);
  display: grid;
  place-items: center;
  font-weight: 800;
  overflow: hidden;
}

.horse-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.horse-card h3,
.horse-card strong,
.task-card strong,
.booking-row strong {
  margin: 0;
  color: var(--text);
  font-size: 16px;
}

.horse-card p,
.horse-card small,
.task-card p,
.booking-row span,
.task-top span,
.empty-state {
  color: var(--muted);
}

.horse-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0 0;
}

.horse-card dt {
  color: var(--gold);
  font-size: 11px;
  text-transform: uppercase;
}

.horse-card dd {
  margin: 3px 0 0;
  color: var(--text);
  overflow-wrap: anywhere;
}

.photo-preview {
  width: 96px;
  height: 96px;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  background: var(--card);
  color: var(--muted);
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 6px;
}

.photo-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.stable-area-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.stable-area-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 10px;
  display: grid;
  gap: 8px;
}

.stable-area-card strong,
.stable-area-card span {
  display: block;
}

.stable-area-card strong {
  color: var(--text);
}

.stable-area-card span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
}

.stable-area-card label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.stable-meter {
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
}

.stable-meter i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--gold-soft));
}

.booking-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 9px;
}

.panel-copy {
  color: var(--muted);
  line-height: 1.45;
  margin-bottom: 9px;
}

.compact-headline {
  margin-bottom: 8px;
}

.compact-headline h2,
.compact-headline h3 {
  margin: 0;
}

.ledger-list,
.user-list,
.service-admin-list,
.admin-ledger-list {
  display: grid;
  gap: 10px;
}

.ledger-row,
.admin-user-row,
.service-admin-row,
.admin-person-card {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  padding: 9px;
}

.ledger-row,
.admin-user-row,
.service-admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
}

.admin-user-row,
.service-admin-row {
  cursor: pointer;
}

.ledger-row div,
.admin-person-card,
.admin-user-row span,
.service-admin-row span {
  display: grid;
  gap: 3px;
}

.ledger-row small,
.ledger-row span,
.admin-user-row small,
.service-admin-row small,
.admin-mini-list,
.mini-link {
  color: var(--muted);
}

.ledger-row.credit b {
  color: var(--green);
}

.ledger-row.debit b {
  color: #ffb69f;
}

.ledger-row em,
.admin-user-row em,
.service-admin-row em,
.admin-person-card em,
.mini-link {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 5px 7px;
  color: var(--gold-soft);
  font-style: normal;
  white-space: nowrap;
}

.mini-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 800;
}

.admin-layout {
  display: grid;
  grid-template-columns: 1fr 1.35fr 1.25fr;
  gap: 10px;
}

.admin-layout.two {
  grid-template-columns: minmax(260px, .85fr) minmax(0, 1.35fr);
}

.admin-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 10px;
}

.admin-tabs button {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
}

.admin-tabs button.active {
  border-color: var(--line-strong);
  color: var(--gold-soft);
  background: var(--gold-tint);
}

.admin-tab-panel {
  display: none;
}

.admin-tab-panel.active {
  display: block;
}

.admin-column {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 9px;
}

.admin-column h3 {
  color: var(--text);
  font-size: 17px;
}

.member-picker,
.service-picker {
  display: grid;
  gap: 8px;
}

.member-picker label,
.service-picker label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.member-picker input,
.member-picker select,
.service-picker input,
.service-picker select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--text);
  padding: 9px 10px;
  font: inherit;
}

.service-admin-summary,
.admin-horse-manager {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 10px;
}

.service-admin-summary {
  display: grid;
  gap: 5px;
  min-height: 54px;
  color: var(--muted);
}

.service-admin-summary strong {
  color: var(--gold-soft);
  font-size: 16px;
}

.service-admin-summary span {
  color: var(--muted);
  line-height: 1.45;
}

.admin-horse-manager {
  display: grid;
  gap: 8px;
  margin-top: 4px;
}

.admin-horse-manager[hidden] {
  display: none;
}

.admin-person-card label {
  color: var(--muted);
  font-weight: 800;
}

.admin-person-card select {
  margin-top: 5px;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--text);
  padding: 9px 10px;
}

.admin-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.danger-action {
  border-color: #74402f;
  color: #ffb69f;
}

.admin-booking-list {
  display: grid;
  gap: 8px;
}

.admin-booking-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 9px;
}

.admin-booking-row div {
  display: grid;
  gap: 3px;
}

.admin-booking-row span,
.admin-booking-row small {
  color: var(--muted);
}

.admin-booking-row.cancelled {
  opacity: .62;
}

.crop-dialog[hidden] {
  display: none;
}

.crop-dialog {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, .72);
}

.crop-card {
  width: min(560px, 100%);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-grad);
  padding: 14px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .52);
}

.crop-card h2 {
  color: var(--gold-soft);
  margin-bottom: 10px;
}

.crop-frame {
  aspect-ratio: 1 / 1;
  width: min(340px, 100%);
  margin: 0 auto 10px;
  border: 2px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
  background: var(--field);
  display: grid;
  place-items: center;
}

.crop-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}

.crop-card label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-weight: 800;
}

.photo-preview,
.horse-photo {
  aspect-ratio: 1 / 1;
}

.admin-mini-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.admin-mini-list span {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 7px;
}

.booking-row div,
.task-top div {
  display: grid;
  gap: 5px;
}

.team-board {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.team-daybar {
  margin-bottom: 9px;
}

.team-daybar label {
  max-width: 280px;
}

.team-calendar-controls {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
}

.team-calendar-controls label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.team-calendar-controls input {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
}

.team-week-summary {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 8px;
  color: var(--muted);
}

.team-week-summary strong,
.team-week-summary em {
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 5px 7px;
  color: var(--gold-soft);
  font-style: normal;
}

.team-week-board {
  display: grid;
  grid-template-columns: repeat(7, minmax(126px, 1fr));
  gap: 6px;
  margin-bottom: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.compact-copy {
  max-width: 860px;
  margin-bottom: 12px;
  font-size: 14px;
}

.shift-calendar-controls {
  margin-bottom: 8px;
}

.shift-week-board {
  margin-top: 8px;
}

.shift-day-column .week-day-head {
  min-height: 52px;
}

.shift-day-list {
  min-height: 78px;
}

.shift-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 7px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 7px;
  background: var(--card);
  cursor: pointer;
}

.shift-card:hover {
  border-color: var(--gold);
}

.shift-card strong,
.shift-card span,
.shift-card small,
.shift-card em {
  display: block;
}

.shift-card strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
}

.shift-card span,
.shift-card small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
}

.shift-card small {
  grid-column: 1 / -1;
}

.shift-card em {
  border: 1px solid rgba(213, 151, 22, .35);
  border-radius: 999px;
  padding: 2px 6px;
  color: var(--gold-soft);
  font-size: 10px;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
}

.shift-card.status-present em,
.shift-card.status-shift em {
  border-color: var(--green);
  color: var(--green);
}

.shift-card.status-sick {
  border-color: rgba(255, 132, 101, .44);
}

.shift-card.status-sick em {
  border-color: var(--red);
  color: var(--red);
}

.shift-card.status-vacation em {
  border-color: rgba(90, 140, 175, .8);
  color: #5a8caf;
}

.shift-card.status-off {
  opacity: .72;
}

.compact-empty {
  margin: 0;
  font-size: 12px;
}

.compact-form {
  margin-top: 8px;
}

.shift-form {
  display: grid;
  gap: 9px;
  max-width: 920px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.shift-form .primary-action {
  min-height: 40px;
}

.week-day-column {
  min-width: 126px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  overflow: hidden;
}

.week-day-column.today {
  border-color: #8c671f;
  box-shadow: inset 0 0 0 1px rgba(213, 151, 22, .18);
}

.week-day-head {
  width: 100%;
  min-height: 58px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--panel-grad);
  color: var(--text);
  padding: 8px;
  text-align: left;
  cursor: pointer;
}

.week-day-head span,
.week-day-head strong,
.week-day-head em {
  display: block;
}

.week-day-head span {
  color: var(--gold-soft);
  font-weight: 900;
}

.week-day-head strong {
  margin-top: 4px;
  font-size: 14px;
}

.week-day-head em {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.week-day-tasks {
  display: grid;
  gap: 6px;
  padding: 7px;
}

.week-task-card {
  display: grid;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 7px;
}

.week-task-card.done {
  border-color: rgba(75, 212, 136, .34);
  opacity: .72;
}

.week-task-card.status-done {
  border-color: rgba(75, 212, 136, .34);
  opacity: .72;
}

.week-task-card.problem {
  border-color: rgba(255, 132, 101, .55);
}

.week-task-card.status-problem {
  border-color: rgba(255, 132, 101, .55);
}

.week-task-card.task-group {
  gap: 0;
  padding: 0;
}

.week-task-card.utility-group {
  gap: 0;
  padding: 0;
  background: var(--card);
}

.week-task-card.inventory-group {
  border-color: rgba(75, 212, 136, .34);
}

.week-task-card.ranch-task-group {
  border-color: rgba(213, 151, 22, .34);
}

.week-task-card.pasture-utility-group {
  border-color: rgba(89, 185, 139, .42);
  background: var(--card);
}

.week-task-card strong,
.week-task-card span,
.week-task-card small {
  display: block;
}

.week-task-card strong {
  color: var(--text);
  font-size: 14px;
  line-height: 1.28;
}

.week-task-card span,
.week-task-card small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.week-task-group-summary {
  display: block;
  min-height: 44px;
  padding: 7px 8px;
  cursor: pointer;
  list-style: none;
}

.week-task-group-summary::-webkit-details-marker {
  display: none;
}

.week-task-group-summary::after {
  content: "aufklappen";
  display: block;
  margin-top: 5px;
  color: var(--gold-soft);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.week-task-card[open] .week-task-group-summary::after {
  content: "zuklappen";
}

.utility-summary {
  min-height: 38px;
  padding: 6px 7px;
}

.utility-summary strong {
  font-size: 13px;
}

.utility-summary small,
.utility-summary::after {
  font-size: 10px;
}

.week-task-group-list {
  display: grid;
  gap: 0;
  padding: 0 7px 7px;
}

.week-task-group-row {
  display: grid;
  gap: 5px;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, .07);
}

.week-task-group-row.done,
.week-task-group-row.status-done {
  opacity: .66;
}

.week-task-group-row.problem span,
.week-task-group-row.status-problem span {
  color: #ffb69f;
}

.week-task-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

.utility-row-list {
  display: grid;
  gap: 4px;
  padding: 0 6px 6px;
}

.utility-row {
  display: grid;
  gap: 5px;
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 7px;
  background: rgba(0, 0, 0, .18);
}

.utility-row.status-done {
  opacity: .68;
}

.utility-row.pasture-row.active {
  border-color: rgba(89, 185, 139, .42);
  background: rgba(31, 78, 56, .24);
}

.utility-row span {
  margin-top: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
}

.utility-row small {
  margin-top: 2px;
  font-size: 11px;
}

.utility-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.pasture-mini-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.utility-actions button,
.pasture-actions button {
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--card);
  color: var(--gold-soft);
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}

.week-status-button {
  min-width: 36px;
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--muted);
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
}

.week-status-button.done {
  color: var(--green);
  border-color: var(--green);
}

.week-status-button.problem {
  color: var(--red);
  border-color: var(--red);
}

.week-status-button:hover {
  border-color: var(--gold);
}

.empty-state.compact {
  padding: 10px;
  font-size: 12px;
}

.team-subscriptions {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.team-pastures {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-grad);
  margin-bottom: 12px;
  padding: 10px;
}

.pasture-toolbar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 8px;
}

.pasture-toolbar .secondary-action,
.pasture-actions .secondary-action {
  min-height: 28px;
  border-radius: 7px;
  padding: 6px 9px;
  font-size: 11px;
  text-align: center;
}

.pasture-map {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  margin: 0 0 10px;
}

.pasture-map button {
  min-height: 48px;
  border: 1px solid rgba(213, 151, 22, .22);
  border-radius: 7px;
  background: var(--card);
  color: var(--muted);
  cursor: pointer;
}

.pasture-map button.active {
  border-color: rgba(89, 185, 139, .58);
  background: rgba(34, 90, 61, .34);
  color: #d8f5df;
}

.pasture-map strong,
.pasture-map span {
  display: block;
}

.pasture-map strong {
  color: var(--gold-soft);
  font-size: 12px;
}

.pasture-map span {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 800;
}

.pasture-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px;
}

.pasture-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 0;
}

.pasture-card.active {
  border-color: rgba(89, 185, 139, .5);
}

.pasture-card strong {
  color: var(--gold-soft);
}

.pasture-summary {
  display: grid;
  gap: 2px;
  padding: 8px;
  cursor: pointer;
  list-style: none;
}

.pasture-summary::-webkit-details-marker {
  display: none;
}

.pasture-summary span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.pasture-card dl {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0 8px 8px;
}

.pasture-card dl div {
  display: grid;
  grid-template-columns: 86px 1fr;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
}

.pasture-card dt,
.pasture-card dd {
  margin: 0;
}

.pasture-card dd {
  color: var(--text);
  font-weight: 800;
}

.pasture-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 0 8px 8px;
}

.compact-dialog {
  width: min(420px, calc(100vw - 24px));
  overflow-x: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text);
  padding: 0;
}

.rental-dialog {
  width: min(680px, calc(100vw - 24px));
}

.compact-dialog::backdrop {
  background: rgba(0, 0, 0, .7);
}

.compact-dialog-card {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.compact-dialog-card label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-weight: 800;
}

.compact-dialog-card input,
.compact-dialog-card select {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
}

#pastureHorseSelect {
  min-height: 148px;
}

#pastureHorseSelect option {
  padding: 5px;
}

@media (max-width: 900px) {
  .pasture-map {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pasture-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.subscription-group,
.subscription-item {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}

.subscription-group {
  padding: 10px;
}

.subscription-list {
  display: grid;
  gap: 7px;
}

.subscription-item {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(0, 1.4fr);
  gap: 8px;
  align-items: center;
  padding: 8px;
}

.subscription-item.done {
  opacity: .72;
}

.subscription-item.problem {
  border-color: #7a3527;
}

.subscription-item strong {
  color: var(--text);
}

.subscription-item span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.compact-controls {
  grid-template-columns: 132px minmax(0, 1fr) auto;
}

.task-card {
  display: grid;
  gap: 9px;
}

.task-card.done {
  opacity: .72;
}

.task-card.problem {
  border-color: #7a3527;
}

.task-controls {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) auto;
  gap: 8px;
}

.form-status {
  min-height: 20px;
  margin: 0;
  color: var(--muted);
  font-weight: 700;
}

.form-status[data-tone="success"] {
  color: var(--good);
}

.form-status[data-tone="error"] {
  color: #ff8465;
}

.form-status[data-tone="pending"] {
  color: var(--gold);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%) translateY(18px);
  max-width: min(440px, calc(100vw - 28px));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-2);
  color: var(--text);
  padding: 12px 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.login-body {
  min-height: 100vh;
  background:
    linear-gradient(135deg, var(--gold-tint), transparent 38%),
    var(--panel-grad);
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 22px;
}

.login-panel-grid {
  width: min(920px, 100%);
  display: grid;
  grid-template-columns: minmax(300px, 430px) minmax(300px, 1fr);
  gap: 12px;
  align-items: stretch;
}

.login-card {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(135deg, var(--gold-tint), transparent 44%),
    var(--panel-grad);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .44);
  padding: 28px;
}

.login-logo {
  width: min(250px, 78vw);
  height: 102px;
  object-fit: contain;
  display: block;
  margin: 0 auto 18px;
}

.login-card h1 {
  margin-bottom: 22px;
  color: var(--text);
  font-size: clamp(36px, 9vw, 54px);
}

.login-card h2 {
  margin-bottom: 18px;
  color: var(--text);
  font-size: 30px;
}

.register-card {
  align-self: stretch;
}

.login-links {
  display: grid;
  margin-top: 18px;
}

.login-links a {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--gold-soft);
  text-decoration: none;
  font-weight: 800;
}

@media (max-width: 820px) {
  .portal-header,
  .portal-hero,
  .panel-headline,
  .task-top,
  .booking-row {
    align-items: flex-start;
  }

  .portal-header,
  .portal-hero {
    flex-direction: column;
  }

  .portal-app {
    grid-template-columns: 1fr;
  }

  .portal-subnav {
    position: static;
  }

  .nav-group {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nav-title {
    grid-column: 1 / -1;
  }

  .portal-metrics,
  .dashboard-layout,
  .pensioner-quick-menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .span-4,
  .span-5,
  .span-6,
  .span-7 {
    grid-column: span 12;
  }

  .team-board {
    grid-template-columns: 1fr;
  }

  .admin-layout,
  .admin-layout.two {
    grid-template-columns: 1fr;
  }

  .admin-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .task-controls {
    grid-template-columns: 1fr;
  }

  .subscription-item {
    grid-template-columns: 1fr;
  }

  .stable-area-grid,
  .login-panel-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .portal-shell {
    padding-left: 10px;
    padding-right: 10px;
  }

  .portal-hero,
  .work-panel,
  .task-card {
    padding: 14px;
  }

  .portal-nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .portal-nav a,
  .portal-nav button,
  .test-user-switch select {
    text-align: center;
  }

  .nav-group,
  .portal-metrics,
  .dashboard-layout,
  .pensioner-quick-menu,
  .week-strip,
  .payment-actions {
    grid-template-columns: 1fr;
  }

  .form-row,
  .horse-card,
  .horse-card dl,
  .ledger-row,
  .admin-user-row,
  .service-admin-row {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .ledger-row,
  .admin-user-row,
  .service-admin-row,
  .booking-row {
    flex-direction: column;
  }

  .admin-booking-row {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-actions,
  .admin-tabs {
    grid-template-columns: 1fr;
  }

  .horse-photo {
    width: 84px;
    height: 84px;
  }
}

.site-body {
  background: #f7f2e9;
  color: #18231f;
}

.site-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(120deg, rgba(31, 63, 47, .08), transparent 34%),
    linear-gradient(0deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .78));
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  min-height: 86px;
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr auto;
  align-items: center;
  gap: 22px;
  padding: 14px clamp(18px, 4vw, 58px);
  background: rgba(26, 48, 40, .96);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(14px);
}

.brand-link {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.brand-link img {
  width: min(184px, 44vw);
  height: 58px;
  object-fit: contain;
}

.site-nav nav {
  display: flex;
  justify-content: flex-end;
  gap: clamp(16px, 2.6vw, 34px);
}

.site-nav a,
.site-actions a,
.contact-actions a {
  color: inherit;
  text-decoration: none;
  font-weight: 800;
}

.site-nav nav a {
  color: rgba(255, 255, 255, .88);
  font-size: 15px;
}

.site-nav-action,
.site-actions a:first-child,
.contact-actions a:first-child {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 0 20px;
  background: #d59716;
  color: var(--pri-text);
  box-shadow: 0 18px 42px rgba(13, 20, 17, .22);
}

.site-hero {
  position: relative;
  min-height: min(720px, calc(100vh - 86px));
  display: grid;
  align-items: end;
  overflow: hidden;
  border-bottom: 1px solid rgba(35, 45, 39, .14);
}

.site-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.site-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(9, 20, 16, .82), rgba(9, 20, 16, .34) 52%, rgba(9, 20, 16, .08)),
    linear-gradient(0deg, rgba(9, 20, 16, .74), transparent 44%);
}

.site-hero-content {
  position: relative;
  z-index: 1;
  width: min(880px, 100%);
  padding: clamp(52px, 9vw, 112px) clamp(20px, 7vw, 88px);
  color: #fff;
}

.site-hero-content .eyebrow,
.site-section .eyebrow,
.split-section .eyebrow,
.contact-band .eyebrow {
  letter-spacing: 2.4px;
  text-transform: uppercase;
}

.site-hero h1 {
  color: #fff;
  max-width: 760px;
  margin: 0;
  font-size: clamp(42px, 7vw, 92px);
  line-height: .98;
}

.site-hero-content > p:not(.eyebrow) {
  max-width: 660px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, .86);
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.48;
}

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

.site-actions a,
.contact-actions a {
  min-height: 54px;
  border-radius: 8px;
  padding: 0 22px;
}

.site-actions a:last-child,
.contact-actions a:last-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .5);
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.site-section,
.split-section,
.feature-band,
.contact-band {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
}

.site-section,
.split-section {
  padding: clamp(54px, 8vw, 94px) 0;
}

.site-intro {
  display: grid;
  grid-template-columns: minmax(260px, 460px) minmax(0, 1fr);
  gap: clamp(28px, 7vw, 92px);
  align-items: end;
}

.site-section h2,
.split-section h2,
.contact-band h2 {
  color: #1c4838;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.04;
}

.site-section p,
.split-section p,
.contact-band p {
  color: #4e5b54;
  font-size: 18px;
  line-height: 1.62;
}

.feature-band {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid rgba(35, 45, 39, .14);
  border-radius: 8px;
  background: rgba(35, 45, 39, .14);
  box-shadow: 0 20px 70px rgba(31, 63, 47, .12);
}

.feature-band article,
.service-grid article {
  background: #fffaf1;
  padding: clamp(22px, 3vw, 34px);
}

.feature-band span {
  display: block;
  color: #94691b;
  font-weight: 900;
  margin-bottom: 26px;
}

.feature-band h3,
.service-grid h3 {
  margin: 0;
  color: #18231f;
  font-size: 22px;
}

.feature-band p,
.service-grid p {
  margin: 12px 0 0;
  color: #5d6962;
  line-height: 1.55;
}

.split-section {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 76px);
  align-items: center;
}

.section-copy {
  display: grid;
  gap: 18px;
}

.split-section figure {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 22px 70px rgba(24, 35, 31, .24);
}

.split-section figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 30px;
}

.service-grid article {
  min-height: 190px;
  border: 1px solid rgba(35, 45, 39, .12);
  border-radius: 8px;
}

.contact-band {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 28px;
  align-items: center;
  margin-bottom: 56px;
  border-radius: 8px;
  padding: clamp(28px, 5vw, 52px);
  background: #1a3028;
  color: #fff;
}

.contact-band h2 {
  color: #fff;
}

.contact-band p {
  color: rgba(255, 255, 255, .78);
  margin-bottom: 0;
}

.contact-actions {
  justify-content: flex-end;
  margin-top: 0;
}

.contact-actions a:first-child {
  background: #d59716;
  color: var(--pri-text);
  box-shadow: none;
}

@media (max-width: 940px) {
  .site-nav {
    grid-template-columns: 1fr auto;
  }

  .site-nav nav {
    grid-column: 1 / -1;
    order: 3;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .site-hero {
    min-height: 680px;
  }

  .site-intro,
  .split-section,
  .contact-band {
    grid-template-columns: 1fr;
  }

  .feature-band,
  .service-grid {
    grid-template-columns: 1fr;
  }

  .contact-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .site-nav {
    min-height: auto;
    gap: 12px;
    padding: 12px 14px;
  }

  .brand-link img {
    width: 150px;
    height: 48px;
  }

  .site-nav-action {
    min-height: 44px;
    padding: 0 12px;
    font-size: 13px;
  }

  .site-nav nav {
    gap: 14px;
  }

  .site-nav nav a {
    font-size: 14px;
    white-space: nowrap;
  }

  .site-hero {
    min-height: 620px;
  }

  .site-hero-content {
    padding: 44px 18px;
  }

  .site-actions,
  .contact-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .site-actions a,
  .contact-actions a {
    width: 100%;
  }
}

/* ===================== Layout A · Ranch-Cockpit ===================== */
.portal-app {
  grid-template-columns: 208px minmax(0, 1fr);
}

.portal-header {
  flex-wrap: wrap;
  row-gap: 8px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.remote-cta {
  border: 1px solid var(--gold) !important;
  color: var(--gold-soft) !important;
  font-weight: 700;
}

.portal-nav .account-chip {
  padding: 6px 10px;
  font-size: 12px;
}

/* Kennzahlen als Leiste statt Einzelkarten */
.portal-metrics {
  display: flex;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  overflow: hidden;
}

.portal-metrics .metric-card {
  flex: 1;
  min-height: 0;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 10px 14px;
  gap: 4px;
}

.portal-metrics .metric-card:last-child {
  border-right: 0;
}

.portal-metrics .metric-card strong {
  font-size: 21px;
}

.portal-metrics .metric-card span {
  font-size: 11.5px;
}

/* Farbwelt-Umschalter */
.theme-switch {
  display: flex;
  gap: 4px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--chip);
  padding: 3px;
}

.theme-switch button {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  padding: 0;
  display: block;
}

.theme-switch button[data-set-theme="creme"] { background: #efe9dc; }
.theme-switch button[data-set-theme="sand"] { background: #d9c8a6; }
.theme-switch button[data-set-theme="nacht"] { background: #131009; }

.theme-switch button.active {
  box-shadow: 0 0 0 2px var(--gold);
}

/* Mobile Tab-Bar */
.mobile-tabbar {
  display: none;
}

@media (max-width: 760px) {
  .portal-app {
    grid-template-columns: minmax(0, 1fr);
  }

  .portal-sidebar {
    display: none;
  }

  .portal-shell {
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 74px);
  }

  .mobile-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    border-top: 1px solid var(--line);
    background: var(--panel);
    padding: 6px 4px calc(env(safe-area-inset-bottom, 0px) + 6px);
  }

  .mobile-tabbar button,
  .mobile-tabbar a {
    flex: 1;
    display: grid;
    gap: 2px;
    justify-items: center;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 10px;
    text-decoration: none;
    padding: 4px 0;
    cursor: pointer;
  }

  .mobile-tabbar i {
    font-style: normal;
    font-size: 17px;
    line-height: 1;
    opacity: .7;
  }

  .mobile-tabbar .active,
  .mobile-tabbar .tab-hof {
    color: var(--gold-soft);
    font-weight: 700;
  }

  .mobile-tabbar .active i,
  .mobile-tabbar .tab-hof i {
    opacity: 1;
  }
}

/* Logo (helle Grafik) in hellen Farbwelten auf Leder-Chip */
:root[data-theme="creme"] .logo,
:root[data-theme="creme"] .portal-logo,
:root[data-theme="creme"] .login-logo,
:root[data-theme="sand"] .logo,
:root[data-theme="sand"] .portal-logo,
:root[data-theme="sand"] .login-logo,
:root[data-theme="rost"] .logo,
:root[data-theme="rost"] .portal-logo,
:root[data-theme="rost"] .login-logo,
:root[data-theme="see"] .logo,
:root[data-theme="see"] .portal-logo,
:root[data-theme="see"] .login-logo,
:root[data-theme="weide"] .logo,
:root[data-theme="weide"] .portal-logo,
:root[data-theme="weide"] .login-logo {
  background: #241c12;
  border-radius: 10px;
  padding: 6px 12px;
}

/* Doppelte Ueberschrift im Dashboard vermeiden (Titel steht in der Toolbar) */
#dashboardPanel > .panel-headline {
  display: none;
}

/* ===================== Neue Bereiche (Reitstunden, Brett, Ferienhaeuser) ===================== */
.dashboard-extra {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

@media (max-width: 900px) {
  .dashboard-extra {
    grid-template-columns: minmax(0, 1fr);
  }
}

.dashboard-extra .dashboard-card h3 {
  margin-bottom: 8px;
}

#announcementForm {
  margin-top: 10px;
}

.form-subhead {
  font-size: 15px;
  color: var(--gold-soft);
  margin: 6px 0 0;
}

.lesson-list {
  display: grid;
  gap: 8px;
}

.lesson-row .lesson-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.lesson-row .lesson-actions em {
  color: var(--green);
  font-style: normal;
  font-weight: 700;
}

.lesson-edit-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  margin: 2px 0 8px;
  border: 1px solid var(--portal-border);
  border-radius: 8px;
  background: rgba(255, 253, 248, 0.54);
}

.lesson-edit-actions[hidden] {
  display: none;
}

.lesson-edit-actions .secondary-action {
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.86rem;
}

.rental-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 760px) {
  .rental-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rental-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 12px;
  display: grid;
  gap: 5px;
}

.rental-card strong {
  font-size: 16px;
}

.rental-card small {
  color: var(--muted);
}

.rental-status {
  justify-self: start;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  border: 1px solid var(--line-strong);
  color: var(--muted);
}

.rental-belegt .rental-status { color: var(--red); border-color: var(--red); }
.rental-frei .rental-status { color: var(--green); border-color: var(--green); }
.rental-anreise .rental-status { color: var(--gold-soft); border-color: var(--gold); }

.statement-print-row {
  display: flex;
  align-items: end;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.statement-print-row label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.statement-print-row input {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
}

/* Header-Leiste darf umbrechen - kein horizontales Scrollen auf dem Handy */
.portal-nav {
  flex-wrap: wrap;
  justify-content: flex-end;
  row-gap: 8px;
}

@media (max-width: 760px) {
  .test-user-switch select {
    min-width: 120px;
    max-width: 150px;
  }

  .portal-nav .account-chip {
    display: none;
  }
}

/* ===================== Sidebar einklappbar + Team-Layout ===================== */


.nav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 2px 6px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}

.nav-head .nav-title {
  padding: 0 6px;
}

.portal-subnav .nav-toggle {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: transparent;
  color: var(--gold-soft);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}

.nav-toggle:hover {
  background: var(--gold-tint);
}

.nav-toggle::before {
  content: "\2039"; /* ‹ */
  font-size: 15px;
  line-height: 1;
}

html.nav-collapsed .nav-toggle::before {
  content: "\203A"; /* › */
}

html.nav-collapsed .portal-app {
  grid-template-columns: 54px minmax(0, 1fr);
}

html.nav-collapsed .portal-sidebar {
  padding: 10px 7px;
}

html.nav-collapsed .portal-sidebar .nav-label,
html.nav-collapsed .portal-sidebar .nav-title {
  display: none;
}

html.nav-collapsed .portal-sidebar .nav-group {
  gap: 3px;
}

html.nav-collapsed .portal-subnav button:not(.nav-toggle),
html.nav-collapsed .portal-subnav a {
  justify-content: center;
  padding: 8px 0;
}

html.nav-collapsed .nav-ic {
  margin: 0;
}

html.nav-collapsed .nav-head {
  border-bottom: 0;
  padding: 0;
  margin: 0;
  justify-content: center;
}

html.nav-collapsed .nav-head .nav-title {
  display: none;
}

.team-main {
  min-width: 0;
  display: grid;
  gap: 10px;
  align-content: start;
}

.team-main .portal-page-toolbar {
  margin: 0;
}

@media (max-width: 760px) {
  .nav-toggle {
    display: none;
  }
}

/* ===================== Belegungskalender (Lodgify-Stil) ===================== */
.rental-calendar-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 8px;
  flex-wrap: wrap;
}

.rental-range {
  color: var(--muted);
  font-size: 12.5px;
  margin-left: 4px;
}

.rental-calendar-scroll {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
}

.rental-calendar {
  display: grid;
  grid-template-columns: 150px minmax(560px, 1fr);
  min-width: 710px;
}

.rc-house {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  font-weight: 700;
  font-size: 12.5px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  color: var(--text);
}

.rc-head-label {
  min-height: 40px;
}

.rc-head {
  display: grid;
  border-bottom: 1px solid var(--line);
}

.rc-day {
  text-align: center;
  padding: 6px 0 5px;
  border-right: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
  min-width: 0;
}

.rc-day b {
  display: block;
  font-size: 9.5px;
  letter-spacing: .5px;
}

.rc-day em {
  font-style: normal;
  display: block;
  font-size: 11px;
  color: var(--text);
  margin-top: 1px;
}

.rc-day.rc-weekend {
  background: var(--gold-tint);
}

.rc-day.rc-today em {
  color: var(--gold-soft);
  font-weight: 800;
}

.rc-row {
  display: grid;
  position: relative;
  min-height: 64px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}

.rc-cell {
  display: block;
  height: 100%;
  border-right: 1px solid var(--line);
  grid-row: 1;
}

.rc-cell.rc-weekend {
  background: var(--gold-tint);
}

.rc-cell.rc-today {
  box-shadow: inset 0 0 0 1px var(--gold);
}

.rc-bar {
  grid-row: 1;
  z-index: 1;
  min-width: 0;
  margin: 7px 3px;
  padding: 6px 11px;
  border-radius: 14px;
  font-size: 12px;
  line-height: 1.35;
  overflow: hidden;
  display: grid;
  gap: 1px;
  align-content: center;
  border: 1.5px solid var(--green);
  background: var(--green-bg, rgba(78, 194, 127, .14));
  color: var(--text);
  cursor: default;
}

.rc-line1 {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rc-line2 {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rc-bar.rc-paid {
  border-color: var(--green);
}

.rc-bar.rc-open {
  border-color: var(--red);
  background: rgba(224, 103, 74, .12);
}

.rc-bar.rc-clip-start {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-left-style: dashed;
}

.rc-bar.rc-clip-end {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right-style: dashed;
}

.pending-actions {
  display: flex;
  gap: 8px;
  border: 0;
  padding: 0;
}

.danger-link {
  color: var(--red) !important;
}

.register-hint {
  color: var(--muted);
  font-size: 12.5px;
  margin: 4px 0 10px;
}

.register-card > .secondary-action {
  width: 100%;
}

/* Login: eine Karte, Registrierung klappt darunter auf */
.login-panel-grid.login-single {
  grid-template-columns: min(430px, 100%);
  justify-content: center;
}

.login-register-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
}

.link-button {
  border: 0;
  background: none;
  color: var(--gold-soft);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.register-block {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.register-block h2 {
  font-size: 18px;
  margin-bottom: 2px;
}

/* ===================== Buchungs-Detail + Gaeste-Chat ===================== */
.rental-dialog-card {
  max-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.rental-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  margin-bottom: 14px;
}

@media (max-width: 560px) {
  .rental-detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.rental-detail-grid dt {
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2px;
}

.rental-detail-grid dd {
  margin: 0;
  font-size: 13px;
  color: var(--text);
}

.rental-detail-grid a {
  color: var(--gold-soft);
}

.rental-detail-pay dd {
  font-weight: 700;
}

.rental-detail-pay.is-paid dd { color: var(--green); }
.rental-detail-pay.is-open dd { color: var(--red); }

.rental-thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-bottom: 8px;
}

.rental-thread-head h3 {
  font-size: 14px;
  color: var(--gold-soft);
}

.rental-thread {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 2px;
}

.chat-message {
  display: flex;
}

.chat-message.chat-own {
  justify-content: flex-end;
}

.chat-bubble {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 13px;
  background: var(--card);
}

.chat-own .chat-bubble {
  background: var(--gold-tint);
  border-color: var(--line-strong);
  border-bottom-right-radius: 4px;
}

.chat-guest .chat-bubble {
  border-bottom-left-radius: 4px;
}

.chat-text {
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.chat-meta {
  margin-top: 5px;
  font-size: 10px;
  color: var(--muted);
}

.rc-bar[data-rental-open] {
  cursor: pointer;
}

/* Tagesauswahl im Belegungskalender */
.rc-cell[data-rc-pick] {
  cursor: pointer;
}

.rc-cell[data-rc-pick]:hover {
  background: var(--gold-tint);
}

.rc-cell.rc-picked {
  background: var(--gold-tint);
  box-shadow: inset 0 0 0 2px var(--gold);
}

.rental-mode-switch {
  display: flex;
  gap: 16px;
  color: var(--text);
}

.rental-mode-switch label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--text);
}

.rental-thread-actions {
  display: flex;
  gap: 8px;
  border: 0;
  padding: 0;
}

.rc-bar.rc-blocked {
  border-color: var(--line-strong);
  border-style: dashed;
  background: var(--chip);
  color: var(--muted);
}

/* Antwortfeld im Gaeste-Chat */
.rental-reply {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  margin-top: 10px;
}

.rental-reply textarea {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--field);
  color: var(--text);
  padding: 9px 11px;
  font: inherit;
  font-size: 12.5px;
  resize: vertical;
  min-height: 42px;
}

.rental-reply .primary-action {
  min-height: 42px;
  padding: 0 18px;
}

/* Groessere Hauskarten mit mehr Info auf einen Blick */
.rental-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.rental-card {
  min-height: 150px;
  padding: 16px;
  gap: 7px;
  align-content: start;
}

.rental-card strong {
  font-size: 18px;
}

.rental-card .rental-guest {
  font-size: 14.5px;
  font-weight: 600;
}

.rental-card .rental-guest.muted-line {
  color: var(--muted);
  font-weight: 400;
}

.rental-card small {
  font-size: 12.5px;
}

.rental-pay {
  font-size: 14px;
  font-weight: 700;
}

.rental-pay.is-paid { color: var(--green); }
.rental-pay.is-open { color: var(--red); }

.rental-next {
  font-size: 12.5px;
  color: var(--muted);
  border-top: 1px dashed var(--line);
  padding-top: 7px;
  margin-top: 3px;
}

.rental-next b {
  color: var(--gold-soft);
}

.rental-status {
  font-size: 12px;
  padding: 3px 12px;
}

.rental-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Ungelesen-Markierung */
.unread-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: var(--red);
  color: #fff;
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10.5px;
  font-weight: 800;
  vertical-align: middle;
}

.rental-head-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.rental-reply {
  margin: 0 0 12px;
}

/* Rechnungsarchiv */
.archive-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 820px) {
  .archive-columns {
    grid-template-columns: minmax(0, 1fr);
  }
}

.archive-subhead {
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}

.statement-print-row select {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--field);
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
}

/* Buchungsseite: beide Spalten buendig, Nachricht waechst mit */
.portal-page[data-portal-page="orders"] .stack-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}
/* Beide Formulare gleich hoch, Knoepfe auf einer Linie - ohne ueber den Rand zu laufen */
.portal-body[data-portal-page="orders"] .portal-page[data-portal-page="orders"].work-panel.span-6 { display: flex; flex-direction: column; height: auto; overflow: visible; }

#messageForm textarea {
  flex: 1;
  min-height: 170px;
}

#messageForm button[type="submit"],
#bookingForm button[type="submit"] {
  margin-top: auto;
}

/* Ranch Chat */
.chat-compose {
  margin-bottom: 12px;
}

.chat-board {
  max-width: 860px;
}

/* Private Sicht fuer Team/Admin = Pensioner-Layout */
.portal-body[data-view="privat"] .portal-app {
  grid-template-columns: minmax(0, 1fr);
}

.portal-body[data-view="privat"] .portal-metrics {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.portal-body[data-view="privat"] .metric-card[data-team-only] {
  display: none;
}

/* Menü-Einträge mit Icon */
.portal-subnav button:not(.nav-toggle),
.portal-subnav a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.nav-ic {
  font-style: normal;
  width: 17px;
  text-align: center;
  opacity: .75;
  flex: 0 0 auto;
}

.portal-subnav button.active .nav-ic,
.portal-subnav a.active .nav-ic {
  opacity: 1;
}

.nav-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ranch-Kalender (Monatsansicht mit Namensbalken) */
.ranch-calendar-card {
  margin-bottom: 12px;
  padding: 14px;
}

.ranch-calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.ranch-calendar-head b {
  color: var(--gold-soft);
  min-width: 130px;
  text-align: center;
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 4px;
}

.cal-weekdays span {
  text-align: center;
  font-size: 10.5px;
  letter-spacing: .8px;
  color: var(--muted);
  text-transform: uppercase;
}

.cal-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px 4px;
  border-top: 1px solid var(--line);
  padding: 4px 0 8px;
}

.cal-daynum {
  grid-row: 1;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  padding: 3px 0;
  border-radius: 6px;
}

.cal-daynum.cal-today {
  color: var(--pri-text);
  background: var(--pri-grad);
}

.cal-bar {
  min-width: 0;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  border: 1px solid var(--line-strong);
  background: var(--chip);
  cursor: default;
}

.cal-bar-urlaub {
  background: rgba(127, 180, 216, .22);
  border-color: rgba(90, 140, 175, .65);
}

.cal-bar-ereignis {
  background: var(--gold-tint);
  border-color: var(--gold);
}

.cal-bar-kurs {
  background: rgba(78, 194, 127, .16);
  border-color: var(--green);
}

.cal-bar-geburtstag {
  background: rgba(224, 103, 74, .16);
  border-color: var(--red);
  font-size: 12.5px;
}

.cal-bar-clip-l {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  border-left-style: dashed;
}

.cal-bar-clip-r {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  border-right-style: dashed;
}

.cal-bar-x {
  cursor: pointer;
  font-weight: 900;
  padding: 0 2px;
}

.calendar-form {
  border-top: 1px dashed var(--line);
  padding-top: 10px;
  margin-top: 4px;
}

.calendar-form-actions {
  align-items: center;
}

.checkbox-label {
  display: flex !important;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.checkbox-label input {
  width: auto !important;
}

/* hidden-Attribut muss auch gegen !important-Displays gewinnen */
[hidden] {
  display: none !important;
}

/* Wochenansicht des Ranch-Kalenders */
.cal-single-week {
  border-top: 0;
  padding-top: 0;
}

.cal-single-week .cal-daynum {
  font-size: 12.5px;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding-bottom: 6px;
}

.cal-single-week .cal-daynum.cal-today {
  border-radius: 8px;
}

.cal-single-week .cal-daynum b {
  color: var(--gold-soft);
  margin-right: 3px;
}

.cal-single-week .cal-bar {
  align-self: center;
  padding: 5px 11px;
  font-size: 12px;
}

.cal-empty-hint {
  color: var(--muted);
  font-size: 12px;
  align-self: center;
  text-align: center;
}

/* Personal-Uebersicht + ICS-Import */
.shift-import-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
  flex-wrap: wrap;
}

.shift-import-label {
  cursor: pointer;
  display: inline-block;
}

.staff-table-wrap {
  overflow-x: auto;
}

.staff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.staff-table th {
  text-align: left;
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line-strong);
  padding: 7px 10px;
}

.staff-table td {
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
}

.staff-table .num {
  font-variant-numeric: tabular-nums;
}

.staff-warn {
  color: var(--red);
  font-weight: 700;
}

.staff-vacation-input {
  width: 70px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--field);
  color: var(--text);
  padding: 5px 8px;
  font: inherit;
}

/* Kalender-Formular: Hinweis + Eintragen-Knopf in einer Zeile */
.calendar-submit-row {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}

.calendar-hint-label {
  flex: 1;
  min-width: 220px;
}

.calendar-submit-row .checkbox-label {
  padding-bottom: 9px;
  white-space: nowrap;
}

.calendar-submit-btn {
  min-height: 38px;
  white-space: nowrap;
}

/* Stallbelegung: Slots */
.stall-area-head {
  width: 100%;
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 7px;
  padding: 0;
}

.stall-area-head strong {
  font-size: 15px;
}

.stall-area-head span {
  color: var(--muted);
  font-size: 12px;
  margin-left: 8px;
}

.stall-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 7px;
  margin-top: 10px;
}

.stall-slot {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 8px 9px;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 2px;
}

.stall-slot b {
  font-size: 12.5px;
  color: var(--text);
}

.stall-slot small {
  font-size: 10.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stall-slot-belegt {
  border-color: var(--line-strong);
}

.stall-slot-frei {
  border-style: dashed;
}

.stall-slot-frei b {
  color: var(--green);
}

.stall-slot:hover {
  border-color: var(--gold);
}

.stall-capacity-form {
  display: flex;
  align-items: end;
  gap: 8px;
  margin-top: 10px;
}

.stall-capacity-form label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.stall-capacity-form input {
  width: 90px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--field);
  color: var(--text);
  padding: 6px 8px;
  font: inherit;
}

.stall-slot-num {
  font-style: normal;
  font-size: 9.5px;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--gold-soft);
  font-weight: 800;
}

.stall-slot-unplaced {
  border-style: dotted;
}

/* Gruppen-Fortschritt: gruen fertig, gelb teils, rot offen */
.week-task-card.progress-done {
  border-left: 4px solid var(--green);
}

.week-task-card.progress-done > summary strong {
  color: var(--green);
}

.week-task-card.progress-part {
  border-left: 4px solid var(--amber, #e0a33a);
}

.week-task-card.progress-part > summary strong {
  color: #a36a08;
}

.week-task-card.progress-none {
  border-left: 4px solid var(--red);
}

/* Dialog-Felder duerfen den Rahmen nie sprengen */
.compact-dialog-card select,
.compact-dialog-card input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* Neuen Stallbereich anlegen */
.stall-new-form {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px dashed var(--line-strong);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.stall-new-form label {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 12px;
}

.stall-new-form input[type="text"],
.stall-new-form input:not([type]) {
  min-width: 220px;
}

.stall-new-form input {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--field);
  color: var(--text);
  padding: 7px 9px;
  font: inherit;
}

.stall-new-form .checkbox-label {
  padding-bottom: 8px;
}

/* Bestandsliste */
.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px;
}

.inventory-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 12px;
  display: grid;
  gap: 10px;
}

.inventory-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.inventory-card-head strong {
  font-size: 14px;
}

.inventory-qty {
  font-size: 16px;
  font-weight: 800;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

.inventory-qty.inventory-low {
  color: var(--red);
}

.inventory-actions {
  display: flex;
  gap: 8px;
}

.inventory-actions button {
  flex: 1;
}

/* Herden */
.herd-grid {
  display: grid;
  gap: 10px;
}

.herd-editor {
  margin-top: 10px;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
  display: grid;
  gap: 10px;
}

.herd-area-group h4 {
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 5px;
}

.herd-horse-check {
  padding: 3px 0;
  font-weight: 600 !important;
}

.herd-horse-check small {
  color: var(--muted);
  font-weight: 400;
}

.herd-editor-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pasture-herd-field select {
  min-height: 36px;
}

/* Weidepflege: quadratische Kacheln */
.pasture-group-title {
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 8px;
}

.pasture-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}

.pasture-tile {
  aspect-ratio: 1 / 1;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  padding: 10px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 6px;
  min-width: 0;
}

.pasture-tile.active {
  border-color: var(--green);
}

.pasture-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.pasture-tile-head strong {
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pasture-edit {
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
}

.pasture-edit:hover {
  color: var(--gold-soft);
}

.pasture-tile-status {
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: none;
  font: inherit;
  text-align: left;
  padding: 7px 9px;
  cursor: pointer;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pasture-tile.active .pasture-tile-status {
  border-style: solid;
  border-color: var(--green);
  background: rgba(78, 194, 127, .08);
}

.pasture-herd {
  color: var(--green);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pasture-free {
  color: var(--muted);
  font-size: 13px;
}

.pasture-tile-status small {
  color: var(--muted);
  font-size: 10.5px;
}

.pasture-checks {
  display: grid;
  gap: 3px;
  align-content: start;
  overflow-y: auto;
}

.pasture-check {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 11px;
  color: var(--muted);
  cursor: pointer;
  padding: 1px 2px;
  text-align: left;
}

.pasture-check i {
  font-style: normal;
  width: 14px;
  color: var(--line-strong);
}

.pasture-check.checked {
  color: var(--text);
}

.pasture-check.checked i {
  color: var(--green);
}

.pasture-check small {
  margin-left: auto;
  font-size: 10px;
  color: var(--muted);
}

.pasture-check:hover {
  color: var(--gold-soft);
}

.pasture-journal-link {
  font-size: 10.5px;
  color: var(--gold-soft);
  text-decoration: none;
  justify-self: end;
}


/* Kontrolle (Hof-Fernbedienung) */
.control-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.control-card { background: var(--panel-soft, rgba(0,0,0,0.04)); border: 1px solid var(--line, rgba(0,0,0,0.12)); border-radius: 12px; padding: 14px 16px; }
.control-card h3 { margin: 0 0 10px; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; }
.control-kv { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line, rgba(0,0,0,0.08)); }
.control-kv:first-of-type { border-top: 0; }
.control-bar-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.control-bar-label { flex: 0 0 90px; font-size: 0.85rem; }
.control-bar { flex: 1 1 auto; height: 8px; border-radius: 5px; background: var(--line, rgba(0,0,0,0.12)); overflow: hidden; display: block; }
.control-bar i { display: block; height: 100%; border-radius: 5px; background: #2f7fc4; }
.control-note { margin: 6px 0 8px; font-size: 0.85rem; opacity: 0.8; }
.control-pill { padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; }
.control-pill.on { background: rgba(61, 220, 132, 0.18); color: #1d8a4e; }
.control-pill.off { background: rgba(128,128,128,0.15); opacity: 0.8; }
#controlUpdatedAt.control-stale { color: #c0392b; }

.control-toggle { border: 1px solid var(--line, rgba(0,0,0,0.2)); border-radius: 999px; padding: 3px 14px; font-size: 0.8rem; font-weight: 700; cursor: pointer; background: transparent; }
.control-toggle.on { background: rgba(61, 220, 132, 0.2); color: #1d8a4e; border-color: rgba(61, 220, 132, 0.5); }
.control-toggle.off { opacity: 0.75; }
.control-toggle.pending { opacity: 0.6; }
.control-actions { display: flex; align-items: center; gap: 8px; }
.control-temp-btn { min-width: 28px; padding: 1px 8px; }
.control-note-inline { font-size: 0.78rem; opacity: 0.75; }
.control-kv.control-sub { border-top: 0; padding-top: 0; font-size: 0.85rem; }

.rental-heat { font-size: 0.82rem; opacity: 0.85; margin-top: 4px; }
.rental-heat.is-heating { color: #c0392b; opacity: 1; font-weight: 600; }

.control-card.control-wide { grid-column: span 2; }
@media (max-width: 700px) { .control-card.control-wide { grid-column: auto; } }
.control-heat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 7px 0; border-top: 1px solid var(--line, rgba(0,0,0,0.08)); min-width: 0; }
.control-heat-row:first-of-type { border-top: 0; }
.control-heat-name { flex: 0 0 110px; }
.control-heat-ist { flex: 0 0 64px; text-align: right; }
.control-heat-soll { display: flex; align-items: center; gap: 6px; }
.heat-soll-value { min-width: 46px; text-align: center; }
.control-heat-status { flex: 1 1 auto; }
.control-heat-row .control-toggle { margin-left: auto; }

.danger-action { color: #c0392b; border-color: rgba(192, 57, 43, 0.4); }

/* kompakte Aufgaben/Verbräuche im Wochenkalender */
.utility-compact .week-task-group-summary { padding: 4px 8px; }
.utility-compact summary strong { font-size: 0.8rem; }
.week-task-card.progress-done { border-left: 3px solid #1d8a4e; }
.week-task-card.progress-part { border-left: 3px solid #d9a514; }
.week-task-card.progress-none { border-left: 3px solid #c0392b; }

/* Wettervorhersage */
.forecast-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.forecast-day { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px; border-radius: 10px; background: rgba(0,0,0,0.03); text-align: center; }
.forecast-name { font-size: 0.8rem; font-weight: 700; }
.forecast-icon { font-size: 1.7rem; line-height: 1.2; }
.forecast-temp { font-size: 0.85rem; }
.forecast-rain, .forecast-wind { font-size: 0.72rem; opacity: 0.8; }
@media (max-width: 700px) { .forecast-row { grid-template-columns: repeat(5, 1fr); gap: 4px; } .forecast-icon { font-size: 1.3rem; } }

/* Hof-Karte: Werte sauber rechtsbündig, keine Umbrüche im Label */
.control-kv > span { flex: 1 1 auto; min-width: 0; }
.control-kv > b, .control-kv .control-toggle { flex: 0 0 auto; }
.control-kv-value { text-align: right; white-space: nowrap; }
@media (max-width: 480px) { .control-kv-value { white-space: normal; } }

.control-kv-value.stacked { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.control-kv-value.stacked b { white-space: nowrap; }
.control-kv-value.stacked small { font-size: 0.72rem; opacity: 0.75; white-space: nowrap; }

/* Privat/Team-Segmentschalter */
.view-switch { display: inline-flex; border: 1px solid var(--line, rgba(0,0,0,0.25)); border-radius: 999px; overflow: hidden; }
.view-switch button { border: 0; background: transparent; padding: 6px 16px; font-size: 0.85rem; cursor: pointer; color: inherit; }
.view-switch button.active { background: var(--gold, #b08830); color: #fff; font-weight: 700; }

.addon-option { display: block; padding: 4px 0; }

/* Zusatzleistungen-Dialog */
.addon-dialog { width: min(440px, 92vw); border: 0; border-radius: 16px; padding: 20px 22px; }
.addon-dialog::backdrop { background: rgba(0,0,0,0.35); }
.addon-dialog h3 { margin: 0 0 12px; font-size: 1.05rem; }
.addon-dialog .mini-list { margin-bottom: 14px; max-height: 220px; overflow-y: auto; }
.addon-dialog .mini-list article { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line, rgba(0,0,0,0.08)); }
.addon-dialog .mini-list article:last-child { border-bottom: 0; }
.addon-section-title { margin: 0 0 6px; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.65; }
.addon-template-block { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line, rgba(0,0,0,0.12)); }
.addon-template-controls { display: flex; gap: 8px; align-items: stretch; }
.addon-template-controls select { flex: 1 1 auto; min-width: 0; }
.addon-template-controls .secondary-action { flex: 0 0 auto; white-space: nowrap; }
.dialog-button-row { display: flex; gap: 10px; margin-top: 6px; }
.dialog-button-row .primary-action { flex: 1 1 auto; }
.dialog-button-row .secondary-action { flex: 0 0 auto; }

/* ===== Zusatzleistungen-Dialog v2 (eigenständig) ===== */
.addon-dialog { width: min(460px, 94vw); max-height: 86vh; overflow-y: auto; border: 0; border-radius: 16px; padding: 0; background: var(--panel, #f7f1e4); color: inherit; box-shadow: 0 18px 50px rgba(0,0,0,0.3); }
.addon-dialog::backdrop { background: rgba(30, 24, 12, 0.45); }
.addon-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 12px; border-bottom: 1px solid rgba(0,0,0,0.1); }
.addon-dialog-head h3 { margin: 0; font-size: 1rem; line-height: 1.3; padding-right: 12px; }
.addon-close { border: 0; background: transparent; font-size: 1.5rem; line-height: 1; cursor: pointer; opacity: 0.6; padding: 2px 6px; color: inherit; }
.addon-close:hover { opacity: 1; }
.addon-list { padding: 6px 20px; max-height: 240px; overflow-y: auto; outline: none; }
.addon-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,0.08); }
.addon-row:last-child { border-bottom: 0; }
.addon-row-text { min-width: 0; }
.addon-row-text strong { display: block; font-size: 0.92rem; }
.addon-row-text small { display: block; font-size: 0.78rem; opacity: 0.7; margin-top: 1px; }
.addon-remove { flex: 0 0 auto; border: 1px solid rgba(192,57,43,0.35); background: transparent; color: #c0392b; border-radius: 8px; padding: 4px 10px; font-size: 0.75rem; cursor: pointer; }
.addon-remove:hover { background: rgba(192,57,43,0.08); }
.addon-empty { margin: 8px 0; font-size: 0.85rem; opacity: 0.7; }
.addon-dialog .addon-template-block { margin: 0; padding: 12px 20px; border-top: 1px solid rgba(0,0,0,0.1); border-bottom: 0; }
.addon-dialog .addon-section-title { margin: 0 0 8px; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.6; }
.addon-template-controls { display: flex; gap: 8px; }
.addon-template-controls select { flex: 1 1 auto; min-width: 0; }
.addon-form { padding: 12px 20px 18px; border-top: 1px solid rgba(0,0,0,0.1); display: block; }
.addon-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.addon-field { display: flex; flex-direction: column; gap: 4px; font-size: 0.78rem; font-weight: 600; }
.addon-field input { width: 100%; box-sizing: border-box; }
.addon-field-wide { grid-column: 1 / -1; }
.addon-perday { display: flex; align-items: center; gap: 8px; margin: 12px 0; font-size: 0.85rem; }
.addon-submit { width: 100%; }

.lesson-form-addons { margin: 6px 0 4px; padding: 10px 12px; border: 1px solid rgba(0,0,0,0.1); border-radius: 10px; }
.addon-catalog-card { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,0.12); }
.addon-catalog-card .addon-list { max-height: 220px; padding: 0; }
.addon-row-actions { display: flex; gap: 6px; flex: 0 0 auto; }
.addon-edit-btn { border: 1px solid rgba(0,0,0,0.2); background: transparent; color: inherit; border-radius: 8px; padding: 4px 10px; font-size: 0.75rem; cursor: pointer; }
.addon-edit-btn:hover { background: rgba(0,0,0,0.05); }
.addon-catalog-form { padding: 12px 0 0; border-top: 1px solid rgba(0,0,0,0.08); margin-top: 8px; }

.lesson-image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; padding: 12px 20px; }
.lesson-image-thumb { margin: 0; position: relative; }
.lesson-image-thumb img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; display: block; }
.lesson-image-thumb .addon-remove { position: absolute; right: 6px; bottom: 6px; background: rgba(255,255,255,0.9); }
.lesson-description { display: block; font-size: 0.82rem; opacity: 0.8; margin-top: 2px; }
#lessonImageDialog .addon-form { padding: 10px 20px 18px; }

.terms-label { display: flex; gap: 8px; align-items: flex-start; font-size: 0.82rem; line-height: 1.4; }
.terms-label input { margin-top: 3px; }
.terms-label a { color: inherit; text-decoration: underline; }

.secret-field { display: flex; gap: 6px; align-items: center; }
.secret-field input { flex: 1 1 auto; min-width: 0; }
.secret-eye { border: 1px solid rgba(0,0,0,0.15); background: transparent; border-radius: 8px; cursor: pointer; padding: 6px 9px; font-size: 0.9rem; line-height: 1; }

.voucher-redeem-row { display: flex; align-items: flex-end; gap: 10px; margin: 10px 0 16px; }
.voucher-redeem-row label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: 0.85rem; }
.voucher-redeem-row input { text-transform: uppercase; letter-spacing: 0.06em; }
.voucher-list { max-height: 460px; overflow-y: auto; }
.voucher-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.08); }
.voucher-row:last-child { border-bottom: 0; }
.voucher-row small { display: block; opacity: 0.7; font-size: 0.78rem; }
.voucher-code { font-family: ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: 0.05em; display: block; }
.voucher-row.status-offen .voucher-status { color: #1d8a4e; }
.voucher-row.status-eingelöst .voucher-status { color: #b08830; }
.voucher-row.status-deaktiviert .voucher-status, .voucher-row.status-abgelaufen .voucher-status { color: #b3372a; }

.voucher-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; flex: 0 0 auto; }
.voucher-pdf { text-align: center; font-size: 0.78rem; padding: 5px 10px; }

.balance-table { max-height: 560px; overflow-y: auto; }
.balance-row { display: grid; grid-template-columns: 1.4fr 0.9fr 1.6fr 0.7fr; gap: 10px; padding: 9px 6px; border-bottom: 1px solid rgba(0,0,0,0.08); align-items: center; cursor: pointer; }
.balance-row:hover:not(.balance-head) { background: rgba(0,0,0,0.04); }
.balance-row.balance-head { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.65; cursor: default; position: sticky; top: 0; background: inherit; }
.balance-row b { text-align: right; }
.balance-row.negative b { color: #b3372a; }
@media (max-width: 700px) { .balance-row { grid-template-columns: 1.4fr 0.8fr 0.8fr; } .balance-row span:nth-child(3) { display: none; } }

.pay-button { display: inline-flex; align-items: center; gap: 8px; }
.pay-button .pay-ic { height: 20px; width: auto; flex: 0 0 auto; }

/* Reitbeteiligung */
.share-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 14px; }
@media (max-width: 760px) { .share-week { grid-template-columns: 1fr; } }
.share-day { border: 1px solid rgba(0,0,0,0.1); border-radius: 10px; padding: 6px; min-height: 90px; }
.share-day.today { border-color: var(--gold, #b08830); box-shadow: 0 0 0 1px var(--gold, #b08830); }
.share-day-head { width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; font-size: 0.78rem; padding: 2px 2px 6px; color: inherit; }
.share-entry { position: relative; border-radius: 8px; padding: 5px 18px 5px 7px; font-size: 0.74rem; margin-bottom: 4px; }
.share-entry span { display: block; font-weight: 700; }
.share-entry small { display: block; opacity: 0.8; }
.share-entry.mine { background: rgba(61, 220, 132, 0.18); }
.share-entry.other { background: rgba(0,0,0,0.07); }
.share-entry.block { background: rgba(192, 57, 43, 0.12); }
.share-entry-delete { position: absolute; top: 2px; right: 4px; border: 0; background: transparent; cursor: pointer; font-size: 0.9rem; opacity: 0.6; color: inherit; }
.share-entry-delete:hover { opacity: 1; }
.share-free { font-size: 0.72rem; opacity: 0.45; padding: 4px 2px; }
.share-cal-horse { max-width: 150px; }
.share-book-row label { flex: 1; }

.lesson-filters { display: grid; grid-template-columns: 1.3fr 0.85fr 0.85fr; gap: 8px; margin-bottom: 12px; }
.lesson-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.lesson-stats .stat { border: 1px solid rgba(0,0,0,0.1); border-radius: 10px; padding: 8px 10px; background: rgba(255,255,255,0.5); }
.lesson-stats .stat strong { display: block; font-size: 1.15rem; color: var(--gold, #8f5f05); }
.lesson-stats .stat small { opacity: 0.7; font-size: 0.75rem; }

.lesson-tabs { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(0,0,0,0.12); border-radius: 10px; overflow: hidden; margin-bottom: 10px; background: rgba(255,255,255,0.5); }
.lesson-tabs button { border: 0; border-right: 1px solid rgba(0,0,0,0.1); background: transparent; min-height: 34px; font-weight: 700; cursor: pointer; color: inherit; opacity: 0.65; font-family: inherit; }
.lesson-tabs button:last-child { border-right: 0; }
.lesson-tabs button.active { background: rgba(176,136,48,0.18); opacity: 1; }
.lesson-head-actions { display: flex; align-items: center; gap: 8px; }
.lesson-compact-row { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid rgba(0,0,0,0.1); background: rgba(255,255,255,0.5); border-radius: 10px; padding: 9px 10px; margin-bottom: 8px; }
.lesson-compact-row.cancelled { opacity: 0.6; }
.lesson-datebox { border-right: 1px solid rgba(0,0,0,0.1); min-height: 48px; display: grid; align-content: center; font-weight: 800; color: var(--gold, #8f5f05); }
.lesson-datebox small { font-weight: 600; opacity: 0.7; margin-top: 2px; }
.lesson-compact-main strong { display: block; font-size: 1rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lesson-meta-tags { display: flex; gap: 6px 10px; flex-wrap: wrap; margin-top: 5px; font-size: 0.8rem; opacity: 0.85; }
.lesson-tag { background: rgba(176,136,48,0.14); border: 1px solid rgba(176,136,48,0.3); border-radius: 999px; padding: 1px 8px; }
.family-block { margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(0,0,0,0.1); border-radius: 10px; }
.family-block .form-row { align-items: center; }

.pony-dashboard-card { margin-top: 16px; }
.pony-dashboard-card.portal-page { display: block !important; }

.pony-board { overflow-x: auto; margin-bottom: 10px; }
.pony-row { display: grid; grid-template-columns: 110px repeat(7, minmax(86px, 1fr)); gap: 4px; margin-bottom: 4px; }
.pony-row-head { font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.65; }
.pony-row-head .today { color: var(--gold, #b08830); font-weight: 800; opacity: 1; }
.pony-name { font-weight: 700; align-self: center; font-size: 0.85rem; }
.pony-cell { min-height: 30px; border: 1px solid rgba(0,0,0,0.07); border-radius: 8px; padding: 2px; display: flex; flex-direction: column; gap: 2px; }
.pony-cell.today { border-color: var(--gold, #b08830); }
.pony-chip { position: relative; font-style: normal; display: block; font-size: 0.68rem; background: rgba(61,220,132,0.16); border-radius: 6px; padding: 2px 14px 2px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pony-chip.block { background: rgba(192,57,43,0.14); }
.pony-chip .share-entry-delete { top: 0; right: 1px; font-size: 0.8rem; }
.pony-block-form { flex-wrap: wrap; }
.pony-block-form label { font-size: 0.75rem; }
.pony-usage-row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: 0.85rem; }
.pony-usage-row > span:first-child { flex: 0 0 110px; font-weight: 700; }
.pony-usage-row .control-bar { flex: 1 1 auto; }
.pony-usage-row b { flex: 0 0 auto; }

.my-family-row { display: flex; align-items: flex-end; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.08); flex-wrap: wrap; }
.my-family-row strong { flex: 0 0 120px; align-self: center; }
.my-family-row label { display: flex; flex-direction: column; gap: 3px; font-size: 0.78rem; font-weight: 600; }
.my-family-row input { width: 110px; }

.balance-warning { background: rgba(192,57,43,0.1); border: 1px solid rgba(192,57,43,0.3); color: #8e2b1f; border-radius: 10px; padding: 9px 14px; font-size: 0.9rem; font-weight: 600; margin-bottom: 12px; }
.balance-warning .mini-link { font-weight: 800; }
.price-list { margin: 0 0 14px; border: 1px solid rgba(0,0,0,0.1); border-radius: 10px; padding: 8px 14px; }
.price-row { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,0.07); font-size: 0.9rem; }
.price-row:last-child { border-bottom: 0; }
.price-abo { font-style: normal; font-size: 0.72rem; background: rgba(176,136,48,0.15); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }

/* Layout-Stabilität: Scrollleiste reserviert Platz, kein Links-Rechts-Springen */
html { scrollbar-gutter: stable; }

/* ===================================================================
   DESIGN 2026 — "Papier & Tinte" (Website-Look statt App)
   Additives Overlay: Palette, Typografie, Top-Navigation.
   Rückbau: diesen Block entfernen + Backup-CSS einspielen.
   =================================================================== */

:root[data-theme="creme"] {
  --bg: #faf9f6;
  --panel: #faf9f6;
  --panel-2: #f3f1ea;
  --line: #e6e2d8;
  --line-strong: #14120f;
  --gold: #b08830;
  --gold-soft: #8a6a20;
  --text: #14120f;
  --muted: #857e70;
  --green: #1f6b43;
  --red: #b3492e;
  --card: #ffffff;
  --chip: #ffffff;
  --field: #ffffff;
  --panel-grad: #fdfcf9;
  --pri-grad: #14120f;
  --pri-text: #ffffff;
  --gold-tint: rgba(176, 136, 48, .07);
  --shadow-soft: rgba(20, 18, 15, .06);
}

:root[data-theme="sand"] {
  --bg: #f3ede1;
  --panel: #f3ede1;
  --panel-2: #ebe4d4;
  --line: #ddd5c2;
  --line-strong: #1c170e;
  --gold: #a07a24;
  --gold-soft: #7c5c14;
  --text: #1c170e;
  --muted: #7f7663;
  --green: #1f6b43;
  --red: #a64429;
  --card: #faf6ec;
  --chip: #faf6ec;
  --field: #faf6ec;
  --panel-grad: #f8f4e9;
  --pri-grad: #1c170e;
  --pri-text: #ffffff;
  --gold-tint: rgba(160, 122, 36, .08);
  --shadow-soft: rgba(30, 24, 12, .07);
}

:root[data-theme="nacht"],
:root:not([data-theme]) {
  --bg: #24221c;
  --panel: #24221c;
  --panel-2: #2e2b24;
  --line: #423e34;
  --line-strong: #f0ece1;
  --gold: #d4a94c;
  --gold-soft: #e6c583;
  --text: #f2efe6;
  --muted: #b0a993;
  --green: #5fd095;
  --red: #ff8f73;
  --card: #2b2822;
  --chip: #2b2822;
  --field: #1c1a15;
  --panel-grad: #2a2721;
  --pri-grad: #f2efe6;
  --pri-text: #1b1914;
  --gold-tint: rgba(212, 169, 76, .12);
  --shadow-soft: rgba(0, 0, 0, .28);
}

/* --- Drei weitere Farbwelten: Rot, Blau, Grün --- */
:root[data-theme="rost"] {
  --bg: #fbf5f2;
  --panel: #fbf5f2;
  --panel-2: #f4e8e2;
  --line: #ebd9d1;
  --line-strong: #3a1f16;
  --gold: #b0492e;
  --gold-soft: #8c3720;
  --text: #2c1a14;
  --muted: #8a7169;
  --green: #1f6b43;
  --red: #a33418;
  --card: #ffffff;
  --chip: #ffffff;
  --field: #ffffff;
  --panel-grad: #fdf8f6;
  --pri-grad: #3a1f16;
  --pri-text: #ffffff;
  --gold-tint: rgba(176, 73, 46, .08);
  --shadow-soft: rgba(58, 31, 22, .07);
}

:root[data-theme="see"] {
  --bg: #f4f7fa;
  --panel: #f4f7fa;
  --panel-2: #e7eef4;
  --line: #d5e0ea;
  --line-strong: #14232f;
  --gold: #2a6b96;
  --gold-soft: #1d5375;
  --text: #14232f;
  --muted: #6e7f8c;
  --green: #1f6b56;
  --red: #b3492e;
  --card: #ffffff;
  --chip: #ffffff;
  --field: #ffffff;
  --panel-grad: #f8fbfd;
  --pri-grad: #14232f;
  --pri-text: #ffffff;
  --gold-tint: rgba(42, 107, 150, .08);
  --shadow-soft: rgba(20, 35, 47, .07);
}

:root[data-theme="weide"] {
  --bg: #f4f8f3;
  --panel: #f4f8f3;
  --panel-2: #e6efe4;
  --line: #d5e2d2;
  --line-strong: #172a1c;
  --gold: #3d7a44;
  --gold-soft: #2c5e32;
  --text: #172a1c;
  --muted: #708176;
  --green: #2f7a4c;
  --red: #b3492e;
  --card: #ffffff;
  --chip: #ffffff;
  --field: #ffffff;
  --panel-grad: #f8fbf7;
  --pri-grad: #172a1c;
  --pri-text: #ffffff;
  --gold-tint: rgba(61, 122, 68, .08);
  --shadow-soft: rgba(23, 42, 28, .07);
}

/* --- Typografie --- */
body.portal-body {
  font-family: Inter, system-ui, -apple-system, Arial, sans-serif;
  font-size: 14.5px;
  letter-spacing: 0.005em;
}

.portal-body h1,
.portal-body h2,
.portal-body h3,
.portal-body .metric-card strong,
.portal-body .portal-page-toolbar h2 {
  font-family: Fraunces, Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: 0.002em;
}

.portal-body .panel-headline h2,
.portal-body .portal-page-toolbar h2 {
  color: var(--text);
  font-size: 26px;
}

.portal-body .eyebrow {
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

/* --- Flächen: ruhig, flach, Haarlinien --- */
.portal-body .work-panel,
.portal-body .task-card,
.portal-body .metric-card,
.portal-body .dashboard-card,
.portal-body .mini-list article,
.portal-body .portal-page-toolbar {
  border-radius: 3px;
  box-shadow: none;
}

.portal-body .portal-page-toolbar {
  border: 0;
  background: transparent;
  padding: 6px 2px 2px;
}

.portal-body .work-panel {
  padding: 20px;
}

/* --- Buttons --- */
.portal-body button,
.portal-body .secondary-action,
.portal-body .portal-nav a {
  border-radius: 3px;
}

.portal-body .primary-action {
  border: 1px solid var(--pri-grad);
  background: var(--pri-grad);
  color: var(--pri-text);
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: none;
}

.portal-body .primary-action:hover {
  filter: none;
  opacity: .85;
}

/* --- Top-Navigation statt Seitenleiste --- */
.portal-body .portal-app {
  display: block;
}

.portal-body .portal-subnav.portal-sidebar {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 2px;
  border: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  padding: 7px 0;
  margin-bottom: 16px;
}

.portal-body .portal-sidebar .nav-head {
  display: none;
}

.portal-body .portal-sidebar .nav-group:not([hidden]) {
  display: contents;
}

.portal-body .portal-sidebar .nav-group[hidden] {
  display: none;
}

.portal-body .portal-sidebar .nav-title {
  display: none;
}

.portal-body .portal-sidebar .nav-ic {
  display: none;
}

.portal-body .portal-sidebar button:not(.nav-toggle),
.portal-body .portal-sidebar a {
  width: auto;
  display: inline-block;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 8px 13px;
  font-size: 13.5px;
  font-weight: 500;
  border-radius: 5px;
  text-align: left;
}

.portal-body .portal-sidebar button:not(.nav-toggle):hover,
.portal-body .portal-sidebar a:hover {
  color: var(--text);
  background: var(--panel-2);
}

.portal-body .portal-sidebar button.active,
.portal-body .portal-sidebar a.active {
  background: var(--panel-2);
  color: var(--text);
  font-weight: 600;
}

/* Trennpunkt zwischen den Nav-Gruppen */
.portal-body .portal-sidebar .nav-group + .nav-group::before {
  content: '·';
  color: var(--line);
  padding: 0 4px;
}

/* --- Kopfzeile --- */
.portal-body .portal-header {
  min-height: 62px;
  margin-bottom: 4px;
}

.portal-body .view-switch,
.portal-body .theme-switch {
  border-radius: 999px;
}

.portal-body .view-switch button {
  border-radius: 999px;
}

/* --- Felder --- */
.portal-body input,
.portal-body select,
.portal-body textarea {
  border-radius: 3px;
}

/* Mobile: Nav wieder scrollbar in einer Zeile */
@media (max-width: 860px) {
  .portal-body .portal-subnav.portal-sidebar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .portal-body .portal-sidebar button:not(.nav-toggle),
  .portal-body .portal-sidebar a {
    white-space: nowrap;
  }
}

/* Tabs Arbeitskalender / Weidepflege / Schichtplan */
.work-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
  padding-bottom: 7px;
}

.work-tabs a {
  color: var(--muted);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
  padding: 7px 13px;
  border-radius: 5px;
}

.work-tabs a:hover {
  color: var(--text);
  background: var(--panel-2);
}

.work-tabs a.active {
  background: var(--panel-2);
  color: var(--text);
  font-weight: 600;
}

/* Design 2026: Schnellzugriff + Karten-Überschriften */
.portal-body .pensioner-quick-menu button,
.portal-body .pensioner-quick-menu a {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 3px;
  font-weight: 600;
  color: var(--text);
}

.portal-body .pensioner-quick-menu button:hover,
.portal-body .pensioner-quick-menu a:hover {
  border-color: var(--line-strong);
}

.portal-body .dashboard-card h3,
.portal-body .metric-card span {
  color: var(--text);
}

.portal-body .dashboard-card h3 {
  font-size: 17px;
}

.portal-body .metric-card span {
  color: var(--muted);
}

/* Mobil: obere Nav aus, untere Tab-Bar übernimmt (wie zuvor) */
@media (max-width: 760px) {
  .portal-body .portal-subnav.portal-sidebar {
    display: none;
  }
}

/* Design 2026: ruhiger Papier-Hintergrund statt Gold-Verlauf */
body.portal-body {
  background: var(--bg);
}

/* ===== Design 2026, Stufe 2: echte Entwurfs-Struktur ===== */

/* Schriftzug statt Logo-Kachel */
.portal-wordmark {
  font-family: Fraunces, Georgia, serif;
  font-size: 20px;
  color: var(--text);
  text-decoration: none;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.portal-wordmark span {
  color: var(--muted);
  font-size: 16px;
}

/* Begrüßung im Dashboard */
.dash-greeting {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 2px 22px;
}

.dash-greeting h1 {
  font-family: Fraunces, Georgia, serif;
  color: var(--text);
  font-weight: 300;
  font-size: 36px;
  line-height: 1.1;
  margin: 0;
}

.dash-greeting p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13.5px;
}

/* Werkzeugleiste auf dem Dashboard weg (Begrüßung übernimmt) */
.portal-body[data-portal-page="dashboard"] .portal-page-toolbar {
  display: none;
}

/* Schnellzugriff-Kacheln weg - die Top-Navigation übernimmt */
.pensioner-menu-card {
  display: none;
}

/* Pony-Kalender-Navpunkt nur für Reitbeteiligungen */
#navShares {
  display: none;
}

.portal-body[data-role="share"] #navShares {
  display: inline-flex;
}

/* Karten-Überschriften wie im Entwurf: kleine Kapitälchen mit Linie */
.portal-body .dashboard-card h3,
.portal-body .ranch-calendar-head h3 {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 10px;
}

/* Schwarzes Brett mit Gold-Kante wie im Entwurf */
#announcementCard,
#notificationCard,
.control-pending {
  border-left: 3px solid var(--gold);
}

/* Kennzahlen wie im Entwurf: Zahl gross in Serife */
.portal-body .portal-metrics .metric-card strong {
  font-size: 26px;
  font-weight: 400;
}

/* Kontochip dezenter */
.portal-body .account-chip {
  border: 0;
  background: transparent;
  font-weight: 600;
}

/* Dashboard-Spalten: Pferde + Guthaben wie im Entwurf */
.dash-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 10px;
  margin-bottom: 10px;
}

.portal-body[data-view="team"] .dash-cols {
  display: none;
}

.dash-cols .dashboard-card {
  padding: 16px 18px;
}

.horse-teasers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.horse-teaser {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--card);
  padding: 0 0 12px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  display: grid;
  gap: 3px;
  font: inherit;
  color: var(--text);
}

.horse-teaser .ht-photo {
  height: 110px;
  background: var(--panel-2);
  display: grid;
  place-items: center;
  margin-bottom: 8px;
}

.horse-teaser .ht-photo img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}

.horse-teaser .ht-photo i {
  font-style: normal;
  font-size: 26px;
  color: var(--muted);
}

.horse-teaser strong {
  font-family: Fraunces, Georgia, serif;
  font-weight: 400;
  font-size: 17px;
  padding: 0 12px;
}

.horse-teaser small {
  color: var(--muted);
  padding: 0 12px;
}

.balance-aside {
  display: grid;
  gap: 10px;
  align-content: start;
}

.balance-aside .balance-big {
  font-family: Fraunces, Georgia, serif;
  font-size: 38px;
  font-weight: 300;
  line-height: 1;
  padding: 4px 0 6px;
}

@media (max-width: 900px) {
  .dash-cols {
    grid-template-columns: minmax(0, 1fr);
  }

  .horse-teasers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Diese-Woche-Liste (Entwurfs-Stil) */
.week-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.week-cal-link {
  border: 0;
  background: none;
  color: var(--gold);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 0;
}

.week-cal-link:hover {
  color: var(--gold-soft);
}

.week-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.week-row:last-child {
  border-bottom: 0;
}

.week-when b {
  font-family: Fraunces, Georgia, serif;
  font-weight: 400;
  font-size: 18px;
  display: block;
}

.week-when small {
  color: var(--muted);
  font-size: 12px;
}

.week-main strong {
  font-size: 14.5px;
  font-weight: 600;
}

.week-meta {
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
}

.week-link {
  border: 0;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--gold);
  padding: 0 0 3px;
  cursor: pointer;
  white-space: nowrap;
}

.week-link:hover {
  color: var(--gold-soft);
}

.week-booked {
  color: var(--muted);
  font-style: normal;
  font-size: 12.5px;
}

/* Kursbild neben dem Anmelden-Knopf */
.lesson-row .lesson-actions {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 132px;
}

.lesson-row .lesson-thumb {
  width: 132px;
  height: 88px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 3px;
  display: block;
}

.lesson-row .lesson-actions button {
  width: 100%;
}

@media (max-width: 700px) {
  .lesson-row .lesson-actions {
    flex-direction: row;
    align-items: center;
    min-width: 0;
  }

  .lesson-row .lesson-thumb {
    width: 92px;
    height: 62px;
  }

  .lesson-row .lesson-actions button {
    width: auto;
  }
}

/* Aufklappbare Kurskarten (Pensioner-Ansicht) */
.lesson-card {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--card);
  margin-bottom: 10px;
  overflow: hidden;
}

.lesson-card.cancelled {
  opacity: .6;
}

.lesson-head {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 132px auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
}

.lesson-head[data-lesson-toggle] {
  cursor: pointer;
}

.lesson-head[data-lesson-toggle]:hover {
  background: var(--panel-2);
}

.lesson-date b {
  display: block;
  font-family: Fraunces, Georgia, serif;
  font-weight: 400;
  font-size: 19px;
  line-height: 1.2;
}

.lesson-date small {
  color: var(--muted);
  font-size: 12.5px;
}

.lesson-main strong {
  display: block;
  font-size: 15.5px;
  margin-bottom: 3px;
}

.lesson-meta {
  color: var(--muted);
  font-size: 13.5px;
}

.lesson-card .lesson-thumb {
  width: 132px;
  height: 84px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--line);
  display: block;
}

.lesson-thumb-leer {
  background: var(--panel-2);
}

.lesson-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.lesson-buttons em {
  color: var(--green);
  font-style: normal;
  font-weight: 700;
}

.lesson-pfeil {
  color: var(--muted);
  font-size: 13px;
  transition: transform .18s;
}

.lesson-card.offen .lesson-pfeil {
  transform: rotate(180deg);
}

.lesson-detail {
  border-top: 1px solid var(--line);
  padding: 16px 18px 18px;
}

.lesson-detail p {
  margin: 0 0 12px;
  line-height: 1.7;
  color: var(--text);
}

.lesson-detail h4 {
  margin: 4px 0 8px;
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

.lesson-addonlist {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  gap: 5px;
  max-width: 460px;
}

.lesson-addonlist li {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 5px;
  font-size: 14px;
}

.lesson-notiz {
  color: var(--muted);
  font-size: 13.5px;
}

.lesson-bilder {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.lesson-bilder img {
  width: 128px;
  height: 86px;
  object-fit: cover;
  border: 1px solid var(--line);
  border-radius: 3px;
}

@media (max-width: 720px) {
  .lesson-head {
    grid-template-columns: 72px minmax(0, 1fr) 88px;
    gap: 12px;
    padding: 12px;
  }

  .lesson-card .lesson-thumb {
    width: 88px;
    height: 60px;
  }

  .lesson-buttons {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
}

/* Beteiligungen: Aktionen nebeneinander */
.share-actions {
  display: flex;
  gap: 10px;
  white-space: nowrap;
}

/* ===== Stalltablet: Personenauswahl ===== */
.tablet-lock {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg);
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: auto;
}

.tablet-lock[hidden] {
  display: none;
}

.tablet-lock-inner {
  width: min(1000px, 100%);
  text-align: center;
}

.tablet-lock h1 {
  font-family: Fraunces, Georgia, serif;
  font-weight: 300;
  font-size: clamp(28px, 4vw, 44px);
  margin: 8px 0 6px;
}

.tablet-hint {
  color: var(--muted);
  margin-bottom: 30px;
}

.tablet-staff {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-bottom: 34px;
}

.tablet-staff button {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card);
  padding: 20px 14px 18px;
  cursor: pointer;
  display: grid;
  gap: 12px;
  justify-items: center;
  font: inherit;
  color: var(--text);
  transition: border-color .15s, transform .12s;
}

.tablet-staff button:hover,
.tablet-staff button:focus-visible {
  border-color: var(--line-strong);
  transform: translateY(-2px);
}

.tablet-staff .tablet-avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--panel-2);
  display: grid;
  place-items: center;
  font-family: Fraunces, Georgia, serif;
  font-size: 30px;
  color: var(--muted);
}

.tablet-staff strong {
  font-size: 17px;
  font-weight: 600;
}

.tablet-staff small {
  color: var(--muted);
  font-size: 12.5px;
}

.tablet-active {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--gold-tint);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  cursor: pointer;
  white-space: nowrap;
}

.tablet-active[hidden] {
  display: none;
}

/* Im Tablet-Modus: größere Klickflächen */
.portal-body[data-view="tablet"] .portal-sidebar button:not(.nav-toggle),
.portal-body[data-view="tablet"] .portal-sidebar a {
  padding: 12px 16px;
  font-size: 15px;
}

.portal-body[data-view="tablet"] .task-card button,
.portal-body[data-view="tablet"] .secondary-action,
.portal-body[data-view="tablet"] .primary-action {
  min-height: 44px;
}

.task-done-by {
  color: var(--green);
  font-size: 12.5px;
  font-weight: 600;
}

/* Stalltablet: keine privaten Daten auf dem offenen Geraet */
.portal-body[data-view="tablet"] .dash-cols,
.portal-body[data-view="tablet"] #balanceWarning,
.portal-body[data-view="tablet"] .pensioner-dashboard,
.portal-body[data-view="tablet"] .metric-card:not([data-team-only]) {
  display: none !important;
}

/* Unterrichtskalender: Wochenansicht */
.lesson-cal {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.lesson-cal-day {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--card);
  padding: 10px 8px;
  min-height: 120px;
  display: grid;
  gap: 6px;
  align-content: start;
}

.lesson-cal-day.heute {
  border-color: var(--line-strong);
}

.lesson-cal-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 6px;
  margin-bottom: 2px;
}

.lesson-cal-head b {
  font-size: 12px;
  font-weight: 600;
}

.lesson-cal-head small {
  color: var(--muted);
  font-size: 11.5px;
}

.lesson-cal-entry {
  border: 0;
  border-left: 3px solid var(--gold);
  background: var(--panel-2);
  border-radius: 2px;
  padding: 8px 9px;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 2px;
  font: inherit;
  color: var(--text);
}

.lesson-cal-entry:hover {
  background: var(--gold-tint);
}

.lesson-cal-entry b {
  font-size: 12px;
  color: var(--gold-soft);
}

.lesson-cal-entry strong {
  font-size: 13.5px;
  line-height: 1.25;
}

.lesson-cal-entry small {
  color: var(--muted);
  font-size: 11.5px;
}

.lesson-cal-leer {
  color: var(--line-strong);
  opacity: .35;
  text-align: center;
  margin: 12px 0 0;
}

@media (max-width: 900px) {
  .lesson-cal {
    grid-template-columns: 1fr;
  }

  .lesson-cal-day {
    min-height: 0;
  }
}

/* Verwaltung: Rechte je Mitarbeiter */
.access-list {
  display: grid;
  gap: 14px;
}

.access-card {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--card);
  padding: 14px 16px;
  display: grid;
  gap: 10px;
}

.access-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.access-head strong {
  font-size: 15px;
}

.access-head .secondary-action {
  margin-left: auto;
  padding: 4px 10px;
  font-size: 12px;
}

.access-head .secondary-action + .secondary-action {
  margin-left: 0;
}

.access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px 14px;
}

.access-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  padding: 3px 0;
  cursor: pointer;
}

.access-check input {
  width: auto;
  margin: 0;
}

.access-foot {
  display: flex;
  align-items: center;
  gap: 12px;
}

.access-status {
  color: var(--muted);
  font-size: 12.5px;
}

/* Mitverwalter und Kinder-Zugang */
.caretaker-block,
.family-login {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel-2);
  padding: 12px 14px;
  display: grid;
  gap: 8px;
}

.caretaker-picker {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.caretaker-picker select {
  flex: 1 1 200px;
  min-width: 0;
}

.small-note {
  font-size: 12.5px;
  line-height: 1.45;
  margin: 0;
}

.family-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.family-login-tag {
  font-size: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
}

/* ===================== Handy: Kopfzeile und Menü "Mehr" ===================== */
.mobile-sheet {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: flex-end;
}

.mobile-sheet[hidden] {
  display: none;
}

.mobile-sheet-back {
  position: absolute;
  inset: 0;
  background: rgba(12, 10, 7, .45);
}

.mobile-sheet-card {
  position: relative;
  width: 100%;
  max-height: 78vh;
  overflow: auto;
  background: var(--panel);
  border-top: 1px solid var(--line-strong);
  border-radius: 12px 12px 0 0;
  padding: 14px 14px calc(env(safe-area-inset-bottom, 0px) + 18px);
  box-shadow: 0 -8px 28px rgba(0, 0, 0, .22);
}

.mobile-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.mobile-sheet-head strong {
  font-family: Fraunces, Georgia, serif;
  font-size: 19px;
  font-weight: 400;
}

.mobile-sheet-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.mobile-sheet-list button {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  padding: 12px 12px;
  min-height: 48px;
  cursor: pointer;
}

.mobile-sheet-list button.active {
  border-color: var(--gold);
  color: var(--gold-soft);
  font-weight: 600;
}

.mobile-sheet-list i {
  font-style: normal;
  font-size: 16px;
  opacity: .7;
}

body.sheet-offen {
  overflow: hidden;
}

@media (max-width: 760px) {
  /* Kopfzeile: nichts darf abgeschnitten werden */
  .portal-header {
    flex-wrap: wrap;
    gap: 8px;
    row-gap: 10px;
  }

  .portal-wordmark {
    font-size: 20px;
    flex: 1 1 100%;
  }

  .portal-nav {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 8px;
    justify-content: flex-start;
  }

  /* Der Ansichts-Umschalter bekommt eine eigene Zeile, sonst wird "Tablet" abgeschnitten */
  .view-switch {
    flex: 1 1 100%;
    overflow: visible;
  }

  .view-switch button {
    flex: 1;
    white-space: nowrap;
    min-height: 40px;
  }

  .theme-switch {
    flex: 0 0 auto;
  }

  .test-user-switch {
    flex: 1 1 160px;
    min-width: 0;
  }

  .test-user-switch select {
    width: 100%;
    min-width: 0;
  }

  #logoutButton {
    flex: 0 0 auto;
    min-height: 40px;
  }

  .account-chip {
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Finger statt Maus: alles Antippbare mindestens 44 px hoch */
  .primary-action,
  .secondary-action,
  .portal-nav a,
  .mini-link,
  select,
  input:not([type="checkbox"]):not([type="radio"]),
  textarea {
    min-height: 44px;
  }

  .mobile-sheet-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===================== Handy: Dashboard und Listen ===================== */
@media (max-width: 760px) {
  /* Begrüßung: Titel kleiner, Knopf darunter über die ganze Breite */
  .dash-greeting {
    display: grid;
    gap: 12px;
    padding: 6px 2px 16px;
  }

  .dash-greeting h1 {
    font-size: 27px;
  }

  .dash-greeting .primary-action {
    width: 100%;
  }

  /* Kennzahlen: zwei nebeneinander statt vier gequetscht */
  .portal-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    border: 0;
    background: none;
    overflow: visible;
  }

  .portal-metrics .metric-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    padding: 12px 13px;
  }

  .portal-metrics .metric-card strong {
    font-size: 23px;
  }

  .portal-metrics .metric-card span {
    font-size: 12.5px;
  }

  /* Panels und Karten: weniger Rand, mehr Platz für Text */
  .work-panel,
  .dashboard-card,
  .portal-hero {
    padding: 14px 13px;
  }

  .panel-headline {
    flex-wrap: wrap;
    gap: 8px;
  }

  .panel-headline h2 {
    font-size: 22px;
  }

  /* Reiterzeilen wischbar statt umgebrochen */
  .work-tabs,
  .admin-tabs,
  .lesson-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .work-tabs::-webkit-scrollbar,
  .admin-tabs::-webkit-scrollbar,
  .lesson-tabs::-webkit-scrollbar {
    display: none;
  }

  .work-tabs a,
  .admin-tabs button,
  .lesson-tabs button {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  /* Formularzeilen untereinander */
  .form-row,
  .compact-controls,
  .member-picker,
  .admin-layout,
  .admin-layout.two {
    grid-template-columns: minmax(0, 1fr);
  }

  .form-row {
    display: grid;
    gap: 10px;
  }

  /* Breite Tabellen dürfen scrollen, die Seite nicht */
  .table-wrap,
  .data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Nichts darf seitlich aus dem Bild laufen */
  .portal-shell {
    overflow-x: hidden;
  }

  img,
  video,
  canvas {
    max-width: 100%;
    height: auto;
  }
}

/* ===================== Handy: Wochenliste und Ponykalender ===================== */
@media (max-width: 760px) {
  /* "Diese Woche": Tag oben, Text darunter, Knopf rechts unten */
  .week-row {
    grid-template-columns: 74px minmax(0, 1fr);
    gap: 6px 12px;
    align-items: start;
  }

  .week-row > :nth-child(3) {
    grid-column: 2;
    justify-self: start;
  }

  /* Ponykalender: waagerecht wischbar statt aus dem Bild laufen */
  .pony-board {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 6px;
  }

  .pony-row {
    min-width: 640px;
  }

  /* Wochenansicht des Unterrichts: ein Tag pro Zeile (schon gesetzt) */
  .lesson-cal-day {
    min-height: 0;
  }
}

/* ===================== Handy: Tippziele und Wochenbretter ===================== */
@media (max-width: 760px) {
  /* Wochenbrett (Arbeitskalender, Schichtplan): ein Tag pro Zeile */
  .team-week-board,
  .shift-week-board {
    grid-template-columns: minmax(0, 1fr);
  }

  .week-day-column,
  .shift-day-column {
    min-width: 0;
  }

  .week-day-head {
    text-align: left;
    min-height: 44px;
  }

  /* Schalter und kleine Links mit dem Finger treffbar machen */
  .control-toggle {
    min-height: 40px;
    min-width: 62px;
    padding: 8px 14px;
    font-size: 13px;
  }

  .week-cal-link,
  .week-link,
  .mini-link {
    display: inline-block;
    padding: 10px 2px;
    min-height: 40px;
  }

  .work-tabs a,
  .admin-tabs button,
  .lesson-tabs button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* Karten in Listen dürfen den Text umbrechen statt zu schieben */
  .task-top,
  .booking-row,
  .shift-card,
  .subscription-item {
    flex-wrap: wrap;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===================== Handy: Kurse und Filter ===================== */
@media (max-width: 760px) {
  .lesson-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .lesson-filters input,
  .lesson-filters select {
    width: 100%;
    min-width: 0;
  }

  .lesson-head-actions {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
  }

  .lesson-compact-row {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 8px 10px;
  }

  .lesson-compact-row > :nth-child(3) {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .lesson-compact-main strong {
    white-space: normal;
  }

  /* Dialoge füllen das Handy statt zu überstehen */
  dialog,
  .addon-dialog {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: 88vh;
    margin: auto;
  }
}

@media (max-width: 760px) {
  /* Auch in der Privat-Ansicht zwei Kennzahlen nebeneinander */
  .portal-body[data-view="privat"] .portal-metrics,
  .portal-body[data-role="pensioner"] .portal-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===================== Handy: Stalltablet-Auswahl ===================== */
@media (max-width: 760px) {
  .tablet-lock {
    padding: 16px 12px;
  }

  .tablet-staff {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .tablet-staff button {
    padding: 14px 8px 12px;
    gap: 8px;
  }

  .tablet-staff .tablet-avatar {
    width: 60px;
    height: 60px;
    font-size: 21px;
  }

  .tablet-staff strong {
    font-size: 14px;
    line-height: 1.2;
  }

  .tablet-lock h1 {
    font-size: 24px;
  }

  .tablet-hint {
    margin-bottom: 18px;
    font-size: 13.5px;
  }
}

@media (max-width: 760px) {
  /* Farbwelt-Punkte und Kurznavigation gut treffbar */
  .theme-switch button {
    width: 30px;
    height: 30px;
  }

  .mobile-tabbar button,
  .mobile-tabbar a {
    min-height: 48px;
    padding: 6px 0;
  }

  .mobile-tabbar i {
    font-size: 19px;
  }
}

/* Leere Statusfelder zeigen keinen leeren Rahmen */
.panel-headline > span:empty,
#guestBoxState:empty {
  display: none;
}

@media (max-width: 760px) {
  /* Verwaltungs-Reiter: zwei Spalten statt acht volle Zeilen */
  .admin-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
  }

  .admin-tabs button {
    min-height: 44px;
    font-size: 13.5px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }
}

@media (max-width: 760px) {
  /* Kalender-Steuerung: Knöpfe teilen sich die Zeile, nichts läuft raus */
  .rental-calendar-controls,
  .week-nav,
  .cal-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .rental-calendar-controls > *,
  .week-nav > *,
  .cal-controls > * {
    flex: 1 1 auto;
    min-width: 0;
  }

  .rental-calendar-controls button,
  .week-nav button,
  .cal-controls button {
    padding: 10px 10px;
    font-size: 13px;
    white-space: nowrap;
  }
}

/* Quer gehaltenes Handy / kleines Tablet: Navigation wischbar, ohne dass sich Wörter überlappen */
@media (max-width: 900px) {
  .portal-body .portal-subnav.portal-sidebar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px;
  }

  .portal-body .portal-subnav.portal-sidebar::-webkit-scrollbar {
    display: none;
  }

  .portal-body .portal-sidebar .nav-group {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
  }

  .portal-body .portal-sidebar button:not(.nav-toggle),
  .portal-body .portal-sidebar a {
    flex: 0 0 auto;
    white-space: nowrap;
    min-width: max-content;
    padding: 9px 12px;
  }

  .portal-body .portal-sidebar .nav-head,
  .portal-body .portal-sidebar .nav-title {
    display: none;
  }
}

/* Systemfelder passend zur Farbwelt einfärben */
:root[data-theme="nacht"],
:root:not([data-theme]) { color-scheme: dark; }
:root[data-theme="rost"],
:root[data-theme="see"],
:root[data-theme="weide"] { color-scheme: light; }

/* ===================== Farbwelt-Auswahl unter "Meine Daten" ===================== */
.theme-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.theme-card {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  padding: 10px;
  cursor: pointer;
  display: grid;
  gap: 8px;
  text-align: left;
}

.theme-card:hover {
  border-color: var(--line-strong);
}

.theme-card.active {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--gold);
}

.theme-card .theme-swatch {
  height: 42px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .12);
  display: flex;
  overflow: hidden;
}

.theme-card .theme-swatch i {
  flex: 1;
}

.theme-card strong {
  font-size: 13.5px;
  font-weight: 600;
}

.theme-card small {
  color: var(--muted);
  font-size: 12px;
}

/* ===================== Handy hochkant: Kalender zeigen erst nur heute ===================== */
.kalender-umschalter {
  display: none;
}

@media (max-width: 760px) and (orientation: portrait) {
  .kalender-umschalter {
    display: flex;
    gap: 6px;
    margin: 0 0 10px;
  }

  .kalender-umschalter button {
    flex: 1;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: var(--card);
    color: var(--muted);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
  }

  .kalender-umschalter button.active {
    border-color: var(--gold);
    color: var(--gold-soft);
    background: var(--gold-tint);
  }

  /* Standard: nur der heutige Tag, bis der Nutzer auf "ganze Woche" stellt */
  body.kalender-heute .week-day-column:not(.today),
  body.kalender-heute .shift-day-column:not(.today),
  body.kalender-heute .lesson-cal-day:not(.heute) {
    display: none;
  }

  body.kalender-heute .lesson-cal,
  body.kalender-heute .team-week-board,
  body.kalender-heute .shift-week-board {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  /* Kalendersteuerung: Beschriftung eine eigene Zeile, Knöpfe teilen sich die andere */
  .rental-calendar-controls > b,
  .rental-calendar-controls > span,
  .week-nav > b,
  .week-nav > span {
    flex: 1 1 100%;
    order: -1;
    text-align: center;
    font-size: 14px;
  }

  .rental-calendar-controls > button,
  .week-nav > button {
    flex: 1 1 0;
  }
}

/* Brief-Zeichen ist anklickbar */
button.unread-badge {
  border: 0;
  font-family: inherit;
  cursor: pointer;
  min-height: 26px;
  padding: 3px 10px;
}

button.unread-badge:hover,
button.unread-badge:focus-visible {
  filter: brightness(1.12);
}

@media (max-width: 760px) {
  button.unread-badge {
    min-height: 34px;
    padding: 6px 12px;
    font-size: 12px;
  }
}

/* ===================== Aufgaben: erledigt grün, Problem rot ===================== */
.utility-actions .status-knopf,
.week-status-button {
  border-width: 1.5px;
  font-weight: 900;
  transition: background .12s, color .12s, border-color .12s;
}

.utility-actions .status-knopf.done,
.week-status-button.done {
  color: var(--green);
  border-color: var(--green);
}

.utility-actions .status-knopf.problem,
.week-status-button.problem {
  color: var(--red);
  border-color: var(--red);
}

/* Der gesetzte Zustand ist ausgefüllt - so sieht man sofort, was gilt */
.utility-actions .status-knopf.done.aktiv,
.week-status-button.done.aktiv {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.utility-actions .status-knopf.problem.aktiv,
.week-status-button.problem.aktiv {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.utility-actions .status-knopf:hover,
.week-status-button:hover {
  filter: brightness(1.06);
}

/* Zeile der erledigten Aufgabe ruhig zurücknehmen */
.utility-row.status-done > div:first-child span {
  text-decoration: line-through;
  opacity: .7;
}

.utility-row.status-problem {
  border-left: 3px solid var(--red);
  padding-left: 7px;
}

.utility-row.status-done {
  border-left: 3px solid var(--green);
  padding-left: 7px;
}

@media (max-width: 760px) {
  .utility-actions .status-knopf,
  .week-status-button {
    min-height: 40px;
    min-width: 44px;
    font-size: 16px;
  }
}

/* ===================== Unterrichtskalender: Reithallen ===================== */
.cal-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.cal-filter-knopf {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 13px;
  min-height: 36px;
  cursor: pointer;
}

.cal-filter-knopf:hover {
  border-color: var(--line-strong);
}

.cal-filter-knopf.active {
  border-color: var(--gold);
  background: var(--gold-tint);
  color: var(--gold-soft);
}

/* Die beiden Hallen bekommen eine eigene Farbe, damit man sie auseinanderhält */
.lesson-cal-entry.halle-1 { border-left-color: #2a6b96; }
.lesson-cal-entry.halle-2 { border-left-color: #3d7a44; }
.lesson-cal-entry.halle-x { border-left-color: var(--gold); }

.lesson-cal-entry .cal-ort {
  color: var(--text);
  font-weight: 700;
}

.lesson-tag.arena-tag {
  background: var(--panel-2);
  border-color: var(--line-strong);
}

.arena-hinweis {
  margin: 0;
  align-self: center;
  font-size: 12.5px;
  color: var(--red);
  font-weight: 600;
}

.arena-hinweis[hidden] { display: none; }

@media (max-width: 760px) {
  .cal-filter-knopf { min-height: 40px; }
}

/* ===================== Freie Plätze anbieten ===================== */
.stall-offer-form {
  border-top: 1px solid var(--line);
  padding: 14px 14px 16px;
  display: grid;
  gap: 10px;
  background: var(--panel-2);
}

.stall-offer-felder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 10px;
  align-items: end;
}

.stall-offer-hinweis {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
}

@media (max-width: 760px) {
  .stall-offer-felder {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ===================== Verträge ===================== */
.contract-list { display: grid; gap: 14px; }

.contract-card {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: 4px;
  background: var(--card);
  padding: 16px 18px;
  display: grid;
  gap: 12px;
}

.contract-card.offen { border-left-color: var(--gold); }
.contract-card.gueltig { border-left-color: var(--green); }
.contract-card.gekuendigt { border-left-color: var(--red); }
.contract-card.beendet { border-left-color: var(--line-strong); opacity: .7; }

.contract-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.contract-card-head strong { display: block; font-size: 16px; }
.contract-card-head small { color: var(--muted); font-size: 12.5px; }

.contract-status-pill {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 11px;
  white-space: nowrap;
  border: 1px solid var(--line-strong);
  color: var(--muted);
}
.contract-status-pill.offen { border-color: var(--gold); color: var(--gold-soft); background: var(--gold-tint); }
.contract-status-pill.gueltig { border-color: var(--green); color: var(--green); }
.contract-status-pill.gekuendigt { border-color: var(--red); color: var(--red); }

.contract-daten {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  margin: 0;
}
.contract-daten div { display: grid; }
.contract-daten dt {
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.contract-daten dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.contract-aktionen { display: flex; gap: 10px; flex-wrap: wrap; }

.contract-hinweis { margin: 0; font-size: 13px; color: var(--muted); }

/* Dialog */
.contract-dialog {
  width: min(760px, 94vw);
  max-height: 90vh;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--panel);
  color: var(--text);
  padding: 0;
  overflow: hidden;
}

.contract-dialog::backdrop { background: rgba(12, 10, 7, .5); }

.contract-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 22px 14px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 2;
}

.contract-dialog-head h2 { margin: 0; }

.contract-text {
  max-height: 42vh;
  overflow-y: auto;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.6;
}

.contract-text h2 { font-size: 19px; margin: 0 0 12px; }
.contract-text h3 { font-size: 15.5px; margin: 18px 0 5px; }
.contract-text h4 { font-size: 14px; margin: 13px 0 4px; }
.contract-text p { margin: 0 0 9px; }
.contract-text ul { margin: 0 0 10px; padding-left: 20px; }
.contract-text li { margin-bottom: 3px; }
.contract-text hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

.contract-sign { padding: 18px 22px 22px; display: grid; gap: 12px; overflow-y: auto; max-height: 40vh; }
.contract-sign[hidden] { display: none; }

.contract-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }

.contract-widerruf { font-size: 13px; color: var(--muted); background: var(--panel-2); border-radius: 3px; padding: 12px 14px; }
.contract-widerruf p { margin: 0; }

.contract-status { margin: 0; font-size: 13px; color: var(--red); font-weight: 600; min-height: 18px; }

@media (max-width: 760px) {
  .contract-dialog { width: calc(100vw - 16px); max-height: 92vh; }
  .contract-text { max-height: 38vh; }
  .contract-fields { grid-template-columns: minmax(0, 1fr); }
  .contract-aktionen .primary-action,
  .contract-aktionen .secondary-action { flex: 1 1 100%; text-align: center; }
}

/* SEPA */
.sepa-stand {
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 3px;
  background: var(--card);
  padding: 12px 14px;
  display: grid;
  gap: 3px;
  margin-bottom: 14px;
  font-size: 13.5px;
}
.sepa-stand b { font-size: 14.5px; }
.sepa-stand span { color: var(--muted); }

.sepa-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.sepa-tabelle th, .sepa-tabelle td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.sepa-tabelle thead th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.sepa-tabelle .zahl, .sepa-tabelle th.zahl { text-align: right; white-space: nowrap; }
.sepa-tabelle tfoot td { border-bottom: 0; border-top: 1px solid var(--line-strong); }
.sepa-tabelle tr.sepa-fehlt { opacity: .55; }
.sepa-tabelle tr.sepa-fehlt b { color: var(--red); }

.contract-card.papier { border-left-color: var(--muted); }
.contract-status-pill.papier { border-color: var(--muted); color: var(--muted); }

/* Zahlungsweise für Dienstleistungen */
.zahlweise { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 16px; }
.zahlweise[hidden] { display: none; }

.zahlweise-wahl { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.zahlweise-karte {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card);
  padding: 13px 14px;
  cursor: pointer;
}

.zahlweise-karte:has(input:checked) { border-color: var(--gold); background: var(--gold-tint); }
.zahlweise-karte.gesperrt { opacity: .5; cursor: not-allowed; }
.zahlweise-karte input { width: auto; margin: 3px 0 0; }
.zahlweise-karte b { display: block; font-size: 14.5px; margin-bottom: 3px; }
.zahlweise-karte small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }

.admin-zahlweise { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.admin-zahlweise-zeile { display: grid; gap: 4px; font-size: 13px; }
.admin-zahlweise-zeile > span { color: var(--muted); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }
.admin-zahlweise-zeile select { width: 100%; }
.admin-zahlweise-zeile small { color: var(--muted); font-size: 12px; }

/* ===================== Aufklappbare Abschnitte ===================== */
.klapp {
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--card);
  margin-bottom: 8px;
}

.klapp[hidden] { display: none; }

.klapp > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 600;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  user-select: none;
}

.klapp > summary::-webkit-details-marker { display: none; }

.klapp > summary::before {
  content: "›";
  font-size: 17px;
  line-height: 1;
  color: var(--gold);
  transition: transform .15s;
  width: 12px;
  flex: 0 0 12px;
}

.klapp[open] > summary::before { transform: rotate(90deg); }

.klapp > summary:hover { background: var(--panel-2); }

.klapp[open] > summary {
  border-bottom: 1px solid var(--line);
  background: var(--panel-2);
}

.klapp-zahl {
  margin-left: auto;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--gold-soft);
  background: var(--gold-tint);
  border-radius: 999px;
  padding: 2px 9px;
  min-width: 24px;
  text-align: center;
}

.klapp-zahl:empty { display: none; }

.klapp-inhalt {
  padding: 14px;
  display: grid;
  gap: 12px;
}

.klapp-inhalt > .family-block,
.klapp-inhalt > .admin-horse-manager {
  border: 0;
  padding: 0;
  margin: 0;
}

/* Verträge in der Mitgliederansicht */
.mitglied-vertrag {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: 3px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.mitglied-vertrag.gueltig { border-left-color: var(--green); }
.mitglied-vertrag.offen { border-left-color: var(--gold); }
.mitglied-vertrag.gekuendigt { border-left-color: var(--red); }
.mitglied-vertrag.papier { border-left-color: var(--muted); }
.mitglied-vertrag strong { display: block; font-size: 14px; }
.mitglied-vertrag small { color: var(--muted); font-size: 12.5px; }
.mitglied-vertrag > div:first-child { flex: 1 1 180px; }
.mitglied-vertrag .mini-link { margin-left: auto; }

@media (max-width: 760px) {
  .klapp > summary { min-height: 50px; }
}

/* ===================== Teilnehmer eines Termins ===================== */
.teilnehmer-liste { padding: 16px 22px; display: grid; gap: 8px; max-height: 60vh; overflow-y: auto; }

.teilnehmer {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: 3px;
  background: var(--card);
  padding: 11px 13px;
}

.teilnehmer.da { border-left-color: var(--green); }
.teilnehmer.fehlt { border-left-color: var(--red); }
.teilnehmer.da .teilnehmer-wer strong { text-decoration: none; }
.teilnehmer.fehlt .teilnehmer-wer strong { text-decoration: line-through; opacity: .75; }

.teilnehmer-wer { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.teilnehmer-wer strong { font-size: 14.5px; }
.teilnehmer-wer small { color: var(--muted); font-size: 12.5px; }
.teilnehmer-wer em { font-size: 11.5px; color: var(--muted); font-style: normal; }

.teilnehmer-knoepfe { display: flex; gap: 6px; flex: 0 0 auto; }
.teilnehmer-knoepfe .status-knopf {
  min-width: 44px;
  min-height: 38px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  font: inherit;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
}

.teilnehmer-fuss {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 22px 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.teilnehmer-fuss .secondary-action { margin-left: auto; }

.lesson-cal-entry[data-lesson-participants] { cursor: pointer; }

@media (max-width: 760px) {
  .teilnehmer-liste { padding: 14px; }
  .teilnehmer-knoepfe .status-knopf { min-height: 44px; min-width: 48px; }
}

/* Koppel: Herde umziehen */
.pasture-fuss {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.pasture-umzug {
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: var(--card);
  color: var(--gold-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 12px;
  min-height: 34px;
  cursor: pointer;
}

.pasture-umzug:hover { background: var(--gold-tint); border-color: var(--gold); }

.pasture-fuss .pasture-journal-link { margin-left: auto; }

@media (max-width: 760px) {
  .pasture-umzug { min-height: 42px; flex: 1 1 auto; }
}

/* ===================== Aufgabenlisten ===================== */
.task-view[hidden] { display: none; }

.aufgaben-block { margin-bottom: 26px; }

.aufgaben-block-kopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 6px;
  margin-bottom: 4px;
}

.aufgaben-block-kopf h3 {
  font-family: Fraunces, Georgia, serif;
  font-weight: 400;
  font-size: 20px;
  margin: 0;
}

.aufgaben-block-kopf span {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.aufgaben-block.overdue .aufgaben-block-kopf { border-bottom-color: var(--red); }
.aufgaben-block.overdue .aufgaben-block-kopf h3 { color: var(--red); }
.aufgaben-block.reported .aufgaben-block-kopf { border-bottom-color: var(--gold); }

.aufgaben-block .small-note { margin-bottom: 10px; }

/* Eine Aufgabe */
.aufgabe {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: 4px;
  background: var(--card);
  padding: 12px 14px;
  margin-bottom: 8px;
}

.aufgabe.dringend { border-left-color: var(--red); }
.aufgabe.problem { border-left-color: var(--red); background: var(--panel-2); }

.aufgabe-foto {
  flex: 0 0 78px;
  width: 78px;
  height: 62px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--line);
  display: block;
}

.aufgabe-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

.aufgabe-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }

.aufgabe-kopf { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.aufgabe-kopf strong { font-size: 14.5px; line-height: 1.3; }

.aufgabe-stufe {
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--gold-soft);
}
.aufgabe-stufe.s3 { color: var(--red); }

.aufgabe-text p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }

.aufgabe-zeile {
  display: flex;
  gap: 6px 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
}
.aufgabe-zeile .offen { color: var(--gold-soft); font-weight: 600; }
.aufgabe-zeile .zugesagt { color: var(--green); font-weight: 600; }
.aufgabe-zeile .geht-nicht { color: var(--red); font-weight: 600; }

.aufgabe-knoepfe { display: flex; gap: 6px; flex: 0 0 auto; align-items: flex-start; flex-wrap: wrap; }

.knopf-uebernehmen {
  border: 1.5px solid var(--gold);
  border-radius: 6px;
  background: var(--gold-tint);
  color: var(--gold-soft);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
  min-height: 38px;
  cursor: pointer;
  white-space: nowrap;
}

.aufgabe-knoepfe .status-knopf {
  min-width: 42px;
  min-height: 38px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  cursor: pointer;
}

/* Listen */
.klapp.liste.dringend { border-color: var(--gold); }
.klapp.liste.dringend > summary { background: var(--gold-tint); }

.liste-takt {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
}

.liste-takt.saison { color: var(--gold); }
.liste-takt.saison.pause { color: var(--muted); opacity: .8; }

.liste-takt-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin: 12px 0 4px;
  padding-top: 10px;
  border-top: 1px solid var(--hairline);
}
.liste-takt-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.liste-takt-form select,
.liste-takt-form input { min-width: 150px; }

.liste-kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }

.liste-balken {
  flex: 1 1 140px;
  height: 6px;
  border-radius: 999px;
  background: var(--panel-2);
  overflow: hidden;
}
.liste-balken i { display: block; height: 100%; background: var(--green); }

.liste-frist { font-size: 12.5px; color: var(--muted); }
.liste-frist .ueberfaellig { color: var(--red); }

.liste-neu {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px auto;
  gap: 8px;
  margin-top: 6px;
}

.liste-fuss { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 4px; }

/* Melden */
.melde-knopf { border-color: var(--red); color: var(--red); }
.melde-knopf:hover { background: var(--red-tint, rgba(179,73,46,.08)); }

.melde-form { padding: 18px 22px 22px; }

.melde-vorschau img {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--line);
}

@media (max-width: 760px) {
  .aufgabe { flex-wrap: wrap; }
  .aufgabe-knoepfe { width: 100%; }
  .knopf-uebernehmen { flex: 1 1 auto; min-height: 44px; }
  .aufgabe-knoepfe .status-knopf { min-height: 44px; min-width: 48px; }
  .liste-neu { grid-template-columns: minmax(0, 1fr); }
}

/* Kleiner Dialog zum Anlegen von Vertraegen */
.contract-dialog.schmal { max-width: 560px; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .form-grid-2 { grid-template-columns: 1fr; } }

/* Anfragen fuer einen Pensionsplatz */
.klapp.anfrage .anfrage-daten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 22px;
  margin: 0 0 14px;
}
.klapp.anfrage .anfrage-daten dt {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.klapp.anfrage .anfrage-daten dd { margin: 2px 0 0; }
.anfrage-fuss { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.anfrage-fuss label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}

/* News in der Verwaltung */
.news-karte {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 14px;
  border: 1px solid var(--hairline);
  background: var(--paper);
  padding: 12px;
  margin-bottom: 10px;
}
.news-karte.entwurf { border-style: dashed; }
.news-karte img { width: 120px; height: 90px; object-fit: cover; grid-row: span 2; }
.news-karte:not(:has(img)) { grid-template-columns: 1fr; }
.news-karte h4 { font-family: Fraunces, serif; font-weight: 400; font-size: 18px; margin: 2px 0 6px; }
.news-karte .news-social { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.news-karte .form-row { flex-wrap: wrap; gap: 8px; }
.status-pill.ok { background: #e8f2e6; color: #2e6b2a; }
.status-pill.warn { background: #f7ecd9; color: #8a5a10; }
.danger-link { color: #a33; }
@media (max-width: 560px) { .news-karte { grid-template-columns: 1fr; } .news-karte img { width: 100%; height: 160px; grid-row: auto; } }

/* Verkaufspferde in der Verwaltung */
.sale-fotos, .sale-ad-fotos { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.sale-fotos figure, .sale-ad-fotos figure { margin: 0; position: relative; width: 96px; }
.sale-fotos img, .sale-ad-fotos img { width: 96px; height: 72px; object-fit: cover; border: 1px solid var(--hairline); display: block; }
.sale-fotos button { position: absolute; top: 2px; right: 2px; background: rgba(20,18,15,.75); color: #fff; border: 0; border-radius: 2px; font-size: 11px; padding: 2px 6px; cursor: pointer; }
.sale-ad-fotos a { display: block; font-size: 11px; text-align: center; margin-top: 2px; }
.sale-karte { display: grid; grid-template-columns: 120px 1fr; gap: 14px; border: 1px solid var(--hairline); background: var(--paper); padding: 12px; margin-bottom: 10px; }
.sale-karte.entwurf { border-style: dashed; }
.sale-karte.verkauft { opacity: .6; }
.sale-karte img { width: 120px; height: 90px; object-fit: cover; }
.sale-karte:not(:has(img)) { grid-template-columns: 1fr; }
.sale-karte h4 { font-family: Fraunces, serif; font-weight: 400; font-size: 18px; margin: 2px 0 4px; }
.sale-karte .form-row { flex-wrap: wrap; gap: 8px; }
.sale-karte select { font: inherit; }
@media (max-width: 560px) { .sale-karte { grid-template-columns: 1fr; } .sale-karte img { width: 100%; height: 160px; } }

/* SEPA-Vorschau */
.sepa-tabelle tr.sepa-offen td { color: var(--muted); }
.sepa-tabelle tfoot td { border-top: 2px solid var(--hairline); }
.sepa-aktionen { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* Profilfoto in Meine Daten */
.profil-foto { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; margin-bottom: 8px; }
.profil-foto img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 1px solid var(--hairline); }
.profil-foto img[hidden] { display: none; }
.profil-foto:not(:has(img:not([hidden]))) { grid-template-columns: 1fr; }

/* Datenschutz-Hinweis in Meine Daten */
.klapp.datenschutz-info { margin: 10px 0 16px; }
.klapp.datenschutz-info p { font-size: 14px; line-height: 1.7; margin: 0 0 10px; }
.klapp.datenschutz-info a { color: var(--ink); }

/* Projekte ausserhalb ihres Sichtfensters */
.klapp.liste.spaeter > summary { opacity: .65; }
#projektNeuForm { margin: 0 0 18px; padding-top: 0; border-top: 0; }

/* Frost + Checklisten */
.frost-hinweis { background: #e8f0f8; border-left: 3px solid #4a7fb5; padding: 12px 16px; margin: 0 0 14px; color: var(--ink); }
.liste-takt.frost { color: #4a7fb5; }
.aufgaben-block.checklists .aufgabe { border-left: 3px solid #4a7fb5; }

/* Zustaendigkeit von Aufgaben */
.aufgabe-zeile .bereich, .liste-takt.bereich { color: var(--green); font-weight: 600; }
.aufgabe-zuordnung { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.aufgabe-zuordnung select { font-size: 0.85rem; padding: 4px 6px; max-width: 220px; }
.bereich-hinweis { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.bereich-schalter { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.access-sub { margin: 10px 0 4px; font-size: 0.85rem; font-weight: 600; color: var(--muted, #777); }

/* Schichtplan: Zeitschiene, Farben, Monatsansicht */
.shift-punkt { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.schiene { position: relative; height: 18px; margin: 4px 6px 6px; border-radius: 4px; background: rgba(0,0,0,0.06); overflow: hidden; }
.schiene-mark { position: absolute; top: 0; font-size: 9px; line-height: 18px; padding: 0 3px; color: var(--muted, #777); pointer-events: none; }
.schiene-balken { position: absolute; top: 3px; height: 12px; border-radius: 3px; opacity: 0.9; }
.shift-view-toggle { display: inline-flex; gap: 0; margin-left: auto; }
.shift-view-toggle .secondary-action { border-radius: 0; }
.shift-view-toggle .secondary-action:first-child { border-radius: 6px 0 0 6px; }
.shift-view-toggle .secondary-action:last-child { border-radius: 0 6px 6px 0; }
.shift-view-toggle .secondary-action.active { background: var(--green, #2f7d4f); color: #fff; border-color: var(--green, #2f7d4f); }
.shift-week-board.monat { grid-template-columns: repeat(7, minmax(96px, 1fr)); gap: 3px; }
.monat-kopf { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #777); padding: 2px 4px; }
.monat-tag { min-height: 74px; border: 1px solid rgba(0,0,0,0.08); border-radius: 6px; padding: 3px; display: flex; flex-direction: column; gap: 2px; background: var(--card, #fff); }
.monat-tag.fremd { opacity: 0.45; }
.monat-tag.today { border-color: var(--green, #2f7d4f); box-shadow: inset 0 0 0 1px var(--green, #2f7d4f); }
.monat-datum { align-self: flex-end; border: 0; background: none; font-weight: 600; font-size: 12px; cursor: pointer; padding: 0 2px; }
.monat-chip { border: 0; border-left: 4px solid var(--f); border-radius: 3px; background: rgba(0,0,0,0.05); text-align: left; font-size: 11px; line-height: 1.25; padding: 2px 4px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.monat-chip small { color: var(--muted, #777); font-size: 10px; }
.monat-chip.status-sick { background: rgba(164,70,60,0.15); }
.monat-chip.status-vacation { background: rgba(184,134,43,0.18); }
.monat-chip.status-off { opacity: 0.6; }

/* Statistik */
.stat-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 18px; }
.stat-kachel { border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; padding: 12px; background: var(--card, #fff); }
.stat-kachel strong { display: block; font-size: 1.4rem; }
.stat-kachel small { color: var(--muted, #777); }
.stat-tabelle { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-bottom: 18px; }
.stat-tabelle th, .stat-tabelle td { text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(0,0,0,0.08); vertical-align: top; white-space: nowrap; }
.stat-tabelle details summary { cursor: pointer; color: var(--green, #2f7d4f); }
.stat-chart { display: flex; align-items: flex-end; gap: 4px; height: 90px; margin-bottom: 18px; }
.stat-balken { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.stat-balken i { display: block; width: 100%; background: var(--green, #2f7d4f); border-radius: 3px 3px 0 0; min-height: 2px; }
.stat-balken small { font-size: 10px; color: var(--muted, #777); }

/* Haustiere in Ferienhaus-Buchungen */
.pet-badge { display: inline-block; background: #b8862b; color: #fff; border-radius: 4px; padding: 0 6px; font-weight: 700; font-size: 0.85em; margin-right: 4px; }

/* Schichtplan: Zeitachse je Person */
.shift-week-board.gantt-woche { display: grid; grid-template-columns: 1fr; gap: 8px; min-width: 0; overflow-x: auto; }
.gtag { display: grid; grid-template-columns: 118px 1fr; border: 1px solid rgba(0,0,0,0.1); border-radius: 6px; overflow: hidden; min-width: 640px; background: var(--card, #fff); }
.gtag.today { border-color: var(--green, #2f7d4f); box-shadow: inset 0 0 0 1px var(--green, #2f7d4f); }
.gtag-kopf { text-align: left; border: 0; border-right: 1px solid rgba(0,0,0,0.08); background: rgba(0,0,0,0.03); padding: 6px 8px; cursor: pointer; font: inherit; color: inherit; }
.gtag-kopf b { display: block; }
.gtag-kopf small { color: var(--muted, #777); display: block; }
.gtag-kopf em { display: block; font-style: normal; font-size: 11px; color: var(--red, #a4463c); }
.gmini { position: relative; background: repeating-linear-gradient(to right, rgba(0,0,0,0.07) 0 1px, transparent 1px calc(100% / 13)); }
.gr { position: relative; height: 20px; }
.gr + .gr { border-top: 1px dashed rgba(0,0,0,0.08); }
.gr.leer { font-size: 11px; color: var(--muted, #777); padding-left: 8px; line-height: 20px; }
.gbar { position: absolute; top: 3px; height: 14px; border: 0; border-radius: 3px; color: #fff; font: 600 10px/14px inherit; font-family: inherit; padding: 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; text-align: left; }
.gbar.vacation, .gbar-legende.vacation { background: repeating-linear-gradient(45deg, #b8862b 0 4px, #d9b25f 4px 8px); color: #1e1b16; }
.gbar.sick, .gbar-legende.sick { background: repeating-linear-gradient(45deg, #a4463c 0 4px, #c97a70 4px 8px); }
.gbar.off { background: repeating-linear-gradient(45deg, #999 0 4px, #bbb 4px 8px); }
.gantt { display: grid; grid-template-columns: 118px 1fr; min-width: 640px; font-variant-numeric: tabular-nums; }
.glbl { padding: 0 8px 0 0; display: flex; align-items: center; gap: 7px; border-top: 1px solid rgba(0,0,0,0.08); white-space: nowrap; font-size: 13px; }
.glbl i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.glbl small { color: var(--muted, #777); }
.gachse { position: relative; height: 18px; }
.gachse span { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; color: var(--muted, #777); }
.grow { position: relative; height: 32px; border-top: 1px solid rgba(0,0,0,0.08); background: repeating-linear-gradient(to right, rgba(0,0,0,0.07) 0 1px, transparent 1px calc(100% / 13)); }
.grow.sum { height: 22px; background: none; }
.grow.leer { font-size: 12px; color: var(--muted, #777); line-height: 32px; padding-left: 8px; cursor: pointer; }
.grow .gbar { top: 6px; height: 20px; font-size: 11px; line-height: 20px; }
.gsum { position: absolute; top: 3px; height: 16px; border-radius: 3px; font-size: 10px; line-height: 16px; text-align: center; color: #fff; background: var(--green, #2f7d4f); font-style: normal; }
.gsum.wenig { background: #b8862b; }
.gsum.keiner { background: #a4463c; }
.gjetzt { position: absolute; top: 0; bottom: 0; width: 2px; background: #a4463c; opacity: .7; pointer-events: none; }
.legende { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--muted, #777); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }

/* Stoerungen auf der Kontrollseite */
.stoer-kopf { display: flex; align-items: center; gap: 10px; }
.stoer-kopf h3 { margin: 0; }
.stoer-zahl { font-weight: 700; border-radius: 12px; padding: 1px 10px; font-size: 13px; color: #fff; background: var(--green, #2f7d4f); }
.stoer-zahl.rot { background: #a4463c; }
.stoer-zeile { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; padding: 6px 0; border-top: 1px solid rgba(0,0,0,0.06); }
.stoer-titel { flex: 0 0 230px; font-size: 13px; font-weight: 600; }
.stoer-titel.rot { color: #a4463c; }
.stoer-titel.gelb { color: #8a6a1f; }
.stoer-titel b { font-weight: 700; margin-left: 4px; }
.stoer-chips { flex: 1 1 300px; display: flex; flex-wrap: wrap; gap: 5px; }
.stoer-chip { font-style: normal; font-size: 12px; line-height: 1.2; padding: 3px 8px; border-radius: 10px; background: rgba(0,0,0,0.06); white-space: nowrap; }
.stoer-chip.rot { background: rgba(164,70,60,0.14); }
.stoer-chip.gelb { background: rgba(184,134,43,0.16); }
@media (max-width: 700px) { .stoer-titel { flex-basis: 100%; } }

.gmini .gachse.klein { height: 14px; background: rgba(0,0,0,0.03); border-bottom: 1px solid rgba(0,0,0,0.08); }
.gmini .gachse.klein span { font-size: 10px; line-height: 14px; }

/* Dashboard: Knoepfe uebereinander, drei Spalten mit Wetter, Pferde als Schieber */
.dash-greeting-actions { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 190px; }
.dash-greeting-actions .melde-knopf { margin: 0; }
.dash-cols { grid-template-columns: 250px minmax(0, 1fr) 300px; }
#dashHorsesCard { min-width: 0; }
#dashForecast .forecast-row { grid-template-columns: repeat(5, 1fr); gap: 8px; }
#dashForecast .forecast-day { padding: 8px 4px; font-size: 13px; }
#dashForecast .forecast-icon { font-size: 1.6rem; }
#dashForecast .forecast-rain, #dashForecast .forecast-wind { font-size: 11px; }
#dashForecast h3 { margin-top: 0; }
#dashForecast .forecast-row { grid-template-columns: repeat(5, 1fr); gap: 4px; }
#dashForecast .forecast-day { padding: 6px 2px; font-size: 12px; }
#dashForecast .forecast-icon { font-size: 1.3rem; }
#dashForecast .forecast-rain, #dashForecast .forecast-wind { font-size: 10px; white-space: nowrap; }
.horse-teasers { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
.horse-teasers .horse-teaser { flex: 0 0 210px; scroll-snap-align: start; }
@media (max-width: 1100px) { .dash-cols { grid-template-columns: 250px minmax(0, 1fr); } #dashForecast { grid-column: 1 / -1; } }
@media (max-width: 760px) { .dash-cols { grid-template-columns: 1fr; } .dash-greeting-actions { min-width: 0; } }
/* Kurskarte: Anmelden links neben dem Bild, Pfeil ganz rechts */
.lesson-head { grid-template-columns: 104px minmax(0, 1fr) auto 132px 18px; }
.lesson-pfeil-spalte { text-align: right; }
@media (max-width: 760px) { .lesson-head { grid-template-columns: 80px minmax(0, 1fr) auto; } .lesson-thumb, .lesson-pfeil-spalte { display: none; } }

.week-day-tasks.eingebettet { padding: 6px 0 2px; }
.week-day-tasks.eingebettet .week-task-card { margin-bottom: 6px; }

/* Schichtplan Drag & Drop */
.grow.editierbar { cursor: crosshair; }
.grow.editierbar .gbar { cursor: grab; touch-action: none; }
.grow .gbar.ziehen { opacity: .85; box-shadow: 0 2px 8px rgba(0,0,0,.35); cursor: grabbing; z-index: 2; }
.grow .gbar.andere-zeile { outline: 2px dashed #fff; }
.grow .gbar.ghost { background: rgba(47,125,79,.55); border: 1px dashed #2f7d4f; color: #fff; pointer-events: none; }
.ggriff { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.ggriff.links { left: 0; border-left: 3px solid rgba(255,255,255,.7); }
.ggriff.rechts { right: 0; border-right: 3px solid rgba(255,255,255,.7); }
.grow.editierbar, .gantt { touch-action: none; user-select: none; }

.sepa-stand { border-left: 3px solid var(--green, #2f7d4f); background: rgba(47,125,79,0.08); padding: 8px 12px; margin-bottom: 12px; font-size: 14px; }
.sepa-stand.leer { border-left-color: #b8862b; background: rgba(184,134,43,0.12); }

/* Mitbenutzer: Namensvorschlaege + Einladungslink */
.addon-row-button { width: 100%; text-align: left; cursor: pointer; background: var(--surface-2, #f6f4ef); border: 1px solid var(--line, #ddd); border-radius: 8px; font: inherit; }
.addon-row-button:hover { border-color: var(--accent, #7a5c2e); }
.invite-box { margin-top: 0.75rem; padding: 0.85rem; border: 1px dashed var(--accent, #7a5c2e); border-radius: 10px; background: var(--surface-2, #faf7f0); display: grid; gap: 0.6rem; }
.invite-box input { width: 100%; font-size: 0.85rem; }
.invite-box .form-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.invite-box a.secondary-action { text-decoration: none; display: inline-flex; align-items: center; }

.sepa-aendern { margin-top: 0.75rem; border: 1px solid var(--line, #ddd); border-radius: 10px; padding: 0.5rem 0.85rem; }
.sepa-aendern summary { cursor: pointer; font-weight: 600; padding: 0.35rem 0; }
.sepa-aendern[open] summary { margin-bottom: 0.5rem; }

/* Willkommens-Bonus */
.bonus-dialog { text-align: center; overflow: hidden; }
.bonus-inhalt { position: relative; z-index: 1; display: grid; gap: 0.75rem; justify-items: center; }
.bonus-emoji { font-size: 3rem; margin: 0; animation: bonus-hopser 1.2s ease-in-out infinite; }
.bonus-zeile { display: flex; gap: 0.75rem; align-items: center; text-align: left; padding: 0.5rem 0.75rem; border-radius: 10px; background: var(--surface-2, #faf7f0); margin-bottom: 0.4rem; }
.bonus-zeile strong { font-size: 1.4rem; color: var(--accent, #7a5c2e); white-space: nowrap; }
.bonus-summe { font-weight: 600; max-width: 30ch; }
.bonus-konfetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bonus-konfetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; opacity: 0.9; animation: bonus-fall 2.6s linear infinite; }
@keyframes bonus-fall { 0% { transform: translateY(-20px) rotate(0deg); } 100% { transform: translateY(520px) rotate(540deg); } }
@keyframes bonus-hopser { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .bonus-konfetti i, .bonus-emoji { animation: none; } }
.bonus-steuerung { margin-bottom: 1.25rem; padding: 1rem; border: 1px solid var(--line, #ddd); border-radius: 12px; }
.bonus-steuerung .form-row { align-items: end; flex-wrap: wrap; gap: 0.6rem; }

/* Nachbuchungen (Team-Kalender) */
.nachbuchen-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 960px) { .nachbuchen-layout { grid-template-columns: 1fr; } }
.nachbuchen-form, .nachbuchen-journal { background: var(--surface, #fff); border: 1px solid var(--line, #ddd); border-radius: 14px; padding: 1.1rem; }
.nachbuchen-frist { align-items: end; }
.nachbuchen-frist-knoepfe { display: flex; flex-wrap: wrap; gap: 0.35rem; padding-bottom: 0.4rem; }
.nachbuchen-pferde { border: 1px solid var(--line, #ddd); border-radius: 10px; padding: 0.7rem; display: grid; gap: 0.5rem; }
.nachbuchen-pferde-kopf { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.nachbuchen-pferde-kopf input { max-width: 220px; }
.nachbuchen-schnell { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.nachbuchen-liste { max-height: 420px; overflow-y: auto; display: grid; gap: 0.3rem; }
.nachbuchen-pferd { display: grid; grid-template-columns: auto 1fr auto; gap: 0.6rem; align-items: center; padding: 0.4rem 0.6rem; border-radius: 8px; border: 1px solid transparent; cursor: pointer; }
.nachbuchen-pferd:hover { background: var(--surface-2, #faf7f0); }
.nachbuchen-pferd.gewaehlt { background: var(--surface-2, #faf7f0); border-color: var(--accent, #7a5c2e); }
.nachbuchen-pferd span { display: grid; }
.nachbuchen-pferd small { color: var(--muted, #777); }
.nachbuchen-letzte { font-style: normal; font-size: 0.78rem; color: var(--muted, #777); white-space: nowrap; }
.nachbuchen-tabelle td, .nachbuchen-tabelle th { vertical-align: top; }
body.nachbuchen-view .team-nachbuchen { display: block; }

/* Impfschema + Komponenten */
.impf-einstellung { border: 1px solid var(--line, #ddd); border-radius: 10px; padding: 0.7rem 0.85rem; margin: 0.5rem 0; }
.impf-einstellung .form-row { align-items: end; flex-wrap: wrap; }
.nachbuchen-komponenten { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; }
.nachbuchen-komponenten label { display: inline-flex; gap: 0.3rem; align-items: center; font-size: 0.9rem; }
.impfplan-box { border: 1px dashed var(--accent, #7a5c2e); border-radius: 12px; padding: 0.85rem 1rem; margin-bottom: 1.25rem; }
.impfplan-box .form-row { align-items: end; flex-wrap: wrap; gap: 0.6rem; }
.impfplan-box a.primary-action { text-decoration: none; display: inline-flex; align-items: center; }
/* Wuensche & Fehler */
.feedback-layout { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 960px) { .feedback-layout { grid-template-columns: 1fr; } }
.feedback-form, .feedback-liste-wrap { background: var(--surface, #fff); border: 1px solid var(--line, #ddd); border-radius: 14px; padding: 1.1rem; }
.feedback-filter { display: flex; gap: 0.4rem; margin-bottom: 0.8rem; flex-wrap: wrap; }
.feedback-filter button { border: 1px solid var(--line, #ddd); background: transparent; border-radius: 999px; padding: 0.3rem 0.8rem; cursor: pointer; font: inherit; }
.feedback-filter button.active { background: var(--accent, #7a5c2e); color: #fff; border-color: var(--accent, #7a5c2e); }
.feedback-liste { display: grid; gap: 0.6rem; }
.feedback-karte { border: 1px solid var(--line, #ddd); border-radius: 10px; padding: 0.7rem 0.85rem; display: grid; gap: 0.4rem; }
.feedback-karte.erledigt, .feedback-karte.abgelehnt { opacity: 0.75; }
.feedback-kopf { display: flex; justify-content: space-between; gap: 0.6rem; align-items: start; flex-wrap: wrap; }
.feedback-art { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--surface-2, #f6f4ef); }
.feedback-art.fehler { background: #f3d9d9; color: #7a1f1f; }
.feedback-status { font-size: 0.78rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--surface-2, #f6f4ef); }
.feedback-status.in_arbeit { background: #f6e7bd; } .feedback-status.erledigt { background: #d7ead9; } .feedback-status.abgelehnt { background: #e6e6e6; }
.feedback-meta { font-size: 0.8rem; color: var(--muted, #777); }
.feedback-antwort { border-left: 3px solid var(--accent, #7a5c2e); padding: 0.3rem 0.6rem; background: var(--surface-2, #faf7f0); border-radius: 0 8px 8px 0; }
.feedback-foto { max-width: 220px; border-radius: 8px; }
.feedback-aktionen { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.feedback-vote { border: 1px solid var(--line, #ddd); background: transparent; border-radius: 999px; padding: 0.25rem 0.7rem; cursor: pointer; font: inherit; }
.feedback-vote.aktiv { background: var(--accent, #7a5c2e); color: #fff; border-color: var(--accent, #7a5c2e); }
.feedback-team { display: grid; gap: 0.4rem; border-top: 1px dashed var(--line, #ddd); padding-top: 0.5rem; }
.feedback-team .form-row { align-items: end; gap: 0.5rem; flex-wrap: wrap; }
.impfplan-box .form-row label { flex: 1 1 160px; display: grid; gap: 0.2rem; }
.feedback-team label { display: grid; gap: 0.2rem; font-size: 0.85rem; flex: 1 1 160px; }
.feedback-team label:has(input) { flex: 3 1 220px; }

/* Schichtplan: Pausen + Wochensummen */
.wochen-summen { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.4rem; font-size: 0.85rem; }
.wochen-summen span { display: inline-flex; align-items: center; gap: 0.35rem; }
.wochen-summen i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.wochen-summen em { font-style: normal; font-weight: 600; }
.pause-verzicht { font-size: 0.85rem; }
.gbar small { font-weight: normal; opacity: 0.85; }

#horseHintList article.hint-krankheit strong { color: #7a1f1f; }

/* Dienstleistungen buchen: Kategorien, Einmal + Abo nebeneinander */
.dl-kopf { display: grid; grid-template-columns: minmax(0,1fr) 128px 150px; gap: 10px; font-size: 11px; color: var(--muted, #777); text-transform: uppercase; letter-spacing: .05em; padding: 4px 10px 6px; }
.dl-liste { display: grid; gap: 10px; margin-bottom: 1rem; }
.dl-kat { border: 1px solid var(--line, #e2dccf); border-radius: 12px; padding: 2px 10px 6px; background: var(--surface, #fff); }
.dl-kat header { display: flex; align-items: center; gap: 8px; padding: 8px 0 4px; }
.dl-kat header h3 { margin: 0; font-size: 1rem; }
.dl-kat header small { margin-left: auto; color: var(--muted, #777); }
.dl-ico { width: 28px; height: 28px; border-radius: 8px; background: var(--surface-2, #f3e8cf); display: grid; place-items: center; font-size: 15px; }
.dl-zeile { display: grid; grid-template-columns: minmax(0,1fr) 128px 150px; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--line, #eee); }
.dl-zeile.gewaehlt { background: var(--surface-2, #faf7f0); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 8px; }
.dl-name { font-weight: 500; font-size: 0.95rem; } .dl-name small { display: block; color: var(--muted, #777); font-weight: 400; font-size: 0.78rem; }
.dl-preis { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.dl-preis.abo { background: #e7e1f3; border-radius: 8px; padding: 3px 4px 3px 8px; }
.dl-euro { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; font-size: 0.9rem; } .dl-euro small { font-weight: 400; color: var(--muted, #777); }
.dl-btn { font: inherit; font-size: 0.78rem; font-weight: 600; padding: 5px 9px; border-radius: 7px; border: 1px solid var(--line, #ddd); background: var(--surface, #fff); cursor: pointer; white-space: nowrap; }
.dl-btn.abo { border-color: #5b4a8a; color: #5b4a8a; }
.dl-btn:hover { border-color: var(--accent, #7a5c2e); }
.dl-leer { color: var(--muted, #999); text-align: center; font-size: 0.85rem; }
.dl-gewaehlt { border: 1px dashed var(--accent, #b8861d); border-radius: 10px; padding: 0.6rem 0.8rem; background: var(--surface-2, #faf7f0); }
.dl-pill { display: inline-block; font-size: 0.7rem; letter-spacing: .04em; text-transform: uppercase; padding: 1px 7px; border-radius: 999px; background: #e7e1f3; color: #5b4a8a; margin-left: 4px; }
@media (max-width: 640px) { .dl-kopf { display: none; } .dl-zeile { grid-template-columns: 1fr; gap: 6px; } .dl-preis { justify-content: flex-start; gap: 12px; } }

/* Team-Dashboard: Ranchlage */
.lage-zeile { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 0 0 12px; }
@media (max-width: 900px) { .lage-zeile { grid-template-columns: repeat(3, 1fr); } }
.lage-zeile .kpi { background: var(--surface, #fff); border: 1px solid var(--line, #e2dccf); border-radius: 12px; padding: 8px 12px; display: grid; gap: 2px; }
.lage-zeile .kpi b { font-family: var(--font-display, Fraunces, Georgia, serif); font-size: 1.5rem; line-height: 1; }
.lage-zeile .kpi small { color: var(--muted, #777); font-size: 0.75rem; }
.lage-zeile .kpi.warn { border-color: #b23b3b; background: #f6dede; } .lage-zeile .kpi.warn b { color: #b23b3b; }
.lage-zeile .kpi.hin b { color: #c5711a; } .lage-zeile .kpi.ok b { color: #2f7d4f; }
.dashboard-extra.ranchlage { grid-template-columns: 1.35fr 1fr; }
@media (max-width: 900px) { .dashboard-extra.ranchlage { grid-template-columns: 1fr; } }
.dashboard-extra .stack { display: grid; gap: 10px; align-content: start; }
.karte-kopf { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.karte-kopf h3 { margin: 0; }
.b-abschnitt { margin-top: 6px; }
.b-abschnitt h4 { display: flex; align-items: center; gap: 7px; margin: 8px 0 2px; font-size: 0.72rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted, #777); }
.b-abschnitt h4 i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.b-zeile { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; gap: 8px; align-items: start; padding: 7px 0; border-top: 1px solid var(--line, #eee); }
.b-ico { font-size: 15px; line-height: 1.3; }
.b-text b { font-weight: 600; } .b-text .b-normal { font-weight: 400; } .b-text small { display: block; color: var(--muted, #777); font-size: 0.78rem; }
.b-badge { font-size: 0.75rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; white-space: nowrap; background: var(--line, #eee); color: var(--muted, #666); }
.b-badge.rot { background: #f6dede; color: #b23b3b; } .b-badge.orange { background: #fbe8d3; color: #c5711a; } .b-badge.blau { background: #dde8f3; color: #2f5d8a; }
.b-leer { color: var(--muted, #777); font-size: 0.82rem; margin: 2px 0 4px; }
.woche-leiste { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.woche-tag { border: 1px solid var(--line, #e2dccf); border-radius: 10px; padding: 6px 4px; text-align: center; text-decoration: none; color: inherit; display: grid; gap: 1px; }
.woche-tag.heute { border-color: var(--accent, #b8861d); background: var(--surface-2, #f3e8cf); }
.woche-tag small { color: var(--muted, #777); font-size: 0.72rem; } .woche-tag b { font-family: var(--font-display, Fraunces, Georgia, serif); font-size: 1.25rem; line-height: 1.1; }
.woche-tag em { font-style: normal; font-size: 0.66rem; color: #c5711a; } .woche-tag em.rot { color: #b23b3b; }
.balken { height: 5px; border-radius: 999px; background: var(--line, #e2dccf); overflow: hidden; margin-top: 4px; }
.balken i { display: block; height: 100%; background: #2f7d4f; } .balken i.voll { background: #b23b3b; }
.mini-list span.bad { color: #b23b3b; font-weight: 600; }
.klapp-form summary { cursor: pointer; font-weight: 600; font-size: 0.85rem; color: var(--accent, #b8861d); padding: 8px 0 0; list-style: none; }
.klapp-form summary::before { content: "+ "; } .klapp-form[open] summary::before { content: "– "; }
/* Buchungsseite: zugeklappte Gruppen, saubere Spalten */
.dl-kat summary { display: flex; align-items: center; gap: 8px; padding: 8px 0; cursor: pointer; list-style: none; }
.dl-kat summary::-webkit-details-marker { display: none; }
.dl-kat summary h3 { margin: 0; font-size: 1rem; } .dl-kat summary small { margin-left: auto; color: var(--muted, #777); }
.dl-pfeil { width: 8px; height: 8px; border-right: 2px solid var(--muted, #777); border-bottom: 2px solid var(--muted, #777); transform: rotate(-45deg); transition: transform .15s; margin-left: 6px; }
.dl-kat[open] .dl-pfeil { transform: rotate(45deg); }
.dl-kopf, .dl-zeile { grid-template-columns: minmax(0,1fr) 150px 170px; }
.dl-preis { display: grid; grid-template-columns: minmax(0,1fr) 68px; align-items: center; gap: 6px; }
.dl-preis .dl-euro { text-align: right; } .dl-btn { width: 68px; text-align: center; }
.dl-preis.abo { padding: 3px 4px 3px 8px; }
.dl-leer { text-align: center; }
@media (max-width: 640px) { .dl-zeile { grid-template-columns: 1fr; } .dl-preis { grid-template-columns: 1fr 68px; } }

.b-tag { display: inline-block; font-size: 0.68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; background: var(--line, #eee); color: var(--muted, #666); vertical-align: middle; }
.b-tag.team { background: #dfeee3; color: #2f7d4f; }
.health-wer { border: 1px dashed var(--accent, #b8861d); border-radius: 10px; padding: 0.6rem 0.8rem; display: grid; gap: 0.4rem; }

.arbeitskalender-card iframe { width: 100%; height: 760px; border: 0; border-radius: 10px; background: var(--surface, #fff); }
@media (max-width: 700px) { .arbeitskalender-card iframe { height: 620px; } }
html.embed body { background: transparent; }
html.embed .portal-shell { padding: 0; } html.embed .portal-app { display: block; padding: 0; }

/* Team-Dashboard Raster */
.team-raster { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; align-items: start; }
@media (max-width: 900px) { .team-raster { grid-template-columns: 1fr; } }
.team-raster .team-voll { grid-column: 1 / -1; }
.team-raster .arbeitskalender-card iframe { height: 520px; }
.dash-chat { max-height: 320px; overflow-y: auto; margin-bottom: 8px; }
/* Eingebettet: nur der heutige Tag */
html.embed-heute .week-day-column:not(.today) { display: none !important; }
html.embed-heute .team-week-board { grid-template-columns: minmax(0, 1fr) !important; }
html.embed-heute .team-daybar, html.embed-heute .team-week-summary, html.embed-heute .kalender-umschalter { display: none !important; }
html.embed-heute .week-day-column.today { border-color: var(--line, #e2dccf); }

/* Chat in der Kopfzeile */
.nav-chat { position: relative; font: inherit; font-weight: 600; font-size: 0.85rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line, #ddd); background: var(--surface, #fff); color: inherit; cursor: pointer; }
.nav-chat i { position: absolute; top: -7px; right: -7px; background: #b23b3b; color: #fff; font-style: normal; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 6px; min-width: 18px; text-align: center; }
/* Arbeitskalender heute im Dashboard */
.team-raster .spalte { display: grid; gap: 10px; align-content: start; }
.wt-kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; } .wt-kopf b { font-size: 1.05rem; } .wt-kopf small { color: var(--muted, #777); }
.wt-gruppe { border: 1px solid var(--line, #e2dccf); border-left: 4px solid #c5711a; border-radius: 10px; padding: 6px 10px; margin-bottom: 8px; }
.wt-gruppe.fertig { border-left-color: #2f7d4f; } .wt-gruppe.problem { border-left-color: #b23b3b; }
.wt-gruppe summary { display: flex; justify-content: space-between; align-items: center; font-weight: 600; cursor: pointer; list-style: none; padding: 4px 0; }
.wt-gruppe summary::-webkit-details-marker { display: none; } .wt-gruppe summary small { color: var(--muted, #777); font-weight: 400; }
.wt-zeile { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line, #eee); }
.wt-zeile small { display: block; color: var(--muted, #777); font-size: 0.78rem; } .wt-zeile em { font-style: normal; font-size: 0.78rem; color: var(--muted, #777); }
.wt-zeile.erledigt > div > span { text-decoration: line-through; color: var(--muted, #777); }
.wt-check { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--muted, #888); background: transparent; cursor: pointer; font-weight: 700; font-size: 13px; line-height: 1; padding: 0; color: #fff; }
.wt-check.ok { background: #2f7d4f; border-color: #2f7d4f; } .wt-check.problem { background: #b23b3b; border-color: #b23b3b; }
.wt-tabelle td, .wt-tabelle th { padding: 5px 6px; font-size: 0.85rem; } .wt-tabelle tr.erledigt td { color: var(--muted, #777); }
.b-badge.gruen { background: #dfeee3; color: #2f7d4f; }

.wt-zeile.wt-reg { grid-template-columns: 26px 1fr auto; } .wt-zeile .wt-ico { font-size: 16px; text-align: center; }
.wt-zeile.wt-reg em { display: flex; gap: 8px; }

.registrierungen-group { border-left-color: #b23b3b !important; }
.utility-row.registrierung { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }
.registrierung-aktionen { display: flex; gap: 8px; }

.reg-rolle { font: inherit; font-size: 0.8rem; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line, #ddd); background: var(--surface, #fff); }
.utility-row.registrierung { grid-template-columns: 1fr; }
.registrierung-aktionen { flex-wrap: wrap; align-items: center; }

.pays-wahl { font: inherit; font-size: 0.8rem; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line, #ddd); background: var(--surface, #fff); margin-right: 6px; }
#myCaretakerPays { max-width: 220px; }

/* Hilfe-Center */
.hilfe-kopf { display: flex; justify-content: space-between; align-items: end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.hilfe-kopf h2 { margin: 0; }
#hilfeSuche { font: inherit; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line, #ddd); background: var(--surface, #fff); min-width: 320px; flex: 1; max-width: 520px; }
.hilfe-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-bottom: 16px; }
.hilfe-kachel { font: inherit; text-align: left; background: var(--surface, #fff); border: 1px solid var(--line, #e2dccf); border-radius: 14px; padding: 12px 14px; display: grid; gap: 3px; cursor: pointer; color: inherit; }
.hilfe-kachel i { font-style: normal; font-size: 22px; } .hilfe-kachel b { font-size: 0.95rem; } .hilfe-kachel small { color: var(--muted, #777); font-size: 0.75rem; }
.hilfe-kachel.aktiv { border-color: var(--accent, #b8861d); background: var(--surface-2, #f3e8cf); }
.hilfe-zwischen { font-size: 0.72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #777); margin: 0 0 8px; }
.hilfe-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; align-items: start; }
.hilfe-karte { background: var(--surface, #fff); border: 1px solid var(--line, #e2dccf); border-radius: 12px; padding: 10px 14px; }
.hilfe-karte summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hilfe-karte summary::-webkit-details-marker { display: none; }
.hilfe-karte summary::after { content: "＋"; color: var(--muted, #777); font-weight: 400; } .hilfe-karte[open] summary::after { content: "－"; }
.hilfe-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin: 6px 0 8px; font-size: 0.78rem; color: var(--muted, #777); }
.hilfe-pfad { background: var(--surface-2, #f6f4ef); border: 1px solid var(--line, #e2dccf); border-radius: 6px; padding: 1px 7px; color: var(--text, #333); }
.hilfe-schritte { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.hilfe-schritte li { display: grid; grid-template-columns: 24px 1fr; gap: 9px; align-items: start; font-size: 0.92rem; }
.hilfe-schritte li::before { counter-increment: s; content: counter(s); width: 22px; height: 22px; border-radius: 50%; background: var(--accent, #b8861d); color: #fff; font-weight: 700; font-size: 0.72rem; display: grid; place-items: center; }
.hilfe-tipp { border-left: 3px solid #2f5d8a; background: #dde8f3; padding: 6px 10px; border-radius: 0 8px 8px 0; font-size: 0.85rem; margin-top: 8px; }
.hilfe-karte mark { background: #f3e8cf; padding: 0 2px; border-radius: 3px; }

.nachreichen-wahl { display: block; margin-top: 3px; } .nachreichen-wahl .checkbox-label { font-size: 0.8rem; color: var(--muted, #777); }
.nachreichen-pferd { border: 1px solid var(--line, #e2dccf); border-radius: 8px; padding: 6px 10px; margin-bottom: 6px; } .nachreichen-pferd small { display: block; color: #b23b3b; }

/* Chat: rundes Profilbild mit Rahmen */
.chat-message { display: flex; gap: 8px; align-items: flex-end; }
.chat-message.chat-own { flex-direction: row-reverse; }
.chat-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: 0 0 38px; border: 2px solid var(--accent, #b8861d); box-shadow: 0 0 0 2px var(--surface, #fff); background: var(--surface-2, #f3e8cf); }
.chat-avatar-initialen { display: inline-grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.8rem; letter-spacing: .02em; }
.chat-own .chat-avatar { border-color: var(--text, #1d1a15); }
.dash-chat .chat-avatar { width: 30px; height: 30px; flex-basis: 30px; }

/* Pensioner-Feinschliff 04.09. */
@media (min-width: 900px) { #portalPageBack { display: none !important; } }
.horse-photo.fehlt { display: grid; place-items: center; gap: 2px; color: var(--muted, #777); background: var(--surface-2, #f3e8cf); }
.horse-photo.fehlt svg { width: 40%; height: 40%; } .horse-photo.fehlt em { font-style: normal; font-size: 0.7rem; font-weight: 600; }
dl.kompakt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
dl.kompakt div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 4px; }
.horse-fehlt { display: block; margin-top: 6px; color: #b23b3b; font-size: 0.78rem; }
@media (max-width: 640px) { dl.kompakt { grid-template-columns: 1fr; } }
.schnellwahl { display: inline-flex; gap: 6px; align-items: end; }
.schnellwahl button { font: inherit; font-size: 0.85rem; font-weight: 600; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line, #ddd); background: var(--surface, #fff); cursor: pointer; }
.schnellwahl button.aktiv { background: var(--accent, #b8861d); color: #fff; border-color: var(--accent, #b8861d); }
.buchung-art { display: flex; gap: 14px; flex-wrap: wrap; }
.lesson-cal-next { margin-top: 14px; }
@media (max-width: 760px) {
  .portal-nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; width: 100%; }
  .portal-nav .account-chip { display: inline-block !important; margin-left: auto; font-size: 0.8rem; max-width: 42%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 9px; }
  .portal-nav .nav-chat { padding: 6px 9px; font-size: 0.8rem; }
  .portal-nav #logoutButton { padding: 6px 9px; font-size: 0.8rem; }
  .portal-nav .view-switch { display: none; }
}

.chat-werkzeuge { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.chat-tool { font: inherit; font-size: 13px; line-height: 1; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line, #ddd); background: var(--surface, #fff); color: var(--muted, #666); cursor: pointer; }
.chat-tool:hover { color: var(--text, #111); border-color: var(--accent, #b8861d); }

.chat-tool-weg:hover { color: #b23b3b; border-color: #b23b3b; }

.feedback-erledigt { margin-top: 10px; border-top: 1px dashed var(--line, #ddd); padding-top: 8px; }
.feedback-erledigt summary { cursor: pointer; font-weight: 600; color: var(--accent, #b8861d); list-style: none; padding: 4px 0 8px; }
.feedback-erledigt summary::before { content: "▸ "; } .feedback-erledigt[open] summary::before { content: "▾ "; }
.feedback-erledigt .feedback-karte { margin-bottom: 8px; }