: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;
  --on-danger: #ffffff;
  --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);
}

/* Am Handy aendert die ein- und ausfahrende Adressleiste die Hoehe von 100vh - dvh meint die
   tatsaechlich sichtbare Hoehe und laesst die Seite beim Scrollen nicht springen. */
@supports (min-height: 100dvh) {
  body { min-height: 100dvh; }
}

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;
}

/* Testnutzer-Wahl: aufklappbares Menü mit Rollen-Gruppen, alle standardmäßig zu (John, 15.09.2026) */
.test-user-wahl { position: relative; }
.test-user-panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 80; min-width: 300px; max-height: min(70vh, 560px); overflow: auto; background: var(--panel); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35); padding: 6px; }
.test-user-panel details { border-bottom: 1px solid var(--line); }
.test-user-panel details:last-of-type { border-bottom: 0; }
.test-user-panel summary { cursor: pointer; padding: 10px 12px; font-weight: 600; color: var(--text); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.test-user-panel summary::-webkit-details-marker { display: none; }
.test-user-panel summary::after { content: '▸'; color: var(--muted); }
.test-user-panel details[open] > summary::after { content: '▾'; }
.test-user-panel summary small { color: var(--muted); font-weight: 400; margin-left: auto; }
.test-user-panel button[data-test-user] { display: block; width: 100%; text-align: left; padding: 8px 12px 8px 24px; border: 0; background: none; font: inherit; color: var(--text); cursor: pointer; border-radius: 8px; }
.test-user-panel button[data-test-user]:hover { background: var(--panel-2); }
.test-user-panel button[data-test-user].aktiv { color: var(--gold-soft); font-weight: 700; }

.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;
}

.ledger-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.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(4, minmax(0, 1fr));
  gap: 10px;
}

.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);
  opacity: .72;
}

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

.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;
}

/* Kein "aufklappen"-Hinweis mehr: die Zahl in Klammern zeigt, dass etwas drin ist (John, 14.09.2026) */
.week-task-group-summary::after {
  content: none;
}

/* Zugeklappt so klein wie möglich: nur der Titel mit Anzahl, keine Detailzeile */
.week-task-card:not([open]) > .week-task-group-summary {
  min-height: 0;
  padding: 6px 8px;
}

.week-task-card:not([open]) > .week-task-group-summary small {
  display: none;
}

.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,
.week-task-group-row.problem,
.week-task-group-row.status-problem {
  opacity: .66;
}

/* X zaehlt wie der gruene Haken: Zeile abgehakt, nur in Rot statt Gruen (John, 2026-09-08) */
.week-task-group-row.done > div:first-child span,
.week-task-group-row.status-done > div:first-child span,
.week-task-group-row.problem > div:first-child span,
.week-task-group-row.status-problem > div:first-child span {
  text-decoration: line-through;
}

.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;
  }

  .ledger-actions {
    width: 100%;
    justify-content: 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);
    /* John, 09.09.2026: Am iPhone wanderte die Leiste beim Wischen mit nach oben und sprang erst
       am Ende zurueck. Safari zeichnet "fixed" waehrend des Schwung-Scrollens nicht jedes Bild neu.
       Eigene Compositing-Ebene: der Compositor haelt die Leiste unten, ohne Neuzeichnen. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .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;
  /* #79: ohne feste Spalte wuchs das Raster auf Inhaltsbreite (Weidepflege am Handy 518px statt 375px) */
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  align-content: start;
}
.team-main > * { min-width: 0; }

.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-clean { display: block; width: 100%; margin-top: 8px; padding: 8px 10px; border-radius: 10px; font: inherit; font-size: 0.9rem; text-align: left; border: 1px solid transparent; }
.rental-clean.is-open { background: rgba(255, 107, 77, 0.12); border-color: rgba(255, 107, 77, 0.4); color: var(--red); cursor: pointer; }
.rental-clean.is-open:hover { background: rgba(255, 107, 77, 0.2); }
.rental-clean.is-done { background: rgba(61, 220, 132, 0.12); color: var(--green); }
.rental-clean.is-planned { background: rgba(128, 128, 128, 0.1); color: var(--muted); }
.access-roles-title { margin: 24px 0 4px; }
.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"]:not([data-mitglied]) .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(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}

/* Helfen-Meldungen: Zeile je Meldung mit Entscheidung */
.help-report-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.help-report-row:first-child { border-top: 0; }
.help-report-row small { display: block; color: var(--muted); margin-top: 2px; }
.help-report-aktionen { display: flex; gap: 8px; flex-shrink: 0; }

/* Runde Fotos von Person (links) und Pferd (rechts) in Stallbelegung und Sattelkammern */
.slot-fotos { display: flex; gap: 4px; margin: 3px 0 2px; }
.slot-fotos img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line); background: var(--panel-2); cursor: zoom-in; }

/* Klick auf ein Belegungsfoto: grosse Ansicht mit Name, Klick irgendwo schliesst */
.foto-lupe { position: fixed; inset: 0; z-index: 1200; background: rgba(20, 18, 15, .55); display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.foto-lupe figure { margin: 0; text-align: center; }
.foto-lupe img { width: min(84vw, 340px); height: min(84vw, 340px); object-fit: cover; border-radius: 14px; border: 3px solid #fff; box-shadow: 0 14px 44px rgba(0, 0, 0, .45); background: #fff; }
.foto-lupe figcaption { color: #fff; margin-top: 10px; font-size: 15px; letter-spacing: .02em; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }

.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-reserved { background: #fff7df; border-color: #d5ad55; }
.stall-slot-course { background: #edf5fb; border-color: #82aeca; }
.stall-slot-occupied { background: #f1f6f1; border-color: #88a693; }
.stall-slot-reserved i,.stall-slot-course i,.stall-slot-occupied i,.stall-slot-free i {
  color: var(--muted); font-size: 10px; font-style: normal; font-weight: 800;
}
.stall-slot-free { border-style: dashed; }
.stall-date-toolbar { display:flex;align-items:center;gap:8px;margin:0 0 14px;flex-wrap:wrap; }
.stall-date-toolbar input { width:auto;min-height:40px; }

@media (max-width: 1250px) {
  .stable-area-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
/* Handy: Bereiche untereinander, sonst ragen die Boxen rechts aus dem Bild (John, 16.09.2026).
   Muss nach der 1250px-Regel stehen, die sonst die frühere 820px-Regel überschreibt. */
@media (max-width: 820px) {
  .stable-area-grid { grid-template-columns: 1fr; }
  .stall-slot { min-width: 0; }
  .stall-slot b, .stall-slot small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

.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 - ganze Karte leicht eingefärbt */
.week-task-card.progress-done {
  border-left: 4px solid var(--green);
  background: color-mix(in srgb, var(--green) 10%, var(--card));
}

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

.week-task-card.progress-part {
  border-left: 4px solid var(--amber, #e0a33a);
  background: color-mix(in srgb, #e0a33a 12%, var(--card));
}

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

.week-task-card.progress-none {
  border-left: 4px solid var(--red);
  background: color-mix(in srgb, var(--red) 9%, var(--card));
}

.week-task-card.progress-open {
  background: color-mix(in srgb, var(--red) 9%, var(--card));
}

/* 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: 7px 18px 7px 9px; font-size: 0.92rem; margin-bottom: 5px; line-height: 1.3; }
.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; }

/* Teamansicht: alle Reitbeteiligungsponys in einer kompakten Wochenmatrix */
.share-team-grid { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 5px; }
.share-team-row { display: grid; grid-template-columns: minmax(178px, 1.35fr) repeat(7, minmax(108px, 1fr)); gap: 4px; min-width: 960px; margin-bottom: 4px; }
.share-team-row.selected .share-team-pony { border-color: var(--green); background: rgba(38, 92, 72, 0.09); }
.share-team-head { position: sticky; top: 0; z-index: 3; margin-bottom: 6px; color: var(--muted); font-size: 0.73rem; }
.share-team-head > span { display: flex; justify-content: space-between; gap: 4px; padding: 3px 7px; }
.share-team-head small { font-size: inherit; font-variant-numeric: tabular-nums; }
.share-team-head .today { color: var(--green); font-weight: 800; }
.share-team-pony { display: flex; align-items: center; min-height: 48px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 9px; background: var(--card); font-size: 0.8rem; line-height: 1.2; }
.share-team-cell { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 48px; border: 1px solid var(--line); border-radius: 8px; padding: 3px; background: rgba(255,255,255,0.46); overflow: hidden; }
.share-team-cell.today { border-color: var(--gold, #b08830); box-shadow: inset 0 0 0 1px rgba(176,136,48,0.25); }
.share-team-cell-pick { position: absolute; inset: 0; z-index: 0; width: 100%; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.share-team-cell-pick:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.share-team-chip { position: relative; z-index: 1; display: block; min-width: 0; border-radius: 5px; padding: 2px 17px 2px 5px; background: rgba(38, 92, 72, 0.13); font-size: 0.68rem; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.share-team-chip.mine { background: rgba(38, 125, 79, 0.18); }
.share-team-chip.block { background: rgba(192,57,43,0.14); }
.share-team-chip b { font-variant-numeric: tabular-nums; }
.share-team-chip .share-entry-delete { pointer-events: auto; z-index: 2; min-width: 18px; min-height: 18px; }
.share-team-more { position: relative; z-index: 1; padding-left: 4px; color: var(--muted); font-size: 0.65rem; pointer-events: none; }

.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;
  /* Rahmen wie im Hilfe-Center: helle Karte, sichtbarer Rand, runde Ecken */
  background: var(--card, #fff);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 4px var(--shadow-soft, rgba(20, 18, 15, .06));
}

/* --- 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;
}

/* Team-Menue in derselben Knopf-Optik wie die Mitglieder-Leiste (Johns Vorschlag C) */
.portal-body .portal-subnav.portal-sidebar {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  margin-bottom: 18px;
}

.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;
  flex: 1 1 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  padding: 8px 14px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 14px;
  line-height: 1.15;
  text-align: center;
}

.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: #294f40;
  border-color: #294f40;
  color: #fff;
  font-weight: 600;
}

/* --- 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);
}

/* Quadrat wie der Zuschnitt beim Hochladen - sonst wird der Pferdekopf abgeschnitten (Fehler Nr. 8) */
.horse-teaser .ht-photo {
  aspect-ratio: 1 / 1;
  background: var(--panel-2);
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  overflow: hidden;
}

.horse-teaser .ht-photo img {
  width: 100%;
  height: 100%;
  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-private {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.lesson-cal-arena-widget {
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 10px;
  background: var(--panel-2);
}

.lesson-cal-arena-widget h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.lesson-cal-arena-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

@media (max-width: 900px) {
  .lesson-cal-arena-days { grid-template-columns: 1fr; }
}

.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;
}

/* Abgehakt ist abgehakt - auch mit X (John, 2026-09-08) */
.utility-row.status-problem > div:first-child span {
  text-decoration: line-through;
  opacity: .7;
}

.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; }

.dringend-knopf {
  min-height: 38px;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: var(--card);
  color: var(--muted);
  padding: 8px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.dringend-knopf:hover,
.dringend-knopf.aktiv {
  border-color: var(--red);
  background: var(--red-tint, rgba(179,73,46,.08));
  color: var(--red);
}

.dringend-knopf:disabled { opacity: .55; cursor: wait; }

.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(--red); }
.klapp.liste.dringend > summary { background: var(--red-tint, rgba(179,73,46,.08)); }
.liste-takt.dringend-hinweis { color: var(--red); }

.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; }
/* Mit Foto-Vorschau wird das Formular hoeher als der Bildschirm - der Dialog muss
   scrollen, sonst ist "Absenden" auf dem Handy unerreichbar (John, 16.09.2026) */
.melde-dialog { overflow-y: auto; }
.melde-dialog .contract-dialog-head { position: sticky; top: 0; z-index: 2; background: var(--panel); }

.melde-dringend {
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
}

.melde-dringend:has(input:checked) {
  border-color: var(--red);
  background: var(--red-tint, rgba(179,73,46,.08));
}

.melde-dringend span { display: grid; gap: 2px; }
.melde-dringend b { color: var(--red); }
.melde-dringend small { color: var(--muted); font-weight: 400; }

.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; }
  .dringend-knopf { 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 - Inhalt bekommt einen Rand, der Kopf bringt seinen eigenen mit */
.contract-dialog.schmal { max-width: 560px; padding-bottom: 20px; overflow-y: auto; } /* lange Formulare (Willkommensmail) scrollen, der Kopf bleibt oben */
.contract-dialog.schmal > :not(.contract-dialog-head):not(.bonus-konfetti) { padding-left: 22px; padding-right: 22px; }
.contract-dialog.schmal > :first-child:not(.contract-dialog-head):not(.bonus-konfetti) { padding-top: 20px; }
.contract-dialog.schmal > .contract-dialog-head + * { padding-top: 16px; }
.contract-dialog.schmal > .bonus-konfetti + .bonus-inhalt { padding-top: 22px; }
.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; }

.aufgaben-checkliste {
  border: 1px solid var(--line-strong);
  border-left: 4px solid #4a7fb5;
  border-radius: 6px;
  background: var(--panel-2);
  margin-bottom: 12px;
  overflow: hidden;
}

.aufgaben-checkliste.dringend { border-color: var(--red); border-left-color: var(--red); }
.aufgaben-checkliste > summary {
  list-style: none;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  touch-action: manipulation;
}
.aufgaben-checkliste > summary::-webkit-details-marker { display: none; }
.aufgaben-checkliste > summary::before { content: "›"; color: #4a7fb5; font-size: 19px; transition: transform .15s ease; }
.aufgaben-checkliste[open] > summary::before { transform: rotate(90deg); }
.aufgaben-checkliste.dringend > summary::before { color: var(--red); }
.aufgaben-checkliste > summary small { margin-left: auto; color: var(--muted); font-weight: 600; white-space: nowrap; }
.checkliste-dringend { color: var(--red); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.checkliste-dringend-grund { margin: 0; padding: 10px 14px; border-top: 1px solid var(--line); color: var(--red); font-size: 13px; }
.aufgaben-checkliste-inhalt { padding: 12px; border-top: 1px solid var(--line); }
.checkliste-dringend-grund + .aufgaben-checkliste-inhalt { border-top: 0; padding-top: 2px; }
.aufgaben-checkliste-inhalt .aufgabe:last-child { margin-bottom: 0; }

@media (max-width: 560px) {
  .aufgaben-checkliste > summary { align-items: flex-start; flex-wrap: wrap; }
  .aufgaben-checkliste > summary small { margin-left: auto; }
  .checkliste-dringend { order: 3; margin-left: 28px; }
}

/* 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% / 12)); }
.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% / 12)); }
.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; }
.shift-day-active .shift-week-board { display: block; width: 100%; overflow-x: auto; }
.shift-day-active .gantt { grid-template-columns: 150px minmax(960px, 1fr); width: 100%; min-width: 1110px; }
.shift-day-active .gachse span:last-child { transform: translateX(-100%); }
.shift-day-active .legende { justify-content: flex-end; margin: 0 0 8px; }
#shiftEditDialog { width: min(720px, calc(100vw - 32px)); max-width: 720px; overflow-x: hidden; }
#shiftEditDialog .compact-dialog-card { width: 100%; min-width: 0; }
#shiftEditDialog input[type="checkbox"] { width: 20px; min-width: 20px; max-width: 20px; min-height: 20px; height: 20px; padding: 0; }
#shiftEditDialog .shift-duty-grid label { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; }

/* 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; }
.dash-cols.ohne-pferde { grid-template-columns: minmax(0, 1fr) 300px; }
.dash-cols.ohne-guthaben { grid-template-columns: 250px minmax(0, 1fr); }
.dash-cols.ohne-pferde.ohne-guthaben { grid-template-columns: minmax(0, 1fr); }
/* Vom Mitglied ausgeblendete Dashboard-Karten (Wunsch Nr. 11) */
.karte-aus { display: none !important; }
.dashboard-karten-liste { display: grid; gap: 8px; margin: 6px 0 12px; }
#calendarEntryHint { margin: 4px 0 10px; }
#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, .dash-cols.ohne-guthaben { grid-template-columns: 250px minmax(0, 1fr); } .dash-cols.ohne-pferde { grid-template-columns: minmax(0, 1fr); } #dashForecast { grid-column: 1 / -1; } }
@media (max-width: 760px) { .dash-cols, .dash-cols.ohne-pferde, .dash-cols.ohne-guthaben { 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; }
.gmini .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; }
.gmini .gbar.ziehen { opacity: .85; box-shadow: 0 2px 8px rgba(0,0,0,.35); cursor: grabbing; z-index: 3; }
.gmini .gbar.ghost { background: rgba(47,125,79,.55); border: 1px dashed #2f7d4f; color: #fff; pointer-events: none; }
.gtag.shift-drop-target { outline: 2px solid var(--green, #2f7d4f); outline-offset: 1px; }
.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; }

.shift-duty-fieldset { border: 1px solid var(--line, #ddd8ce); border-radius: 12px; padding: 10px 12px 12px; }
.shift-duty-fieldset legend { padding: 0 6px; font-size: .82rem; font-weight: 700; color: var(--muted, #6f6a61); }
.shift-duty-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 7px 12px; }
.shift-duty-grid label { display: flex; align-items: center; gap: 7px; font-size: .9rem; }
.shift-duty-inline { display: block; color: var(--green, #285d49); }
.monat-chip .shift-duty-inline { font-size: .68rem; }
.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; }


/* ===== Nachrichten vom Team (Dashboard) ===== */
.nachricht-karte { border: 1px solid var(--gold); background: var(--gold-tint); margin-bottom: 14px; }
.nachricht-karte article.ungelesen strong { color: var(--gold-soft); }
.nachricht-karte article.ungelesen { border-left: 3px solid var(--gold); padding-left: 8px; }
.nachricht-karte article p { margin: 4px 0; white-space: pre-wrap; }
.nachricht-dialog #memberMessageDialogList article { border-bottom: 1px solid var(--line); padding: 10px 0; }
.nachricht-dialog #memberMessageDialogList article:last-child { border-bottom: 0; }
.nachricht-dialog #memberMessageDialogList p { white-space: pre-wrap; margin: 6px 0; }
.nachricht-dialog #memberMessageDialogList small { color: var(--muted); }
#memberMessageSent article small { display: block; }


/* Reitbeteiligung: Freigabestufe und Aufsichtsperson bei Kindern */
.aufsicht-form { display: grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 8px; align-items: end; margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.04); }
.aufsicht-form label { display: grid; gap: 3px; font-size: 0.78rem; margin: 0; }
.aufsicht-form select, .aufsicht-form input { font-size: 0.85rem; padding: 6px 8px; }
.aufsicht-form button { padding: 6px 12px; }
@media (max-width: 720px) { .aufsicht-form { grid-template-columns: 1fr; } }
/* Betreuungspersonen einer Reitbeteiligung (Eltern/Oma/Opa) */
.betreuer-block { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.04); }
.betreuer-liste { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.betreuer-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; background: var(--mint, #eef5ee); font-size: 0.82rem; }
.betreuer-form { display: flex; flex-wrap: wrap; gap: 6px; }
.betreuer-form input { font-size: 0.85rem; padding: 6px 8px; flex: 1; min-width: 120px; }
/* Einzeln anzuhakende Pflichtpunkte der Ranchordnung */
.ranchordnung-punkte { display: grid; gap: 8px; margin: 10px 0; padding: 10px 12px; border: 1px solid var(--line-strong, #cbb98a); border-radius: 10px; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; background: rgba(0, 0, 0, 0.08); font-size: 0.72rem; font-weight: 600; vertical-align: middle; }
#kinderCard .small-note { margin: -4px 0 8px; }


/* Vertragsabschluss: fehlende oder falsche Angaben rot markieren, Sperrhinweis */
.contract-fields label.feld-fehlt, #contractSignForm label.feld-fehlt { color: #9b1c1c; }
.contract-fields label.feld-fehlt input, .contract-fields label.feld-fehlt select, #contractSignForm label.feld-fehlt input { border: 2px solid #c62828; background: #fff5f5; outline: none; }
.contract-fields label.feld-fehlt::after { content: ' – bitte ausfüllen'; font-size: 0.8em; font-weight: 600; }
.contract-block { border: 2px solid #c62828; background: #fff5f5; color: #7a1f1f; border-radius: 10px; padding: 10px 12px; margin: 4px 0 10px; font-size: 0.92rem; }
.contract-block b { display: block; margin-bottom: 4px; }
.contract-block .mini-link { margin-top: 6px; }
#contractSignStatus.fehler { color: #9b1c1c; font-weight: 600; }


/* Stalltablet: Kinder mit Reitbeteiligung melden sich an */
.tablet-kinder-block { margin: 6px 0 30px; }
.tablet-sub { font-family: Fraunces, Georgia, serif; font-size: 26px; margin: 0 0 4px; }
.tablet-kinder button { position: relative; }
.tablet-kinder .kind-status { font-size: 13px; font-style: normal; padding: 3px 10px; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.tablet-kinder .kind-status.da { background: #dff3e4; color: #1f6b3a; font-weight: 600; }
.tablet-kinder button.fehlt-foto .tablet-avatar { border: 2px dashed #c62828; }
.kinder-checkin-kopf { display: flex; gap: 14px; align-items: center; margin: 0 0 12px; }
.kinder-checkin-kopf img, .kinder-checkin-kopf .tablet-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--panel-2); display: grid; place-items: center; font-size: 24px; color: var(--muted); }
.kinder-checkin-kopf small { display: block; color: var(--muted); }
.kinder-wahl { display: grid; gap: 6px; }
.kinder-wahl .checkbox-label { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.kinder-wahl .checkbox-label.gesperrt { opacity: .55; }
.my-family-row { display: grid; grid-template-columns: 64px 1fr; gap: 10px 12px; align-items: start; }
.my-family-row .family-foto { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: var(--panel-2); display: grid; place-items: center; font-size: 12px; color: var(--muted); text-align: center; }
.my-family-row .family-foto.fehlt { border: 2px dashed #c62828; color: #9b1c1c; }
.my-family-row .family-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.my-family-row .family-felder label.feld-fehlt input { border: 2px solid #c62828; background: #fff5f5; }
.my-family-row .family-felder label.feld-fehlt { color: #9b1c1c; }
.my-family-row .family-aktionen { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }


/* Stalltablet: Team in einer Zeile, zwei Tueren, Notfall, Unterseiten */
.tablet-staff-zeile { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
.tablet-staff-zeile button { padding: 12px 8px 10px; gap: 6px; }
.tablet-staff-zeile .tablet-avatar { width: 62px; height: 62px; font-size: 22px; }
.tablet-staff-zeile strong { font-size: 15px; }
.tablet-staff-zeile button.aktiv { border-color: var(--green, #2e7d4f); box-shadow: inset 0 0 0 1px var(--green, #2e7d4f); }
.tablet-staff .kind-status { font-size: 12px; font-style: normal; padding: 2px 9px; border-radius: 999px; background: var(--panel-2); color: var(--muted); }
.tablet-staff .kind-status.da { background: #dff3e4; color: #1f6b3a; font-weight: 600; }
.team-feierabend { font-size: 12px; }
.tablet-tueren { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.tablet-tuer, .tablet-notfall { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; text-align: left; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--card); padding: 18px 22px; font: inherit; color: var(--text); cursor: pointer; }
.tablet-tuer.tuer-kinder { background: rgba(31, 111, 139, 0.08); border-color: transparent; }
.tuer-symbol { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-family: Fraunces, Georgia, serif; font-size: 28px; background: var(--card); border: 1px solid var(--line); color: var(--accent, #1f6f8b); }
.tuer-text { display: grid; gap: 2px; }
.tuer-text strong { font-family: Fraunces, Georgia, serif; font-size: 21px; font-weight: 600; }
.tuer-text small { color: var(--muted); font-size: 13px; }
.tuer-zahl { font-style: normal; font-size: 12px; font-weight: 600; color: #1f6b3a; background: #dff3e4; border-radius: 999px; padding: 2px 9px; justify-self: start; margin-top: 2px; }
.tuer-zahl.leer { color: var(--muted); background: var(--panel-2); }
.tuer-pfeil { font-size: 28px; color: var(--muted); }
.tablet-notfall { grid-template-columns: 48px 1fr; background: #b83232; border-color: #b83232; color: #fff; margin-bottom: 18px; padding: 14px 22px; }
.tablet-notfall .tuer-symbol { width: 48px; height: 48px; font-size: 26px; background: rgba(255,255,255,.18); border-color: transparent; color: #fff; }
.tablet-notfall .tuer-text strong { font-size: 19px; }
.tablet-notfall .tuer-text small { color: rgba(255,255,255,.9); }
.tablet-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; flex-wrap: wrap; }
.tablet-unterseite { display: grid; gap: 14px; align-content: start; }
.tablet-kopfzeile { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; }
.tablet-kopfzeile .tablet-sub { margin: 0; font-size: 24px; }
.tablet-zaehler { color: var(--muted); font-size: 13px; white-space: nowrap; }
.tablet-filter { display: grid; grid-template-columns: minmax(180px, 320px) 1fr; gap: 12px; align-items: center; }
.tablet-filter input { font: inherit; font-size: 15px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--card); color: var(--text); }
.tablet-buchstaben { display: flex; flex-wrap: wrap; gap: 6px; }
.tablet-buchstaben button { font: inherit; font-size: 13px; min-width: 36px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); cursor: pointer; }
.tablet-buchstaben button.aktiv { background: var(--accent, #1f6f8b); border-color: var(--accent, #1f6f8b); color: #fff; }
.tablet-gruppe { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin: 6px 0 -6px; }
.tablet-kinder { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 8px; }
.tablet-kinder button.aktiv { border-color: #2e7d4f; box-shadow: inset 0 0 0 1px #2e7d4f; }
.tablet-namen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tablet-buchstabe { grid-column: 1 / -1; font-family: Fraunces, Georgia, serif; font-size: 20px; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 2px; margin-top: 6px; }
.tablet-name { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; text-align: left; border: 1px solid var(--line); border-radius: 10px; background: var(--card); padding: 12px 14px; font: inherit; color: var(--text); cursor: pointer; }
.tablet-name strong { display: block; font-size: 16px; font-weight: 600; }
.tablet-name small { display: block; color: var(--muted); font-size: 12px; }
.tablet-name.da { border-color: #2e7d4f; background: #eaf7ee; }
.tablet-name .kind-status { font-size: 12px; font-style: normal; padding: 2px 9px; border-radius: 999px; background: var(--panel-2); color: var(--muted); white-space: nowrap; }
.tablet-name .kind-status.da { background: #dff3e4; color: #1f6b3a; font-weight: 600; }
.tablet-notfall-seite { border: 3px solid #b83232; border-radius: 14px; padding: 18px; }
.notfall-kopf { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; background: #b83232; color: #fff; border-radius: 10px; padding: 14px 18px; }
.notfall-kopf h2 { margin: 0; font-family: Fraunces, Georgia, serif; font-size: 28px; color: #fff; }
.notfall-kopf small { display: block; opacity: .9; font-size: 13px; }
.notfall-zahl { text-align: right; }
.notfall-zahl b { display: block; font-family: Fraunces, Georgia, serif; font-size: 48px; line-height: 1; font-variant-numeric: tabular-nums; }
.notfall-personen { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin-bottom: 8px; }
.notfall-person { display: grid; grid-template-columns: 60px 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--card); }
.notfall-person .tablet-avatar { width: 60px; height: 60px; font-size: 18px; }
.notfall-person strong { display: block; font-size: 17px; }
.notfall-person small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.35; }
.notfall-person small a { color: inherit; font-weight: 600; }
.notfall-rolle { display: inline-block; font-size: 11px; padding: 1px 8px; border-radius: 999px; background: var(--panel-2); color: var(--muted); font-weight: 600; }
.notfall-person.kind .notfall-rolle { background: rgba(31,111,139,.12); color: #1f6f8b; }
.notfall-person.warn { border-color: #b83232; background: #fbe6e6; }
.notfall-fuss { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.notfall-fuss a, .notfall-fuss button { text-align: center; text-decoration: none; }
.notfall-anruf { background: #b83232 !important; border-color: #b83232 !important; color: #fff !important; font-size: 17px; }
@media (max-width: 900px) {
  .tablet-staff-zeile { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tablet-tueren, .notfall-fuss, .tablet-namen, .tablet-filter { grid-template-columns: 1fr; }
}


/* "Für dich" nach der Anmeldung am Stalltablet */
.tablet-briefing { max-width: 560px; }
.briefing-nachricht { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 0 0 8px; background: var(--card); }
.briefing-nachricht.persoenlich { border-left: 4px solid var(--accent, #1f6f8b); }
.briefing-nachricht small { color: var(--muted); font-size: 12px; }
.briefing-nachricht p { margin: 4px 0 2px; font-size: 15px; line-height: 1.45; }
.briefing-todos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.briefing-todos li { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; border: 1px solid #e3b7b7; background: #fff5f5; border-radius: 10px; padding: 9px 12px; }
.briefing-todos li strong { font-size: 15px; }
.briefing-todos li small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.briefing-fuss { align-items: center; }
.briefing-fuss small { margin-left: auto; }


/* Tablet-PIN: grosse Zifferntastatur */
.tablet-pin { max-width: 380px; text-align: center; }
.tablet-pin .muted { margin: 0 0 10px; }
.pin-anzeige { display: flex; justify-content: center; gap: 16px; margin: 6px 0 8px; }
.pin-anzeige i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); display: inline-block; }
.pin-anzeige i.voll { background: var(--accent, #1f6f8b); border-color: var(--accent, #1f6f8b); }
.pin-tasten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 8px; }
.pin-tasten button { font: inherit; font-size: 26px; font-weight: 600; padding: 16px 0; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--card); color: var(--text); cursor: pointer; }
.pin-tasten button:active { background: var(--panel-2); }
.pin-tasten .pin-neben { font-size: 15px; font-weight: 500; color: var(--muted); }
#tabletPinFehler { min-height: 1.4em; margin: 0; }
#tabletPinForm input { width: 90px; letter-spacing: .3em; font-size: 18px; text-align: center; }

/* Stalltablet: Sperrbildschirm nutzt die ganze Fläche, rundum 1,5 cm Rand, alles größer und mit dem Finger bedienbar */
.tablet-lock { padding: 1.5cm; place-items: start center; }
.tablet-lock-inner { width: 100%; max-width: none; }
.tablet-lock .eyebrow { font-size: clamp(13px, 1.4vw, 18px); letter-spacing: .16em; }
.tablet-lock h1 { font-size: clamp(36px, 5vw, 64px); margin: 10px 0 8px; }
.tablet-lock .tablet-hint { font-size: clamp(16px, 1.6vw, 22px); margin-bottom: 28px; }
.tablet-staff-zeile { gap: clamp(12px, 1.4vw, 22px); margin-bottom: 30px; }
.tablet-staff-zeile button { padding: clamp(14px, 1.6vw, 24px) 10px; gap: 8px; border-radius: 10px; }
.tablet-staff-zeile .tablet-avatar { width: clamp(72px, 8vw, 116px); height: clamp(72px, 8vw, 116px); font-size: clamp(24px, 2.8vw, 38px); }
.tablet-staff-zeile strong { font-size: clamp(17px, 1.8vw, 24px); }
.tablet-staff-zeile small { font-size: clamp(12px, 1.2vw, 15px); }
.tablet-staff .kind-status { font-size: clamp(12px, 1.2vw, 15px); padding: 3px 12px; }
.team-feierabend { font-size: clamp(13px, 1.3vw, 16px); }
.tablet-tueren { gap: clamp(14px, 1.6vw, 24px); margin-bottom: 20px; }
.tablet-tuer, .tablet-notfall { padding: clamp(20px, 2.2vw, 32px) clamp(22px, 2.4vw, 36px); grid-template-columns: clamp(64px, 7vw, 96px) 1fr auto; gap: clamp(16px, 1.8vw, 26px); border-radius: 18px; }
.tuer-symbol { width: clamp(64px, 7vw, 96px); height: clamp(64px, 7vw, 96px); font-size: clamp(28px, 3.2vw, 44px); }
.tuer-text strong { font-size: clamp(22px, 2.4vw, 34px); }
.tuer-text small { font-size: clamp(14px, 1.4vw, 19px); }
.tuer-zahl { font-size: clamp(13px, 1.3vw, 17px); padding: 3px 12px; }
.tuer-pfeil { font-size: clamp(30px, 3vw, 44px); }
.tablet-notfall { grid-template-columns: clamp(52px, 5.5vw, 76px) 1fr; padding: clamp(16px, 1.8vw, 26px) clamp(22px, 2.4vw, 36px); margin-bottom: 22px; }
.tablet-notfall .tuer-symbol { width: clamp(52px, 5.5vw, 76px); height: clamp(52px, 5.5vw, 76px); font-size: clamp(28px, 3vw, 40px); }
.tablet-notfall .tuer-text strong { font-size: clamp(20px, 2.2vw, 30px); }
.tablet-fuss { font-size: clamp(14px, 1.4vw, 18px); }
.tablet-fuss .secondary-action { font-size: clamp(14px, 1.3vw, 17px); padding: 10px 18px; }
/* Unterseiten */
.tablet-kopfzeile .tablet-sub { font-size: clamp(24px, 2.8vw, 38px); }
.tablet-kopfzeile .secondary-action { font-size: clamp(15px, 1.5vw, 20px); padding: 12px 20px; }
.tablet-zaehler { font-size: clamp(14px, 1.4vw, 18px); }
.tablet-filter input { font-size: clamp(16px, 1.6vw, 22px); padding: 14px 16px; }
.tablet-buchstaben button { font-size: clamp(14px, 1.5vw, 19px); min-width: clamp(40px, 4vw, 54px); padding: 10px 10px; }
.tablet-gruppe { font-size: clamp(12px, 1.2vw, 15px); }
.tablet-kinder { grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 15vw, 210px), 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.tablet-kinder button { padding: clamp(14px, 1.6vw, 22px) 10px; }
.tablet-kinder .tablet-avatar { width: clamp(84px, 9vw, 128px); height: clamp(84px, 9vw, 128px); font-size: clamp(26px, 3vw, 40px); }
.tablet-kinder strong { font-size: clamp(16px, 1.7vw, 22px); }
.tablet-kinder small { font-size: clamp(12px, 1.2vw, 15px); }
.tablet-namen { gap: clamp(10px, 1.2vw, 16px); }
.tablet-name { padding: clamp(14px, 1.6vw, 20px) clamp(14px, 1.6vw, 22px); border-radius: 12px; }
.tablet-name strong { font-size: clamp(18px, 1.9vw, 24px); }
.tablet-name small { font-size: clamp(13px, 1.3vw, 16px); }
.tablet-name .kind-status { font-size: clamp(13px, 1.3vw, 16px); padding: 4px 12px; }
.tablet-buchstabe { font-size: clamp(22px, 2.4vw, 30px); }
.notfall-kopf h2 { font-size: clamp(28px, 3.2vw, 44px); }
.notfall-kopf small { font-size: clamp(14px, 1.4vw, 18px); }
.notfall-zahl b { font-size: clamp(52px, 6vw, 84px); }
.notfall-personen { grid-template-columns: repeat(auto-fill, minmax(clamp(300px, 30vw, 420px), 1fr)); }
.notfall-person { grid-template-columns: clamp(60px, 6vw, 84px) 1fr auto; padding: 12px 14px; }
.notfall-person .tablet-avatar { width: clamp(60px, 6vw, 84px); height: clamp(60px, 6vw, 84px); }
.notfall-person strong { font-size: clamp(18px, 1.9vw, 24px); }
.notfall-person small { font-size: clamp(13px, 1.3vw, 16px); }
.notfall-person .secondary-action { font-size: clamp(14px, 1.4vw, 18px); padding: 12px 18px; }
.notfall-fuss a, .notfall-fuss button { font-size: clamp(16px, 1.7vw, 22px); padding: 16px; }
/* PIN-Tastatur und "Für dich" auf dem Tablet ebenfalls größer */
.tablet-pin { max-width: min(480px, 92vw); }
.tablet-pin h3 { font-size: clamp(20px, 2.2vw, 28px); }
.pin-anzeige i { width: 22px; height: 22px; }
.pin-tasten { gap: 14px; }
.pin-tasten button { font-size: clamp(28px, 3vw, 38px); padding: clamp(18px, 2vw, 26px) 0; }
.pin-tasten .pin-neben { font-size: clamp(15px, 1.5vw, 19px); }
.tablet-briefing { max-width: min(640px, 92vw); }
.tablet-briefing h3 { font-size: clamp(20px, 2.2vw, 28px); }
.briefing-nachricht p { font-size: clamp(16px, 1.6vw, 20px); }
.briefing-todos li strong { font-size: clamp(16px, 1.6vw, 20px); }
@media (max-width: 900px) {
  .tablet-lock { padding: 0.8cm; }
  .tablet-staff-zeile { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* Notfall: Rueckfrage vor der Liste */
.notfall-bestaetigen { max-width: min(560px, 92vw); border: 3px solid #b83232; }
.notfall-bestaetigen h3 { color: #b83232; font-size: clamp(20px, 2.2vw, 28px); }
.notfall-bestaetigen p { font-size: clamp(15px, 1.6vw, 20px); line-height: 1.45; }
.notfall-bestaetigen-fuss { display: grid; grid-template-columns: 1fr; gap: 10px; }
.notfall-bestaetigen-fuss .notfall-anruf { font-size: clamp(17px, 1.8vw, 22px); padding: 16px; }


/* Notfall: Liste links, Rettungsplan rechts */
.notfall-raster { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: start; }
.rettungsplan { display: grid; gap: 10px; align-content: start; }
.rettungskarte { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--card); }
.rettungskarte.rot { border-color: #b83232; }
.rettungskarte summary { cursor: pointer; font-family: Fraunces, Georgia, serif; font-size: clamp(19px, 2vw, 26px); font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.rettungskarte summary::after { content: '+'; color: var(--muted); font-size: 1.2em; }
.rettungskarte[open] summary::after { content: '–'; }
.rettungskarte.rot summary { color: #b83232; }
.rettungskarte ol { margin: 8px 0 0; padding-left: 26px; font-size: clamp(15px, 1.5vw, 19px); line-height: 1.4; }
.rettungskarte li { margin: 5px 0; }
.rettungshinweis { font-size: clamp(13px, 1.3vw, 16px); color: var(--muted); margin: 8px 0 2px; }
mark.fehlt { background: #ffd6d6; color: #8a1f1f; font-weight: 700; padding: 0 4px; border-radius: 4px; }
@media (max-width: 1100px) { .notfall-raster { grid-template-columns: 1fr; } }


/* Administration: Personal */
.personal-zeile { cursor: pointer; }
.personal-zeile:hover { background: var(--panel-2); }
.personal-aktionen { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.mini-list span.warn { color: #b26b00; font-weight: 600; }
.mini-list span.good { color: #1f6b3a; font-weight: 600; }
#unterweisungDialog .contract-text p { margin: 0 0 10px; }
#unterweisungFragen { display: grid; gap: 8px; margin-bottom: 10px; }


/* Administration: Personal in drei Ebenen */
.personal-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.personal-kopf h3 { margin: 0; }
.personal-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 12px; }
.personal-kachel { position: relative; border: 1px solid var(--line); border-radius: 12px; padding: 16px 10px 12px; display: grid; justify-items: center; gap: 6px; text-align: center; background: var(--card); font: inherit; color: var(--text); cursor: pointer; transition: transform .12s; }
.personal-kachel:hover { transform: translateY(-2px); }
.personal-kachel.rot { border-color: #b83232; } .personal-kachel.gelb { border-color: #b26b00; } .personal-kachel.gruen { border-color: #2e7d4f; }
.personal-kachel strong { font-size: 14px; } .personal-kachel small { color: var(--muted); font-size: 11px; }
.personal-avatar { width: 68px; height: 68px; border-radius: 50%; background: var(--panel-2); display: grid; place-items: center; font-family: Fraunces, Georgia, serif; font-size: 22px; color: var(--muted); object-fit: cover; }
.personal-avatar.gross { width: 84px; height: 84px; font-size: 28px; }
.personal-punkt { position: absolute; top: 8px; right: 8px; min-width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff; padding: 0 6px; }
.personal-punkt.rot { background: #b83232; } .personal-punkt.gelb { background: #b26b00; } .personal-punkt.gruen { background: #2e7d4f; }
.status-pille { font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 999px; font-weight: 600; white-space: nowrap; }
.status-pille.rot { background: #fbe6e6; color: #b83232; } .status-pille.gelb { background: #fff1d6; color: #b26b00; } .status-pille.gruen { background: #dff3e6; color: #2e7d4f; }
.personal-leiste { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; background: var(--panel-2); border-radius: 10px; padding: 8px 14px; font-size: 13px; margin-bottom: 10px; }
.personal-leiste b { font-weight: 600; } .personal-leiste .trenner { color: var(--muted); } .personal-leiste .mini-link { margin-left: auto; }
.akte-nav { margin-bottom: 10px; }
.akte-kopf { display: grid; grid-template-columns: 84px 1fr auto; gap: 16px; align-items: center; margin-bottom: 14px; }
.akte-kopf h3 { margin: 0 0 2px; font-size: 22px; } .akte-kopf small { display: block; color: var(--muted); }
.akte-spalten { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
.akte-seite { display: grid; gap: 16px; }
.akte-block { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
.akte-block h3 { display: flex; justify-content: space-between; align-items: center; font-size: 16px; margin: 0; }
.akte-block h3 small { font-size: 12px; color: var(--muted); font-weight: 400; }
.akte-zeile { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 10px; padding: 9px 12px; background: var(--card); font: inherit; color: var(--text); text-align: left; cursor: default; }
button.akte-zeile { cursor: pointer; } button.akte-zeile:hover { background: var(--panel-2); }
.akte-zeile.offen { border-left: 4px solid #b83232; } .akte-zeile.bald { border-left: 4px solid #b26b00; } .akte-zeile.ok { border-left: 4px solid #2e7d4f; }
.akte-zeile strong { display: block; font-size: 13.5px; } .akte-zeile small { color: var(--muted); font-size: 11.5px; }
.akte-rechts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.knopf-klein { border: 1px solid var(--line-strong); border-radius: 8px; padding: 4px 10px; font-size: 12px; font-weight: 600; }
.knopf-klein.primaer { background: var(--accent, #1f6f8b); color: #fff; border-color: var(--accent, #1f6f8b); }
.akte-notiz { border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.akte-notiz small { color: var(--muted); font-size: 11.5px; } .akte-notiz p { margin: 4px 0 6px; font-size: 13.5px; }
.dok-raster { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
.dok-text { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; font-size: 14px; line-height: 1.55; max-height: 70vh; overflow: auto; }
.dok-text h3 { font-size: 20px; margin: 0 0 4px; } .dok-text p { margin: 0 0 10px; }
.dok-unterschrift { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 10px; position: sticky; top: 12px; }
.dok-unterschrift label { display: grid; gap: 4px; font-size: 13px; }
.dok-unterschrift .checkbox-label { display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: 8px; }
.zwei-wege { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.weg { border: 1px dashed var(--line-strong); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; text-align: center; cursor: pointer; }
.weg:has(input:checked) { border-style: solid; border-color: var(--accent, #1f6f8b); background: rgba(31,111,139,.08); }
.weg input { display: none; } .weg small { display: block; color: var(--muted); }
@media (max-width: 900px) { .akte-spalten, .dok-raster, .zwei-wege { grid-template-columns: 1fr; } .akte-kopf { grid-template-columns: 64px 1fr; } .dok-unterschrift { position: static; } }


/* Ranchordnung */
.ranchordnung-text h3 { font-family: Fraunces, Georgia, serif; font-size: 17px; margin: 14px 0 4px; }
.ranchordnung-text p { margin: 0 0 8px; }
#ranchordnungPanel .contract-text { max-height: none; }


/* Postfach */
.postfach-raster { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; align-items: start; }
.postfach-zeile { cursor: pointer; }
.postfach-zeile.ungelesen strong { font-weight: 700; }
.postfach-zeile.ungelesen { border-left: 4px solid var(--accent, #1f6f8b); }
.postfach-vorschau { display: block; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60ch; }
.postfach-text { white-space: normal; }
@media (max-width: 900px) { .postfach-raster { grid-template-columns: 1fr; } }

/* ===== Fernbedienung (Kopfknopf und Seite) ===== */
.nav-fern { 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; white-space: nowrap; }
.nav-fern.active { background: var(--gold, #b08830); color: #fff; border-color: transparent; }
.nav-fern .nav-fern-kurz { display: none; }
.fern-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.fern-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; }
.fern-card h3 { margin: 0 0 10px; font-size: 0.95rem; letter-spacing: 0.06em; text-transform: uppercase; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.fern-schalter { display: flex; flex-direction: column; gap: 10px; }
.fern-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 66px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line, rgba(0,0,0,0.2)); background: var(--surface, #fff); color: inherit; font: inherit; cursor: pointer; text-align: left; }
.fern-toggle .fern-name { display: block; font-weight: 700; font-size: 1.05rem; }
.fern-toggle .fern-hinweis { display: block; font-size: 0.8rem; opacity: 0.7; }
.fern-toggle .fern-zustand { flex: 0 0 auto; padding: 7px 16px; border-radius: 999px; font-weight: 700; font-size: 0.85rem; background: rgba(128,128,128,0.15); }
.fern-toggle.on { border-color: rgba(176,136,48,0.6); background: rgba(176,136,48,0.08); }
.fern-toggle.on .fern-zustand { background: var(--gold, #b08830); color: #fff; }
.fern-toggle.wartet { opacity: 0.65; }
.fern-toggle:disabled { cursor: default; opacity: 0.5; }
.fern-tuer { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line, rgba(0,0,0,0.08)); }
.fern-tuer:first-of-type { border-top: 0; }
.fern-pill { padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; background: rgba(128,128,128,0.15); text-transform: none; letter-spacing: 0; }
.fern-pill.offen { background: rgba(178,59,59,0.15); color: #b23b3b; }
.fern-pill.zu { background: rgba(61,220,132,0.18); color: #1d8a4e; }
.fern-pill.unbekannt { opacity: 0.6; }
.fern-alarm { margin: 0 0 8px; font-size: 1.15rem; font-weight: 700; }
.fern-alarm.scharf { color: #b08830; }
.fern-alarm.rot { color: #b23b3b; }
.fern-warnung { margin: 8px 0 0; padding: 8px 10px; border-radius: 8px; background: rgba(178,59,59,0.1); color: #b23b3b; font-size: 0.85rem; }
.fern-sperre { grid-column: 1 / -1; text-align: center; padding: 28px 16px; }
.fern-sperre h3 { justify-content: center; }
.fern-sperre code { font-size: 0.85rem; }
/* Fernbedienung gehört in die Handyansicht: am PC ist die Kopfzeile ohne sie aufgeräumter (John, 14.09.2026). */
@media (min-width: 761px) {
  .portal-nav .nav-fern { display: none; }
}
@media (max-width: 760px) {
  .portal-nav .nav-fern { padding: 6px 9px; font-size: 0.8rem; }
  .nav-fern .nav-fern-lang { display: none; }
  .nav-fern .nav-fern-kurz { display: inline; }
}

/* Stalltablet: Fernbedienung rechts neben dem Notfallknopf */
.tablet-notfall-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; align-items: stretch; }
.tablet-notfall-zeile .tablet-notfall { margin-bottom: 0; }
.tablet-tuer.tablet-fern { background: rgba(176,136,48,0.12); border-color: transparent; }
.tablet-tuer.tablet-fern .tuer-symbol { color: #b08830; }
@media (min-width: 1000px) { .tablet-notfall-zeile { gap: clamp(14px, 1.6vw, 24px); margin-bottom: 22px; } }
@media (max-width: 700px) { .tablet-notfall-zeile { grid-template-columns: 1fr; } }

/* Administration > Ideen: kompakte Suche links, grosser Schreibbereich rechts */
.ideen-kopf,
.ideen-editor-kopf,
.ideen-aktionen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ideen-layout {
  display: grid;
  grid-template-columns: minmax(260px, .8fr) minmax(420px, 1.4fr);
  gap: 18px;
  align-items: start;
}

.ideen-suche {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
}

.ideen-liste {
  display: grid;
  gap: 8px;
  max-height: 640px;
  overflow: auto;
  margin-top: 10px;
  padding: 2px;
}

.ideen-karte {
  width: 100%;
  min-height: 44px;
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: inherit;
  cursor: pointer;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.ideen-karte:hover,
.ideen-karte:focus-visible {
  border-color: var(--gold);
}

.ideen-karte.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-tint);
}

.ideen-karte span {
  color: var(--gold-soft);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ideen-karte small {
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ideen-karte time {
  color: var(--muted);
  font-size: .72rem;
}

.ideen-editor-spalte {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  background: var(--card);
}

.ideen-editor-spalte textarea {
  min-height: 280px;
  resize: vertical;
}

.idee-mikro {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.idee-mikro svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.idee-mikro.recording {
  background: var(--red);
  border-color: var(--red);
  color: var(--on-danger);
}

.ideen-aktionen #ideaSpeechStatus {
  flex: 1;
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .ideen-karte { transition: none; }
}

@media (max-width: 900px) {
  .ideen-layout { grid-template-columns: 1fr; }
  .ideen-liste { max-height: 360px; }
}

@media (max-width: 560px) {
  .ideen-kopf,
  .ideen-aktionen {
    align-items: stretch;
    flex-direction: column;
  }

  .ideen-aktionen button { width: 100%; }
  .ideen-editor-spalte { padding: 14px; }
}
.tablet-unterseite .fern-grid { text-align: left; }
.tablet-tuer.tablet-fern { grid-template-columns: clamp(52px, 5.5vw, 76px) 1fr auto; padding: clamp(16px, 1.8vw, 26px) clamp(22px, 2.4vw, 36px); }
.tablet-tuer.tablet-fern .tuer-symbol { width: clamp(52px, 5.5vw, 76px); height: clamp(52px, 5.5vw, 76px); font-size: clamp(28px, 3vw, 40px); }
.tablet-tuer.tablet-fern .tuer-text strong { font-size: clamp(20px, 2.2vw, 30px); }

/* ===== Verwaltung: Dienstleistungen wie die Pensioner-Liste ===== */
.dl-admin-werkzeug { display: flex; gap: 8px; margin: 8px 0 10px; flex-wrap: wrap; }
.dl-admin-werkzeug input { flex: 1 1 200px; min-width: 0; }
.dl-kopf.dl-admin, .dl-admin .dl-zeile { grid-template-columns: minmax(0,1fr) minmax(112px,150px) minmax(132px,170px) 44px; gap: 8px; }
.dl-admin .dl-preis { grid-template-columns: minmax(0,1fr) 60px; } .dl-admin .dl-btn { width: 60px; font-size: .72rem; padding: 5px 0; }
.dl-admin-layout { align-items: start; }
.dl-admin .dl-kat summary .dl-neu { margin-left: 8px; font: inherit; font-size: 12px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line, #ddd); background: var(--surface, #fff); color: inherit; cursor: pointer; }
.dl-admin .dl-zeile.gewaehlt { outline: 2px solid var(--gold, #b08830); }
.dl-admin .dl-zeile.inaktiv .dl-name, .dl-admin .dl-zeile.inaktiv .dl-preis { opacity: 0.55; }
.dl-admin .dl-btn.aktiv { background: var(--gold, #b08830); border-color: var(--gold, #b08830); color: #fff; }
.dl-admin .dl-leer .dl-neu { font: inherit; font-size: 12px; padding: 4px 8px; border-radius: 6px; border: 1px dashed var(--line, #ccc); background: transparent; color: var(--muted, #777); cursor: pointer; white-space: nowrap; }
.dl-pill.inaktiv { background: rgba(178,59,59,0.12); color: #b23b3b; }
.dl-pill.werktag { background: var(--surface-2, #faf7f0); color: var(--muted, #777); border: 1px solid var(--line, #ddd); }
.dl-sort { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.dl-sort button { font: inherit; font-size: 11px; line-height: 1; width: 28px; height: 19px; border-radius: 5px; border: 1px solid var(--line, #ddd); background: var(--surface, #fff); color: var(--muted, #777); cursor: pointer; padding: 0; }
.dl-sort button:disabled { opacity: 0.3; cursor: default; }
.dl-admin-paar { display: flex; gap: 6px; margin: 4px 0 12px; }
.dl-admin-paar button { flex: 1; font: inherit; font-size: 13px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line, #ddd); background: var(--surface, #fff); color: var(--muted, #777); cursor: pointer; }
.dl-admin-paar button.aktiv { border-color: var(--gold, #b08830); background: var(--surface-2, #faf7f0); color: var(--text, #222); font-weight: 600; }
.dl-admin-paar button.abo.aktiv { border-color: #5b4a8a; background: #e7e1f3; color: #5b4a8a; }
#adminServiceKopf .eyebrow { margin: 0 0 2px; }
#adminServiceKopf h3 { margin: 0; }
@media (max-width: 760px) { .dl-kopf.dl-admin, .dl-admin .dl-zeile { grid-template-columns: minmax(0,1fr) 118px 132px 40px; gap: 6px; } }
.admin-layout.two.dl-admin-layout { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .admin-layout.two.dl-admin-layout { grid-template-columns: 1fr; } }
.dl-admin .dl-preis.abo .dl-euro small { display: none; }

/* ===== Aufgaben: Team-Uebersicht (Admins) ===== */
.team-aufgaben { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.team-person { border: 1px solid var(--line, #e2dccf); border-radius: 12px; background: var(--card, #fff); padding: 14px 16px; }
.team-person.hat-ueberfaellig { border-color: rgba(178,59,59,.5); }
.team-person-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.team-person-kopf .personal-avatar { width: 48px; height: 48px; font-size: 17px; flex: 0 0 auto; }
.team-person-kopf b { display: block; font-size: 1.02rem; }
.team-person-kopf small { color: var(--muted, #777); }
.team-person-kopf .secondary-action { margin-left: auto; font-size: 12px; padding: 5px 10px; white-space: nowrap; }
.team-zaehler { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.team-zaehler span { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--surface-2, #faf7f0); border: 1px solid var(--line, #e2dccf); color: var(--muted, #777); }
.team-zaehler span.rot { background: rgba(178,59,59,.12); color: #b23b3b; border-color: transparent; font-weight: 600; }
.team-zaehler span.heute { background: rgba(176,136,48,.14); color: #8a6a1f; border-color: transparent; font-weight: 600; }
.team-zaehler span.gruen { background: rgba(61,220,132,.16); color: #1d8a4e; border-color: transparent; }
.team-punkte { display: grid; gap: 4px; }
.team-punkt { display: grid; grid-template-columns: 6px minmax(0,1fr) auto; gap: 8px; align-items: baseline; font-size: 13px; padding: 4px 0; border-top: 1px solid var(--line-2, #eee); }
.team-punkt:first-child { border-top: 0; }
.team-punkt i { width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong, #ccc); align-self: center; }
.team-punkt.overdue i { background: #b23b3b; } .team-punkt.today i { background: #b08830; } .team-punkt.week i { background: #1f6f8b; }
.team-punkt small { display: block; color: var(--muted, #777); font-size: 11px; }
.team-punkt .frist { white-space: nowrap; color: var(--muted, #777); font-variant-numeric: tabular-nums; }
.team-punkt.overdue .frist { color: #b23b3b; font-weight: 600; }
.team-person.leer .team-punkte { color: var(--muted, #777); font-size: 13px; }
.team-offen { margin-top: 18px; }

/* ===== Abrechnung beim Erledigen (Preis nach Aufwand, Praeparat, Impfung) ===== */
.abrechnung-dialog { border: 0; border-radius: 16px; padding: 0; max-width: 520px; width: calc(100vw - 32px); background: var(--card, #fff); color: var(--text, #222); box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.abrechnung-dialog::backdrop { background: rgba(20,16,10,.55); }
.abrechnung-inhalt { padding: 22px 24px; display: grid; gap: 12px; }
.abrechnung-inhalt h3 { margin: 0; font-family: Fraunces, Georgia, serif; font-size: 1.3rem; }
.abrechnung-inhalt label { display: grid; gap: 4px; font-size: 12px; color: var(--muted, #777); }
.abrechnung-inhalt input, .abrechnung-inhalt textarea { font: inherit; font-size: 15px; padding: 9px 11px; border: 1px solid var(--line, #ddd); border-radius: 8px; background: var(--surface, #fff); color: inherit; }
.abrechnung-stufen { display: grid; gap: 6px; }
.abrechnung-stufe { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line, #ddd); border-radius: 10px; cursor: pointer; font-size: 15px; color: var(--text, #222); }
.abrechnung-stufe:has(input:checked) { border-color: var(--gold, #b08830); background: var(--surface-2, #faf7f0); }
.abrechnung-stufe b { margin-left: auto; font-variant-numeric: tabular-nums; }
.abrechnung-stufe input[type="radio"] { width: 18px; height: 18px; }
.abrechnung-betrag { display: grid; grid-template-columns: minmax(0,1fr) 120px; gap: 10px; }
.abrechnung-summe { margin: 0; font-weight: 700; font-size: 1.05rem; }
.abrechnung-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.abrechnung-knoepfe .danger-action { margin-right: auto; }
.abrechnung-inhalt label.abrechnung-stufe { display: flex; flex-direction: row; align-items: center; font-size: 15px; color: var(--text, #222); }

/* Schnellbuchung fuer ein Mitglied im Arbeitskalender */
.week-quick-booking { margin: 4px 0 6px; font-size: 0.78rem; }

/* Buchungsprotokoll (Verwaltung → Protokoll) */
.stat-tabelle .betrag-minus { color: #b23b3b; font-weight: 600; white-space: nowrap; }
.stat-tabelle .betrag-plus { color: #2e7d32; font-weight: 600; white-space: nowrap; }

/* Mitgliedsansicht eines Administrators (nur lesen) */
.ansicht-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem 1.2rem; padding: 0.55rem 1rem; background: #fff3cd; color: #5c4400; border-bottom: 2px solid #e0b93a; font-size: 0.95rem; }
.ansicht-banner[hidden] { display: none; }
.nav-neu-schalter { border: 1px dashed var(--gold, #b08830); background: transparent; color: var(--gold, #b08830); border-radius: 999px; padding: 5px 12px; font-size: 0.8rem; cursor: pointer; }
.nav-neu-schalter.active { background: var(--gold, #b08830); color: #fff; border-style: solid; }
.view-switch.nav-neu { flex-wrap: wrap; }
.view-switch.nav-neu .nav-neu-unsichtbar { display: none !important; }
.view-switch.nav-neu button.nav-admin { border-left: 1px dashed var(--gold, #b08830); }
.view-switch.nav-neu .bereich-menu { position: relative; }
.view-switch.nav-neu .bereich-menu summary { list-style: none; cursor: pointer; padding: 6px 16px; font-size: 0.85rem; }
.view-switch.nav-neu .bereich-menu[data-aktiv] summary { background: var(--gold, #b08830); color: #fff; font-weight: 700; }
.view-switch.nav-neu .bereich-menu > div { position: absolute; top: 100%; left: 0; z-index: 30; background: var(--card, #fff); border: 1px solid var(--line, #e0dbcf); border-radius: 12px; padding: 6px; display: flex; flex-direction: column; min-width: 180px; box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.view-switch.nav-neu .bereich-menu > div button { text-align: left; border-radius: 8px; }
.ueberblick-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.karte-ueberblick { background: var(--card, #fff); border: 1px solid var(--line, #e0dbcf); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.karte-ueberblick h3 { margin: 0; font-size: 1.05rem; }
.karte-ueberblick.ohne-rolle { opacity: 0.7; }
.ueberblick-zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; }
.ueberblick-zahlen div { display: flex; flex-direction: column; }
.ueberblick-zahlen b { font-size: 1.25rem; font-family: Georgia, serif; }
.ueberblick-zahlen small { color: var(--muted, #6f675b); font-size: 0.78rem; line-height: 1.25; }
.ueberblick-warn { margin: 0; color: var(--red, #b34b3c); font-weight: 600; font-size: 0.85rem; }
.testumgebung-banner { position: sticky; top: 0; z-index: 1000; padding: 0.5rem 1rem; background: #b3261e; color: #fff; text-align: center; font-size: 0.95rem; }
.testumgebung-banner a { color: #fff; text-decoration: underline; }
.ansicht-banner .secondary-action { padding: 0.3rem 0.8rem; }

/* Termine (Team): wer hat gebucht */
.lesson-teilnehmer { margin-top: 6px; font-size: 13px; color: var(--text); }
.lesson-teilnehmer .lesson-reserviert { color: #8a6a00; }

.teilnehmer-reserviert { padding: 8px 22px; font-size: 13px; color: #8a6a00; }

/* Reitbeteiligung: Namen je Pony */
.share-reiter { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.share-reiter i { font-style: normal; font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); }

/* Reiterfahrung der Kinder */
.pill.warn { background: #fff3cd; color: #7a5c00; }
.abzeichen { border: 1px solid var(--line); border-radius: 4px; padding: 6px 10px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.abzeichen legend { font-size: 12px; color: var(--muted); padding: 0 4px; }

/* Team-Kalender: alle Pferde einer Pauschale abhaken */

/* Tagesansicht: ein Tag ueber die ganze Breite, gross genug fuer den Finger */
.team-week-board.single-day { grid-template-columns: minmax(0, 1fr); }
.team-week-board.single-day .week-day-column { max-width: 900px; width: 100%; margin: 0 auto; }
.team-week-board.single-day .week-day-column .day-nav { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.team-week-board.single-day .week-day-column .day-nav .secondary-action { min-height: 44px; flex: 1; }
.team-week-board.single-day .week-task-group-row { padding: 10px 8px; font-size: 15px; }
.team-week-board.single-day .week-status-button, .team-week-board.single-day .status-knopf { min-width: 48px; min-height: 44px; font-size: 18px; }
.team-week-board.single-day .week-task-group-summary { min-height: 52px; font-size: 15px; }

/* ===== Infomaterial: PDFs und Merkblaetter fuer Mitglieder (John, 09.09.2026) ===== */
.info-form { margin-bottom: 14px; }
.info-zielgruppen { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.info-zielgruppen legend { padding: 0 4px; font-size: 13px; color: var(--muted); }
.info-zielgruppen > div { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.info-liste { display: grid; gap: 8px; }
/* Standard (John, 17.09.2026): Text links, Knoepfe in fester Spalte rechts - bei allen Eintraegen untereinander */
.info-karte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  padding: 10px 12px;
}
.info-karte > div:first-child { display: grid; gap: 2px; }
.info-karte strong { font-size: 15px; }
.info-karte span { font-size: 14px; }
.info-karte small { color: var(--muted); font-size: 12px; }
.info-aktionen { display: flex; align-items: center; justify-content: flex-end; gap: 10px; justify-self: end; }
.info-aktionen .secondary-action { text-decoration: none; }
@media (max-width: 620px) {
  .info-karte { grid-template-columns: 1fr; align-items: start; }
  .info-aktionen { justify-self: stretch; justify-content: flex-end; }
}

/* ===== Aufgabe fuer das Team anlegen (John, 09.09.2026) ===== */
.task-horse-pick { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.task-horse-pick legend { padding: 0 4px; font-size: 13px; color: var(--muted); }
.task-horse-suche { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.task-horse-suche input { flex: 1; }
#teamTaskHorses { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 2px 10px; max-height: 210px; overflow-y: auto; }
#teamTaskHorses small { color: var(--muted); }

/* ===== Mitarbeiterplanung Stufe 1 (John, 09.09.2026) ===== */
.shift-planung { display: grid; gap: 10px; margin: 14px 0; }
.plan-tabelle-wrap { overflow-x: auto; }
.plan-tabelle td, .plan-tabelle th { white-space: nowrap; }
.plan-tabelle .plan-taetigkeiten { white-space: normal; font-size: 13px; }
.plan-diff.gut { color: #1d8a4e; }
.plan-diff.zuviel { color: #b23b3b; font-weight: 600; }
.plan-diff.zuwenig { color: #a97300; font-weight: 600; }
.plan-warnungen { display: grid; gap: 6px; }
.plan-warn { border: 1px solid var(--line); border-left: 3px solid #d9a514; border-radius: 8px; background: var(--card); padding: 6px 10px; }
.plan-warn-doppelt, .plan-warn-ruhezeit { border-left-color: #b23b3b; }
.plan-warn-kein_dienst { border-left-color: var(--line); }
.plan-warn summary { cursor: pointer; display: flex; gap: 8px; align-items: center; }
.plan-warn summary span { color: var(--muted); font-size: 13px; }
.plan-warn ul { margin: 6px 0 2px; padding-left: 18px; display: grid; gap: 3px; font-size: 14px; }
.plan-ok { color: #1d8a4e; font-size: 14px; margin: 0; }
.plan-vertretung { display: grid; gap: 8px; }
.plan-vertretung h4 { margin: 4px 0 0; font-size: 15px; }
.plan-vertretung article { border: 1px solid var(--line); border-radius: 8px; background: var(--card); padding: 8px 10px; }
.plan-vertretung ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; font-size: 14px; }

/* Taetigkeiten je Mitarbeiter im Rechte-Reiter */
.duty-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 4px 14px; margin-bottom: 6px; }
.duty-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; }
.duty-zeile select { min-width: 150px; }

/* ===== Interne Kurskalkulation (John, 09.09.2026) ===== */
.lesson-tag.entwurf-tag { background: #f4e2c2; color: #7a5200; }
.kalk-ergebnis { margin-top: 12px; display: grid; gap: 10px; }
.kalk-kopf { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.kalk-kopf span { display: grid; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--card); font-size: 13px; }
.kalk-kopf b { font-size: 17px; }
.kalk-kopf small { color: var(--muted); font-size: 12px; }
.kalk-kopf .gut b { color: #1d8a4e; }
.kalk-kopf .schlecht b { color: #b23b3b; }
.kalk-fazit { margin: 0; font-size: 14px; }
.kalk-tabelle td, .kalk-tabelle th { text-align: right; white-space: nowrap; }
.kalk-tabelle td:first-child, .kalk-tabelle th:first-child { text-align: left; }
.kalk-tabelle tr.gut .kalk-ergebnis-zelle { color: #1d8a4e; font-weight: 600; }
.kalk-tabelle tr.schlecht .kalk-ergebnis-zelle { color: #b23b3b; }
.kalk-tabelle tr.mindest { background: rgba(217, 165, 20, .12); }

/* Personalakte: Vertragsdaten, Warnung auf der Kachel */
.vertrag-daten { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 18px; margin: 10px 0 14px; }
.vertrag-daten div { display: flex; flex-direction: column; gap: 1px; }
.vertrag-daten small { color: var(--muted, #6b6b6b); font-size: 0.78rem; }
.vertrag-daten strong { font-size: 0.98rem; }
.vertrag-daten .warn-text { color: #a02020; }
.kachel-warnung { display: block; margin-top: 4px; font-size: 0.76rem; line-height: 1.25; }
.kachel-warnung.rot { color: #a02020; }
.kachel-warnung.gelb { color: #8a6100; }
.checkbox-zeile { display: flex; align-items: center; gap: 8px; }

/* Koppelplan: Luftbild mit den Nummern der Koppeln */
.koppelplan-box { margin: 10px 0 16px; border: 1px solid var(--line, #e2dccf); border-radius: 14px; background: #fffdf9; overflow: hidden; }
.koppelplan-box > summary { cursor: pointer; padding: 10px 14px; font-weight: 600; list-style: none; }
.koppelplan-box > summary::-webkit-details-marker { display: none; }
.koppelplan-box > summary::before { content: '▸ '; }
.koppelplan-box[open] > summary::before { content: '▾ '; }
.koppelplan-box > summary small { font-weight: 400; color: var(--muted, #6b645a); margin-left: 6px; }
.koppelplan { position: relative; line-height: 0; }
.koppelplan img { width: 100%; height: auto; display: block; }
.koppel-punkt {
  position: absolute; transform: translate(-50%, -50%);
  min-width: 26px; height: 26px; padding: 0 5px; border-radius: 999px;
  font: 600 14px/1 system-ui, sans-serif; cursor: pointer;
  background: rgba(255, 255, 255, 0.92); color: #1d1a15;
  border: 2px solid #888; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.koppel-punkt:hover { transform: translate(-50%, -50%) scale(1.18); z-index: 2; }
.koppel-punkt.gelb { border-color: #e3c800; }
.koppel-punkt.blau { border-color: #3f9be0; }
.koppel-punkt.pink { border-color: #e0439f; }
.koppel-punkt.hengst { border-color: #5b4dd6; }
.koppel-punkt.belegt { color: #fff; background: #1d1a15; }
.koppel-punkt.belegt.gelb { background: #b39c00; }
.koppel-punkt.belegt.blau { background: #2b6ea3; }
.koppel-punkt.belegt.pink { background: #a62c74; }
.koppel-punkt.belegt.hengst { background: #43389e; }
.koppelplan-legende { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 0; padding: 10px 14px; font-size: 0.84rem; }
.koppel-legende { display: inline-flex; align-items: center; gap: 6px; color: var(--muted, #6b645a); }
.koppel-legende::before { content: ''; width: 12px; height: 12px; border-radius: 999px; border: 2px solid #888; background: #fff; }
.koppel-legende.gelb::before { border-color: #e3c800; }
.koppel-legende.blau::before { border-color: #3f9be0; }
.koppel-legende.pink::before { border-color: #e0439f; }
.koppel-legende.hengst::before { border-color: #5b4dd6; }
.koppel-legende.belegt-hinweis::before { background: #1d1a15; border-color: #1d1a15; }
.pasture-tile.hervorgehoben { outline: 3px solid #3f9be0; outline-offset: 2px; }
@media (max-width: 700px) {
  .koppel-punkt { min-width: 22px; height: 22px; font-size: 12px; border-width: 2px; }
}
.koppelplan-werkzeuge { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 14px 10px; }
.koppelplan.verschiebbar .koppel-punkt { cursor: grab; touch-action: none; }
.koppel-punkt.zieht { cursor: grabbing; transform: translate(-50%, -50%) scale(1.3); z-index: 3; }
.koppel-umrisse { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.koppel-punkt.pony { border-color: #e02a2a; }
.koppel-punkt.belegt.pony { background: #b01e1e; }
.koppel-legende.pony::before { border-color: #e02a2a; }
/* Werbung: Vorschau des Anzeigentextes */
.promo-vorschau { white-space: pre-wrap; font: 13px/1.5 system-ui, sans-serif; background: #f7f4ee; border: 1px solid var(--line, #e2dccf); border-radius: 10px; padding: 10px 12px; margin: 8px 0 0; max-height: 320px; overflow: auto; }
/* Werbung: Bilder zum Selberposten, ausgeblendete Termine */
.promo-nebenaktionen { margin-top: 8px; gap: 14px; }
.news-karte.ausgeblendet { opacity: 0.55; }

/* News & Werbung: was schon gepostet ist, wird gruen */
.werbe-umschalter { display: flex; gap: 8px; margin: 0 0 14px; }
.werbe-umschalter button { font: inherit; font-weight: 600; font-size: 0.9rem; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line, #e2dccf); background: #fffdf9; color: var(--muted, #6b645a); cursor: pointer; }
.werbe-umschalter button.active { background: #1d1a15; color: #fff; border-color: #1d1a15; }
.news-karte.gepostet { border-left: 4px solid #2f7d43; }
.news-karte.gepostet .eyebrow { color: #2f7d43; }
/* .form-row ist ein Zweispalter; die Knopfreihen der Werbekarten sollen
   sich stattdessen nach dem Inhalt richten und umbrechen duerfen. */
.news-karte .form-row { display: flex; flex-wrap: wrap; align-items: center; }
.news-karte .form-row > * { flex: 0 0 auto; }

/* ===== Unterreiter unter der Seitenkopfzeile (John, 09.09.2026) ===== */
/* Weniger Menüeinträge: Hallenbelegung hängt unter Kurse, Ranchordnung und
   Infomaterial unter Verträge. */
.portal-subtabs {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: -4px 0 2px;
  padding-bottom: 2px;
}

.portal-subtabs::-webkit-scrollbar { display: none; }

.portal-subtabs button {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
}

.portal-subtabs button:hover { color: var(--text); border-color: var(--line-strong); }

.portal-subtabs button.active {
  background: var(--panel-2);
  border-color: var(--line-strong);
  color: var(--text);
}

/* ===== Meine Pferde: ein Reiter je Pferd ===== */
.portal-page.horse-tab-panel.active { display: grid; gap: 10px; }

.horse-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}

.horse-tabs::-webkit-scrollbar { display: none; }
/* Am PC (Maus) umbrechen statt waagerecht wischen – sonst sind hintere Pferde nicht erreichbar (John, 19.09.2026) */
@media (min-width: 700px) { .horse-tabs { flex-wrap: wrap; overflow-x: visible; } }

.horse-tabs .horse-tab {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  padding: 5px 14px 5px 5px;
  cursor: pointer;
  min-height: 40px;
}

.horse-tabs .horse-tab:hover { border-color: var(--line-strong); color: var(--text); }

.horse-tabs .horse-tab.active {
  background: var(--panel-2);
  border-color: var(--line-strong);
  color: var(--text);
}

.horse-tab-photo {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  background: #120f0c;
  color: var(--gold-soft);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

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

.horse-tab-neu { padding-left: 14px; }

.horse-summary { border-top: 1px solid var(--line); padding-top: 10px; }

.horse-summary-kopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.horse-summary-kopf strong { font-size: 18px; color: var(--text); }

.horse-summary-tag { color: var(--muted); font-size: 13px; }

.horse-summary dl.kompakt {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px 18px;
  margin: 10px 0 0;
}

.horse-summary dl.kompakt div { display: block; }

.horse-summary dt { color: var(--gold); font-size: 11px; text-transform: uppercase; }
.horse-summary dd { margin: 2px 0 0; color: var(--text); overflow-wrap: anywhere; }

/* ===== Schnell buchen auf dem Dashboard (John, 09.09.2026) ===== */
.schnell-karte { display: grid; gap: 10px; border-color: var(--line-strong); }
.sb-pferde { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.sb-pferde::-webkit-scrollbar { display: none; }
.sb-pferde .horse-tab { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); font: inherit; font-weight: 600; padding: 4px 12px 4px 4px; cursor: pointer; min-height: 36px; }
.sb-pferde .horse-tab.active { background: var(--panel-2); border-color: var(--line-strong); color: var(--text); }
.sb-dienste { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.sb-dienst { display: grid; gap: 2px; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; padding: 10px 12px; cursor: pointer; min-height: 58px; }
.sb-dienst b { font-size: 14px; line-height: 1.25; }
.sb-dienst small { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.sb-dienst.active { border-color: var(--gold); background: var(--gold-tint); }
.sb-dienst:focus-visible, .sb-chips button:focus-visible, .sb-weg button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.sb-weg, .sb-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sb-chips button, .sb-weg button { flex: 1 1 90px; padding: 8px 6px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: 600 13px Inter, system-ui, sans-serif; cursor: pointer; }
.sb-chips button.active, .sb-weg button.active { border-color: var(--gold); background: var(--gold-tint); }
.sb-zeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sb-zeile .sb-chips { flex: 1 1 260px; }
.sb-zeile input { border: 1px solid var(--line); background: var(--field); color: var(--text); border-radius: 8px; padding: 7px 9px; font: inherit; }
.sb-zeile #sbZeit { width: 96px; }
.sb-fuss { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sb-fuss .primary-action { min-width: 140px; }
.booking-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 760px) {
  .sb-dienste { grid-template-columns: 1fr 1fr; }
  .sb-fuss .primary-action { flex: 1; }
}

/* ===== Meldedialog: Vorfall am Pferd (John, 09.09.2026) ===== */
.melde-vorfall { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--gold-tint); }
.melde-vorfall .small-note { margin: -2px 0 0; }
.melde-art { display: grid; gap: 4px; }
#shareReportButton { white-space: nowrap; }

/* Stundenkonto im Schichtplan: Übertrag aus dem Vormonat von Hand (Indra, 02.09.2026) */
.uebertrag-feld { width: 88px; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--field); color: var(--text); font: inherit; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.uebertrag-feld:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* Arbeitskalender: offene Checklisten aus Vortagen hervorheben (John, 09.09.2026) */
.utility-row.rueckstand { border-left: 3px solid var(--red); padding-left: 7px; }
.utility-row.rueckstand small { color: var(--red); }

/* Teilnehmer eines Termins: Reservierte als eigene Zeilen, Doppelte auffällig (John, 10.09.2026) */
.teilnehmer-abschnitt { margin: 0 0 10px; }
.teilnehmer-abschnitt h4 { margin: 12px 0 6px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.teilnehmer.reserviert { opacity: .95; border-left: 3px solid var(--gold); padding-left: 8px; }
.teilnehmer.doppelt { border-left: 3px solid var(--red); background: var(--gold-tint); }
.teilnehmer-warnung { margin: 0 0 10px; padding: 9px 12px; border: 1px solid var(--red); border-radius: 8px; color: var(--red); font-size: 13.5px; }
.teilnehmer-knoepfe { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.teilnehmer-verfallen > summary { cursor: pointer; font-size: 12px; color: var(--muted); padding: 6px 0; }
.teilnehmer.verfallen { opacity: .6; }

/* ===== Kursplan (John, 10.09.2026) ===== */
.plan-tag { display: grid; gap: 8px; margin: 14px 0 4px; }
.plan-tag h4 { margin: 0; font-size: 14.5px; }
.plan-slot {
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  border-radius: 3px;
  background: var(--card);
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}
.plan-slot-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.plan-slot-kopf strong { font-size: 14.5px; font-variant-numeric: tabular-nums; }
.plan-slot-kopf .link-action { margin-left: auto; }
.teilnehmer-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.teilnehmer-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12.5px;
  background: var(--panel);
}
.teilnehmer-chip i { font-style: normal; color: var(--muted); }
.link-action {
  border: 0;
  background: none;
  padding: 0;
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  text-decoration: underline;
  cursor: pointer;
}
.link-action:hover { color: var(--text); }

/* Aufgaben: kompakt in der Liste, voller Meldungstext beim Aufklappen. */
.aufgabe { cursor: pointer; }
.aufgabe-beschreibung { min-width: 0; }
.aufgabe-beschreibung > summary { cursor: pointer; list-style: none; align-items: flex-start; }
.aufgabe-beschreibung > summary::-webkit-details-marker { display: none; }
.aufgabe-beschreibung > summary::before { content: '›'; flex: 0 0 auto; font-size: 20px; line-height: 1; color: var(--gold); }
.aufgabe-beschreibung[open] > summary::before { transform: rotate(90deg); }
.aufgabe-beschreibung > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.aufgabe-beschreibung > summary strong { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.aufgabe-beschreibung:not([open]) > summary strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aufgabe-inhalt { margin-top: 10px; cursor: text; }
.aufgabe-inhalt p { white-space: pre-wrap; overflow-wrap: anywhere; }
.aufgabe-inhalt p + p { margin-top: 8px; }
.aufgabe-inhalt .aufgabe-meldung { color: var(--text); }

.portal-nav .app-reload {
  flex: 0 0 auto;
  min-width: 36px;
  min-height: 36px;
  padding: 4px 7px;
  font-size: 23px;
  line-height: 1;
}
.zeitkonto-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0}.zeitkonto-karten article{border:1px solid var(--line,#dedbd1);border-radius:12px;padding:20px;background:var(--paper,#fff)}.zeitkonto-karten small,.zeitkonto-karten span{display:block;color:var(--muted,#6d7069)}.zeitkonto-karten strong{display:block;font-size:22px;margin:8px 0}.zeitjournal{margin-top:28px}.zeitjournal-zeile{display:grid;grid-template-columns:190px 180px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--line,#dedbd1);align-items:center}.zeitjournal-zeile time,.zeitjournal-zeile span{color:var(--muted,#6d7069);font-size:13px}@media(max-width:760px){.zeitkonto-karten{grid-template-columns:1fr}.zeitjournal-zeile{grid-template-columns:1fr;gap:3px}}
.lesson-request-panel {
  margin: 18px 0;
  padding: 18px;
  border: 1px solid var(--line, #d8d8cf);
  border-radius: 16px;
  background: #fbfaf6;
}
.lesson-request-panel h3 { margin: 0 0 8px; }
.lesson-request-list { display: grid; gap: 10px; margin-top: 14px; }
.lesson-request-list article {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line, #deded6);
}
.lesson-request-list article > div:first-child,
.lesson-request-list article:not(:has(> div)) { display: grid; gap: 4px; }
.lesson-request-list span, .lesson-request-list small { display: block; color: #667068; }
.booking-row.booking-invited { border-left: 4px solid #bd8b2f; background: #fffaf0; }
.lesson-eingeladen { color: #926515; }
.lesson-invite-payment { min-width: 180px; }
.lesson-participant-picker { border: 0; padding: 0; margin: 0; }
.lesson-participant-picker legend { margin-bottom: 8px; }
#lessonParticipantSelect { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 220px; overflow: auto; }
#lessonParticipantSelect label { display: flex; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line, #deded6); border-radius: 10px; background: #fff; cursor: pointer; }
#lessonParticipantSelect label:has(input:checked) { border-color: #2c624e; background: #eef6f1; }
#lessonParticipantSelect small { display: block; color: #6c746d; }
@media (max-width: 700px) { #lessonParticipantSelect { grid-template-columns: 1fr; } }

.share-edit-dialog { width: min(480px, calc(100vw - 32px)); max-width: calc(100vw - 32px); max-height: 90vh; overflow: auto; padding: 24px; border: 1px solid #ccd5db; border-radius: 12px; }
.share-edit-dialog form { display: grid; gap: 12px; min-width: 0; }
.share-edit-dialog label { display: grid; gap: 6px; }
.share-edit-dialog input { width: 100%; min-width: 0; box-sizing: border-box; }
.share-edit-error { color: #a33333; }

.share-team-chip:has([data-edit-share-entry]) { padding-right: 72px; }
.share-team-chip [data-edit-share-entry] { pointer-events: auto; position: absolute; right: 22px; top: 1px; padding: 0; min-width: 0; min-height: 18px; font-size: inherit; }

.share-edit-dialog { font-family: inherit; color: var(--text, #203440); background: var(--panel, #fff); }
.share-edit-dialog input { padding: 10px 12px; font: inherit; color: inherit; border: 1px solid #d5dfe5; border-radius: 6px; background: #fff; }
.share-edit-error:empty { display: none; }

/* Aufgabenaktionen mit sichtbarer Bedeutung statt einzelner Symbole. */
.aufgabe-knoepfe { max-width: 320px; }
.aufgabe-knoepfe .status-knopf { padding: 8px 12px; min-height: 44px; font-size: 13px; font-weight: 700; white-space: normal; }
.aufgabe-knoepfe .status-knopf.done { color: var(--red); border-color: var(--red); background: var(--red-tint, #fbece8); }
.aufgabe-knoepfe .status-knopf.done.aktiv { color: var(--green); border-color: var(--green); background: #e8f1e8; }
.aufgabe-knoepfe .status-knopf.problem { color: var(--red); }
.aufgabe-knoepfe .status-knopf.problem.aktiv { color: #fff; background: var(--red); border-color: var(--red); }
@media (max-width: 700px) { .aufgabe-knoepfe { max-width: 100%; } }

/* Sattelkammern: Kammer 1 und 3 erscheinen durch je fünf Spalten automatisch zweireihig. */
.tack-room-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:18px; }
.tack-room { border:1px solid var(--line); border-radius:14px; background:var(--paper); padding:18px; }
.tack-room h3 { margin:0; }
.tack-lockers { display:grid; grid-template-columns:repeat(var(--tack-columns,5),minmax(0,1fr)); gap:8px; margin-top:14px; }
.tack-locker { min-width:0; min-height:104px; padding:10px 7px; border:1px solid var(--line); border-radius:10px; background:#f7f8f5; color:var(--ink); display:grid; align-content:start; gap:3px; text-align:left; }
.tack-locker b { font-size:20px; }
.tack-locker span,.tack-locker small { overflow:hidden; text-overflow:ellipsis; }
.tack-locker span { font-weight:700; }
.tack-locker small { color:var(--muted); line-height:1.25; }
.tack-locker.occupied { background:#e9f2eb; border-color:#9eb7a4; }
.tack-locker.free { color:#68726b; }
.tack-horse-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
@media(max-width:900px){.tack-room-grid{grid-template-columns:1fr}}@media(max-width:560px){.tack-lockers{grid-template-columns:repeat(3,minmax(0,1fr))}.tack-horse-choices{grid-template-columns:1fr}}

.mobile-tab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.5rem; }
.mobile-tab-grid .access-check { display: grid; gap: 0.2rem; }
.mobile-tab-grid select { font: inherit; }

/* Handy-Arbeitsplatz: Startseite fuer Mitarbeiter im Look des Stalltablets */
body[data-handy-arbeitsplatz="1"] #dashboardPanel > *:not(.handy-arbeitsplatz) { display: none; }
.handy-arbeitsplatz .handy-kopf h1 { margin: 4px 0 10px; }
.handy-arbeitsplatz .handy-zeile { display: flex; justify-content: space-between; gap: 12px; margin: 6px 0; border-top: 1px solid var(--line, #e2dccf); padding-top: 6px; }
.handy-arbeitsplatz .handy-zeile strong { font-weight: 650; }
.handy-arbeitsplatz .handy-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.handy-arbeitsplatz .handy-kacheln button { position: relative; display: grid; gap: 6px; justify-items: start; align-content: start; min-height: 84px; padding: 14px; border: 1px solid var(--line, #e2dccf); border-radius: 14px; background: var(--surface, #fff); font: inherit; text-align: left; cursor: pointer; color: inherit; }
.handy-arbeitsplatz .handy-kacheln i { font-style: normal; font-size: 22px; line-height: 1; }
.handy-arbeitsplatz .handy-kacheln span { font-weight: 650; }
.handy-arbeitsplatz .handy-kacheln b { position: absolute; top: 10px; right: 12px; background: #f3d9d9; color: #7a1f1f; border-radius: 999px; padding: 1px 9px; font-size: 0.8rem; }

/* Mitarbeiter mit eigenen Pferden brauchen am Handy beide Ansichten */
@media (max-width: 760px) {
  body[data-handy-ansichten="1"] .portal-nav { flex-wrap: wrap; row-gap: 6px; }
  body[data-handy-ansichten="1"] .portal-nav .view-switch { display: inline-flex; }
  body[data-handy-ansichten="1"] .portal-nav .view-switch button { padding: 5px 11px; font-size: 0.78rem; }
}

/* Geteilte Mitgliederansicht: eigene Kopfzeile, deshalb ohne die Portal-Seitenueberschrift; Panel ohne Rahmen */
body[data-mitglied] #portalPageToolbar { display: none; }
#mitgliedPanel.work-panel { padding: 0; background: transparent; border: 0; box-shadow: none; }
#mitgliedPanel .srr-mitglied { background: var(--bg); border-radius: 18px; padding: 18px; }
#mitgliedDialog { max-width: min(720px, 94vw); width: 100%; padding: 18px 20px; border: 0; border-radius: 16px; }
#mitgliedDialog:has(.member-akte-voll) { width: min(1480px, 96vw); max-width: min(1480px, 96vw); max-height: calc(100dvh - 32px); }
#mitgliedDialog:has(.member-akte-voll) #mitgliedDialogBody { max-height: calc(100dvh - 150px); overflow: auto; }
#mitgliedDialog .dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
#mitgliedDialog .dialog-head h2 { margin: 0; font-size: 1.25rem; }
#mitgliedDialog::backdrop { background: rgba(20, 18, 15, 0.45); }
@media (max-width: 760px) { #mitgliedPanel .srr-mitglied { padding: 10px; border-radius: 12px; } #mitgliedDialog:has(.member-akte-voll) { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; padding: 14px; } #mitgliedDialog:has(.member-akte-voll) #mitgliedDialogBody { max-height: calc(100dvh - 104px); } }
/* Unter der geteilten Konto-Seite bleibt vom alten Panel nur "Meine Kinder" (Reitbeteiligung) sichtbar */
body[data-mitglied="mitglied"] #profilePanel > :not(#myFamilyKlapp):not(#myFamilyBlock) { display: none; }
body[data-mitglied="mitglied"] #profilePanel:not(:has(#myFamilyKlapp:not([hidden]))):not(:has(#myFamilyBlock:not([hidden]))) { display: none; }
/* Geteilte Mitgliederansicht: die Reiterleiste der Seite ist das Menü - Portal-Menüzeile und Unterreiter verschwinden.
   Auf der Hilfe-Seite der Team-Ansicht bleibt das Arbeitsmenü, nur die doppelten Unterreiter "Hilfe | Wünsche & Fehler" nicht. */
body[data-mitglied="mitglied"] .portal-subnav, body[data-mitglied="extra"] .portal-subnav { display: none !important; }
body[data-mitglied="mitglied"] #portalSubTabs, body[data-mitglied="hilfe"] #portalSubTabs { display: none !important; }

/* ===== Neue Navigation (Test): EINE Leiste unten auf allen Geraeten ===== */
#navNeu { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; display: flex; align-items: stretch; background: var(--surface, #fffefa); border-top: 1px solid var(--line, #dedfd4); padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); }
#navNeu button, #navNeu a { border: 0; background: transparent; font: inherit; cursor: pointer; color: var(--muted, #67716a); text-decoration: none; display: grid; justify-items: center; align-content: start; gap: 2px; border-radius: 12px; padding: 6px 2px; flex: 0 0 82px; }
#navNeu i { font-style: normal; font-size: 19px; line-height: 1; padding: 3px 12px; border-radius: 10px; }
#navNeu span { font-size: 10px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#navNeu .active { color: var(--accent, #294f40); font-weight: 700; }
#navNeu .active i { background: var(--surface-2, #e6eee4); }
#navNeu .nav-neu-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2, #eee6d5); display: grid; place-items: center; font-size: 11px; font-weight: 700; padding: 0; }
#navNeu .nav-neu-rollen { display: flex; flex: 1; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); }
#navNeu .nav-neu-rollen::-webkit-scrollbar { display: none; }
#navNeu .nav-neu-fest { display: flex; border-left: 1px solid var(--line, #dedfd4); padding-left: 4px; }
/* Die Leiste unten gibt es nur am Handy - John gefaellt sie dort, PC und Tablet behalten das alte Layout */
@media (max-width: 760px) {
  body[data-nav="neu"] { padding-bottom: 84px; }
  body[data-nav="neu"] .portal-subnav, body[data-nav="neu"] #portalSubTabs, body[data-nav="neu"] .mobile-tabbar { display: none !important; }
  /* Keine doppelte Navigation: am Handy uebernimmt die Leiste unten die Reiter der Mitgliederseite */
  body[data-nav="neu"] #mitgliedRoot .member-tabs { display: none; }
}
@media (min-width: 761px) {
  #navNeu { display: none; }
}
/* Im Mitglieder-Modus zeigen nur die aktiven Kaesten - Sonderregeln je Seite greifen dort nicht */
body[data-mitglied] .work-panel.portal-page:not(.active) { display: none !important; }

/* ===== Menue im Kopfbereich (Johns Vorschlag C): ab Tablet-Breite sitzen die Reiter
   als Knopfraster rechts neben "Hallo, ..." - freie Plaetze bleiben leer ===== */
@media (min-width: 761px) {
  body[data-mitglied="mitglied"] #mitgliedRoot, body[data-mitglied="extra"] #mitgliedRoot { display: grid; grid-template-columns: minmax(230px, 320px) 1fr; gap: 10px 22px; align-items: center; }
  body[data-mitglied="mitglied"] #mitgliedRoot > .team-heading, body[data-mitglied="extra"] #mitgliedRoot > .team-heading { grid-column: 1; margin: 0; }
  body[data-mitglied="mitglied"] #mitgliedRoot > .member-tabs, body[data-mitglied="extra"] #mitgliedRoot > .member-tabs { grid-column: 2; position: static; margin: 0; padding: 0; background: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  body[data-mitglied="mitglied"] #mitgliedRoot > .member-main, body[data-mitglied="extra"] #mitgliedRoot > .member-main { grid-column: 1 / -1; }
  /* Schrift-Variante (Johns Wahl): nur der aktive Punkt bleibt ein gruener Knopf */
  body[data-mitglied="mitglied"] #mitgliedRoot > .member-tabs .btn, body[data-mitglied="extra"] #mitgliedRoot > .member-tabs .btn { min-height: 44px; font-size: 14px; padding: 6px 10px; border-radius: 14px; line-height: 1.15; background: transparent; border-color: transparent; color: var(--muted); font-weight: 600; }
  body[data-mitglied="mitglied"] #mitgliedRoot > .member-tabs .btn:hover, body[data-mitglied="extra"] #mitgliedRoot > .member-tabs .btn:hover { color: var(--text); }
  body[data-mitglied="mitglied"] #mitgliedRoot > .member-tabs .btn.primary, body[data-mitglied="extra"] #mitgliedRoot > .member-tabs .btn.primary { background: #294f40; border-color: #294f40; color: #fff; }
}
@media (min-width: 1101px) {
  body[data-mitglied="mitglied"] #mitgliedRoot > .member-tabs, body[data-mitglied="extra"] #mitgliedRoot > .member-tabs { grid-template-columns: repeat(6, 1fr); }
}
/* Extra-Seiten (Vertraege, Journal, Chat): die leere Mitglieder-Flaeche entfaellt, der Portal-Kasten folgt direkt */
body[data-mitglied="extra"] #mitgliedRoot > .member-main { display: none; }
body[data-mitglied="extra"] #mitgliedPanel .srr-mitglied { padding-bottom: 12px; }
/* Kopfkasten zuerst, dann die Unterreiter (Vertraege | Ranchordnung | Infomaterial), dann der Inhalt */
body[data-mitglied="extra"] #mitgliedPanel { order: -1; }
/* Ohne Umschalt-Knopf bleibt der feste Bereich der Handy-Leiste in der Team-Ansicht leer - dann weg damit */
#navNeu .nav-neu-fest:empty { display: none; }

/* Projekt 15: Mein Pferd auf einen Blick */
.blick-pferd{border-top:1px solid var(--line,#e5e2d8);padding:10px 0 4px;display:grid;gap:4px}.blick-pferd:first-of-type{border-top:0}.blick-zeile{display:flex;gap:10px;align-items:baseline;font-size:13px}.blick-zeile small{flex:0 0 78px;color:var(--muted,#67716a);text-transform:uppercase;font-size:10px;letter-spacing:1px}.blick-zeile.warn span{color:#a3312c;font-weight:600}.blick-links{display:flex;gap:14px;margin-top:4px}

/* Team-Überblick-Widgets (Kurse, Chat): kompakte Zeilen */
.dash-widget-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.dash-widget-zeile:last-child { border-bottom: none; }
.dash-widget-zeile strong { font-size: 13.5px; }
.dash-widget-zeile small { color: var(--muted); text-align: right; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Dashboard anpassen: verschiebbare Zeilen mit Pfeilen */
.karte-sortier-zeile { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.karte-sortier-zeile .checkbox-label { flex: 1; }
.karte-pfeile { display: flex; gap: 2px; }
.karte-pfeile button { padding: 4px 8px; font-size: 12px; }

/* ===== Widget-Baukasten: eingebettete Einzelseite (?embed=1) - ohne Kopf, Menü und Banner ===== */
body.portal-embed .portal-header,
body.portal-embed #groupNavigation,
body.portal-embed .portal-subnav,
body.portal-embed #portalPageToolbar,
body.portal-embed #portalSubTabs,
body.portal-embed .ansicht-banner,
body.portal-embed #ansichtBanner,
body.portal-embed #anwesenheitBanner { display: none !important; }
body.portal-embed { padding: 0; }
body.portal-embed .portal-app { padding: 0; }
body.portal-embed .portal-grid { padding: 8px; }
/* Baukasten-Fachwidget: eine echte Teilansicht, ohne dass die übrigen Panels der Seite
   im iframe auftauchen. Direkte Panels (z. B. Herden) behalten ihren kompletten Inhalt. */
body.portal-embed-widget .portal-page { display: none !important; }
/* Mit Absicht überspezifisch: gewinnt auch gegen body[data-mitglied] .work-panel:not(.active) */
body.portal-embed-widget .portal-page.baukasten-widget-rahmen.baukasten-widget-rahmen.baukasten-widget-rahmen.baukasten-widget-rahmen { display: block !important; }
body.portal-embed-widget:not(.portal-embed-widget-direkt) .portal-page.baukasten-widget-rahmen.baukasten-widget-rahmen.baukasten-widget-rahmen > :not(.baukasten-widget-ziel) { display: none !important; }

/* ===================== Mein Konto → Meine Daten: Farbwelt neben Profil (John 15.09.2026) ===================== */
@media (min-width: 821px) {
  .portal-grid > #profilePanel { grid-row: span 2; }
  .portal-grid > #themePanel { grid-column: 7 / -1; align-self: start; }
}

/* Farbwelt kompakter: kleinere Kacheln, weniger Luft */
.theme-picker { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.theme-card { padding: 8px; gap: 5px; }
.theme-card .theme-swatch { height: 26px; }

/* Stammdaten-Seite: eigene Ansicht über die volle Breite, Felder enger gepackt */
#stammblattPanel .form-grid-2 { gap: 6px 10px; }
#stammblattPanel .stack-form { gap: 8px; }
#stammblattPanel .stack-form input,
#stammblattPanel .stack-form select { padding: 7px 9px; }

/* Mitglieds-Konto im Portal kompakt (John 15.09.2026): Kontaktdaten und Stammblatt enger.
   Nur im Portal - am Stalltablet bleiben die grossen Touch-Abstaende. */
.srr-mitglied #m-profile.stack, .srr-mitglied #m-stammblatt.stack { gap: 9px; }
.srr-mitglied #m-profile .field, .srr-mitglied #m-stammblatt .field { margin: 0; }
.srr-mitglied #m-profile .field input, .srr-mitglied #m-profile .field select,
.srr-mitglied #m-stammblatt .field input { min-height: 42px; padding: 9px 10px; }
.srr-mitglied #m-stammblatt .member-zwei { gap: 9px 12px; }
.srr-mitglied #m-profile .member-privacy { padding: 10px 12px; }

/* Pferd-Archiv (abgemeldete Pferde) und Abmelde-Dialog (John 15.09.2026) */
.horse-tab-archiv { opacity: .55; }
.horse-tab-archiv-tag { display: block; margin-top: 2px; font-size: 10px; font-style: normal; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.horse-summary-tag.archiv { background: var(--red-tint, #fbece8); color: var(--red); font-weight: 700; }
.horse-archive-vertrag { border-left: 3px solid var(--line); padding-left: 12px; margin: 2px 0 4px; display: grid; gap: 8px; }
.horse-archive-vertrag[hidden] { display: none; }

/* Administration › Projekte in Arbeit */
.projekt-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.projekt-karte { display: flex; flex-direction: column; gap: 8px; padding: 16px; border: 1px solid var(--line, #dedfd4); border-radius: 12px; background: var(--paper, #fffefa); }
.projekt-karte h4 { margin: 0; font-size: 18px; }
.projekt-karte p { margin: 0; }
.projekt-karte > a { align-self: flex-start; margin-top: auto; text-decoration: none; }
.projekt-inhalt ul { margin: 0; padding-left: 18px; }

/* Handy-Dashboard Team: Widgets untereinander, kleine antippbare Kennzahlen (John, 16.09.2026) */
.lage-zeile button.kpi { font: inherit; color: inherit; text-align: left; cursor: pointer; }
.lage-zeile button.kpi:disabled { cursor: default; opacity: 1; }
.handy-dash { display: grid; gap: 12px; }
.handy-dash > div:empty { display: none; }
.handy-dash .dashboard-card { padding: 14px; border-radius: 14px; }
.handy-dash .balance-warning { margin: 0 0 8px; }
.handy-dash .hd-blick .lage-zeile { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.handy-dash .hd-blick .kpi { padding: 10px 12px; min-height: 64px; align-content: start; }
.handy-dash .hd-aktion-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.handy-dash .hd-aktion-knoepfe button { display: grid; gap: 6px; justify-items: start; padding: 14px; border: 1px solid var(--line, #e2dccf); border-radius: 14px; background: var(--surface, #fff); font: inherit; color: inherit; text-align: left; cursor: pointer; min-height: 96px; }
.handy-dash .hd-aktion-knoepfe i { font-style: normal; font-size: 24px; line-height: 1; }
.handy-dash .hd-aktion-knoepfe strong { display: block; }
.handy-dash .hd-aktion-knoepfe small { display: block; color: var(--muted, #777); font-size: .78rem; margin-top: 2px; }
.handy-dash .hd-aktion-knoepfe [data-hd-melden] { border-color: #d9a4a0; background: #fbefee; }
.handy-dash .dash-widget-zeile { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid var(--line, #e2dccf); border-bottom: 0; }
.handy-dash .dash-widget-zeile:first-child { border-top: 0; }
.handy-dash .dash-widget-zeile small { color: var(--muted, #777); }
.handy-dash #beachtenCard, .handy-dash #dienstCard, .handy-dash #memberMessageCard, .handy-dash #announcementCard { margin: 0; }
.handy-dash .dash-widget-zeile small { white-space: normal; overflow: visible; text-overflow: clip; text-align: left; }

/* Hundesport: Optionen-Zeilen (Turnier anlegen/bearbeiten) */
.hs-option { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto minmax(0, 1fr) auto auto; gap: 8px; align-items: end; padding: 8px 0; border-bottom: 1px solid var(--line, #e2dccf); }
.hs-option label { display: grid; gap: 3px; margin: 0; }
.hs-option .checkbox-label { display: flex; align-items: center; gap: 6px; padding-bottom: 8px; }
.hs-option small { align-self: center; }
@media (max-width: 760px) { .hs-option { grid-template-columns: 1fr 1fr; } }

/* Registrierung: fehlendes Feld deutlich markieren (Handy-Browser zeigen sonst nichts) */
.feld-fehler input, input.feld-fehler { border-color: #b23b3b !important; box-shadow: 0 0 0 2px rgba(178, 59, 59, .25); }
.terms-label.feld-fehler { color: #b23b3b; background: rgba(178, 59, 59, .08); border-radius: 8px; padding: 6px; }
.terms-label input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 22px; }

/* ===== Privater Kalender (John, 16.09.2026) ===== */
.kal-leiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 12px; }
.kal-leiste #kalenderNeu { margin-left: auto; }
.kal-legende { display: flex; flex-wrap: wrap; gap: 10px; font-size: .85rem; color: var(--muted); }
.kal-legende i, .kal-punkt { display: inline-block; flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.kal-monat { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-bottom: 18px; }
.kal-kopf { padding: 6px 4px; font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.kal-tag { min-height: 92px; padding: 4px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); cursor: pointer; overflow: hidden; background: transparent; }
.kal-tag:hover { background: var(--gold-tint); }
.kal-tag.fremd { opacity: .45; }
.kal-tag.heute .kal-nr { background: var(--gold); color: var(--pri-text); border-radius: 50%; }
.kal-nr { display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; font-size: .8rem; font-weight: 600; }
.kal-eintrag { display: block; width: 100%; margin-top: 2px; padding: 1px 4px; border: 0; border-left: 3px solid var(--kal-farbe, var(--gold)); border-radius: 3px; background: var(--panel-2); color: var(--text); font-size: .72rem; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
.kal-mehr { font-size: .7rem; color: var(--muted); }
.kal-dialog { overflow: auto; }
.kal-form { padding: 16px; }
@media (max-width: 700px) {
  .kal-tag { min-height: 54px; padding: 2px; }
  .kal-eintrag { font-size: 0; height: 6px; padding: 0; border-left-width: 0; background: var(--kal-farbe, var(--gold)); }
  .kal-kopf { font-size: .65rem; padding: 4px 0; letter-spacing: 0; }
}
.kal-tag.gewaehlt { box-shadow: inset 0 0 0 2px var(--gold); }

/* ===== Reichweite & Werbung (John, 16.09.2026) ===== */
.rw-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 10px; margin-bottom: 14px; }
.rw-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 8px 0 16px; }
.rw-zahlen article { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; background: var(--panel-2); display: grid; gap: 2px; }
.rw-zahlen strong { font-size: 1.6rem; line-height: 1.1; }
.rw-zahlen.klein strong { font-size: 1.25rem; }
.rw-kurve { display: flex; align-items: flex-end; gap: 2px; height: 110px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.rw-kurve span { flex: 1; background: var(--gold); border-radius: 2px 2px 0 0; min-width: 3px; opacity: .85; }
.rw-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.rw-raster h4, .rw-anleitung h4 { margin: 6px 0 8px; }
.rw-balken { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: .85rem; margin: 3px 0; }
.rw-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rw-bar { height: 8px; background: var(--panel-2); border-radius: 4px; overflow: hidden; }
.rw-bar i { display: block; height: 100%; background: var(--gold); }
.rw-status { display: inline-block; font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; padding: 1px 6px; border-radius: 3px; border: 1px solid var(--line); margin-right: 6px; }
.rw-erledigt { background: #2e7d4f; color: #fff; border-color: #2e7d4f; }
.rw-in-arbeit { background: var(--gold); color: var(--pri-text); border-color: var(--gold); }
.rw-nicht-relevant { opacity: .5; }
.rw-kopie { white-space: pre-wrap; background: var(--field); border: 1px solid var(--line); border-radius: 4px; padding: 10px; font-size: .82rem; user-select: all; }
.rw-anleitung ol, .rw-anleitung ul, .rw-kanal ol { padding-left: 1.2rem; display: grid; gap: 4px; }
.rw-anfrage .form-row label { min-width: 110px; }
.mini-list .rw-anfrage { display:block; padding:16px; }
.rw-anfrage > div:first-child { width:100%; }
.rw-anfrage .rw-verlauf-eintrag { display:block; }
.rw-verlauf { margin-top:18px; padding-top:15px; border-top:1px solid var(--line); }
.rw-verlauf-titel { display:block; margin-bottom:8px; color:var(--muted); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.rw-verlauf-eintrag { margin:0 0 8px; padding:11px 13px; border-left:3px solid #2d78a5; border-radius:8px; background:var(--panel-2); }
.rw-verlauf-eintrag small { color:var(--muted); font-size:12px; font-weight:700; }
.rw-verlauf-eintrag p { margin:5px 0 0; white-space:pre-line; color:var(--text); }
.rw-antwortkarte {
  display:block;
  width:100%;
  margin-top: 18px;
  padding: 0;
  border: 1px solid #c9dfea;
  border-radius: 14px;
  background: linear-gradient(180deg, #f8fcff 0%, #f3f8fb 100%);
}
.rw-antwortkarte > summary { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px; list-style:none; cursor:pointer; }
.rw-antwortkarte > summary::-webkit-details-marker { display:none; }
.rw-antwortkarte > summary::after { content:'＋'; color:#2d78a5; font-size:22px; line-height:1; }
.rw-antwortkarte[open] > summary::after { content:'−'; }
.rw-antwortkarte > summary strong { display:block; color:var(--text); font-size:18px; }
.rw-antwortkarte > summary small { display:block; margin-top:4px; color:var(--muted); font-size:13px; }
.rw-antwort-inhalt { padding:0 18px 18px; }
.rw-antwort-kopf { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:13px; }
.rw-antwort-kopf strong { display:block; color:var(--text); font-size:18px; }
.rw-antwort-kopf small { display:block; margin-top:4px; color:var(--muted); font-size:13px; }
.rw-antwort-lokal { color:var(--pri, #2d78a5); font-size:13px; font-weight:800; white-space:nowrap; }
.rw-antwortkarte label { display:grid; gap:6px; color:var(--text); font-weight:700; }
.rw-antwortkarte textarea { width:100%; min-height:150px; resize:vertical; border:1px solid #b7cbd8; border-radius:10px; background:var(--field, #fff); color:var(--text); padding:12px 14px; font:inherit; line-height:1.5; box-shadow:inset 0 1px 2px rgba(25,55,76,.05); }
.rw-antwortkarte textarea:focus { outline:3px solid rgba(45,120,165,.18); border-color:#2d78a5; }
.rw-antwort-hinweis { display:block; margin-top:8px; color:var(--muted); font-size:13px; }
.rw-antwort-aktionen { justify-content:flex-end; margin-top:14px; }
.rw-antwort-aktionen .primary-action, .rw-antwort-aktionen .secondary-action { min-height:44px; }
@media (max-width: 700px) {
  .rw-balken { grid-template-columns: minmax(0, 1fr) 70px auto; }
  .rw-antwort-kopf { display:block; }
  .rw-antwort-lokal { display:inline-block; margin-top:8px; }
  .rw-antwort-aktionen { display:grid; grid-template-columns:1fr; }
  .rw-antwort-aktionen button { width:100%; }
  .rw-antwortkarte > summary { align-items:flex-start; }
  .rw-antwort-lokal { white-space:normal; }
}
.rw-rechner label, .rw-utm label, .rw-anfrage .form-row label, .rw-kanal .form-row label { display: grid; gap: 4px; }

/* ===== Raumbuchungen (John, 17.09.2026) ===== */
.rb-monat-kopf { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 6px 0; }
.rb-legende { display: flex; flex-wrap: wrap; gap: 10px; font-size: .8rem; color: var(--muted); margin-left: auto; }
.rb-legende i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 3px; vertical-align: middle; border: 1px solid var(--line); }
.rb-monat-scroll { overflow-x: auto; margin-bottom: 14px; }
.rb-monat { border-collapse: collapse; font-size: .72rem; min-width: 720px; width: 100%; }
.rb-monat th { font-weight: 500; color: var(--muted); padding: 2px; text-align: center; }
.rb-monat tbody th { text-align: left; white-space: nowrap; padding-right: 8px; color: var(--text); }
.rb-monat td { border: 1px solid var(--line); height: 22px; min-width: 18px; position: relative; }
/* Name der Belegung einmal am Anfang, laeuft ueber die folgenden Tage (John, 20.09.2026) */
.rb-bar-text { position: absolute; left: 3px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: .68rem; line-height: 1; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); pointer-events: none; z-index: 2; }
.rb-lodgify .rb-bar-text { color: var(--text); text-shadow: none; }
.rb-monat td.rb-we { background: var(--panel-2); }
.rb-fest { background: #2e7d4f !important; cursor: pointer; }
.rb-offen { background: var(--gold) !important; cursor: pointer; }
.rb-sperre { background: #8a8478 !important; }
.rb-lodgify { background: repeating-linear-gradient(45deg, #b3492e33, #b3492e33 3px, transparent 3px, transparent 6px) !important; }
.rb-filter { align-items: end; margin: 10px 0; }
.rb-liste { display: grid; gap: 10px; margin: 12px 0; }
.rb-buchung { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; background: var(--panel); }
.rb-buchung.rb-ueberfaellig { border-color: #b23b3b; }
.rb-buchung-kopf { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.rb-buchung-daten { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; margin: 6px 0; }
.rb-buchung-daten small, .rb-geld small { display: block; color: var(--muted); }
.rb-nachricht { white-space: pre-line; }
.rb-geld { display: grid; gap: 2px; text-align: right; }
.rb-chip { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; padding: 1px 7px; border-radius: 3px; border: 1px solid var(--line); }
.rb-chip.rb-bestaetigt { background: #2e7d4f; color: #fff; border-color: #2e7d4f; }
.rb-chip.rb-offen { background: var(--gold); color: var(--pri-text); border-color: var(--gold); }
.rb-chip.rb-storniert, .rb-chip.rb-abgelaufen { opacity: .6; }
.rb-chip.rb-warn { background: #b23b3b; color: #fff; border-color: #b23b3b; }
#rbNeu .form-row label, .rb-buchung .form-row label, #rbSperreNeu label { display: grid; gap: 4px; }
@media (max-width: 700px) { .rb-buchung-daten { grid-template-columns: 1fr; } .rb-geld { text-align: left; } }

/* Suche im Kopf (#73/#84) */
.portal-suche-dialog { width: min(520px, calc(100vw - 32px)); }
.portal-suche-feld input { width: 100%; font-size: 17px; padding: 12px 14px; }
.portal-suche-dialog h4 { margin: 14px 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.portal-suche-treffer { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); cursor: pointer; margin-bottom: 6px; color: inherit; font: inherit; }
.portal-suche-treffer:hover, .portal-suche-treffer:focus-visible { border-color: var(--gold); }
.portal-suche-treffer small { color: var(--muted); }
@media (max-width: 760px) { .portal-suche-lang { display: none; } }

/* Kopfzeile (John, 17.09.2026): Ansichts-Umschalter links, Personenwahl, Suche, Chat, Neu laden, Logout rechts.
   Der Name in der Mitte entfaellt - er steht in der ersten Kachel („Hallo, …“). */
.portal-header .portal-nav { flex: 1 1 100%; justify-content: flex-start; flex-wrap: wrap; }
.portal-header .portal-nav > .view-switch { margin-right: auto; }
.portal-header .portal-nav > .account-chip { display: none !important; }

/* Privat-Ansicht mit Kachel-Navigation (John, 17.09.2026): kein eigener Hintergrund-Rahmen um die Kacheln -
   sie schliessen links und rechts mit der Kopfzeile ab wie in Team/Administration. Stalltablet unberuehrt. */
body[data-nav-groups="1"] #mitgliedPanel .srr-mitglied { background: transparent; padding: 0; border-radius: 0; }
/* Wünsche & Fehler (#89/#90): eigene Meldung zeigt nur die Zahl, Bearbeiten-Formular */
.feedback-vote-zahl { color: var(--muted); font-size: .9em; padding: .25rem 0; }
.feedback-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.feedback-edit { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line, #ddd); }

/* #87 (John): Team-/Administrations-Dashboard wie Privat - kein grosser Sammelrahmen, jede Karte ein eigenes Widget */
body[data-nav-groups="1"]:not([data-view="privat"]) #dashboardPanel.work-panel { background: transparent; border: 0; box-shadow: none; padding: 0; }
body[data-nav-groups="1"]:not([data-view="privat"]) #dashboardPanel > .panel-headline { display: none; }
body[data-nav-groups="1"]:not([data-view="privat"]) #dashboardPanel > .dash-greeting,
body[data-nav-groups="1"]:not([data-view="privat"]) #dashboardPanel .dashboard-card {
  background: var(--card, #fffefa); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; box-shadow: none;
}
body[data-nav-groups="1"]:not([data-view="privat"]) #dashboardPanel > * + * { margin-top: 18px; }
body[data-nav-groups="1"]:not([data-view="privat"]) #dashboardPanel .team-raster,
body[data-nav-groups="1"]:not([data-view="privat"]) #dashboardPanel .team-raster .spalte { gap: 18px; }

/* #88 (John): Ferienhäuser in einzelne Widgets - Kopf, je Objekt eine Kachel (drei nebeneinander), Kalender */
/* display nur fuer die AKTIVE Seite - sonst ueberschrieb es das Ausblenden und die Ferienhaeuser hingen an jeder Seite (John, 17.09.2026) */
body[data-nav-groups="1"] #rentalPanel.work-panel { background: transparent; border: 0; box-shadow: none; padding: 0; gap: 18px; }
body[data-nav-groups="1"] #rentalPanel.work-panel.active { display: grid; }
body[data-nav-groups="1"] #rentalPanel .rental-teil,
body[data-nav-groups="1"] #rentalPanel .rental-card { background: var(--card, #fffefa); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; }
body[data-nav-groups="1"] #rentalPanel .rental-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { body[data-nav-groups="1"] #rentalPanel .rental-grid { grid-template-columns: minmax(0, 1fr); } }
#rentalPanel .rental-teil-kopf .panel-headline { margin-bottom: 4px; }
.rental-teil-titel { margin: 0 0 10px; }
/* Update-Katalog (John, 17.09.2026) */
.update-liste { display: grid; gap: 10px; margin-top: 12px; }
.update-eintrag { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--card, #fffefa); }
.update-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.update-kopf b { color: var(--gold, #a07a2a); font-size: .85em; }
.update-nur-admin { font-size: .75em; border-radius: 999px; padding: 1px 8px; background: var(--sand, #eee6d5); color: var(--muted); }
.update-text { margin-top: 6px; }
.update-neu summary { cursor: pointer; font-weight: 600; margin: 8px 0; }

/* Vermietung (#94) */
.vm-teil { border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; background: var(--card, #fffefa); margin: 0 0 18px; }
.vm-teil h4 { margin: 0 0 10px; }
.vm-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 8px 0; }
.vm-zahlen > div { background: var(--sand, #eee6d5); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; }
.vm-zahlen b { font-size: 1.25rem; }
.vm-zahlen small { color: var(--muted); }
.vm-zahlen .gut { color: #2e7d32; font-weight: 700; }
.vm-zahlen .schlecht { color: #b23b3b; font-weight: 700; }
.vm-balken { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; height: 150px; align-items: end; margin: 14px 0 8px; }
.vm-balken-spalte { display: grid; grid-template-rows: 1fr auto; height: 100%; align-items: end; text-align: center; }
.vm-balken-spalte i { display: block; background: var(--gold, #b8862b); border-radius: 6px 6px 0 0; min-height: 2px; }
.vm-balken-spalte small { color: var(--muted); font-size: 11px; padding-top: 4px; }
.vm-kanaele { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 6px 0; }
.vm-objekte { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px; margin: 0 0 18px; }
.vm-objekt { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; background: var(--card, #fffefa); display: grid; gap: 8px; align-content: start; }
.vm-objekt-kopf { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.vm-objekt-kopf strong { display: block; font-size: 1.1rem; }
.vm-objekt-kopf small { color: var(--muted); }
.vm-naechste { margin: 0; }
.vm-details summary { cursor: pointer; font-weight: 600; }
.vm-filter { flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.vm-tabelle tr.vm-storno td { color: var(--muted); text-decoration: line-through; }

/* Bewertungen (#93) */
.bw-liste { display: grid; gap: 12px; margin: 12px 0 18px; }
.bw-karte { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--card, #fffefa); display: grid; gap: 6px; }
.bw-karte.bw-eingereicht { border-left: 4px solid var(--gold, #b8862b); }
.bw-karte p { margin: 0; }
.bw-kopf { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; }
.bw-sterne { color: #d59716; letter-spacing: 1px; font-size: 1.1rem; }
.bw-status { margin-left: auto; font-size: .8em; color: var(--muted); }
.bw-quelle { font-size: .75em; border-radius: 99px; padding: 1px 8px; background: var(--line, #e7e1d4); }
.bw-quelle.bw-google { background: #e8eefb; color: #1a4a9c; }
.bw-karte.bw-offen.bw-freigegeben { border-left: 4px solid #8fb4e8; }
.bw-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0 0 12px; }
.bw-kennzahlen > div { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; background: var(--card, #fffefa); display: grid; }
.bw-kennzahlen b { font-size: 1.35rem; }
.bw-kennzahlen span { font-size: .85em; color: var(--muted); }
.bw-werkzeuge { display: grid; grid-template-columns: 180px 180px minmax(0, 1fr); gap: 10px; margin: 10px 0 0; align-items: end; }
.bw-werkzeuge label { display: grid; gap: 3px; font-size: .85em; }
.bw-werkzeuge select, .bw-werkzeuge input { width: 100%; }
.bw-antwort { display: grid; gap: 4px; font-size: .9em; }
.bw-antwort textarea { width: 100%; box-sizing: border-box; font: inherit; }
.bw-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bw-aktionen > * { width: auto; }
@media (max-width: 620px) { .bw-werkzeuge { grid-template-columns: 1fr 1fr; } .bw-werkzeuge label:last-child { grid-column: 1 / -1; } }
.bw-karte a.secondary-action { text-decoration: none; display: inline-flex; align-items: center; }
.bw-teil { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 0 0 12px; background: var(--card, #fffefa); }
.bw-teil summary { cursor: pointer; font-weight: 600; }
.bw-ziele { display: grid; gap: 6px; }
.bw-ziele > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); padding: 4px 0; }
@media (max-width: 620px) { .bw-ziele > div { grid-template-columns: 1fr; } }
.vm-jahr { display: flex; align-items: center; gap: 10px; }
.vm-teil .panel-headline { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Hundesport als einzelne Widgets (John, 17.09.2026) */
body[data-nav-groups="1"] #hundesportPanel.work-panel { background: transparent; border: 0; box-shadow: none; padding: 0; }
body[data-nav-groups="1"] #hundesportPanel.work-panel.active { display: grid; gap: 18px; }
.hs-widget { background: var(--card, #fffefa); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px; min-width: 0; }
.hs-widget > h3 { margin: 0 0 10px; }
/* Finanz-Reiter als einzelne Widgets (#97/#99, John 17.09.2026) */
.fin-stapel { display: grid; gap: 18px; }
.fin-stapel .fin-schmal { max-width: 760px; }
.fin-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; align-items: start; }
.fin-spalte { display: grid; gap: 18px; min-width: 0; }
@media (max-width: 900px) { .fin-raster { grid-template-columns: 1fr; } }
.balance-row small { display: block; color: var(--muted); font-size: .8em; }
.hs-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 900px) { .hs-raster { grid-template-columns: minmax(0, 1fr); } }
.hs-konto { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.hs-konto h2 { margin: 2px 0 0; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.hs-saldo { text-align: right; display: grid; }
.hs-saldo strong { font-size: 1.8rem; }
.hs-saldo strong.bad, .hs-protokoll .bad, #hundesportLetzteListe .bad { color: #b23b3b; }
.hs-protokoll .good, #hundesportLetzteListe .good { color: #2e7d32; }
body[data-nav-groups="1"] #hundesportVereinPanel.work-panel { background: transparent; border: 0; box-shadow: none; padding: 0; }
body[data-nav-groups="1"] #hundesportVereinPanel.work-panel.active { display: grid; gap: 18px; }
.hs-verein-form { max-width: 980px; }

/* Vereins-Werkzeuge: Hundesport-Start, Listen, Dokumente & Links, Administration › Vereine (John, 17.09.2026) */
body[data-nav-groups="1"] .vw-panel.work-panel { background: transparent; border: 0; box-shadow: none; padding: 0; }
body[data-nav-groups="1"] .vw-panel.work-panel.active { display: grid; gap: 18px; }
.vw-seite { display: grid; gap: 18px; min-width: 0; }
.vw-willkommen h2 { margin: 4px 0 8px; font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.vw-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.vw-kpi { display: grid; gap: 2px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--bg, #f7f3ea); padding: 12px 14px; cursor: pointer; font: inherit; color: inherit; }
.vw-kpi strong { font-size: 1.45rem; }
.vw-kpi span { font-size: 0.85rem; color: var(--muted, #6b6457); }
.vw-kpi.warn strong { color: #b23b3b; }
.vw-wunsch { border-left: 5px solid var(--green, #2f7d4f); }
.vw-wunsch h3 { margin: 2px 0 8px; }
.vw-schnell { display: grid; gap: 8px; margin-bottom: 10px; }
.vw-schnell > * { text-align: center; }
.vw-filter { align-items: end; flex-wrap: wrap; }
.vw-filter label { min-width: 180px; }
.vw-tabelle td { white-space: normal; }
.vw-ok { color: #2e7d32; font-weight: 600; }
.vw-warn { color: #b23b3b; font-weight: 600; }
.vw-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; background: #f4e3c3; color: #7a4d00; border-radius: 999px; padding: 1px 8px; vertical-align: middle; }
.vw-vorlagen { flex-wrap: wrap; margin-bottom: 12px; }
.vw-liste-karte { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.vw-editor { border: 1px dashed var(--line); border-radius: 12px; padding: 14px; margin: 0 0 14px; background: var(--bg, #f7f3ea); display: grid; gap: 10px; }
.vw-editor-kopf { display: flex; gap: 12px; flex-wrap: wrap; }
.vw-editor-kopf label { flex: 1 1 260px; }
.vw-edit-tabelle { border-collapse: collapse; width: 100%; }
.vw-edit-tabelle th, .vw-edit-tabelle td { border: 1px solid var(--line); padding: 3px; vertical-align: middle; }
.vw-edit-tabelle th { background: rgba(0,0,0,0.04); white-space: nowrap; }
.vw-edit-tabelle input { width: 100%; min-width: 110px; border: 0; background: transparent; padding: 6px; font: inherit; }
.vw-edit-tabelle th input { font-weight: 700; width: calc(100% - 22px); }
.vw-editor-knoepfe { flex-wrap: wrap; }
.vw-verein-block h4 { margin: 12px 0 6px; }
.vw-ro { border-left: 5px solid #c58b2b; }
.vw-teil { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin: 0 0 16px; background: var(--card, #fffefa); }
.vw-teil .panel-headline { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.vw-vereine { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.vw-verein-karte { border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: grid; gap: 8px; min-width: 0; }
.vw-verein-kopf { display: flex; justify-content: space-between; gap: 10px; }
.vw-verein-kopf h4 { margin: 0; font-size: 1.15rem; }
.vw-verein-kopf .hs-saldo strong { font-size: 1.3rem; }
.vw-zahlen { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; font-size: 0.9rem; }
.vw-admins { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.vw-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--bg, #f1ede4); border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 0.88rem; }
.vw-chip button { border: 0; background: transparent; cursor: pointer; font-size: 1rem; line-height: 1; color: #b23b3b; }
.vw-admin-neu { flex-wrap: wrap; }
.vw-admin-neu input, .vw-admin-neu select { flex: 1 1 140px; min-width: 0; }
.vw-option { flex-wrap: wrap; align-items: end; }
.vw-mitglied { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 0 0 16px; background: var(--card, #fffefa); }
.vw-mitglied h3 { margin: 0 0 6px; }
.vw-pflicht-hinweis { background: #fff4df; border: 1px solid #e8c98a; border-radius: 10px; padding: 10px 12px; margin: 8px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.test-user-panel .test-user-sub { display: block; margin: 6px 10px 2px; color: var(--muted, #6b6457); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 620px) { .vw-verein-kopf { flex-direction: column; } .vw-filter label { min-width: 0; flex: 1 1 100%; } }
.vw-panel .form-row:not(.hs-option), #vereineHost .form-row, .vw-mitglied .form-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.vw-filter label, .vw-editor-kopf label, #vereineHost .vw-admin-neu, #vereineHost .panel-headline form { display: grid; gap: 5px; color: var(--muted); font-size: 13px; font-weight: 700; }
#vereineHost .panel-headline form, #vereineHost .vw-admin-neu { display: flex; }
.vw-filter input, .vw-filter select, .vw-editor-kopf input, .vw-editor-kopf select, #vereineHost .vw-admin-neu input, #vereineHost .vw-admin-neu select, #vereineHost .panel-headline input, #vereineMitgliederSuche {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--text); padding: 9px 10px; font: inherit; }
#vereineHost .panel-headline input { width: auto; min-width: 220px; }
.vw-edit-tabelle input { color: var(--text); }
/* Zusatzfunktionen je Verein (John, 17.09.2026) */
.hs-funktionen { display: grid; gap: 8px; }
.hs-funktion { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; cursor: pointer; }
.hs-funktion input { margin-top: 4px; width: 18px; height: 18px; }
.hs-funktion span { display: grid; gap: 2px; }
.hs-funktion small { color: var(--muted); }
.hs-checkin { display: inline-flex; gap: 6px; }
.hs-checkin .aktiv { font-weight: 700; text-decoration: underline; }
.hs-stellplatz { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.hs-stellplatz input, .hs-stellplatz select, .hs-ergebnis input[name="titel"], #hundesportTeilnehmerDialog .form-row input { border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--text); padding: 7px 9px; font: inherit; }
.hs-stellplatz [data-sp="nummer"] { width: 70px; }
.hs-stellplatz select { flex: 1 1 220px; min-width: 0; }
.hs-ergebnis, .hs-nachweis { flex-wrap: wrap; }
.hs-ergebnis > div > span { display: block; margin-top: 4px; }
.hs-nachweis .info-aktionen { flex-wrap: wrap; align-items: center; gap: 6px; }
#hsJournalSummen h4, #hsJournalKosten h4, #hsJournalZahlungen h4 { margin: 10px 0 6px; }
#hundesportJournalPanel .panel-headline { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: end; }
#hundesportJournalPanel .panel-headline select { border: 1px solid var(--line); border-radius: 8px; background: var(--field); color: var(--text); padding: 8px; font: inherit; }
#hundesportVereinPanel .panel-headline { display: flex; justify-content: space-between; }

/* Marketing neu geordnet: links anlegen, rechts Widgets mit Filter (John, 17.09.2026) */
.mk-raster { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
.mk-links { display: grid; gap: 16px; align-content: start; }
.mk-links.hs-widget, .mk-rechts.hs-widget { display: block; }
.mk-rechts { display: grid; gap: 12px; min-width: 0; align-content: start; }
.mk-rechts > .panel-headline { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
@media (max-width: 980px) { .mk-raster { grid-template-columns: minmax(0, 1fr); } }
.mk-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-filter button { font: inherit; font-size: 13px; font-weight: 600; border: 1px solid var(--line-strong); background: var(--card); color: var(--text); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.mk-filter button.an { background: var(--text); color: var(--panel, #fff); border-color: var(--text); }
.mk-filter button b { margin-left: 3px; font-weight: 800; }
.mk-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.mk-karten > .empty-state { grid-column: 1 / -1; }
.mk-karten .mk-karte, .mk-karten .news-karte, .mk-karten .sale-karte { display: flex; flex-direction: column; gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; padding: 0; margin: 0; min-width: 0; }
.mk-karten .mk-karte[hidden] { display: none; }
.mk-karten .mk-karte > img, .mk-karten .mk-karte > .mk-bild-leer { width: 100%; height: 150px; object-fit: cover; border-radius: 0; margin: 0; display: block; }
.mk-bild-leer { display: flex !important; align-items: center; justify-content: center; font-size: 34px; background: linear-gradient(135deg, #d9c6a3, #b99c6b); }
.mk-karten .mk-karte > div:not(.mk-bild-leer) { padding: 12px 14px 14px; display: grid; gap: 6px; min-width: 0; }
.mk-karten .mk-karte h4 { margin: 0; }
.mk-karten .mk-karte p { margin: 0; }
.mk-karten .mk-karte .form-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mk-karten .mk-karte .form-row > * { flex: 0 0 auto; }
.mk-status { display: flex; flex-wrap: wrap; gap: 5px; }
.mk-pl { font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 8px; background: var(--gold-tint, rgba(168,115,13,.1)); color: var(--gold); }
.mk-pl.ok { background: rgba(46,125,79,.12); color: var(--green); }
.mk-pl.warn { background: rgba(179,73,46,.12); color: var(--red); }
.mk-pl.grau { background: rgba(0,0,0,.06); color: var(--muted); }
.mk-gruppe { display: grid; gap: 10px; margin-bottom: 8px; }
.mk-gruppe > h4 { margin: 4px 2px 0; }
.mk-karte.ausgeblendet { opacity: .6; }
.mk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 10px; }
.mk-kpi { display: grid; gap: 2px; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); padding: 12px 14px; cursor: pointer; font: inherit; color: inherit; }
.mk-kpi strong { font-size: 1.5rem; }
.mk-kpi span { font-size: .85rem; color: var(--muted); }
.mk-kpi.warn strong { color: var(--red); }
.mk-gruppe[hidden], .mk-karten > [hidden] { display: none !important; }
/* Google Ads (John, 18.09.2026) */
.ga-balken { height: 8px; border-radius: 99px; background: var(--line, #e7e1d4); overflow: hidden; margin: 0 0 16px; }
.ga-balken i { display: block; height: 100%; background: var(--gold, #b8862b); }
.ga-zeile { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ga-zeile label, .ga-form > label { display: grid; gap: 3px; }
.ga-form textarea, .ga-form input, .ga-form select { width: 100%; box-sizing: border-box; font: inherit; }
.ga-kopierfeld { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: end; margin: 0 0 8px; font-size: .9em; }
.ga-kopierfeld input { grid-column: 1; font-family: ui-monospace, Menlo, monospace; font-size: .85em; }
.ga-schritte { padding-left: 18px; margin: 8px 0 0; }
.ga-entwuerfe { margin-top: 18px; }
.ga-liste { display: grid; gap: 10px; }
.ga-karte { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--card, #fffefa); }
.ga-karte.ga-aktiv { border-left: 4px solid #2e9d62; }
.ga-kopf { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; }
.ga-status { font-size: .8em; border-radius: 99px; padding: 1px 8px; background: var(--line, #e7e1d4); }
.ga-hinweise { margin: 0; padding-left: 18px; color: #a03b2a; font-size: .9em; }
.ga-laengen { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .8em; color: var(--muted); }

/* Marketing-Dashboard (John, 18.09.2026) */
.md-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 0 0 16px; }
.md-kachel { display: grid; gap: 2px; align-content: start; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--card, #fffefa); padding: 12px 14px; font: inherit; color: inherit; }
button.md-kachel { cursor: pointer; }
button.md-kachel:hover { border-color: var(--gold); }
.md-kachel > b { font-size: 1.5rem; line-height: 1.2; }
.md-kachel span { font-size: .85em; color: var(--muted); }
.md-trend { font-size: .8em; color: var(--muted); }
.md-trend.hoch { color: var(--green); }
.md-trend.runter, .md-trend.warn { color: var(--red); }
.md-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; align-items: start; }
.md-raster > * { min-width: 0; }
.md-raster .md-breit { grid-column: 1 / -1; }
.md-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.md-kopf h3 { margin: 0; }
.md-pl { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: .8em; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.md-pl.warn { border-color: var(--red); color: var(--red); }
.md-pl.ok { border-color: var(--green); color: var(--green); }
.md-liste, .md-aufgaben, .md-mini, .md-bewertungen, .md-rechte { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 6px; }
.md-liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; border-bottom: 1px solid var(--line); padding: 6px 0; }
.md-aufgaben li { display: flex; justify-content: space-between; align-items: center; gap: 10px; border-left: 3px solid var(--line-strong); padding: 6px 10px; background: var(--gold-tint); border-radius: 6px; }
.md-aufgaben li.warn { border-left-color: var(--red); }
.md-mini li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dashed var(--line); padding: 3px 0; }
.md-mini li span { min-width: 0; overflow-wrap: anywhere; }
.md-mini li b { flex: none; text-align: right; }
.md-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.md-zwei h4, .hs-widget h4 { margin: 10px 0 2px; font-size: .9em; color: var(--muted); }
.md-konto { display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; }
.md-konto span { font-size: .85em; color: var(--muted); }
.md-konto > b { font-size: 1.4rem; }
.md-gross { margin: 4px 0; }
.md-gross b { font-size: 1.4rem; }
.md-saeulen { width: 100%; height: 70px; display: block; margin: 6px 0 4px; }
.md-saeulen rect { fill: var(--gold); opacity: .8; }
.md-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.md-chips span { border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; font-size: .85em; }
.md-sterne { color: var(--gold); letter-spacing: 1px; }
.md-bewertungen p { margin: 2px 0 0; font-size: .9em; color: var(--muted); }
.md-beitraege { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.md-beitrag { display: grid; gap: 2px; text-decoration: none; color: inherit; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; padding-bottom: 6px; }
.md-beitrag img, .md-bild-leer { width: 100%; aspect-ratio: 1; object-fit: cover; display: grid; place-items: center; background: var(--panel-2); font-size: 2rem; }
.md-beitrag small, .md-beitrag span, .md-beitrag em { padding: 0 8px; font-size: .82em; }
.md-beitrag em { color: var(--muted); font-style: normal; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.md-rechte li.ok { color: var(--green); }
.md-rechte li.fehlt { color: var(--muted); }
.md-tabelle { width: 100%; border-collapse: collapse; font-size: .9em; }
.md-tabelle th, .md-tabelle td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.md-anleitung summary { cursor: pointer; font-weight: 600; margin: 6px 0; }
@media (max-width: 700px) {
  .md-raster { grid-template-columns: 1fr; }
  .md-liste li { grid-template-columns: minmax(0, 1fr) auto; }
  .md-zwei { grid-template-columns: 1fr; }
}

/* Redaktionsplan, Newsletter, Links (John, 18.09.2026) */
.rp-tage { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 12px; }
.rp-woche { border-top: 1px solid var(--line); padding: 8px 0; }
.rp-woche h4 { margin: 4px 0 8px; }
.rp-tag { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 8px 10px; border-radius: 8px; border-left: 3px solid var(--line); margin-bottom: 6px; background: var(--card, #fffefa); }
.rp-tag.heute { border-left-color: var(--gold); }
.rp-tag.leer, .rp-tag.verpasst { border-left-color: var(--red); }
.rp-tag.vorbei { opacity: .75; }
.rp-datum { display: grid; gap: 2px; align-content: start; }
.rp-datum small { color: var(--muted); }
.rp-inhalt { display: grid; gap: 4px; justify-items: start; }
.rp-eintrag { display: flex; justify-content: space-between; gap: 10px; width: 100%; }
.rp-eintrag.erledigt b { text-decoration: line-through; opacity: .7; }
.rp-eintrag.faellt-aus { opacity: .5; }
.rp-gepostet { color: var(--green); font-size: .9em; }
.rp-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; align-items: start; }
.lk-tabelle code { font-size: .85em; word-break: break-all; }
.lk-qr { display: flex; gap: 18px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.lk-qr #lkQrBild img, .lk-qr #lkQrBild canvas { width: 180px; height: 180px; background: #fff; padding: 10px; border-radius: 8px; }
.md-raster .md-breit-2 { grid-column: span 2; }
.nl-karte { margin-top: 16px; }
@media (max-width: 700px) {
  .rp-tag { grid-template-columns: 1fr; }
  .md-raster .md-breit-2 { grid-column: auto; }
}

/* Reitkurse · Termine · Ferienwochen & Events, Anleitungen (John, 18.09.2026) */
.mk-umschalter { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--card, #fffefa); margin: 0 0 14px; }
.mk-umschalter button, .mk-umschalter label { border: 0; background: none; font: inherit; color: inherit; padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.mk-umschalter button.an { background: var(--gold); color: var(--pri-text); font-weight: 600; }
.mk-umschalter.klein { border-radius: 10px; }
.mk-datei { cursor: pointer; display: inline-flex; align-items: center; }
.al-todos, .al-liste { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 6px; }
.al-liste { list-style: disc; padding-left: 20px; }
.al-todos li { border-bottom: 1px dashed var(--line); padding: 4px 0; }
.al-todos li.erledigt span { opacity: .6; }
.al-todos li.erledigt span > :first-child { text-decoration: line-through; }
.al-kopie { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: start; margin-bottom: 10px; }
.al-kopie textarea { width: 100%; font: inherit; font-size: .9em; }
@media (max-width: 700px) { .al-kopie { grid-template-columns: 1fr; } }
/* Marketing-Ansicht: viele Einzelknöpfe – umbrechen statt seitlich scrollen */
.group-navigation.nav-flach .kachel-nav, .group-navigation.nav-flach .kachel-unterzeile { flex-wrap: wrap; overflow-x: visible; }
.al-todos .checkbox-label { display: flex; align-items: flex-start; justify-content: flex-start; gap: 8px; text-align: left; font-weight: 400; }
.al-todos .checkbox-label input { margin-top: 4px; flex: none; }

/* Marketing-Umbau (John, 18.09.2026): sieben gleiche Knöpfe, Seiten links 1/3 – rechts 2/3, breite Karten 16:7 */
.group-navigation.nav-flach .kachel-unterzeile { display: none; }
.group-navigation.nav-flach .kachel-nav { gap: 8px; }
.group-navigation.nav-flach .kachel-nav button { border: 1px solid var(--line); border-radius: 10px; padding: 9px 16px; font-weight: 600; min-height: 40px; }
.group-navigation.nav-flach .kachel-nav button.active { border-color: transparent; }
.mk-raster { grid-template-columns: minmax(280px, 1fr) minmax(0, 2fr); }
.mk-umschalter[data-mk-auto] { border-radius: 14px; }
.mk-umschalter[data-mk-auto] button { border-radius: 10px; }
:is(#newsList, #promoList, #saleList, #kursWerbungList, #terminWerbungList, #ferienWerbungList, #eventsWerbungList).mk-karten,
:is(#kursWerbungList, #terminWerbungList, #ferienWerbungList, #eventsWerbungList) .mk-karten { grid-template-columns: minmax(0, 1fr); }
:is(#newsList, #promoList, #saleList, #kursWerbungList, #terminWerbungList, #ferienWerbungList, #eventsWerbungList) .mk-karte {
  display: grid !important; grid-template-columns: 38% minmax(0, 1fr); grid-template-rows: auto; min-height: 0; }
:is(#newsList, #promoList, #saleList, #kursWerbungList, #terminWerbungList, #ferienWerbungList, #eventsWerbungList) .mk-karte > img,
:is(#newsList, #promoList, #saleList, #kursWerbungList, #terminWerbungList, #ferienWerbungList, #eventsWerbungList) .mk-karte > .mk-bild-leer {
  width: 100%; height: auto; min-height: 0; aspect-ratio: 10 / 11; object-fit: cover; align-self: start; }
:is(#newsList, #promoList, #saleList, #kursWerbungList, #terminWerbungList, #ferienWerbungList, #eventsWerbungList) .mk-karte > div:not(.mk-bild-leer) { padding: 14px 18px; align-content: start; }
:is(#newsList, #promoList, #saleList, #kursWerbungList, #terminWerbungList, #ferienWerbungList, #eventsWerbungList) .mk-karte:not(:has(> img, > .mk-bild-leer)) { grid-template-columns: minmax(0, 1fr); }
.bt-leiste { margin-top: 4px; }
.bt-host { border-top: 1px dashed var(--line); margin-top: 8px; padding-top: 10px; }
.bt-gruppen { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bt-titel { font-weight: 700; font-size: .85em; margin-right: 4px; }
.bt-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; cursor: pointer; font-size: .88em; font-weight: 600; }
.bt-chip input { margin: 0; }
.bt-chip.an { background: var(--gold); border-color: var(--gold); color: var(--pri-text); }
.bt-chip small { font-weight: 400; opacity: .75; }
.bt-vorschau summary { cursor: pointer; font-weight: 600; }
.bt-vorschau-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.bt-vorschau pre { white-space: pre-wrap; font: inherit; font-size: .84em; background: var(--panel-2); border-radius: 8px; padding: 10px; margin: 4px 0 0; max-height: 280px; overflow: auto; }
.mk-gruppe-feld { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; margin: 0; }
.mk-gruppe-feld legend { font-weight: 700; padding: 0 6px; }
.mk-chips-wahl { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
@media (max-width: 900px) {
  .mk-raster { grid-template-columns: 1fr; }
  :is(#newsList, #promoList, #saleList, #kursWerbungList, #terminWerbungList, #ferienWerbungList, #eventsWerbungList) .mk-karte { grid-template-columns: 1fr; }
  :is(#newsList, #promoList, #saleList, #kursWerbungList, #terminWerbungList, #ferienWerbungList, #eventsWerbungList) .mk-karte > img { aspect-ratio: 16 / 7; }
  .bt-vorschau-raster { grid-template-columns: 1fr; }
}
.bt-gruppen label.bt-chip { display: inline-flex; flex-direction: row; grid-template-columns: none; width: auto; margin: 0; line-height: 1.2; }
.bt-gruppen label.bt-chip input { width: auto; height: auto; min-height: 0; accent-color: currentColor; }
.mk-chips-wahl label.checkbox-label { display: inline-flex; align-items: center; gap: 4px; width: auto; }
.mk-bilder { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.mk-bild-mini { position: relative; display: inline-block; }
.mk-bild-mini img { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; display: block; }
.mk-bild-mini { border-radius: 8px; }
.mk-bild-mini.titel img { outline: 2px solid var(--gold); outline-offset: 1px; }
.mk-bild-mini em { position: absolute; left: 4px; bottom: 4px; font-size: 10px; font-style: normal; font-weight: 700; background: rgba(255,255,255,.9); color: #222; border-radius: 4px; padding: 0 4px; }
.mk-bild-knoepfe { position: absolute; top: -8px; right: -8px; display: flex; gap: 2px; }
.mk-bild-knoepfe button { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: var(--card, #fff); color: var(--text); font-size: 11px; line-height: 20px; padding: 0; cursor: pointer; }
.mk-bild-knoepfe button.weg { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; font-size: 13px; }
.mk-bild-neu { width: 72px; height: 54px; border: 2px dashed var(--line); border-radius: 6px; display: grid; place-items: center; cursor: pointer; font-size: 20px; line-height: 1; color: var(--muted); }
.mk-bild-neu small { font-size: 10px; margin-top: -8px; }
button.mk-pl.mk-aktuelles { border: 1px dashed currentColor; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; }

/* Mediathek (John, 18.09.2026) */
.mt-baum { list-style: none; margin: 6px 0 12px; padding: 0; display: grid; gap: 2px; max-height: 60vh; overflow: auto; }
.mt-ordner { width: 100%; text-align: left; border: 1px solid transparent; background: none; border-radius: 8px; padding: 6px 10px; font: inherit; cursor: pointer; color: inherit; display: flex; justify-content: space-between; gap: 8px; }
.mt-ordner small { color: var(--muted); }
.mt-ordner:hover { background: var(--panel-2); }
.mt-ordner.an { background: var(--gold); color: var(--pri-text); }
.mt-ordner.an small { color: inherit; opacity: .8; }
.mt-ordner.ziel, .mt-drop.ziel { outline: 2px dashed var(--gold); outline-offset: 2px; }
.mt-drop { display: grid; gap: 4px; place-items: center; text-align: center; border: 2px dashed var(--line); border-radius: 12px; padding: 22px 12px; cursor: pointer; }
.mt-kopf { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.mt-kopf input[type=search] { flex: 1 1 240px; }
.mt-leiste { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: var(--gold-tint); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; }
.mt-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.mt-bild { margin: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card, #fff); display: grid; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.mt-bild.gewaehlt { outline: 3px solid var(--gold); outline-offset: -1px; }
.mt-bild.offen { outline: 3px solid var(--green); outline-offset: -1px; }
.mt-bild-knopf { border: 0; padding: 0; background: none; cursor: pointer; display: block; }
.mt-bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--panel-2); }
.mt-bild figcaption, .mt-bild > span { display: flex; gap: 6px; align-items: center; padding: 6px 8px; font-size: .82em; min-width: 0; }
.mt-bild figcaption span, .mt-bild > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 16px; margin-bottom: 12px; }
.mt-detail img { width: 100%; max-height: 360px; object-fit: contain; background: var(--panel-2); border-radius: 8px; }
.mt-detail code { word-break: break-all; font-size: .85em; }
.mt-seiten { justify-content: center; margin-top: 12px; }
.mt-wahl { width: min(1100px, 94vw); }
.mt-wahl .mt-raster { max-height: 60vh; overflow: auto; margin: 10px 0; }
.mt-wahl .form-row { justify-content: flex-end; align-items: center; gap: 12px; }
button.mk-bild-neu { background: none; font: inherit; }
@media (max-width: 800px) { .mt-detail { grid-template-columns: 1fr; } }

/* Gäste der Ferienhäuser (Gästeportal, 18.09.2026) */
.gp-einstellung { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; }
.gp-schalter { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.gp-zeile { border-top: 1px solid var(--line); padding: 12px 0; display: grid; gap: 8px; }
.gp-zeile:first-of-type { border-top: 0; }
.gp-kopf { display: grid; gap: 2px; }
.gp-kopf small { color: var(--muted, #6b6b6b); }
.gp-status { display: flex; flex-wrap: wrap; gap: 6px; }
.gp-status span { font-size: 12.5px; border-radius: 999px; padding: 3px 10px; }
.gp-ok { background: #e7f3e6; color: #245a22; }
.gp-offen { background: #fbf1dc; color: #7a5410; }
.gp-aktionen { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
.gp-aktionen > .secondary-action { width: auto; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 7px 14px; min-height: 0; font-size: 13.5px; }
.gp-wahl { gap: 10px; margin-bottom: 10px; }

/* Einstellungen › Vermietungsobjekte (19.09.2026) */
.vo-objekte { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin-bottom: 14px; }
.vo-objekte button { text-align: left; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--card, #fffefa); cursor: pointer; display: grid; gap: 2px; color: inherit; font: inherit; }
.vo-objekte button small { color: var(--muted); }
.vo-objekte button.aktiv { border-color: var(--accent, #8a5a2b); box-shadow: inset 0 0 0 1px var(--accent, #8a5a2b); }
.vo-bereiche { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.vo-bereiche button { border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; background: transparent; cursor: pointer; color: inherit; font: inherit; }
.vo-bereiche button.aktiv { background: var(--accent, #8a5a2b); border-color: var(--accent, #8a5a2b); color: #fff; }
.vo-inhalt { display: grid; gap: 12px; }
.vo-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; align-items: end; }
.vo-hinweis { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--soft, rgba(0,0,0,.03)); margin: 0; }
.vo-liste { display: grid; gap: 8px; }
.vo-zeile { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.vo-zeile > input[data-vo-f="name"] { flex: 1 1 200px; }
.vo-zeile input[type="number"], .vo-zeile input[data-vo-f="cents"] { width: 96px; }
.vo-zeile label { display: grid; gap: 2px; font-size: .85rem; }
.vo-bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.vo-bilder figure { margin: 0; display: grid; gap: 6px; border: 1px solid var(--line); border-radius: 10px; padding: 6px; }
.vo-bilder img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.vo-fuss { align-items: center; position: sticky; bottom: 0; background: var(--bg, #fff); padding: 10px 0; }
.vo-anbindung { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; align-items: center; margin-bottom: 14px; }
@media (max-width: 640px) { .vo-anbindung { grid-template-columns: 1fr; } }
.gp-nachbuchungen { display: grid; gap: 4px; margin: 6px 0; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 10px; }
.gp-nachbuchungen > div { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.gp-nachbuchungen > div span { flex: 1 1 220px; }
/* Vermietung › Dashboard (19.09.2026) */
.vm-kennzahlen { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.vm-verlauf { width: 100%; height: 90px; display: block; margin-top: 12px; }
.vm-verlauf-linie { fill: none; stroke: var(--accent, #8a5a2b); stroke-width: 2; vector-effect: non-scaling-stroke; }
.vm-verlauf-flaeche { fill: var(--accent, #8a5a2b); opacity: .12; }
.vm-verlauf-achse { display: flex; justify-content: space-between; color: var(--muted); }
.vm-dash-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; margin-top: 14px; }
.vm-kanalzeile { display: grid; grid-template-columns: minmax(110px, 1fr) 2fr auto auto; gap: 10px; align-items: center; padding: 4px 0; }
.vm-kanalzeile i { display: block; height: 10px; border-radius: 6px; background: var(--soft, rgba(0,0,0,.06)); overflow: hidden; }
.vm-kanalzeile u { display: block; height: 100%; background: var(--accent, #8a5a2b); text-decoration: none; }
.vm-heute { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-top: 14px; }
.vm-heute-spalte { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.vm-heute-spalte p { margin: 6px 0; }
/* Vermietung › Umgebung (19.09.2026) */
.um-liste h4 { margin: 18px 0 6px; }
.um-zeile { display: grid; grid-template-columns: 1fr auto; gap: 8px 14px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 8px; background: var(--card, #fffefa); }
.um-zeile.entwurf { border-style: dashed; opacity: .92; }
.um-zeile p { margin: 4px 0; }
.um-aktionen { display: flex; gap: 6px; align-items: start; flex-wrap: wrap; justify-content: flex-end; }
.um-zeile .um-form, .um-form { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 10px; margin-top: 4px; }
.um-bild img { width: 120px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.rechte-verwaltet { display: block; font-size: .8rem; color: var(--muted); white-space: nowrap; }
@media (max-width: 640px) { .um-zeile { grid-template-columns: 1fr; } .um-aktionen { justify-content: flex-start; } }
/* Gäste › Nachrichten (19.09.2026) */
.gp-chat { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 8px 0; display: grid; gap: 10px; }
.gp-chat-verlauf { display: grid; gap: 8px; max-height: 340px; overflow-y: auto; }
.gp-blase { max-width: 82%; padding: 8px 12px; border-radius: 12px; background: var(--soft, rgba(0,0,0,.05)); justify-self: start; }
.gp-blase.wir { justify-self: end; background: var(--accent, #8a5a2b); color: #fff; }
.gp-blase p { margin: 0 0 2px; white-space: pre-line; }
.gp-blase small { opacity: .75; font-size: .75rem; }
.gp-chat-form { display: grid; gap: 8px; }
.secondary-action.gp-neu { border-color: var(--accent, #8a5a2b); font-weight: 700; }
/* Reiter Fremdtrainer › Start (19.09.2026) */
.ft-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
tr.ft-heute td { background: var(--soft, rgba(0,0,0,.04)); font-weight: 600; }

/* Neuigkeit nach dem Anmelden (John, 20.09.2026) */
.neuigkeit-karte { border-left: 4px solid var(--gold, #a07a2a); }
.neuigkeit-karte .neuigkeit-titel { margin: 4px 0 6px; }
.neuigkeit-karte .neuigkeit-text { color: var(--muted, #666); white-space: normal; }
/* Newsletter: Vorschau, Empfängerwahl, Versandstand (John, 21.09.2026) */
.nl-vorschau { width: 100%; height: 900px; border: 1px solid var(--line); border-radius: 12px; background: #f3ece0; }
.nl-gruppe { border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px 10px; margin: 0; display: grid; gap: 4px; }
.nl-gruppe legend { padding: 0 6px; font-weight: 600; }
.nl-versand { border: 1px solid var(--line); border-left: 4px solid #b7862c; border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; background: var(--card, #fffefa); }
.nl-suche { display: grid; gap: 4px; margin: 8px 0; }
/* Terminwünsche: Weitergeleitet / Eingeplant (John, 21.09.2026) */
.tw-weiter { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.tw-weiter summary { cursor: pointer; font-weight: 600; }
.tw-zeile { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--line); }
.tw-zeile:last-child { border-bottom: 0; }
.tw-ueberfaellig { background: rgba(192, 57, 43, .07); border-radius: 8px; padding: 7px 8px; }
.tw-rot { color: #b3261e; }
.tw-gruen { color: #2e7d32; font-weight: 600; }
/* Bereich Buchhaltung (21.09.2026): Entwurfsansichten eingebettet */
.buchhaltung-rahmen { display: block; width: 100%; height: calc(100vh - 230px); min-height: 640px; border: 1px solid var(--line, #dedfd4); border-radius: 12px; background: #f4f7f2; }
#administrationPanel:has(> [data-admin-panel^="bh"].active) > .panel-headline { display: none; }
/* Buchhaltung › Rechnungseingang (21.09.2026) */
#bhEingangRoot { --bhe-rot: #a2403b; --bhe-rot-bg: #fdebea; --bhe-gelb: #805914; --bhe-gelb-bg: #fff3d9; --bhe-gruen: #286343; --bhe-gruen-bg: #e5f3e8; --bhe-blau: #286bc8; --bhe-linie: var(--line, #dedfd4); }
.bhe-reiter { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.bhe-reiter button, .bhe-filter button { border: 1px solid var(--bhe-linie); background: #fff; color: inherit; border-radius: 999px; padding: 7px 13px; font: inherit; font-weight: 600; cursor: pointer; }
.bhe-reiter button.aktiv, .bhe-filter button.aktiv { background: #2d604b; border-color: #2d604b; color: #fff; }
.bhe-filter button small { opacity: .7; }
.bhe-leiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.bhe-leiste.klein { justify-content: space-between; font-size: 14px; }
.bhe-rechts { display: flex; flex-wrap: wrap; gap: 6px; }
.bhe-suche { flex: 1 1 240px; min-width: 0; padding: 9px 11px; border: 1px solid var(--bhe-linie); border-radius: 8px; font: inherit; }
.bhe-jahr { padding: 8px; border: 1px solid var(--bhe-linie); border-radius: 8px; font: inherit; }
.bhe-filter { display: flex; flex-wrap: wrap; gap: 5px; }
.bhe-tabelle { overflow: auto; border: 1px solid var(--bhe-linie); border-radius: 10px; background: #fff; }
.bhe-tabelle table { width: 100%; border-collapse: collapse; min-width: 1100px; font-size: 14px; }
.bhe-tabelle th { background: #f6f9f6; text-align: left; font-size: 12px; white-space: nowrap; padding: 0; border-bottom: 1px solid var(--bhe-linie); }
.bhe-tabelle th button { all: unset; display: block; padding: 10px 9px; cursor: pointer; font-weight: 700; color: #456054; }
.bhe-tabelle th button:focus-visible { outline: 2px solid #80ace7; }
.bhe-tabelle td { padding: 9px; border-bottom: 1px solid var(--bhe-linie); vertical-align: top; }
.bhe-tabelle tbody tr[data-id] { cursor: pointer; }
.bhe-tabelle tbody tr[data-id]:hover { background: #f5faf6; }
.bhe-tabelle tbody tr.gewaehlt { background: #e8f1eb; box-shadow: inset 3px 0 0 #2d604b; }
.bhe-tabelle .geld { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bhe-tabelle th.geld button { text-align: right; }
.bhe-mark { width: 30px; text-align: center; }
.bhe-mark input { width: 18px; height: 18px; }
.bhe-leer { text-align: center; color: #6e8176; padding: 24px !important; }
.bhe-status { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 13px; white-space: nowrap; }
.bhe-status i { width: 9px; height: 9px; border-radius: 50%; background: #9aa6a0; display: inline-block; }
.bhe-status.rot i { background: #c2413a; } .bhe-status.gelb i { background: #dba915; } .bhe-status.orange i { background: #e08a2b; } .bhe-status.gruen i { background: #38a76d; } .bhe-status.blau i { background: #3b7fd6; }
.bhe-warn { color: #c2413a; font-weight: 800; }
.bhe-fehlt-text { color: #a2403b; font-weight: 700; font-size: 12px; background: #fdebea; padding: 2px 6px; border-radius: 99px; }
.bhe-legende { font-size: 12px; color: #6e8176; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.bhe-hinweis { margin: 8px 0; padding: 10px 13px; border-radius: 8px; border-left: 4px solid; font-size: 14px; }
.bhe-hinweis.rot { background: #fdebea; border-color: #c2413a; color: #7d2723; font-weight: 600; }
.bhe-hinweis.gelb { background: #fff3d9; border-color: #dba915; color: #694b18; }
.bhe-hinweis.info { background: #eef4fb; border-color: #3b7fd6; color: #244a78; }
.bhe-hinweis.grau { background: #f1f3f1; border-color: #9aa6a0; color: #455; }
.bhe-detail { margin-top: 16px; border: 1px solid var(--bhe-linie); border-radius: 12px; background: #fff; padding: 16px; }
.bhe-detail-kopf { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; }
.bhe-detail-kopf h3 { margin: 2px 0; }
.bhe-knopfreihe { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.bhe-detail-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 12px; }
.bhe-vorschau iframe { width: 100%; height: 78vh; min-height: 520px; border: 1px solid var(--bhe-linie); border-radius: 8px; background: #f4f4f2; }
.bhe-form fieldset { border: 1px solid var(--bhe-linie); border-radius: 10px; margin: 0 0 10px; padding: 8px 12px 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px 12px; }
.bhe-form legend { font-weight: 700; padding: 0 4px; }
.bhe-form label, .bhe-form-reihe label { display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 600; }
.bhe-form label em { font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 99px; margin-left: 4px; }
.bhe-form input, .bhe-form select, .bhe-form textarea, .bhe-form-reihe input, .bhe-zahlung-form input, .bhe-zahlung-form select, .bhe-liste input { font: inherit; font-weight: 400; padding: 8px 9px; border: 1px solid #bccabe; border-radius: 7px; background: #fff; min-width: 0; }
.bhe-feld-fehlt input, .bhe-feld-fehlt select { border: 2px solid #c2413a; background: #fff6f5; }
.bhe-feld-fehlt em { background: #fdebea; color: #a2403b; }
.bhe-feld-unsicher input, .bhe-feld-unsicher select { border: 2px solid #dba915; background: #fffaf0; }
.bhe-feld-unsicher em { background: #fff3d9; color: #805914; }
.bhe-breit { grid-column: 1 / -1; }
.bhe-banken { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.bhe-bestaetigen { grid-column: 1 / -1; border-color: #c2413a !important; color: #a2403b !important; }
.bhe-detail-raster.zwei { align-items: start; }
.bhe-kasten { border: 1px solid var(--bhe-linie); border-radius: 10px; padding: 12px 14px; background: #fbfcfa; margin-top: 12px; }
.bhe-kasten h4 { margin: 0 0 8px; }
.bhe-ueberweisung { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; }
.bhe-qr { background: #fff; padding: 8px; border: 1px solid var(--bhe-linie); border-radius: 8px; line-height: 0; }
.bhe-ueberweisung dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; font-size: 14px; }
.bhe-ueberweisung dt { color: #6e8176; }
.bhe-ueberweisung dd { margin: 0; word-break: break-word; }
.bhe-kopie { border: 1px solid var(--bhe-linie); background: #fff; border-radius: 6px; padding: 3px 8px; font: inherit; font-size: 12px; cursor: pointer; }
.bhe-zahlungen { padding-left: 18px; margin: 6px 0 10px; }
.bhe-zahlungen li { margin: 4px 0; }
.bhe-zahlung-form { display: flex; flex-wrap: wrap; gap: 6px; }
.bhe-zahlung-form input[name="notiz"] { flex: 1 1 140px; }
.bhe-loeschen { text-align: right; margin: 12px 0 0; }
.bhe-erfassen { display: grid; gap: 12px; max-width: 640px; }
.bhe-kamera { display: flex !important; justify-content: center; align-items: center; min-height: 64px; font-size: 18px; cursor: pointer; text-align: center; }
.bhe-erfasst { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.bhe-erfasst li { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 9px 11px; border: 1px solid var(--bhe-linie); border-radius: 8px; background: #fff; }
.bhe-liste { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 5px; }
.bhe-liste li { display: flex; gap: 6px; }
.bhe-liste li input[data-feld="name"] { flex: 1; }
.bhe-liste .bhe-konto { width: 80px; }
.bhe-form-reihe { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 12px; }
.bhe-gefahr { border-color: #e7b9b5; background: #fff8f7; }
@media (max-width: 900px) {
  .bhe-detail-raster { grid-template-columns: 1fr; }
  .bhe-vorschau iframe { height: 60vh; min-height: 380px; }
  .bhe-detail { padding: 12px; }
}
.bhe-wb-marke { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 99px; background: #eaf2ff; color: #244a78; white-space: nowrap; }
.bhe-wb-marke.ok { background: #e5f3e8; color: #286343; }
.bhe-wb-tabelle table { min-width: 860px; }
.bhe-wb-tabelle input, .bhe-wb-tabelle select, .bhe-wb-verteilen input { font: inherit; padding: 7px 8px; border: 1px solid #bccabe; border-radius: 7px; width: 100%; min-width: 0; background: #fff; }
.bhe-wb-tabelle small { display: block; margin-top: 2px; }
.bhe-wb-tabelle .bhe-kurz, .bhe-wb-verteilen .bhe-kurz { width: 70px; } .bhe-wb-tabelle .bhe-mittel, .bhe-wb-verteilen .bhe-mittel { width: 110px; text-align: right; }
.bhe-wb-offen select { border: 2px solid #dba915; background: #fffaf0; }
.bhe-wb-verteilen { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; margin-left: auto; }
.bha-link { cursor: pointer; } .bha-link:hover { background: #f5faf6; } .bha-neutral td { color: #7a857f; } .bha-neutral b { font-weight: 600; }
.lesson-cal-entry .cal-reiter { line-height: 1.35; }
.bhg-gesamt td { border-top: 2px solid #2d604b; }
.ft-termine { margin: 8px 0; } .ft-termine summary { cursor: pointer; font-weight: 600; } .ft-termine-inhalt { margin-top: 8px; }
.gn-liste { display: grid; gap: 8px; }
.gn-karte { border: 1px solid var(--line, #dedfd4); border-radius: 10px; background: #fff; padding: 10px 14px; }
.gn-karte.gn-neu { border-left: 4px solid #dba915; }
.gn-kopf { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; cursor: pointer; }
.gn-vorschau { margin: 6px 0 0; color: #6e8176; font-size: 14px; cursor: pointer; }
.gn-antwort { display: flex; gap: 8px; margin-top: 8px; align-items: flex-start; } .gn-antwort textarea { flex: 1; font: inherit; padding: 8px; border: 1px solid #bccabe; border-radius: 7px; }
#rentalBuchungenTeil { margin-top: 18px; }
/* Vermietung: eine Suche für alle Quellen, direkt über der Buchungsliste */
.vm-buchungssuche { display: flex; align-items: end; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin: 0 0 10px; }
.vm-buchungssuche label { display: grid; gap: 4px; flex: 1 1 360px; font-weight: 700; }
.vm-buchungssuche input { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line, #d6ddd5); border-radius: 9px; background: #fff; font: inherit; }
.vm-buchungssuche input:focus { outline: 3px solid rgba(46, 123, 166, .18); border-color: #2e7ba6; }
.vm-buchungssuche p { margin: 0 0 10px; }
@media (max-width: 620px) { .vm-buchungssuche label { flex-basis: 100%; } .vm-buchungssuche p { margin: 0; } }

/* Vermietung › Buchungen (22.09.2026): Liste aller Quellen mit Detail-Dialog */
.bu-zahlen { margin-bottom: 12px; }
.bu-tabelle tbody tr.bu-zeile { cursor: pointer; }
.bu-tabelle tbody tr.bu-zeile:hover td, .bu-tabelle tbody tr.bu-zeile:focus-visible td { background: var(--soft, rgba(0,0,0,.04)); }
.bu-tabelle td { vertical-align: top; }
.bu-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 18px; white-space: nowrap; border: 1px solid transparent; }
.bu-gruen { background: #d9ecde; color: #245c35; border-color: #b7d6bf; }
.bu-rot { background: #f5cbc8; color: #91352e; border-color: #e5a9a4; }
.bu-gelb { background: #f7ecc9; color: #7a5a10; border-color: #e6d49a; }
.bu-grau { background: #ecefea; color: #4d5a52; border-color: #d6ddd5; }
.bu-dialog { width: min(820px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: hidden; }
.bu-dialog .compact-dialog-card { width: 100%; box-sizing: border-box; max-height: calc(100vh - 26px); overflow-y: auto; overflow-x: hidden; display: block; padding: 18px 20px 20px; }
.bu-dialog .compact-dialog-card > * { max-width: 100%; }
.bu-karte .karte-kopf { align-items: flex-start; }
.bu-karte .karte-kopf h3 { margin: 2px 0 4px; }
.bu-karte .karte-kopf .mini-link { flex: 0 0 auto; white-space: nowrap; }
.bu-abschnitt { border-top: 1px solid var(--line, #d6ddd5); padding: 12px 0 4px; }
.bu-abschnitt h4 { margin: 0 0 8px; font-size: 15px; }
.bu-abschnitt h4 small { font-weight: 400; margin-left: 6px; }
.bu-geld { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin-bottom: 8px; }
.bu-geld small { flex-basis: 100%; color: var(--muted); }
.bu-zahlungen { display: grid; gap: 4px; margin: 6px 0 10px; }
.bu-zahlungen > div { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; padding: 4px 8px; background: var(--soft, rgba(0,0,0,.04)); border-radius: 7px; font-size: 14px; }
.bu-zahlung { margin-top: 6px; }
.bu-abschnitt .bu-zahlung .form-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(0, 1.5fr) minmax(0, 1.2fr); gap: 10px; align-items: end; margin-bottom: 8px; }
.bu-abschnitt .bu-zahlung .form-row:last-child { grid-template-columns: 1fr auto; align-items: center; margin-bottom: 0; }
.bu-abschnitt .bu-zahlung .form-row label { display: grid; gap: 4px; font-weight: 600; min-width: 0; align-items: stretch; }
.bu-abschnitt .bu-zahlung .form-row select { width: 100%; }
.bu-abschnitt .bu-zahlung .form-row .checkbox-label { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.bu-abschnitt .bu-zahlung .form-row .checkbox-label input { width: 18px; min-width: 18px; height: 18px; min-height: 18px; padding: 0; margin: 0; }
.bu-abschnitt .form-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bu-abschnitt .form-row label { display: flex; gap: 6px; align-items: center; font-weight: 600; }
.bu-abschnitt .form-row select { width: auto; }
@media (max-width: 620px) { .bu-abschnitt .bu-zahlung .form-row, .bu-abschnitt .bu-zahlung .form-row:last-child { grid-template-columns: 1fr; } }
.bu-zahlung input, .bu-zahlung select { min-height: 40px; padding: 7px 10px; border: 1px solid var(--line, #d6ddd5); border-radius: 8px; font: inherit; background: #fff; }
.bu-karte .eyebrow { margin: 0; }
.bu-karte [data-bu-notiz] { width: 100%; font: inherit; padding: 8px; border: 1px solid var(--line, #d6ddd5); border-radius: 8px; box-sizing: border-box; }
@media (max-width: 620px) { .bu-zahlungen > div { grid-template-columns: 1fr auto; } .bu-zahlungen > div small { grid-column: 1 / -1; } }

/* Zahnrad „Einstellungen“ eines gebündelten Bereichs (Vermietung, 22.09.2026): rechts in der Knopfleiste */
.nav-kachel .kachel-nav .nav-zahnrad { margin-left: auto; font-weight: 500; color: var(--muted); }
.nav-kachel .kachel-nav .nav-zahnrad span { font-size: 1.05em; }
.nav-kachel .kachel-nav .nav-zahnrad.active { color: inherit; }
@media (max-width: 760px) { .nav-kachel .kachel-nav .nav-zahnrad { margin-left: 0; } }
.vm-einstellungen-weitere { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 0 0 14px; }
.vm-einstellungen-weitere a { display: block; padding: 10px 12px; border: 1px solid var(--line, #d6ddd5); border-radius: 10px; background: var(--paper, #fff); color: inherit; text-decoration: none; }
.vm-einstellungen-weitere a b { display: block; }
.vm-einstellungen-weitere a small { color: var(--muted); }

/* Dashboard Vermietung: offene Arbeit (Nachrichten, Reinigung) */
.vm-offen { margin: 12px 0 4px; }
.vm-offen h5 { margin: 0 0 8px; }
.vm-offen p a { color: inherit; }

.vm-bs-aktionen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.vm-bs-aktionen .secondary-action { padding: 4px 10px; min-height: 30px; font-size: 13px; }

/* Rechnungseingang: Kostenaufteilung und Kostenübersicht (22.09.2026) */
.bhe-aufteilen-zeile { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; line-height: 1.4; }
.bhe-aufteilen-zeile input { width: 18px; min-width: 18px; height: 18px; min-height: 18px; margin-top: 2px; padding: 0; }
.bhe-kosten { margin: 6px 0 10px; }
.bhe-kosten summary { cursor: pointer; font-weight: 600; }
.bhe-kosten tr.bhe-summe td { border-top: 2px solid var(--line, #d6ddd5); font-weight: 700; }

/* Tabellen-Werkzeuge (22.09.2026): max. zwei Zeilen je Zelle, Spalten verschieben/ziehen/ausblenden */
.bhe-tabelle td .bht-zelle { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; max-height: 2.8em; word-break: break-word; }
.bhe-tabelle td .bht-zelle br + small, .bhe-tabelle td .bht-zelle small { display: inline; }
.bhe-tabelle th[data-spalte] { position: relative; cursor: grab; user-select: none; }
.bhe-tabelle th[data-spalte].bht-zieht { opacity: .5; }
.bhe-tabelle th[data-spalte].bht-ziel { box-shadow: inset 3px 0 0 #2e7ba6; }
.bht-griff { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 2; }
.bht-griff:hover { background: rgba(46, 123, 166, .35); }
.bhe-tabelle th[data-spalte] button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.bhe-leiste[data-bht-bereich] { position: relative; justify-content: flex-end; margin: 0 0 6px; }
.bht-menue-knopf { font-size: 13px; padding: 5px 10px; min-height: 32px; }
.bht-menue { position: absolute; right: 0; top: 100%; z-index: 30; background: #fff; border: 1px solid var(--line, #d6ddd5); border-radius: 10px; padding: 10px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12); display: grid; gap: 6px; min-width: 240px; }
.bht-menue b { margin-bottom: 2px; }
.bht-menue label { display: flex; gap: 8px; align-items: center; font-size: 14px; }
.bht-menue label input { width: 16px; height: 16px; min-height: 16px; min-width: 16px; padding: 0; margin: 0; }
.bht-menue .small-note { max-width: 260px; margin: 4px 0; }

/* Buchhaltung › Bank (22.09.2026) */
.bhb-konto { border: 1px solid var(--line, #d6ddd5); border-radius: 12px; padding: 12px 14px; margin: 0 0 10px; background: #fff; }
.bhb-saldo { text-align: right; } .bhb-saldo b { font-size: 20px; display: block; }
.bhb-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bhb-aktionen label { display: flex; gap: 6px; align-items: center; }
.bhb-freigabe { margin: 8px 0; }
.bhb-minus { color: #91352e; } .bhb-plus { color: #245c35; }
.bhb-zuordnen { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.bhb-zuordnen .bhb-vorschlag { padding: 3px 8px; min-height: 28px; font-size: 12px; }
.bhb-zuordnen select { max-width: 260px; font-size: 13px; }
.bhb-breit { grid-column: 1 / -1; }
/* Bank-Umsätze einzeilig mit Klappzeile (22.09.2026) */
.bhb-umsaetze .bhe-tabelle td .bht-zelle { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-height: none; }
.bhb-umsaetze .bhe-tabelle table { min-width: 0; table-layout: fixed; }
.bhb-umsaetze .bhe-tabelle { overflow-x: hidden; }
.bhb-umsaetze .bhe-tabelle td { padding: 7px 9px; vertical-align: middle; }
.bhb-umsaetze .bhe-tabelle th button { padding: 8px 9px; } .bhb-umsaetze .bhe-tabelle th.geld button { padding-right: 16px; }
.bhb-umsaetze .bhe-legende { display: block; line-height: 1.5; }
.bhb-umsaetze .bhe-legende .bhb-punkt { margin: 0 3px 0 6px; }
.bhb-umsaetze .bhe-legende .bhb-punkt:first-child { margin-left: 0; }
.bhb-umsaetze .bhe-tabelle col[data-spalte="status"] { width: 34px; }
.bhb-umsaetze .bhe-tabelle col[data-spalte="buchungstag"] { width: 96px; }
.bhb-umsaetze .bhe-tabelle col[data-spalte="betragCents"] { width: 110px; }
.bhb-umsaetze .bhe-tabelle col[data-spalte="name"] { width: 24%; }
.bhb-umsaetze .bhe-tabelle col[data-spalte="zuordnung"] { width: 22%; }
.bhb-umsaetze .bhe-tabelle th[data-spalte="status"] { cursor: default; }
.bhb-umsaetze .bhe-tabelle td.bhb-status-zelle { text-align: center; padding-left: 4px; padding-right: 4px; }
.bhb-umsaetze .bhe-tabelle tbody tr[data-umsatz] { cursor: pointer; }
.bhb-umsaetze .bhe-tabelle tbody tr[data-umsatz]:hover { background: #f5faf6; }
.bhb-umsaetze .bhe-tabelle tbody tr.gewaehlt td { border-bottom-color: transparent; }
.bhb-punkt { width: 10px; height: 10px; border-radius: 50%; display: inline-block; vertical-align: middle; background: #9aa6a0; }
.bhb-punkt.rot { background: #c2413a; } .bhb-punkt.gruen { background: #38a76d; }
.bhb-zu { color: #245c35; }
.bhb-detail td { background: #f7faf7; padding: 0 !important; box-shadow: inset 3px 0 0 #2d604b; }
.bhb-detail-innen { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px 24px; padding: 12px 16px 14px; white-space: normal; }
.bhb-fakten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; margin: 0; }
.bhb-fakten div { min-width: 0; } .bhb-fakten .bhb-zweck { grid-column: 1 / -1; }
.bhb-fakten dt { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6e8176; margin: 0; }
.bhb-fakten dd { margin: 0; font-size: 14px; word-break: break-word; }
.bhb-detail-zu h5 { margin: 0 0 6px; font-size: 13px; color: #456054; }
.bhb-detail-zu p { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bhb-detail-zu .bhb-zuordnen { flex-direction: column; align-items: stretch; gap: 6px; }
.bhb-detail-zu .bhb-zuordnen select { max-width: none; width: 100%; }
.bhb-klein { padding: 3px 8px; min-height: 28px; font-size: 12px; }
@media (max-width: 900px) { .bhb-detail-innen { grid-template-columns: 1fr; } }
/* Bank kompakt: Konto-Chips, Filterleiste, Zuordnungs-Popup (22.09.2026) */
.panel-headline.bhb-kompakt { margin-bottom: 6px; align-items: center; }
.panel-headline.bhb-kompakt h3 { margin: 0; }
.panel-headline.bhb-kompakt p.muted { margin: 2px 0 0; font-size: 13px; }
.panel-headline.bhb-kompakt .bhe-reiter { margin: 0; }
.bhb-kopf { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; margin: 4px 0 10px; }
.bhb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bhb-chip { border: 1px solid var(--bhe-linie, #d6ddd5); background: #fff; border-radius: 10px; padding: 6px 12px; cursor: pointer; text-align: left; display: grid; gap: 0; font: inherit; color: inherit; min-width: 140px; }
.bhb-chip span { font-size: 12px; color: #6e8176; } .bhb-chip b { font-size: 16px; } .bhb-chip small { font-size: 11px; color: #6e8176; }
.bhb-chip.aktiv { border-color: #2d604b; background: #e8f1eb; box-shadow: inset 0 -3px 0 #2d604b; }
.bhb-kopf-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bhb-kopf-aktionen select { font-size: 13px; }
.bhb-filter input[type="search"] { flex: 1 1 260px; min-width: 200px; font: inherit; padding: 7px 10px; border: 1px solid var(--bhe-linie, #d6ddd5); border-radius: 8px; }
.bhb-notiz-mark { font-style: normal; font-size: 11px; color: #6e8176; margin-left: 2px; }
.bhb-teile { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 3px; }
.bhb-teile li { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; border-bottom: 1px dashed var(--bhe-linie, #d6ddd5); padding-bottom: 2px; }
.bhb-detail-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 0 !important; }
.bhb-zu-stand { margin-bottom: 6px; }
.bhb-dialog { width: min(1000px, calc(100vw - 24px)); max-height: calc(100vh - 32px); }
.bhb-dialog-innen { display: grid; gap: 12px; padding: 0 16px 14px; }
.bhb-dialog-kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0 -16px; padding: 12px 16px; background: #2d604b; color: #fff; }
.bhb-dialog-kopf h3 { margin: 0; font-size: 16px; color: #fff; } .bhb-dialog-kopf h3 small { color: rgba(255,255,255,.75); font-weight: 400; }
.bhb-dialog-kopf .close { background: none; border: 0; color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.bhb-felder { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 12px; }
.bhb-felder label { display: grid; gap: 3px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6e8176; font-weight: 700; min-width: 0; }
.bhb-felder output, .bhb-felder textarea { display: block; font-size: 14px; text-transform: none; letter-spacing: 0; color: var(--text, #2e2a24); font-weight: 400; background: #f7faf7; border: 1px solid var(--bhe-linie, #d6ddd5); border-radius: 6px; padding: 6px 8px; min-height: 32px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bhb-felder output.bhb-mehrzeilig { white-space: normal; overflow: visible; }
.bhb-felder textarea { font: inherit; font-size: 14px; resize: vertical; background: #fff; }
.bhb-felder .bhb-zweck { grid-column: span 3; }
.bhb-vorschlaege { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; }
.bhb-karten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.bhb-karten button { border: 1px solid var(--bhe-linie, #d6ddd5); background: #fff; border-radius: 8px; padding: 8px 10px; cursor: pointer; text-align: center; display: grid; gap: 2px; font: inherit; color: inherit; }
.bhb-karten button b { font-size: 14px; } .bhb-karten button small { font-size: 11px; color: #6e8176; }
.bhb-karten button.aktiv { background: #e08a2b; border-color: #e08a2b; color: #fff; } .bhb-karten button.aktiv small { color: rgba(255,255,255,.85); }
.bhb-karte-inhalt { min-height: 240px; }
.bhb-kat-kopf { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 8px; }
.bhb-kat-kopf input[type="search"] { flex: 1 1 220px; font: inherit; padding: 6px 10px; border: 1px solid var(--bhe-linie, #d6ddd5); border-radius: 8px; }
.bhb-liste { border: 1px solid var(--bhe-linie, #d6ddd5); border-radius: 8px; max-height: 300px; overflow: auto; background: #fff; }
.bhb-liste table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bhb-liste th { position: sticky; top: 0; background: #f6f9f6; text-align: left; font-size: 12px; padding: 7px 9px; border-bottom: 1px solid var(--bhe-linie, #d6ddd5); color: #456054; }
.bhb-liste td { padding: 7px 9px; border-bottom: 1px solid #eef2ee; }
.bhb-liste tbody tr[data-bd-wahl] { cursor: pointer; } .bhb-liste tbody tr[data-bd-wahl]:hover { background: #f5faf6; }
.bhb-liste tbody tr.gewaehlt { background: #e8f1eb; box-shadow: inset 3px 0 0 #2d604b; }
.bhb-liste tbody tr.bhb-passt td:first-child::before { content: '✓ '; color: #38a76d; font-weight: 700; }
.bhb-liste .geld { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.bhb-liste td.bhb-kurz { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bhb-split select { width: 100%; font: inherit; font-size: 13px; }
.bhb-split input { width: 110px; text-align: right; font: inherit; padding: 5px 8px; border: 1px solid var(--bhe-linie, #d6ddd5); border-radius: 6px; }
.bhb-split tfoot td { padding-top: 10px; font-weight: 700; }
.bhb-stand { padding: 12px; background: #f7faf7; border-radius: 8px; }
.bhb-dialog-fuss { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--bhe-linie, #d6ddd5); padding-top: 12px; }
.bhb-fuss-knoepfe { display: flex; gap: 8px; margin-left: auto; }
.bhb-einstellungen h4, .bhb-konten h4 { margin: 14px 0 6px; }
.bhb-einstellungen form.form-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; } .bhb-einstellungen form.form-row label { flex: 1 1 320px; display: grid; gap: 4px; } .bhb-einstellungen form.form-row input { width: 100%; box-sizing: border-box; } .bhb-einstellungen form.form-row button { flex: 0 0 auto; }
/* Buchungsjournal (Phase 3, 22.09.2026) */
.bhj-tabelle table { min-width: 0; font-size: 13px; }
.bhj-tabelle td { padding: 4px 8px; vertical-align: top; }
.bhj-tabelle tr.bhj-erste td { border-top: 1px solid var(--bhe-linie, #d6ddd5); }
.bhj-tabelle tr.bhj-folge td { border-bottom: 0; }
.bhj-tabelle td.bhj-text { max-width: 320px; }
.bhj-tabelle tr.bhj-storniert td { opacity: .55; text-decoration: line-through; }
.bhj-tabelle tr.bhj-storniert td .schlecht { text-decoration: none; }
.bhj-tabelle tr.bhj-fest td:first-child { background: #f7faf7; }
.bhj-kopf input[type="date"] { font: inherit; padding: 5px 8px; border: 1px solid var(--bhe-linie, #d6ddd5); border-radius: 6px; }
.bhj-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.bhj-kacheln .md-kachel { border: 1px solid var(--bhe-linie, #d6ddd5); border-radius: 10px; padding: 10px 12px; background: #fff; display: grid; gap: 2px; }
.bhj-kacheln .md-kachel b { font-size: 20px; } .bhj-kacheln .md-kachel span { font-size: 12px; color: #6e8176; }
.bhj-inhalt h5 { margin: 14px 0 6px; }
.bhj-manuell { margin: 8px 0 12px; }
.bhj-manuell input { font: inherit; padding: 5px 8px; border: 1px solid var(--bhe-linie, #d6ddd5); border-radius: 6px; }
.bhj-hinweises, .bhj-hinweise ul { font-size: 12px; }
tr.bhj-ueberfaellig td { color: #91352e; }
.bhj-balken { position: relative; height: 14px; background: #eef2ee; border-radius: 4px; min-width: 120px; overflow: hidden; }
.bhj-balken i { position: absolute; left: 0; top: 0; height: 7px; background: #38a76d; display: block; } .bhj-balken i.aufwand { top: 7px; background: #c2413a; }
.bhj-doku li { margin: 0 0 6px; }
.zf-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
dialog.zf-login-dialog { border: 0; border-radius: 12px; padding: 20px; max-width: 360px; }
/* Stammdaten Buchhaltung (Phase 2, 22.09.2026) */
.bhs-tabelle table { min-width: 0; }
.bhs-tabelle td { padding: 5px 8px; vertical-align: middle; }
.bhs-tabelle td input:not([type="checkbox"]), .bhs-tabelle td select { width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; padding: 5px 7px; border: 1px solid var(--bhe-linie, #d6ddd5); border-radius: 6px; background: #fff; }
.bhs-tabelle td input.bhs-kurz { width: 70px; }
.bhs-tabelle tr.bhs-neu td { background: #f7faf7; border-top: 2px solid var(--bhe-linie, #d6ddd5); }
.bhs-inhalt .bhe-leiste input[type="search"] { flex: 1 1 220px; font: inherit; padding: 6px 10px; border: 1px solid var(--bhe-linie, #d6ddd5); border-radius: 8px; }
@media (max-width: 900px) { .bhb-felder { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bhb-felder .bhb-zweck { grid-column: 1 / -1; } .bhb-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bhb-umsaetze .bhe-leiste h4 { margin: 0 8px 0 0; }
.bhb-umsaetze .bhe-tabelle td .bht-zelle { max-height: none; -webkit-line-clamp: 3; }
.bhb-einstellungen { margin-bottom: 10px; }
.bhd-zahlen { margin-bottom: 14px; }
.bhb-datei { cursor: pointer; }

/* ===== Fremdtrainer-Kalenderarbeitsplatz (22.09.2026): Wochenraster je Reitort, Termin-Karten, Abschluss-Zeilen, Statuschips ===== */
.ft-kalender { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-top: 10px; }
.ft-kalender-spalte { border: 1px solid var(--line); border-radius: 6px; background: var(--card); min-width: 0; display: grid; grid-template-rows: auto auto 1fr; }
.ft-kalender-spalte.ft-heute { border-color: var(--gold, #b08d3c); box-shadow: inset 0 0 0 1px var(--gold, #b08d3c); }
.ft-kalender-spalte > header { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 8px; border-bottom: 1px solid var(--line); font-size: 12px; }
.ft-kalender-spalte > header small { color: var(--muted); }
.ft-kalender-ganztags { padding: 4px; display: grid; gap: 4px; }
.ft-kalender-raster { display: grid; grid-auto-rows: minmax(22px, auto); gap: 1px; padding: 4px; }
.ft-kalender-slot { border: 0; background: transparent; text-align: left; font: inherit; color: var(--line-strong); font-size: 10.5px; padding: 2px 4px; border-radius: 3px; cursor: pointer; min-height: 22px; }
.ft-kalender-slot:hover, .ft-kalender-slot:focus-visible { background: var(--gold-tint, rgba(176,141,60,.12)); color: var(--text); outline: 1px dashed var(--gold, #b08d3c); }
.ft-kalender-slot.ft-vergangen { opacity: .45; }
.ft-kalender-zelle { display: grid; gap: 2px; align-content: start; }
.ft-kalender-eintrag { border: 0; border-left: 3px solid var(--gold, #b08d3c); background: var(--panel-2); border-radius: 3px; padding: 5px 7px; text-align: left; font: inherit; color: var(--text); display: grid; gap: 1px; cursor: pointer; min-height: 44px; min-width: 0; }
.ft-kalender-eintrag b { font-size: 11.5px; color: var(--gold-soft, #8a6d2a); }
.ft-kalender-eintrag strong { font-size: 12.5px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; }
.ft-kalender-eintrag small { font-size: 11px; color: var(--muted); }
.ft-kalender-eintrag:hover { background: var(--gold-tint, rgba(176,141,60,.12)); }
.ft-kalender-eintrag.ft-geplant { border-left-color: #2a6b96; }
.ft-kalender-eintrag.ft-offen { border-left-color: #b26b00; background: #fff4e3; }
.ft-kalender-eintrag.ft-abgeschlossen { border-left-color: #1f6b3a; background: #e6f1e8; }
.ft-kalender-eintrag.ft-beritt { border-left-color: #7a5c99; }
.ft-kalender-eintrag.ft-fremd { border-left-color: #999; background: #f0efec; color: var(--muted); cursor: default; }
.ft-kalender-eintrag.ft-fremd:hover { background: #f0efec; }
.ft-legende { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--muted); margin: 8px 0 0; }
.ft-legende span { padding-left: 10px; border-left: 3px solid #2a6b96; }
.ft-legende .ft-offen { border-left-color: #b26b00; } .ft-legende .ft-abgeschlossen { border-left-color: #1f6b3a; } .ft-legende .ft-beritt { border-left-color: #7a5c99; } .ft-legende .ft-fremd { border-left-color: #999; }
.ft-orte { margin-bottom: 4px; }
.ft-status-geritten { color: #1f6b3a; } .ft-status-offen { color: #b26b00; } .ft-status-abgesagt { color: #b23b3b; } .ft-status-nicht { color: #7a5c99; }
.ft-abschluss-liste { display: grid; gap: 8px; }
.ft-abschluss-zeile { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, .7fr) auto; gap: 8px; align-items: end; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel-2); min-width: 0; }
.ft-abschluss-zeile select, .ft-abschluss-zeile input { min-width: 0; width: 100%; }
.ft-abschluss-zeile.ft-status-abgesagt { opacity: .7; border-style: dashed; }
.ft-abschluss-zeile.ft-status-nicht { border-color: #7a5c99; }
.ft-abschluss-name { display: grid; gap: 2px; align-self: center; } .ft-abschluss-name small { color: var(--muted); font-size: 11px; }
.ft-abschluss-zeile .field { margin: 0; } .ft-pferd-hinweis { display: block; color: #b26b00; font-size: 11px; min-height: 1em; }
.ft-vorschau { font-size: 14px; }
dialog.ft-dialog { width: min(880px, calc(100vw - 24px)); max-width: calc(100vw - 24px); }
.ft-dialog form, .ft-dialog .field { min-width: 0; }
.ft-firma { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: start; }
.ft-logo { display: grid; gap: 8px; justify-items: center; padding: 10px; border: 1px dashed var(--line); border-radius: 8px; }
.ft-logo img { max-width: 180px; max-height: 120px; object-fit: contain; }
.ft-logo-wahl { cursor: pointer; }
tr.ft-storniert td { color: var(--muted); text-decoration: line-through; }
@media (max-width: 900px) {
  .ft-kalender { grid-template-columns: 1fr; }
  .ft-kalender-spalte:not(.ft-heute) .ft-kalender-raster .ft-kalender-slot.ft-vergangen { display: none; }
  .ft-abschluss-zeile { grid-template-columns: 1fr 1fr; }
  .ft-abschluss-name { grid-column: 1 / -1; }
  .ft-abschluss-zeile > [data-ft-zeile-weg] { grid-column: 1 / -1; justify-self: end; }
  .ft-firma { grid-template-columns: 1fr; }
}
@media (pointer: coarse) {
  .ft-kalender-slot { min-height: 44px; }
  .ft-kalender-eintrag { min-height: 48px; }
  .ft-kalender-eintrag b { display: block; }
}