/*
 * MyCarpoolApp styles — conservative cleanup (Variant A)
 *
 * Existing selectors and HTML contracts are preserved. Shared card geometry
 * is centralized, duplicate/conflicting MyPlan rules are consolidated, and
 * the absence card is aligned with the visual language of the other tabs.
 */

/* * {
  outline: 1px solid red !important;
} */

html,
body {
  padding: 0;
  margin: 0;


/* background-color: #000; */

}

/* Safari paints rubber-band/overscroll areas from the root canvas rather than
 * from the current Ionic page. Keep that web-only canvas aligned with the
 * active theme; native Capacitor surfaces intentionally do not get this class. */
html.web-theme-surface,
html.web-theme-surface body,
html.web-theme-surface body > ion-app {
  background-color: var(--ion-background-color);
}

html.web-theme-surface.dark-theme {
  color-scheme: dark;
}

html.web-theme-surface:not(.dark-theme) {
  color-scheme: light;
}

/* Native WebView controls follow the app preference, not Android's current
 * system appearance. The app theme and Ionic palette are applied to body. */
body.dark-theme {
  color-scheme: dark;
}

body:not(.dark-theme) {
  color-scheme: light;
}

/* Recurring carpool discovery and pre-membership contact. */
.discovery-page {
  max-width: var(--settings-content-max-width, 56rem);
  margin-inline: auto;
}

.discovery-page .settings-section {
  display: grid;
  gap: var(--settings-section-gap, 0.75rem);
}

.discovery-card {
  margin-inline: 0;
}

.discovery-card__schedules {
  display: grid;
  gap: 0.35rem;
  margin-block-end: var(--settings-control-gap, 0.5rem);
}

.discovery-card__schedule {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.5rem;
  color: var(--ion-text-color);
}

.discovery-card__schedule > span:not(:last-child)::after {
  content: "\00b7";
  margin-inline-start: 0.5rem;
  color: var(--ion-color-medium);
}

.discovery-card__schedule-days {
  font-weight: 600;
}

.discovery-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--settings-control-gap, 0.5rem);
}

.discovery-empty-state {
  display: grid;
  justify-items: start;
  gap: var(--settings-control-gap, 0.5rem);
  padding: var(--settings-control-padding, 0.75rem);
  border: 1px solid var(--ion-color-light-shade);
  border-radius: var(--settings-control-radius, 0.75rem);
  background: var(--ion-color-light);
  color: var(--ion-color-light-contrast);
}

.discovery-empty-state > ion-icon {
  color: var(--ion-color-medium);
  font-size: 1.5rem;
}

.discovery-empty-state h2,
.discovery-empty-state p {
  margin: 0;
}

.discovery-empty-state h2 {
  font-size: 1rem;
}

.discovery-empty-state__saved {
  font-weight: 600;
}

.discovery-empty-state__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--settings-control-gap, 0.5rem);
  margin-block-start: var(--settings-control-gap, 0.5rem);
  width: min(100%, 38rem);
}

.discovery-empty-state__actions > div {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 0.15rem;
}

.discovery-empty-state__actions small {
  color: var(--ion-color-medium);
}

@media (max-width: 32rem) {
  .discovery-empty-state__actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

.discovery-thread {
  display: grid;
  gap: 0.5rem;
  margin-block-end: 0.75rem;
}

.discovery-message {
  max-width: min(36rem, 90%);
  padding: 0.625rem 0.75rem;
  border-radius: 0.75rem;
  background: var(--ion-color-light);
  color: var(--ion-color-light-contrast);
  overflow-wrap: anywhere;
}

.discovery-message--mine {
  justify-self: end;
  background: var(--ion-color-primary-tint);
  color: var(--ion-color-primary-contrast);
}

.discovery-message small {
  display: block;
  margin-block-start: 0.25rem;
  opacity: 0.72;
}

.discovery-event {
  display: flex;
  align-items: flex-start;
  justify-self: center;
  gap: 0.4rem;
  max-width: min(38rem, 100%);
  padding: 0.35rem 0.6rem;
  color: var(--ion-color-medium-shade);
  font-size: 0.875rem;
  text-align: center;
}

.discovery-event ion-icon {
  flex: 0 0 auto;
  margin-block-start: 0.1rem;
  color: var(--ion-color-medium);
}

.discovery-event small {
  display: block;
  margin-block-start: 0.1rem;
  color: var(--ion-color-medium);
  font-size: 0.75rem;
}

.discovery-contact-status {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding-inline: 0.55rem;
  border-radius: 999px;
  background: var(--ion-color-light);
  color: var(--ion-color-medium-shade);
  font-weight: 600;
}

.discovery-contact-card--action-required .discovery-contact-status {
  background: color-mix(in srgb, var(--ion-color-warning) 18%, var(--ion-item-background));
  color: var(--ion-color-warning-shade);
}

.discovery-contact-card--completed {
  opacity: 0.68;
  filter: saturate(0.45);
}

.discovery-contact-card--completed .discovery-contact-status {
  background: var(--ion-color-step-150, var(--ion-color-light));
}

@media (max-width: 32rem) {
  .discovery-card__actions ion-button {
    max-width: 100%;
  }
}

.discovery-location__value {
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  padding: var(--settings-control-padding, 0.75rem);
  border: 1px solid var(--ion-color-medium-tint);
  border-radius: var(--settings-control-radius, 0.75rem);
  background: var(--ion-item-background, var(--ion-background-color));
  overflow-wrap: anywhere;
}

.discovery-location--invalid .discovery-location__value,
.discovery-schedules--invalid {
  border-color: var(--ion-color-danger);
}

.discovery-location--invalid .discovery-location__value {
  box-shadow: 0 0 0 1px var(--ion-color-danger);
}

.discovery-schedules--invalid {
  border: 1px solid var(--ion-color-danger);
  border-radius: var(--settings-control-radius, 0.75rem);
  padding: var(--settings-control-padding, 0.75rem);
}

.discovery-location .settings-field-error,
.discovery-schedules--invalid .settings-field-error {
  margin-block-start: var(--settings-control-gap, 0.5rem);
}

.discovery-location__actions,
.discovery-location__suggestions > div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--settings-control-gap, 0.5rem);
}

.discovery-location__suggestions {
  display: grid;
  gap: 0.35rem;
}

.discovery-search-options {
  padding-block: 0.5rem;
}

.discovery-match-card ion-card-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 0.75rem;
}

.discovery-match-card ion-card-title {
  grid-column: 1 / -1;
}

.discovery-match-card__members {
  color: var(--ion-color-medium);
  font-size: 0.875rem;
  white-space: nowrap;
}

.discovery-match-card__coverage {
  font-weight: 600;
}

.discovery-match-card__rides,
.discovery-ride-details {
  display: grid;
  gap: 0.5rem;
}

.discovery-ride-row,
.discovery-match-card__distance,
.discovery-ride-detail__heading,
.discovery-ride-detail dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.discovery-ride-row > :last-child,
.discovery-match-card__distance {
  color: var(--ion-color-medium);
}

.discovery-match-card__distance {
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-block: 0.75rem;
}

.discovery-ride-detail {
  padding: 0.75rem;
  border: 1px solid var(--ion-color-light-shade);
  border-radius: var(--settings-control-radius, 0.75rem);
  background: var(--ion-color-light);
  color: var(--ion-color-light-contrast);
}

.discovery-ride-detail dl {
  display: grid;
  gap: 0.3rem;
  margin-block-end: 0;
}

.discovery-ride-detail dt {
  color: var(--ion-color-medium);
}

.discovery-ride-detail dd {
  margin: 0;
  text-align: end;
}

@media (max-width: 32rem) {
  .discovery-location__actions ion-button {
    margin-inline: 0;
  }

  .discovery-match-card ion-card-header {
    grid-template-columns: minmax(0, 1fr);
  }

  .discovery-match-card__members,
  .discovery-match-card ion-card-title {
    grid-column: 1;
  }

  .discovery-ride-row,
  .discovery-ride-detail dl > div {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.15rem;
  }

  .discovery-ride-detail dd {
    text-align: start;
  }
}


.login-page {
  --background: linear-gradient(180deg, #f7fbff 0%, #eef6f8 100%);
}

.login-wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  max-width: 460px;
  margin: 0 auto;
}

.login-brand {
  text-align: center;
  margin-bottom: 20px;
}

.login-logo-img {
  width: 120px;
  /* height: 120px; */
  margin: 0px auto 30px auto;
  background-color: var(--ion-color-primary);
  mask: url('./mcp_icon_only_20260518a-DZ3ZE5vH.svg') center / contain no-repeat;
  -webkit-mask: url('./mcp_icon_only_20260518a-DZ3ZE5vH.svg') center / contain no-repeat;
}
/* background-color: var(--ion-color-primary);
  mask: url('/img/mcp_icon_only_20260518a.svg') center / contain no-repeat;
  -webkit-mask: url('/img/mcp_icon_only_20260518a.svg') center / contain no-repeat; */


.login-logo-font {
  width: 180px;
  height: 50px;
  margin: 0px auto 30px auto;
  /* fill: var(--ion-color-primary); */
  /* fill: #3880ff; */
  /* color: var(--ion-color-primary); */
  /* filter: invert(44%) sepia(91%) saturate(2971%) hue-rotate(210deg) brightness(101%) contrast(101%); */
  background-color: var(--ion-color-primary);
  mask: url('./mcp_font_logo-yX42YOLc.svg') center / contain no-repeat;
  -webkit-mask: url('./mcp_font_logo-yX42YOLc.svg') center / contain no-repeat;
}


.login-logo {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  margin: 0 auto 12px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ion-color-primary);
  color: white;
  font-size: 30px;
  font-weight: 700;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

.hiddenElement{
  display: none;
}

/* Wenn der Bildschirm 779px oder flacher ist, wird das Logo unsichtbar */
@media (max-height: 779px) {
  .login-logo-img {
    display: none !important;
  }
}

.login-brand h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
}

.login-brand p {
  margin: 6px 0 0 0;
  color: var(--ion-color-medium);
  font-size: 15px;
}

.login-card {
  border-radius: 24px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.10);
}

.login-item {
  margin-top: 18px;
  --border-radius: 14px;
}

.login-help {
  display: block;
  margin: 6px 16px 0 16px;
  font-size: 13px;
  line-height: 1.35;
}

.login-button {
  margin-top: 24px;
  height: 48px;
  font-weight: 600;
}

.login-links {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.welcome-page {
  --background:
    linear-gradient(
      180deg,
      #f7fbff 0%,
      #eef6f8 100%
    );
}

.welcome-wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding:
    32px 24px 180px 24px;
  max-width: 520px;
  margin: 0 auto;
}

.welcome-language {
  position: absolute;
  top: 10px;
  right: 10px;
}

.welcome-brand {
  margin-top: 60px;
  text-align: center;
}

.welcome-logo {
  width: 84px;
  height: 84px;
  border-radius: 28px;
  margin: 0 auto 18px auto;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    var(--ion-color-primary);

  color: white;

  font-size: 42px;
  font-weight: 700;

  box-shadow:
    0 16px 40px rgba(0,0,0,.14);
}

.welcome-brand h1 {
  margin: 0;
  font-size: 34px;
  font-weight: 700;
}

.welcome-headline {
  margin-top: 14px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.3;
}

.welcome-subheadline {
  margin-top: 12px;
  color: var(--ion-color-medium);
  line-height: 1.5;
  font-size: 16px;
}

.welcome-actions {
  margin-top: 22px;
}

.welcome-actions ion-button {
  margin-top: 14px;
  height: 50px;
  font-weight: 600;
}

.privacy-box {
  max-width: 800px;
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: 14px;

  border-radius: 22px;

  background: rgba(255,255,255,.92);

  backdrop-filter: blur(12px);

  padding: 18px;

  box-shadow:
    0 10px 28px rgba(0,0,0,.10);
}

.privacy-text p {
  margin-bottom: 0;
  color: var(--ion-color-medium);
  line-height: 1.45;
  font-size: 14px;
}

.privacy-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.intro-page {
  --background: linear-gradient(180deg, #f7fbff 0%, #eef6f8 100%);
}

.intro-wrapper {
  min-height: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 18px 24px 32px 24px;

  display: flex;
  flex-direction: column;
}

.intro-top {
  display: flex;
  justify-content: flex-end;
}

.intro-visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

.intro-phone {
  width: 230px;
  height: 390px;
  border-radius: 34px;
  background: white;
  box-shadow: 0 22px 50px rgba(0,0,0,.14);
  padding: 22px;
  position: relative;
}

.intro-phone-header {
  width: 72px;
  height: 8px;
  border-radius: 99px;
  background: #d9e2e8;
  margin: 0 auto 28px auto;
}

.intro-demo-card {
  border-radius: 22px;
  padding: 18px;
  background: rgba(var(--ion-color-primary-rgb), .10);
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 22px;
}

.intro-demo-card ion-icon {
  font-size: 34px;
  color: var(--ion-color-primary);
}

.intro-demo-lines {
  flex: 1;
}

.intro-demo-lines span {
  display: block;
  height: 9px;
  border-radius: 99px;
  background: #c7d6df;
  margin-bottom: 8px;
}

.intro-demo-lines span:nth-child(2) {
  width: 80%;
}

.intro-demo-lines span:nth-child(3) {
  width: 55%;
}

.intro-mini-row {
  height: 42px;
  border-radius: 16px;
  background: #f0f4f7;
  margin-top: 12px;
}

.intro-mini-row.active {
  background: rgba(var(--ion-color-primary-rgb), .16);
}

.intro-mini-row.short {
  width: 70%;
}

.intro-copy {
  text-align: center;
}

.intro-copy h1 {
  font-size: 26px;
  line-height: 1.25;
  margin: 0;
  font-weight: 700;
}

.intro-copy p {
  margin: 14px 0 0 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ion-color-medium);
}

.intro-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}

.intro-dots span {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  background: #cbd6dd;
}

.intro-dots span.active {
  width: 22px;
  background: var(--ion-color-primary);
}

.intro-actions {
  margin-top: 28px;
}

.intro-actions ion-button {
  height: 50px;
  font-weight: 600;
}

.page-status-bar {
  position: sticky;
  top: 0;
  z-index: 20;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 8px 12px;

  font-size: 14px;
  line-height: 1.3;

  background: rgba(var(--ion-color-warning-rgb), 0.16);
  color: var(--ion-color-dark);

  border-bottom: 1px solid rgba(var(--ion-color-warning-rgb), 0.35);
}

.page-status-bar.hidden {
  display: none;
}

.page-status-bar ion-icon {
  flex: 0 0 auto;
  font-size: 20px;
}

.page-status-bar span {
  flex: 1;
}

.page-status-bar ion-button {
  margin: 0;
  height: 28px;
  --padding-start: 8px;
  --padding-end: 8px;
}

.trip-range-control {
  /* display: flex; */
  justify-content: center;
  padding: 8px 0;
}

.trip-range-control-top {
  padding-top: 4px;
  padding-bottom: 10px;
}

.trip-range-control-bottom {
  padding-top: 14px;
  padding-bottom: 18px;
}

.trip-range-button {
  --border-radius: 999px;
  --padding-start: 14px;
  --padding-end: 16px;

  min-height: 36px;
  font-size: 14px;
  font-weight: 500;

  color: var(--ion-color-medium);
}

.trip-range-button ion-icon {
  font-size: 18px;
}

.trip-range-line{
  width: 100%;
  display: block;
  text-align: center;
}



@media (min-width: 799px) {
  .page-narrow{
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
  }
}

.copyrightInMenu{
  color: var(--ion-color-medium);
  font-size: smaller;
  text-align: center;
  padding: 10px;
}

.oss-licenses {
  display: grid;
  gap: var(--app-settings-section-gap, 24px);
  color: var(--ion-text-color);
}

.oss-licenses__intro,
.oss-license-section__hint,
.oss-licenses__server-note {
  margin: 0;
  color: var(--ion-color-medium);
  line-height: 1.5;
}

.oss-license-section {
  display: grid;
  gap: 10px;
}

.oss-license-section h2 {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
}

.oss-license-list {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ion-text-color) 14%, transparent);
  border-radius: var(--app-card-radius, 14px);
  background: var(--ion-item-background, var(--ion-background-color));
}

.oss-license-entry + .oss-license-entry {
  border-top: 1px solid color-mix(in srgb, var(--ion-text-color) 10%, transparent);
}

.oss-license-entry > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
}

.oss-license-entry > summary::-webkit-details-marker {
  display: none;
}

.oss-license-entry__identity {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}

.oss-license-entry__identity strong {
  overflow-wrap: anywhere;
}

.oss-license-entry__version,
.oss-license-entry__meta {
  color: var(--ion-color-medium);
  font-size: 0.82rem;
}

.oss-license-entry__badge {
  flex: 0 0 auto;
  max-width: 42%;
  padding: 3px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ion-color-primary) 10%, transparent);
  color: var(--ion-color-primary-shade, var(--ion-color-primary));
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
}

.oss-license-entry__details {
  display: grid;
  gap: 10px;
  padding: 0 14px 14px;
}

.oss-license-entry__details p {
  margin: 0;
  line-height: 1.45;
}

.oss-license-entry__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.oss-license-entry__links a {
  color: var(--ion-color-primary);
}

.oss-license-text > summary {
  color: var(--ion-color-primary);
  cursor: pointer;
  font-weight: 600;
}

.oss-license-text pre {
  max-height: 45vh;
  margin: 10px 0 0;
  padding: 12px;
  overflow: auto;
  border-radius: 10px;
  background: color-mix(in srgb, var(--ion-text-color) 6%, var(--ion-background-color));
  color: var(--ion-text-color);
  font: 0.78rem/1.45 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.oss-license-entry__review,
.oss-license-error {
  color: var(--ion-color-warning-shade, var(--ion-color-warning));
}

@media (max-width: 420px) {
  .oss-license-entry > summary {
    align-items: flex-start;
  }

  .oss-license-entry__badge {
    max-width: 46%;
  }
}

#globalSpinner {
  position: fixed;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 9999;

  display: none;

  width: 32px;
  height: 32px;
}

/* Standard: Mobile (fullscreen) */
.responsive-modal {
  --width: 100%;
  --height: 100%;
  --border-radius: 0;
}

/* Größere Screens */
@media (min-width: 768px) {
  .responsive-modal {
    --width: 600px;
    --max-height: 90%;
    /* --height: auto; */
    --border-radius: 12px;
    margin: auto;
  }
}

@media (min-width: 768px) {
  /* .responsive-modal::part(content) {
    margin: auto;
  } */
}

.split-pane-main ion-page {
  height: 100%
}

/* Farben  */

:root {


  /* -----------------------------------------
   * Theme palettes
   * ----------------------------------------- */

  /* Hell */
  --theme-light-primary: #5c7cfa;
  --theme-light-secondary: #868e96;
  --theme-light-tertiary: #dee2e6;
  --theme-light-background: #f8f9fa;
  --theme-light-surface: #ffffff;
  --theme-light-text: #212529;
  --theme-light-border: #e9ecef;
  --theme-light-financial-positive: #2f7655;
  --theme-light-financial-negative: #ad5362;
  --theme-light-financial-neutral: #6b7280;

  /* Dunkel */
  --theme-dark-primary: #748ffc;
  --theme-dark-secondary: #adb5bd;
  --theme-dark-tertiary: #343a40;
  --theme-dark-background: #121212;
  --theme-dark-surface: #1e1e1e;
  --theme-dark-text: #e9ecef;
  --theme-dark-border: #2c2c2c;
  --theme-dark-financial-positive: #78c69b;
  --theme-dark-financial-negative: #f0a0ad;
  --theme-dark-financial-neutral: #adb5bd;

  /* Aquarell */
  --theme-aquarell-primary: #7fb3d5;
  --theme-aquarell-secondary: #f7cac9;
  --theme-aquarell-tertiary: #c7ceea;
  --theme-aquarell-background: #f9fbfc;
  --theme-aquarell-surface: #ffffff;
  --theme-aquarell-text: #2f3e46;
  --theme-aquarell-border: #e3e8ee;
  --theme-aquarell-financial-positive: #35745d;
  --theme-aquarell-financial-negative: #a55668;
  --theme-aquarell-financial-neutral: #637381;

  /* Ruhig / Nature */
  --theme-nature-primary: #66a182;
  --theme-nature-secondary: #a3b18a;
  --theme-nature-tertiary: #dad7cd;
  --theme-nature-background: #f6f7f5;
  --theme-nature-surface: #ffffff;
  --theme-nature-text: #2b2d2f;
  --theme-nature-border: #e5e7eb;
  --theme-nature-financial-positive: #3f765a;
  --theme-nature-financial-negative: #a55a60;
  --theme-nature-financial-neutral: #667064;

    --ion-color-primary: var(--theme-light-primary);
  --ion-color-primary-rgb: 92, 124, 250;
  --ion-color-primary-contrast: #ffffff;

  --ion-color-secondary: var(--theme-light-secondary);
  --ion-color-tertiary: var(--theme-light-tertiary);

  --ion-background-color: var(--theme-light-background);
  --ion-text-color: var(--theme-light-text);

  --ion-card-background: var(--theme-light-surface);
  --ion-border-color: var(--theme-light-border);

  /* Finanzielle Werte: bewusst getrennt von der Interaktionsfarbe Primary. */
  --financial-positive-color: var(--theme-light-financial-positive);
  --financial-negative-color: var(--theme-light-financial-negative);
  --financial-neutral-color: var(--theme-light-financial-neutral);

  --chat-me-bg: #e8efff;
  --chat-me-color: var(--ion-text-color);

  --chat-other-bg: var(--theme-light-surface);
  --chat-other-color: var(--ion-text-color);

  --chat-border: var(--ion-border-color);

  /* Leichte, theme-aware Akzentflächen für Reaktionen. */
  --chat-reaction-accent: var(--ion-color-primary);
  --chat-reaction-background:
    color-mix(in srgb, var(--chat-reaction-accent) 6%, var(--ion-card-background));
  --chat-reaction-border:
    color-mix(in srgb, var(--chat-reaction-accent) 24%, var(--ion-border-color));
  --chat-reaction-color:
    color-mix(in srgb, var(--ion-text-color) 90%, var(--chat-reaction-accent));
  --chat-reaction-count-color: var(--ion-text-color);
  --chat-reaction-active-background:
    color-mix(in srgb, var(--chat-reaction-accent) 13%, var(--ion-card-background));
  --chat-reaction-active-border:
    color-mix(in srgb, var(--chat-reaction-accent) 44%, var(--ion-border-color));
  --chat-reaction-active-color:
    color-mix(in srgb, var(--ion-text-color) 78%, var(--chat-reaction-accent));
  --chat-reaction-active-count-color: var(--ion-text-color);

  --ride-selected-background:
    color-mix(
      in srgb,
      var(--ion-color-primary) 22%,
      transparent
    );

  --ride-selected-color: var(--ion-text-color);

  --ride-selected-border:
    color-mix(
      in srgb,
      var(--ion-color-primary) 55%,
      transparent
    );

  --rq-action-background: #eeeeee;
  --rq-action-color: #666666;

}

/* Ionic adds --ion-safe-area-top to every first header toolbar. On Android
 * devices where the Activity has already placed the WebView below the status
 * bar/cutout, applying the WebView env() value again creates a double inset.
 * MainActivity sets this semantic flag from the actual native geometry; an
 * edge-to-edge WebView keeps Ionic's ordinary safe-area value. */
html[data-native-top-inset-consumed="true"] {
  --ion-safe-area-top: 0px;
}

/* Resolve state colors at each theme boundary, not at the light-themed root.
 * Ionic solid buttons/FABs use tint on hover and shade on press/focus. */
:root,
.dark-theme,
.aquarell-theme,
.nature-theme {
  --ion-color-primary-shade: color-mix(in srgb, var(--ion-color-primary) 88%, black);
  --ion-color-primary-tint: color-mix(in srgb, var(--ion-color-primary) 90%, white);
}

.dark-theme {
  --ion-color-primary: var(--theme-dark-primary);
  --ion-color-primary-contrast: #ffffff;

  --ion-background-color: var(--theme-dark-background);
  --ion-text-color: var(--theme-dark-text);

  --ion-color-secondary: var(--theme-dark-secondary);
  --ion-color-tertiary: var(--theme-dark-tertiary);

  --ion-card-background: var(--theme-dark-surface);
  --ion-border-color: var(--theme-dark-border);

  --financial-positive-color: var(--theme-dark-financial-positive);
  --financial-negative-color: var(--theme-dark-financial-negative);
  --financial-neutral-color: var(--theme-dark-financial-neutral);

  --ion-toolbar-background: var(--theme-dark-surface);
  --ion-toolbar-color: var(--theme-dark-text);

  --ion-tab-bar-background: var(--theme-dark-surface);
  --ion-tab-bar-color: var(--theme-dark-secondary);
  --ion-tab-bar-color-selected: var(--ion-color-primary);

  --ion-item-background: var(--theme-dark-surface);
  --ion-item-color: var(--theme-dark-text);

  --ion-color-step-50: #1e1e1e;
  --ion-color-step-100: #2c2c2c;
  --ion-background-color-step-50: #1e1e1e;
  --ion-color-step-150: #343a40;
  --ion-color-step-850: #d0d0d0;
  --ion-color-step-900: #e9ecef;
  --ion-text-color-step-150: #d0d0d0;

  --ion-background-color-rgb: 18, 18, 18;
  --ion-text-color-rgb: 233, 236, 239;
  --ion-color-primary-rgb: 116, 143, 252;

  --chat-me-bg: #2f427d;
  --chat-me-color: #ffffff;

  --chat-other-bg: #25282d;
  --chat-other-color: var(--ion-text-color);

  --chat-border: #3b4148;

  --chat-reaction-background:
    color-mix(in srgb, var(--chat-reaction-accent) 12%, var(--ion-card-background));
  --chat-reaction-border:
    color-mix(in srgb, var(--chat-reaction-accent) 30%, var(--ion-border-color));
  --chat-reaction-active-background:
    color-mix(in srgb, var(--chat-reaction-accent) 20%, var(--ion-card-background));
  --chat-reaction-active-border:
    color-mix(in srgb, var(--chat-reaction-accent) 52%, var(--ion-border-color));

  --ride-selected-background:
    color-mix(
      in srgb,
      var(--ion-color-primary) 65%,
      #222
    );

  --ride-selected-color: #ffffff;

  --ride-selected-border:
    color-mix(
      in srgb,
      var(--ion-color-primary) 70%,
      transparent
    );

  --rq-action-background:
    color-mix(
      in srgb,
      var(--ion-item-background) 80%,
      var(--ion-text-color)
    );

  --rq-action-color:
    color-mix(
      in srgb,
      var(--ion-text-color) 85%,
      transparent
    );

  --app-surface-background:
    var(
      --ion-card-background,
      var(--ion-item-background)
    );

  --app-surface-border:
    color-mix(
      in srgb,
      var(--ion-text-color) 10%,
      transparent
    );

  --plan-card-background: var(--app-surface-background);
  --plan-card-border: var(--app-surface-border);

  --app-surface-shadow:
    0 2px 4px rgb(0 0 0 / 18%),
    0 8px 22px rgb(0 0 0 / 24%);
}

.dark-theme .split-pane-main ion-content::part(background) {
  background-position: center;
  background-size: cover;
	/* background-image: linear-gradient( 86.3deg,  rgba(0,1,1,0.7) 3.6%, rgba(3,3,3,0.7) 87.6% ), url('/img/background_theme_dark_01.jpg'); */
	background-image: linear-gradient( 86.3deg,  rgba(0,0,0,0.8) 3.6%, rgba(0,0,0,0.8) 87.6% ), url('./background_theme_dark_01-B9OWYpd_.jpg');
}
.dark-theme .split-pane-main ion-page {
  height: 100%
}

/* .dark-theme .rq-active{ */
/* background:#38c!important; 
	border-color: #38c; */
.rq-active{
  background: var(--ride-selected-background)!important;
  color: var(--ride-selected-color)!important;
  border-color: var(--ride-selected-border);
}
.dark-theme .rq-active:hover{
	color:white; 
	background:#56b1fb!important; 
	border-color: #56b1fb;
}


.aquarell-theme {
  --ion-color-primary: var(--theme-aquarell-primary);
  --ion-color-primary-rgb: 127, 179, 213;
  --ion-color-primary-contrast: #ffffff;

  --ion-color-secondary: var(--theme-aquarell-secondary);
  --ion-color-tertiary: var(--theme-aquarell-tertiary);

  --ion-background-color: var(--theme-aquarell-background);
  --ion-text-color: var(--theme-aquarell-text);

  --ion-card-background: var(--theme-aquarell-surface);
  --ion-border-color: var(--theme-aquarell-border);

  --financial-positive-color: var(--theme-aquarell-financial-positive);
  --financial-negative-color: var(--theme-aquarell-financial-negative);
  --financial-neutral-color: var(--theme-aquarell-financial-neutral);

  --chat-me-bg: #dceef8;
  --chat-other-bg: var(--theme-aquarell-surface);

  --chat-me-color: var(--theme-aquarell-text);
  --chat-other-color: var(--theme-aquarell-text);

  --rq-action-background: #edf3f7;

  --ride-selected-background:
    color-mix(
      in srgb,
      var(--ion-color-primary) 55%,
      white
    );

  --ride-selected-color: #244b63;
}

/* .dark-theme .split-pane-main ion-content::part(background) {
	background-image: linear-gradient( 86.3deg,  rgba(0,0,0,0.8) 3.6%, rgba(0,0,0,0.8) 87.6% ), url('/img/background_theme_dark_01.jpg');
} */

.aquarell-theme .split-pane-main ion-content::part(background) {
   /* --background: #cccccc url('/img/background_theme_aquarell_bright_01.jpg') no-repeat; */
background: #cccccc
    url('./background_theme_aquarell_bright_01-Dg5X17XS.jpg')
    center / cover
    no-repeat;
}
.aquarell-theme .split-pane-main ion-page {
  height: 100%
}

.nature-theme {
  --ion-color-primary: var(--theme-nature-primary);
  --ion-color-primary-rgb: 102, 161, 130;
  --ion-color-primary-contrast: #ffffff;

  --ion-color-secondary: var(--theme-nature-secondary);
  --ion-color-tertiary: var(--theme-nature-tertiary);

  --ion-background-color: var(--theme-nature-background);
  --ion-text-color: var(--theme-nature-text);

  --ion-card-background: var(--theme-nature-surface);
  --ion-border-color: var(--theme-nature-border);

  --financial-positive-color: var(--theme-nature-financial-positive);
  --financial-negative-color: var(--theme-nature-financial-negative);
  --financial-neutral-color: var(--theme-nature-financial-neutral);

  --chat-me-bg: #dfeee6;
  --chat-me-color: var(--ion-text-color);

  --chat-other-bg: var(--theme-nature-surface);
  --chat-other-color: var(--ion-text-color);

  --chat-border: var(--ion-border-color);

  --rq-action-background: #eef2ed;

  --ride-selected-background:
    color-mix(
      in srgb,
      var(--ion-color-primary) 48%,
      white
    );

  --ride-selected-color: #244c36;

  --absence-color:
    color-mix(
      in srgb,
      var(--ion-color-primary) 78%,
      var(--ion-text-color)
    );

  --absence-background:
    color-mix(
      in srgb,
      var(--ion-color-primary) 7%,
      var(--app-surface-background)
    );

  --absence-background-hover:
    color-mix(
      in srgb,
      var(--ion-color-primary) 10%,
      var(--app-surface-background)
    );

  --absence-border:
    color-mix(
      in srgb,
      var(--ion-color-primary) 16%,
      transparent
    );

  --absence-icon-background:
    color-mix(
      in srgb,
      var(--ion-color-primary) 12%,
      transparent
    );
}

.aquarell-theme,
.nature-theme {
  --app-surface-background: var(
    --ion-card-background,
    var(--ion-item-background)
  );

  --app-surface-border:
    color-mix(
      in srgb,
      var(--ion-text-color) 8%,
      transparent
    );

  --plan-card-background: var(--app-surface-background);
  --plan-card-border: var(--app-surface-border);
}

body {
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Show filled icons for tabbar buttons */
.active-icon { display: none; } 
ion-tab-button.tab-selected .active-icon { display: inline-block; } 
ion-tab-button.tab-selected .inactive-icon { display: none; }

ion-card, ion-button {
  border-radius: 14px;
}

.login-links {
  margin-top: 16px;
  text-align: center;
}

.login-secondary-text {
  color: var(--ion-color-medium);
  font-size: 0.9rem;
  margin-bottom: 4px;
}

.login-links a {
  text-decoration: none;
  font-weight: 500;
}

.login-language-selector{
  margin-top: 24px;
}
.login-rememberme{
  margin-top: 12px;
}

/* Vergangene Fahrten (Past trips) */

/* ============================================================
   FAHRTENARCHIV / GEMACHTE FAHRTEN
   ============================================================ */

.pasttrips-page {
  width: 100%;
  min-width: 0;
}


/* ============================================================
   Status / Loading / Empty State
   ============================================================ */

.pasttrips-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 12px;
  min-height: 140px;
  padding: 32px 20px;

  color: var(--ion-color-medium);
  text-align: center;
}

.pasttrips-message[hidden] {
  display: none;
}

.pasttrips-message ion-spinner {
  width: 24px;
  height: 24px;
}


/* ============================================================
   LISTENANSICHT
   ============================================================ */

.pasttrips-list {
  background: transparent;
}

.pasttrip-list-item {
  --padding-start: 16px;
  --inner-padding-end: 10px;
}

.pasttrip-list-item.pasttrip--last-edited {
  --background: color-mix(
    in srgb,
    var(--ion-color-primary) 10%,
    var(--ion-background-color)
  );
}

.pasttrip-list-item.pasttrip--just-inserted {
  --background: color-mix(
    in srgb,
    var(--ion-color-primary) 16%,
    var(--ion-background-color)
  );
}

.pasttrip-row {
  width: 100%;
  min-width: 0;

  display: grid;

  grid-template-columns:
    170px
    minmax(150px, 210px)
    minmax(220px, 1fr);

  column-gap: 20px;
  row-gap: 6px;

  align-items: center;

  padding-block: 11px;
}


/* ------------------------------------------------------------
   Datum
   ------------------------------------------------------------ */

.pasttrip-date {
  min-width: 0;
}

.pasttrip-weekday,
.pasttrip-calendar-date,
.pasttrip-time {
  display: block;
}

.pasttrip-weekday {
  font-weight: 600;
}

.pasttrip-calendar-date {
  margin-top: 1px;
}

.pasttrip-time {
  margin-top: 2px;

  color: var(--ion-color-medium);

  font-size: 0.92em;
}


/* ------------------------------------------------------------
   Fahrer / Teilnehmer
   ------------------------------------------------------------ */

.pasttrip-driver,
.pasttrip-passengers {
  display: flex;

  align-items: center;

  gap: 9px;

  min-width: 0;
}

.pasttrip-driver > ion-icon,
.pasttrip-passengers > ion-icon {
  flex: 0 0 auto;

  font-size: 21px;

  color: var(--ion-color-medium);
}

.pasttrip-driver-name {
  min-width: 0;

  font-weight: 500;

  overflow-wrap: anywhere;
}

.pasttrip-passenger-names {
  min-width: 0;

  white-space: normal;

  overflow-wrap: anywhere;
}


/* ------------------------------------------------------------
   Kommentarindikator in Liste
   ------------------------------------------------------------ */

.pasttrip-comment-button {
  display: inline-grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  flex: 0 0 auto;
  margin-inline-start: 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ion-color-primary);
  cursor: pointer;
}

.pasttrip-comment-button ion-icon {
  font-size: 18px;
}

.pasttrip-comment-button:focus-visible {
  outline: 2px solid var(--ion-color-primary);
  outline-offset: 2px;
}

.pasttrip-comments-list {
  display: grid;
  gap: var(--settings-section-gap, 1rem);
}

.pasttrip-comment-entry {
  padding: 0.75rem;
  border-radius: 0.75rem;
  background: var(--ion-color-light);
}

.pasttrip-comment-entry__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  color: var(--ion-color-medium-shade);
  font-size: 0.8rem;
}

.pasttrip-comment-entry p {
  margin: 0.5rem 0 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}


/* ============================================================
   LISTE – schmal
   ============================================================ */

@media (max-width: 700px) {

  .pasttrip-row {

    grid-template-columns:
      112px
      minmax(0, 1fr);

    grid-template-areas:
      "date driver"
      "date passengers";

    column-gap: 12px;
    row-gap: 7px;

    align-items: start;

    padding-block: 9px;
  }

  .pasttrip-date {
    grid-area: date;
  }

  .pasttrip-driver {
    grid-area: driver;
  }

  .pasttrip-passengers {
    grid-area: passengers;
  }
}


@media (max-width: 380px) {

  .pasttrip-row {

    grid-template-columns:
      98px
      minmax(0, 1fr);

    column-gap: 9px;
  }

  .pasttrip-list-item {
    --padding-start: 10px;
    --inner-padding-end: 6px;
  }
}


/* ============================================================
   TABELLENANSICHT
   ============================================================ */

.pasttrips-table-view {
  width: 100%;
  min-width: 0;
}

.pasttrips-table-wrapper {
  width: 100%;

  overflow-x: auto;

  border:
    1px solid
    var(--ion-border-color);

  border-radius: 10px;

  background:
    var(
      --ion-card-background,
      var(--ion-background-color)
    );
}


/* ------------------------------------------------------------
   Tabelle
   ------------------------------------------------------------ */

.pasttrips-table {
  width: 100%;

  border-collapse: collapse;

  font-size: 0.95rem;
}

.pasttrips-table th,
.pasttrips-table td {
  padding: 12px 14px;

  text-align: left;

  vertical-align: middle;

  border-bottom:
    1px solid
    var(--ion-border-color);
}

.pasttrips-table tbody tr:last-child td {
  border-bottom: none;
}


/* ============================================================
   Tabellenkopf
   ============================================================ */

.pasttrips-table th {
  position: relative;

  background:
    var(
      --ion-card-background,
      var(--ion-background-color)
    );

  font-weight: 600;
}

.pasttrips-header-button {
  display: inline-flex;

  align-items: center;

  gap: 5px;

  max-width: 100%;

  padding: 2px 0;

  border: 0;

  background: transparent;

  color: inherit;

  font: inherit;

  font-weight: 600;

  cursor: pointer;
}

.pasttrips-header-button:hover {
  color: var(--ion-color-primary);
}

.pasttrips-header-button:focus-visible {
  outline:
    2px solid
    var(--ion-color-primary);

  outline-offset: 3px;

  border-radius: 3px;
}

.pasttrips-header-button--sorted,
.pasttrips-header-button--filtered {
  color: var(--ion-color-primary);
}

.pasttrips-header-label {
  min-width: 0;
}

.pasttrips-header-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
}

.pasttrips-header-state-icon {
  flex: 0 0 auto;

  font-size: 15px;
}

.pasttrips-header-filter-icon {
  flex: 0 0 auto;

  font-size: 14px;
}


/* ============================================================
   Tabellenzeilen
   ============================================================ */

.pasttrip-table-row {
  cursor: pointer;
}

.pasttrip-table-row.pasttrip--last-edited td {
  box-shadow:
    inset 3px 0 0 var(--ion-color-primary),
    inset 0 0 0 9999px
      color-mix(
        in srgb,
        var(--ion-color-primary) 9%,
        transparent
      );
}

.pasttrip-table-row.pasttrip--just-inserted td {
  box-shadow:
    inset 3px 0 0 var(--ion-color-primary),
    inset 0 0 0 9999px
      color-mix(
        in srgb,
        var(--ion-color-primary) 12%,
        transparent
      );
}

.pasttrip-table-row:hover td {
  box-shadow:
    inset 0 0 0 9999px
    color-mix(
      in srgb,
      var(--ion-text-color)
      3%,
      transparent
    );
}

.pasttrip-table-row:focus-visible {
  outline:
    2px solid
    var(--ion-color-primary);

  outline-offset: -2px;
}

.pasttrip-table-date {
  white-space: nowrap;
}


/* ============================================================
   Kommentarspalte
   ============================================================ */

.pasttrips-header-comment {
  width: 42px;

  padding-inline:
    8px !important;

  text-align: center !important;
}

.pasttrips-header-comment ion-icon {
  font-size: 17px;

  color: var(--ion-color-medium);
}

.pasttrip-comment-cell {
  width: 42px;

  padding-inline:
    8px !important;

  text-align: center !important;
}

.pasttrip-comment-cell ion-icon {
  font-size: 18px;

  color: var(--ion-color-primary);
}

.pasttrip-comment-cell .pasttrip-comment-button {
  margin-inline: auto;
}


/* ============================================================
   Dezente Farbcodierung gleicher Werte
   ============================================================ */

/* ============================================================
   Kategoriale Einfärbung im Fahrtenarchiv
   ============================================================ */

.pasttrips-filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pasttrips-filter-summary[hidden] {
  display: none;
}

.pasttrips-filter-summary-reset {
  flex: 0 0 auto;
}

.pasttrips-filter-summary {
  margin: 0 0 10px;
  padding: 8px 12px;

  border-radius: 8px;

  background:
    color-mix(
      in srgb,
      var(--ion-color-primary) 8%,
      transparent
    );

  color: var(--ion-color-medium);

  font-size: 0.9rem;
}

.pasttrips-filter-summary[hidden] {
  display: none;
}

.pasttrip-colored-cell {
  background: var(
    --pasttrip-cell-bg,
    transparent
  );

  color: var(--ion-text-color);
}

/* ============================================================
   Tabelle – responsive
   ============================================================ */

.pasttrip-time-mobile,
.pasttrips-date-time-label {
  display: none;
}


@media (max-width: 700px) {

  .pasttrips-table {
    table-layout: fixed;

    font-size: 0.82rem;
  }

  .pasttrips-table th,
  .pasttrips-table td {
    padding: 8px 6px;
  }

  .pasttrips-table td {
    overflow-wrap: anywhere;
  }

  .pasttrips-table th,
  .pasttrips-header-label {
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
  }


  /*
   * Uhrzeit verschwindet als eigene Spalte.
   * Sie wird unter Datum angezeigt.
   */
  .pasttrips-col-time {
    display: none;
  }

  .pasttrip-time-mobile {
    display: block;

    margin-top: 3px;

    color: var(--ion-color-medium);

    font-size: 0.9em;
  }

  .pasttrips-date-time-label {
    display: block;
  }

  .pasttrips-header-date .pasttrips-header-label {
    line-height: 1.15;
  }


  /*
   * Verteilung ohne Kommentarspalte.
   * Falls Kommentar vorhanden ist,
   * nimmt diese automatisch etwas Platz.
   */
  .pasttrips-header-date {
    width: 25%;
  }

  .pasttrips-header-route {
    width: 27%;
  }

  .pasttrips-header-participants {
    width: 30%;
  }

  .pasttrips-header-driver {
    width: 18%;
  }

  .pasttrips-table--with-comments .pasttrips-header-date {
    width: 23%;
  }

  .pasttrips-table--with-comments .pasttrips-header-route {
    width: 25%;
  }

  .pasttrips-table--with-comments .pasttrips-header-participants {
    width: 28%;
  }

  .pasttrips-table--with-comments .pasttrips-header-driver {
    width: 16%;
  }


  .pasttrips-header-button {
    width: 100%;
    gap: 3px;
    text-align: start;
  }

  .pasttrips-header-state-icon {
    font-size: 13px;
  }

  .pasttrips-header-filter-icon {
    font-size: 12px;
  }
}


@media (max-width: 500px) {

  .pasttrips-table {
    font-size: 0.78rem;
  }

  .pasttrips-table th,
  .pasttrips-table td {
    padding:
      7px 5px;
  }

  .pasttrips-header-comment,
  .pasttrip-comment-cell {
    width: 30px;

    padding-inline:
      3px !important;
  }

  .pasttrips-header-button {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(1.5rem, auto);
    align-items: start;
    justify-items: start;
    gap: 2px;
    min-height: 2.75rem;
  }

  .pasttrips-header-label {
    width: 100%;
    line-height: 1.15;
  }

  .pasttrips-header-actions {
    min-width: 2.75rem;
    min-height: 1.5rem;
  }
}


@media (max-width: 400px) {

  .pasttrips-table {
    font-size: 0.74rem;
  }

  .pasttrips-table th,
  .pasttrips-table td {
    padding:
      6px 4px;
  }

  .pasttrips-header-button {
    gap: 2px;
  }

  .pasttrips-header-state-icon,
  .pasttrips-header-filter-icon {
    font-size: 14px;
  }
}


/* ============================================================
   Spalten-Popover
   ============================================================ */

ion-popover.pasttrips-column-popover {
  --width: 275px;
}

ion-popover.pasttrips-column-popover ion-content {
  --background:
    var(--ion-background-color);
}


/* ============================================================
   Filterdialog
   ============================================================ */

.pasttrips-filter-dialog {
  width: 100%;
}

.pasttrips-filter-select-actions {
  display: flex;

  justify-content: flex-end;

  align-items: center;

  gap: 4px;

  margin:
    0
    8px
    4px;
}

.pasttrips-filter-list {
  margin-top: 0;
}

.pasttrips-filter-checkbox {
  width: 100%;

  font-size: 1rem;
}

.pasttrips-filter-label {
  margin-inline-end: 8px;
}

.pasttrips-filter-count {
  color: var(--ion-color-medium);

  font-size: 0.9em;
}


/* ============================================================
   Datumsfilter
   ============================================================ */

.pasttrips-date-filter {
  display: grid;

  gap: 12px;

  width: 100%;
}

.pasttrips-date-filter ion-item {
  --padding-start: 0;
  --inner-padding-end: 0;
}


/* ============================================================
   Infinite Scroll
   ============================================================ */

.pasttrips-page ion-infinite-scroll-content {
  min-height: 70px;
}

/* ---------------------------------------------------- */
/* ---------------------------------------------------- */
/* ---------------------------------------------------- */

ion-input input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px var(--ion-background-color) inset;
  -webkit-text-fill-color: var(--ion-text-color);
}

.mini-toggle {
  transform: scale(0.7);
  transform-origin: right center;
}

.contextMenuDiv{
  min-width: 240px;
  max-width: 400px;
}

/* Keep the global menu's only scroll owner inside Ionic's popover structure.
 * This avoids Android WebView swallowing drags on long menu content. */
ion-popover.context-menu-popover {
  --width: min(400px, calc(100vw - 24px));
  --max-height: min(76dvh, calc(100% - 24px));
}

ion-popover.context-menu-popover::part(content) {
  max-height: min(76dvh, calc(100% - 24px));
  overflow: hidden;
}

ion-popover.context-menu-popover .context-menu-popover__content {
  --padding-top: 8px;
  --padding-bottom: 8px;
  --padding-start: 0;
  --padding-end: 0;
  max-height: min(76dvh, calc(100% - 24px));
  touch-action: pan-y;
  overscroll-behavior: contain;
}

ion-popover.context-menu-popover .contextMenuDiv {
  min-width: 0;
  max-width: none;
}

.ride-message-editor h2 {
  font-size: 0.9rem;
  margin: var(--mcp-spacing-row) 0 0;
  color: var(--ion-color-medium);
  font-weight: 600;
}

.ride-message-recipients--chips,
.ride-message-editor__quick {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mcp-spacing-row);
  min-width: 0;
}

.ride-message-recipient--chip {
  --background: var(--mcp-surface-card);
  --color: var(--ion-text-color);
  margin: 0;
  max-width: 100%;
  height: auto;
  min-height: 2rem;
  white-space: normal;
}

.ride-message-recipient--chip.is-selected {
  --background: color-mix(in srgb, var(--ion-color-primary) 16%, var(--ion-background-color));
  --color: var(--ion-text-color);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ion-color-primary) 48%, transparent);
}

.ride-message-editor__quick ion-chip {
  margin: 0;
  --background: var(--mcp-surface-card);
  --color: var(--ion-text-color);
}

.ride-message-editor__minutes {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  max-width: 100%;
  padding-inline-end: var(--mcp-spacing-row);
  border: 1px solid var(--mcp-border-subtle);
  border-radius: var(--mcp-radius-control);
  color: var(--ion-text-color);
}

.ride-message-editor__minutes ion-chip {
  --background: transparent;
}

.ride-message-editor__minutes ion-select {
  --background: transparent;
  --color: var(--ion-text-color);
  width: 3.5rem;
  min-height: var(--mcp-control-height);
}

.ride-message-editor > ion-textarea {
  width: 100%;
  min-height: 5.5rem;
}

ion-popover.context-menu-popover {
  --width: 320px;
  --max-width: calc(100vw - 16px);
  /* The popover itself is Ionic's scroll viewport.  Keep the menu within the
     visual viewport so a long menu remains touch-scrollable on mobile. */
  --max-height: 78vh;
  --max-height: min(78dvh, 42rem);
}

ion-popover.context-menu-popover::part(content) {
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.show-widescreen{
    display: none;
  }
/* .show-narrowscreen{
  display: initial;
} */

@media (min-width: 430px) {
  .show-widescreen{
    display: inherit;
  }
  .show-narrowscreen{
    display: none;
  }
}

.help-item {
  display: block;
  font-size: 0.82rem;
  line-height: 1.25;
  margin-top: 2px;
}

/* CHAT and similar */

.centertablewithpagecontent{
	margin-left:  auto !important;	
    margin-right: auto !important;		
}

.chatleft{
	position: relative;
	margin-left:10px;
}
.chatright {
	margin-right:10px!important;
}

.chatitem{
	margin-top: 10px;
	text-shadow:none;
	padding: 16px;
	-moz-border-radius: 18px !important;	;
	-webkit-border-radius: 18px !important;	
	border-radius: 18px !important;	
	/* box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); */
  /* box-shadow:
        0 2px 4px rgb(0 0 0 /.05),
        0 8px 18px rgb(0 0 0 /.07); */

   /* Kein box-shadow mehr */
  box-shadow: none;

  /* Schatten für Bubble und Spitze gemeinsam */
  filter:
    drop-shadow(0 2px 3px rgb(0 0 0 / 0.06))
    drop-shadow(0 7px 12px rgb(0 0 0 / 0.08));      
}

.chat-message--just-arrived {
	/* Opaque: the tail overlaps the bubble edge, so an alpha colour darkens there. */
	--chat-arrival-background: color-mix(
		in srgb,
		var(--ion-color-primary) 14%,
		var(--ion-background-color)
	);
	background: var(--chat-arrival-background) !important;
	transition: background 280ms ease;
}

.chat-message--just-arrived.chat-bubble::after,
.chat-message--just-arrived.chat-bubble-right::after {
	background-color: var(--chat-arrival-background) !important;
	transition: background-color 280ms ease;
}

/* A just-arrived unread message keeps the ordinary bubble geometry. */
.chat-message--just-arrived.newchatitem {
	padding: 16px;
	border-radius: 18px !important;
}
.chatuser{
	color: var(--ion-text-color);
	font-weight: 600;
	display: inline-block;
    max-width: 120px;
}

.chatfromme .chatuser {
  color: var(--ion-color-primary);
}
.chatsenttime{
	/* font-size: small; */
	float: right;
	max-width: 180px;
	text-align: right;
	/* display: inline-block; */
  color: var(--ion-color-medium);
  font-size:.9rem;
}
.chatdetails{
	font-size: small;
}
.chatmessage{
	display:block;
	padding-top: 9px;
  padding-bottom: 9px;
  /* vertical-align: top; */
}
.chat100{
	display:block;
	width: 100%;
}
.chat90{
	display:table-cell;
	vertical-align: top;
	width: 95%; 
  padding-right:15px;
}
.chatshowmore{
	display:table-cell;
	width:40px;
	cursor: pointer;
	align-self: flex-start;
	flex: 0 0 40px;
}
.chat-message__header { display:flex; align-items:baseline; gap:.65rem; min-width:0; }
.chat-message__header .chatuser { min-width:0; overflow-wrap:anywhere; }
.chat-message__header .chatsenttime { margin-left:auto; flex:0 0 auto; }
.chat-message__trip-context,
.chatdetails {
	display:flex;
	align-items:flex-start;
	gap:.4rem;
	margin-top:.4rem;
	color:var(--ion-color-medium-shade, var(--ion-color-medium));
	font-size:.78rem;
	line-height:1.35;
	overflow-wrap:anywhere;
}
.chat-message__trip-context ion-icon,
.chatdetails ion-icon { flex:0 0 auto; margin-top:.08rem; }
.chat-message__reaction-slot {
	display:block;
	clear:both;
	width:100%;
	min-width:0;
}
.chat-message__reaction-slot:empty {
	display:none;
}
.chat-message__reactions {
	display:flex;
	flex-wrap:wrap;
	gap:.25rem;
	margin-top:.35rem;
	position:relative;
	z-index:1;
}
.chat-message__reaction {
	/* Resolve text tokens at the chip, not at the light-themed document root. */
	--chat-reaction-count-color: var(--ion-text-color);
	--chat-reaction-active-count-color: var(--ion-text-color);
	border:1px solid var(--chat-reaction-border);
	border-radius:999px;
	background:var(--chat-reaction-background);
	color:var(--chat-reaction-color);
	padding:.15rem .42rem;
	font:inherit;
	font-size:.78rem;
	line-height:1.2;
}
.chat-message__reaction--mine {
	border-color:var(--chat-reaction-active-border);
	background:var(--chat-reaction-active-background);
	color:var(--chat-reaction-active-color);
	font-weight:600;
}
.chat-message__reaction-count {
	color:var(--chat-reaction-count-color);
	-webkit-text-fill-color: currentColor;
	opacity:1;
	font-weight:600;
	font-variant-numeric:tabular-nums;
}
.chat-message__reaction--mine .chat-message__reaction-count {
	color:var(--chat-reaction-active-count-color);
}
.chat-message-actions__reactions {
	display:grid;
	grid-template-columns:repeat(6,minmax(2.5rem,1fr));
	gap:.2rem;
	padding:.5rem .65rem .75rem;
}
.chat-message-actions__reactions button {
	min-width:2.5rem;
	min-height:2.5rem;
	border:1px solid transparent;
	border-radius:999px;
	background:transparent;
	font-size:1.25rem;
}
.chat-message-actions__reactions button.is-selected {
	border-color:var(--chat-reaction-active-border);
	background:var(--chat-reaction-active-background);
}
ion-popover.chat-message-actions-popover {
	--width:min(360px, calc(100vw - 24px));
	--max-width:calc(100vw - 24px);
}
ion-popover.chat-message-actions-popover::part(content) {
	overflow-x:hidden;
}
.chat-message-actions {
	min-width:0;
}
@media (max-width:380px) {
	.chat-message-actions__reactions { grid-template-columns:repeat(3,minmax(2.5rem,1fr)); }
}
.chatclearfloat{
	clear:both;
}
.chatreplybuttons{
	display: inline-block;
    text-align: right;
    width: 10%;
}
.chatreply{
	cursor: pointer;
}
.chataddresseeicon{
	width:10%;
	color: gray;
	/* display:inline-block; */
	display: table-cell;
	/* margin-right:20px; */
	vertical-align: middle;
	cursor:pointer;
}
.chataddressees{
	vertical-align: middle;
	/* display:inline-block; */
	display: table-cell;
	font-size: small;
    color: gray;
	padding-right:15px;
	padding-left:15px;
}

@media (min-width:340px) { 
	.chatitem{
		min-width: 250px;
		width: 90% !important;
	} 
} 

.newchatitem{
	font-weight:bold;
	text-shadow:none;
	padding: 12px;
	-moz-border-radius: 6px !important;
	-webkit-border-radius: 6px !important;	
	border-radius: 6px !important;	
	/* box-shadow: 0 4px 8px 0 rgba(0,0,0,.26); */
  box-shadow:
        0 2px 4px rgb(0 0 0 /.05),
        0 8px 18px rgb(0 0 0 /.07);
}

.chatcontainer{
	max-width:40em;
  width: 100%;
	display: table;
	position:relative;
}	

.chat-bubble {
position: relative;
background: var(--chat-other-bg);
color: var(--chat-other-color);
/* padding: 12px 16px;
border-radius: 18px;
display: inline-block; */
max-width: 70%;
margin-left: 20px; /* Platz für die geschwungene Spitze */
}

/* Die geschwungene SVG-Spitze */
.chat-bubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -8px; /* Schiebt die Spitze nach links aus der Blase heraus */
  width: 25px; /* Breite der Kurven-Grafik */
   height: 25px; /* Höhe der Kurven-Grafik */
	 z-index:0;
	 pointer-events:none;
  background-color: inherit; /* Übernimmt die exakte Farbe der Hauptblase */

  /* Die SVG-Schablone als daten-URL maskiert das Element */
  /* -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://w3.org' viewBox='0 0 20 20'><path d='M20,20 C10,20 1,18 0,12 C3,11 6,8 8,0 L20,0 Z' fill='%23000'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://w3.org' viewBox='0 0 20 20'><path d='M20,20 C10,20 1,18 0,12 C3,11 6,8 8,0 L20,0 Z' fill='%23000'/></svg>"); */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M20,20 C10,20 1,18 0,12 C3,11 6,8 8,0 L20,0 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M20,20 C10,20 1,18 0,12 C3,11 6,8 8,0 L20,0 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 25px 25px;
  mask-size: 25px 25px;
  mask-position: center;

  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

.chat-bubble-right {
  position: relative;
  /*background-color: #34c759; iMessage-Grün, funktioniert auch mit transparentem rgba() */
  /* background: var(--ion-color-primary-tint);
  color: var(--ion-color-primary-contrast); */
  background: var(--chat-me-bg);
  color: var(--chat-me-color);
  /* color: white; */
  /* padding: 12px 16px;
  border-radius: 18px;
  display: inline-block; */
  max-width: 70%;
  margin-right: 20px; /* Platz für die geschwungene Spitze auf der rechten Seite */
  float: right; /* Richtet die Blase standardmäßig rechts im Chatverlauf aus */
  clear: both; /* Verhindert das Überlagern bei mehreren Nachrichten */
}

/* Die geschwungene SVG-Spitze (rechts) */
.chat-bubble-right::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -8px; /* Schiebt die Spitze nach rechts aus der Blase heraus */
  width: 25px; /* Breite der Kurven-Grafik */
   height: 25px; /* Höhe der Kurven-Grafik */
	 z-index:0;
	 pointer-events:none;
  background-color: inherit; /* Übernimmt die exakte Farbe der Hauptblase */
 -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M0,20 C10,20 19,18 20,12 C17,11 14,8 12,0 L0,0 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M0,20 C10,20 19,18 20,12 C17,11 14,8 12,0 L0,0 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

.chatfromother{
	display:block;
	left:0px;
	width: fit-content;
	max-width:90%;
}	
.chatfromme{
	display:block;
	right:0px;
	width: fit-content;
	max-width:90%;
}
.chat-new-sent-date{
  text-align: center;
  font-size: small;
  margin-top: 20px;
  margin-bottom: 15px;

}

#receivedchats{
  padding-bottom: 80px;
}

.value-negative{
	color: var(--financial-negative-color);
	font-weight:600;
}
.value-positive {
	color: var(--financial-positive-color);
	font-weight:600;
}
.value-zero {
	color: var(--financial-neutral-color);
	font-weight:600;
}

.money-row {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  column-gap: 12px;
  align-items: center;
}

.money-row .col-name {
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.money-row .col-amount {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.money-row .col-paybutton {
  text-align: center;
  /* min-width: 9rem; */
  min-width: 50px;
}

.mainTitleOnNarrowPage{
  margin-top: 20px;
  margin-bottom: 30px;
}

.breaklonglink{
	/* bricht jedes Wort, was unschön ist, wenn es kein langer URL ist, aber sonst notwendig ist! */
	word-break: break-all!important;
}
.externalLink{
	font-weight: 700;
	cursor: pointer;
}

.empty-state {
  max-width: 420px;
  margin: 0 auto;
  padding: 48px 24px;
  min-height: 60vh;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  color: var(--ion-color-medium);
}

.empty-state > ion-icon {
  font-size: 56px;
  margin-bottom: 16px;
  color: var(--ion-color-medium);
}

.empty-state h2 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ion-text-color);
}

.empty-state p {
  margin: 0 0 20px;
  line-height: 1.45;
  color: var(--ion-color-medium);
}

.empty-state ion-button {
  margin-top: 4px;
}

/* Buttons im MyPlan in der Kalenderansicht */

.rq-absencebutton{
	font-size: small;
  word-break: break-all;
  /* max-height: 42px; */
}

@media (min-width:451px) {	
	.rq-button {
		margin-left: 2px!important;
		margin-right: 2px!important;
	}
}	
@media (max-width:450px) {	
	.rq-button {
		/* width: 36px!important; */
		min-width:36px!important;
		font-size: 12px!important;
		margin-top: 2px;
		margin-bottom: 2px;
	}	
	.rq-td {
		width: 40px!important;
		padding: 2px 1px 2px 1px!important;
	}
	.rq-td-pastday{
		width:40px!important;
		padding: 2px 1px 2px 1px!important;
	}
	.rq-table {
		font-size: 12px!important;
	}
	.rq-dayfield {
		width: 40px!important;
	}
}
.rq-td{
	width:54px;
	padding:2px 3px 2px 3px!important; 
	height:20px;
	font-size: 14px;
	font-weight: normal;
	text-align: center; 
	text-shadow:none;
	vertical-align: top !important;	
}

.rq-td-pastday{
	width:54px;
	padding:2px 3px 2px 3px!important;
	/* background:#FF9D9D;  */
}

.rq-td-12h{
	width:50px !important;
}

.rq-container{
	 /* overflow-x: scroll;  */
	 /* width: 400px; */
   max-width: 400px;
   margin: auto;
}

 @media (max-width:400px) { 
	 .rq-container{ 
		 overflow-x: scroll; 
     margin: auto;
	 } 
 } 
 
.rq-table{
  margin: auto;
	/* padding:0px; */
	/* border: 1px solid black; */
	/* border-collapse: collapse;	 */
}

.rq-dayfield{
	width:45px;
	margin-left: auto;
	margin-right: auto;
	text-align: center; 
	text-shadow:none; 
	padding-top:7px; 
	padding-bottom:7px; 
	/* font-size:.9em; */
	font-size:14px;
	font-weight: 700; 
	vertical-align: middle;
}

.rq-table th {
	min-width: 45px;
	font-size: 16px;
}
	
.rq-button{
	/* width:50px; */
	min-width:40px;
  min-height: 36px;
	-moz-border-radius: 9px;
	border-radius: 9px;
	cursor: pointer; /* damit iOS den click feuert!	 */
	margin-left: auto;
	margin-right: auto;
	text-align: center; 
	text-shadow:none; 
	padding-left:2px; 
  padding-right:2px; 
	/* font-size:16px; */
	padding-top: 12px;
  padding-bottom: 12px;
	margin-top: 5px;
  margin-bottom: 5px;
}
.rq-plusbutton{
	font-size: 20px;
  max-height: 42px;
    /* padding-top: 6px; */
    /* padding-bottom: 6px; */
}
.rq-monthname{
	text-shadow:none; 
	padding:7px; 
	font-size:21px;
	font-weight: 700;
	margin-top: 20px;
  margin-bottom: 12px;
}
.dark-theme .rq-month{
  /* background: #ededed14; */
  background: #ffffff14;
}  
.aquarell-theme .rq-month{
  background: #f8dbd082;
}
.rq-week-separator{
  margin-top: 10px;
}
.aquarell-theme .rq-week-separator{
  border-top: 1px solid #fccfbe;
}   
.nature-theme .rq-month{
  /* background: #66a18242; */
  background: #66a18221;
}
.nature-theme .rq-week-separator{
  border-top: 1px solid #66a182;
}     
.rq-month{
  background: #bfd6ff29;
}  
.rq-month{
  border-radius: 20px;
  padding: 10px 12px 10px 12px;
  margin-bottom: 30px;
}
.rq-holiday {
    background: rgba(var(--ion-color-primary-rgb), .14);
    color: var(--ion-text-color);
    box-shadow: inset 0 0 0 1px rgba(var(--ion-color-primary-rgb), .32);
	border-radius: 6px;
}

.rq-absencebutton,
.rq-plusbutton {
    background: var(--rq-action-background);
    
    color: var(--rq-action-color);
}
.dark-theme .rq-weekend{
	/* background: #76a277; */
	color: #76a277;
}
.dark-theme .rq-time{
/* .dark-theme .rq-button{   */
	background: #333333;
	/* color: white; */
	border-color: #ddd; 
}
.dark-theme .rq-button:hover{
	background: #4e4d4d;
	color: white;
}
.dark-theme .rq-absencebutton, 
.dark-theme .rq-plusbutton {
    background: color-mix(
        in srgb,
        var(--ion-item-background) 80%,
        var(--ion-text-color)
    );
    opacity: 0.85;
}
/* ------------------------------------------ */
ion-toast.app-info-toast {
    --background: var(--ion-text-color);
    --color: var(--ion-background-color);
}

.new-ride-form {
  margin: 16px;
  width: 100%;
  background: var(--ion-item-background);
}

.new-ride-form ion-select {
    width: 100%;
}

.new-ride-form ion-item {
  --padding-start: 16px;
  --inner-padding-end: 16px;
}

.new-ride-form ion-datetime-button::part(native) {
    background: var(--ion-color-step-150);
    color: var(--ion-text-color);
    border-radius: 8px;
}

.ride-locations {
    position: relative;
}

.ride-locations ion-item {
    --inner-padding-end: 72px;
}

.swap-locations-button {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    margin: 0;
    width: 42px;
    height: 42px;
    --padding-start: 0;
    --padding-end: 0;
    --border-radius: 50%;
    --background: var(--ion-item-background);
    --color: var(--ion-color-medium);
}

/* Fehler in Div sichtbar machen: */
/* div { outline: 1px solid red !important; } */

.confirm-fab {
  margin: 0;
}

.confirm-fab.hidden {
  display: none;
}

.confirm-fab-button {
  width: auto;
  height: 48px;
  min-width: 132px;

  --border-radius: 24px;
  --padding-start: 16px;
  --padding-end: 18px;
}

.confirm-fab-button ion-icon {
  margin-right: 8px;
  font-size: 20px;
}

.confirm-fab-button span {
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
}

/* Shared, deliberately secondary add-ride action for Our Plan and the archive. */
.secondary-add-ride-fab-button {
  width: 44px;
  height: 44px;

  --background: color-mix(
    in srgb,
    var(--ion-color-primary) 10%,
    var(--ion-item-background, var(--ion-background-color))
  );
  --background-hover: color-mix(
    in srgb,
    var(--ion-color-primary) 16%,
    var(--ion-item-background, var(--ion-background-color))
  );
  --background-activated: color-mix(
    in srgb,
    var(--ion-color-primary) 22%,
    var(--ion-item-background, var(--ion-background-color))
  );
  --border-color: color-mix(in srgb, var(--ion-color-primary) 42%, transparent);
  --border-style: solid;
  --border-width: 1px;
  --box-shadow: 0 2px 8px color-mix(in srgb, var(--ion-text-color) 12%, transparent);
  --color: var(--ion-color-primary);
}

.secondary-add-ride-fab-button ion-icon {
  font-size: 20px;
}

/* Fixed-slot FABs share the same vertical reference as the tab content.  In
   the current shell the tab bar overlays that reference, so reserve its full
   rendered height once here.  The value includes the platform safe-area inset
   when Ionic applies one to the tab bar. */
:root {
  --app-tabbar-height: 56px;
  --app-fab-bottom-gap: 12px;
  --ourplan-fab-edge: 16px;
  --ourplan-fab-top: calc(64px + var(--ion-safe-area-top, 0px));
  /* Replaced with the measured tab-bar overlap inside the active ion-content
     fixed-slot host. The fallback keeps the browser/iOS path safe. */
  --app-bottom-tabbar-offset: calc(
    var(--app-tabbar-height) + var(--ion-safe-area-bottom, 0px)
  );
  --app-bottom-fab-offset: calc(
    var(--app-bottom-tabbar-offset) + var(--app-fab-bottom-gap)
  );
  --ourplan-fab-bottom: var(--app-bottom-fab-offset);
}

#ourplan ion-fab.confirm-fab {
  right: var(--ourplan-fab-edge);
  bottom: var(--app-fab-instance-bottom, var(--ourplan-fab-bottom)) !important;
  margin: 0;
}

#ourplan ion-fab.ourplan-quick-fab {
  z-index: 20;
  margin: 0;
}

#ourplan ion-fab.ourplan-quick-fab--bottom-start {
  left: var(--ourplan-fab-edge);
  bottom: var(--app-fab-instance-bottom, var(--ourplan-fab-bottom)) !important;
}

#ourplan ion-fab.ourplan-quick-fab--top-start {
  left: var(--ourplan-fab-edge);
  top: var(--ourplan-fab-top) !important;
  bottom: auto !important;
}

#ourplan ion-fab.ourplan-quick-fab--top-end {
  right: var(--ourplan-fab-edge);
  top: var(--ourplan-fab-top) !important;
  bottom: auto !important;
}

.ourplan-quick-actions-settings__intro {
  color: var(--ion-color-medium-shade);
}

/* FABs stay in Ionic's fixed slot; only their in-content offset is shared. */
:root {
    --bottom-navigation-height: var(--app-tabbar-height);
    --floating-action-gap: var(--app-fab-bottom-gap);
}

ion-fab[vertical="bottom"] {
  bottom: var(--app-fab-instance-bottom, var(--app-bottom-fab-offset)) !important;
  margin-bottom: 0 !important;
  top: auto !important;
}

/* "Weitere Möglichkeiten" uses the normal Ionic menu-item pattern, but these
 * actions have no trailing preview that should claim part of the label width.
 * Keep its text column genuinely flexible on narrow dialogs and only allow a
 * last-resort break for an otherwise unbreakable localized word. */
.page-mycarpools .mycarpools-more-options-list ion-item {
  --padding-start: 12px;
  --inner-padding-end: 12px;
}

.page-mycarpools .mycarpools-more-options-list ion-icon[slot="start"] {
  flex: 0 0 auto;
  margin-inline-end: 12px;
}

.page-mycarpools .mycarpools-more-options-list ion-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: visible;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
  hyphens: none;
}

@media (max-width: 360px) {
  .page-mycarpools .mycarpools-more-options-list ion-item {
    --padding-start: 8px;
    --inner-padding-end: 8px;
  }

  .page-mycarpools .mycarpools-more-options-list ion-icon[slot="start"] {
    margin-inline-end: 8px;
  }
}

.rq-week-separator{
  border-top: 1px solid #fccfbe;
}
.dark-theme .rq-week-separator{
  border-top: 1px solid #422c4f;
}

.tabHeader-Context{
  text-align: center;  
  background: #edc7bb;
  padding: 8px;
  display: flex; align-items: center; 
  /* justify-content: space-between;  */
  gap: 15px;
}
.dark-theme .tabHeader-Context{
  background: #572e6d;
}
.tabHeader-Status{
  text-align: center;  
  display: none;  
}
.tabHeader-Status.connectivity-status {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 2rem;
  padding: 0.2rem 0.75rem;
  font-size: 0.78rem;
  line-height: 1.25;
  color: var(--ion-color-medium-shade);
  background: var(--ion-color-light);
}
.connectivity-status--offline,
.connectivity-status--server {
  color: var(--ion-color-warning-shade);
  background: var(--ion-color-warning-tint);
  border-inline-start: 3px solid var(--ion-color-warning);
}
.connectivity-status__icon {
  flex: 0 0 auto;
  font-size: 1rem;
}
.connectivity-status__content {
  min-width: 0;
  overflow-wrap: anywhere;
  text-align: start;
}
.connectivity-status__primary {
  font-weight: 500;
}
.connectivity-status__detail {
  font-weight: 400;
  opacity: 0.88;
}
.connectivity-status--offline .connectivity-status__primary,
.connectivity-status--server .connectivity-status__primary {
  font-weight: 700;
}
.connectivity-status--stale {
  color: var(--ion-color-medium-shade);
  background: var(--ion-color-light);
}
.connectivity-status--websocket {
  min-height: 1.5rem;
  padding-block: 0.1rem;
  font-size: 0.72rem;
  opacity: 0.78;
}
.connectivity-status ion-button {
  min-height: 1.75rem;
  margin: 0;
  font-size: inherit;
}
.hidden{
  display:none!important;
}

/* Rahmen um Kontextmenü im Dark-Theme */
.dark-theme ion-popover::part(content) {
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    overflow: hidden;

    box-shadow:
        0 14px 36px rgba(0, 0, 0, 0.60),
        0 3px 10px rgba(0, 0, 0, 0.35);
}

/* Guthaben-Ausgleich */

.settlement-section {
    margin-block: 24px 32px;
}

.settlement-section h2 {
    margin: 0 20px 6px;
    font-size: 1rem;
    font-weight: 600;
}

.settlement-section > ion-note {
    display: block;
    margin: 0 20px 12px;
    line-height: 1.4;
}

.balance-settlement-page__intro {
  display: block;
  margin: 0.25rem 1rem 1rem;
  line-height: 1.4;
}

.balance-settlement-list {
  margin-bottom: 1rem;
}

.balance-settlement-transfer__content {
  min-width: 0;
  padding-block: 0.65rem;
}

.balance-settlement-transfer__route {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  font-weight: 600;
}

.balance-settlement-transfer__route ion-icon {
  color: var(--ion-color-medium);
  flex: 0 0 auto;
}

.balance-settlement-transfer__amount {
  display: block;
  margin-top: 0.2rem;
  color: var(--ion-text-color);
}

.balance-settlement-transfer ion-checkbox {
  flex: 0 0 auto;
  margin-inline-start: 0.75rem;
}

.balance-settlement-cash-entry__direction {
  color: var(--ion-color-medium);
  margin-inline: 0.5rem;
}

@media (max-width: 420px) {
  .balance-settlement-cash-entry {
    --inner-padding-end: 0.5rem;
  }

  .balance-settlement-cash-entry__direction {
    font-size: 0.82rem;
  }
}

/* MyPlan and shared app surfaces */

:root {
  /* Shared surface geometry for card-like elements across tabs. */
  --app-surface-background: var(--ion-card-background, var(--ion-item-background));
  --app-surface-border: color-mix(
    in srgb,
    var(--ion-text-color) 8%,
    transparent
  );
  --app-surface-radius: 16px;
  --app-surface-shadow:
    0 2px 4px rgb(0 0 0 / 0.05),
    0 8px 20px rgb(0 0 0 / 0.08);

  /* MyPlan */
  --plan-list-gap: 1rem;
  --plan-card-background: var(--app-surface-background);
  --plan-card-border: var(--app-surface-border);
  --plan-row-border: color-mix(
    in srgb,
    var(--ion-text-color) 12%,
    transparent
  );
  --plan-selected-background: color-mix(
    in srgb,
    var(--ion-color-primary) 9%,
    var(--plan-card-background)
  );
  --plan-muted-color: var(--ion-color-medium);
}

.plan-list {
  display: grid;
  gap: var(--plan-list-gap);
  padding: 1rem;
}

.my-plan-user-shortcuts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1rem 0;
}

.plan-list > .my-plan-user-shortcuts {
  grid-column: 1 / -1;
  padding: 0;
}

.my-plan-user-shortcut {
  min-height: 2rem;
  margin: 0;
  --background: color-mix(in srgb, var(--ion-color-medium) 10%, var(--ion-background-color));
  --color: var(--ion-text-color);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ion-color-medium) 34%, transparent);
}

.my-plan-user-shortcut.is-active {
  --background: color-mix(in srgb, var(--ion-color-primary) 16%, var(--ion-background-color));
  --color: var(--ion-color-primary-shade);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ion-color-primary) 48%, transparent);
}

.ourPlan-remote-change {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--app-spacing-sm, 0.75rem);
  margin: 1rem 1rem 0;
  padding: var(--app-spacing-sm, 0.75rem) var(--app-spacing-md, 1rem);
  border: 1px solid color-mix(in srgb, var(--ion-color-primary) 28%, transparent);
  border-radius: var(--app-surface-radius);
  background: color-mix(in srgb, var(--ion-color-primary) 8%, var(--app-surface-background));
  color: var(--ion-text-color);
}

.ourPlan-remote-change > ion-icon {
  align-self: start;
  color: var(--ion-color-primary);
  font-size: 1.35rem;
}

.ourPlan-remote-change__content {
  min-width: 0;
}

.ourPlan-remote-change__content strong,
.ourPlan-remote-change__content p {
  display: block;
  margin: 0;
}

.ourPlan-remote-change__content p {
  margin-block-start: 0.15rem;
  color: var(--ion-color-medium-shade);
  font-size: 0.9rem;
  line-height: 1.35;
}

.ourPlan-remote-change__refresh {
  margin: 0;
  text-transform: none;
}

@media (max-width: 420px) {
  .ourPlan-remote-change {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .ourPlan-remote-change__refresh {
    grid-column: 2;
    justify-self: start;
  }
}

.plan-list > .plan-day,
.plan-list > .absence-card {
  width: auto;
  min-width: 0;
  margin: 0;
  box-sizing: border-box;
}

.plan-day {
  overflow: hidden;
  background: var(--plan-card-background);
  border: 1px solid var(--plan-card-border);
  border-radius: var(--app-surface-radius);
  box-shadow: var(--app-surface-shadow);
}

.plan-day__header {
  padding: 18px 18px 12px;
}

.plan-day__header--holiday {
  background: rgba(var(--ion-color-primary-rgb), .08);
  box-shadow: inset 3px 0 0 rgba(var(--ion-color-primary-rgb), .55);
}

.plan-day__title {
  margin: 0;

  color: var(--ion-text-color);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.25;
}

.plan-day__date {
  margin-top: 2px;

  color: var(--ion-color-medium);
  font-size: 0.9rem;
}

.plan-day__list {
  margin: 0;
  padding: 0;

  background: transparent;
  --ion-item-background: transparent;
}

/* Keine Linie unten  */
.plan-day__list > ion-item:last-child {
    --inner-border-width: 0;
}

/* Our Plan uses ion-list lines="full", whose visible divider is the outer border. */
.plan-day__list > ion-item.ourPlan_tripItem:last-child {
  --border-width: 0;
  --inner-border-width: 0;
}

.plan-row {
  --background: transparent;
  --color: var(--ion-text-color);
  --padding-start: 14px;
  --padding-end: 6px;
  --inner-padding-end: 0;
  --min-height: 68px;

  --border-color:
    color-mix(in srgb, var(--ion-text-color) 10%, transparent);
}

.plan-row--absence {
  --min-height: 56px;
}

.plan-row--absence::part(native) {
  background: var(--absence-background);
  /* background:
    color-mix(
      in srgb,
      var(--ion-color-warning) 7%,
      transparent
    ); */
}

.plan-row__checkbox {
  flex: 1 1 auto;
  min-width: 0;

  --size: 24px;
  --border-width: 2px;
  --border-radius: 6px;

  --checkbox-background-checked: var(--ion-color-primary);
  --border-color-checked: var(--ion-color-primary);
  --checkmark-color: var(--ion-color-primary-contrast);
}

.plan-ride-checkbox {
  width: 100%;
}

/* .plan-ride-label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  row-gap: 3px;

  width: 100%;
  min-width: 0;
  padding-block: 9px;
} */
.plan-ride-label {
  display: grid;
  grid-template-columns: max-content minmax(8rem, 1fr);
  grid-template-areas:
    "time route"
    ".    meta";
  column-gap: 16px;
  row-gap: 4px;

  width: 100%;
  min-width: 0;
}

.plan-ride-label__time {
  grid-row: 1 / span 2;

  color: var(--ion-text-color);
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.plan-ride-label__route {
  /* display: flex; */
  align-items: center;

  min-width: 0;

  color: var(--ion-text-color);
  font-size: 1rem;
  font-weight: 500;
}

/* .plan-ride-label__stop {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
} */

.plan-ride-label__stop {
  white-space: normal;
  overflow: visible;
  /* text-overflow: clip; */
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

.plan-ride-label__destination {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
}

.plan-ride-label__destination .plan-ride-label__stop {
  white-space: normal;
}

.plan-ride-label__direction {
  flex: 0 0 auto;

  margin-inline: 4px;

  color: var(--ion-color-medium);
  font-size: 0.85rem;
}

.plan-ride-label__meta {
  overflow: hidden;

  color: var(--ion-color-medium);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 3px;
  line-height: 1.2;
}

.plan-row__action {
  width: 42px;
  height: 42px;
  min-height: 42px;
  margin: 0;

  --padding-start: 0;
  --padding-end: 0;
  --border-radius: 50%;
  --color: var(--ion-color-medium);
}

.plan-row__action ion-icon {
  font-size: 1.25rem;
}

.plan-row__action.is-active {
  --color: var(--ion-color-primary);
}

@media (max-width: 420px) {
  .plan-row {
    --padding-start: 10px;
  }

  .plan-ride-label {
    column-gap: 8px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "time"
      "route"
      "meta";
    row-gap: 3px;
  }

  /* .plan-ride-label__meta {
    display: none;
  } */

  .plan-row__actions {
    gap: 0;
    margin-inline-start: 2px;
  }

  .plan-row__action {
    width: 38px;
    height: 42px;
  }
}

.support-page {
  display: grid;
  gap: 20px;
}

.support-composer {
  margin: 0;
}

.support-composer ion-card-content {
  display: grid;
  gap: 10px;
}

.support-intro {
  margin: 0 0 4px;
  color: var(--ion-color-medium-shade, var(--ion-color-medium));
  line-height: 1.45;
}

.support-field {
  --padding-start: 0;
  --inner-padding-end: 0;
}

.support-field-note {
  margin: -4px 0 4px;
  color: var(--ion-color-medium);
  font-size: 0.78rem;
  line-height: 1.35;
}

.support-message-input {
  min-height: 116px;
}

.support-send-button {
  margin-top: 6px;
}

.login-support-unread[hidden] {
  display: none;
}

.login-support-unread ion-card-content {
  display: grid;
  gap: 10px;
}

.login-support-unread__content {
  display: flex;
  align-items: center;
  gap: 9px;
  line-height: 1.4;
}

.login-support-unread__content ion-icon {
  flex: 0 0 auto;
  color: var(--ion-color-primary);
  font-size: 1.25rem;
}

.support-thread-state,
.support-message__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
}

.support-thread-state {
  color: var(--ion-color-medium-shade, var(--ion-color-medium));
  font-size: 0.82rem;
}

.support-message__actions ion-button,
.support-thread-state ion-button {
  margin: 0;
}

.support-message__acknowledged {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--ion-color-medium);
  font-size: 0.75rem;
}

.support-history {
  display: grid;
  gap: 12px;
}

.support-history h2 {
  margin: 0;
  font-size: 1.05rem;
}

.support-history__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 12px;
}

.support-history__status {
  color: var(--ion-text-color);
  font-size: 0.9rem;
  font-weight: 600;
}

.support-history__messages {
  display: grid;
  gap: 10px;
}

.support-history--preview {
  margin-block-end: var(--app-spacing-md, 16px);
}

.support-history__earlier > summary {
  color: var(--ion-color-primary);
  cursor: pointer;
  padding-block: 12px;
}

.support-history__earlier > summary:focus-visible {
  outline: 2px solid var(--ion-color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.support-history-empty {
  padding: 16px;
  border: 1px solid var(--ion-border-color);
  border-radius: 14px;
  color: var(--ion-color-medium);
  text-align: center;
}

.support-message {
  display: grid;
  gap: 7px;
  max-width: min(88%, 620px);
  padding: 12px 14px;
  border: 1px solid var(--ion-border-color);
  border-radius: 14px;
  background: var(--ion-item-background, var(--ion-background-color));
}

.support-message--user {
  justify-self: end;
  background: var(--chat-own-message-background, var(--ion-color-light));
}

.support-message--support {
  justify-self: start;
}

.support-message--unread {
  border-color: var(--ion-color-primary);
}

.support-message__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  font-size: 0.82rem;
}

.support-message__meta time {
  color: var(--ion-color-medium);
  font-size: 0.76rem;
}

.support-message__body {
  overflow-wrap: anywhere;
  line-height: 1.45;
  white-space: pre-wrap;
}

@media (max-width: 420px) {
  .support-message {
    max-width: 94%;
  }
}


.notification-settings {
  display: grid;
  gap: var(--mcp-spacing-section);
}


.location-sharing-settings {
  display: grid;
  gap: var(--mcp-spacing-section);
  color: var(--ion-text-color);
}
.location-sharing-settings__introduction,
.location-sharing-settings .settings-section {
  margin: 0;
}
.location-sharing-settings__introduction {
  line-height: 1.5;
  overflow-wrap: break-word;
}
.location-sharing-settings .settings-section__title {
  margin-inline: 0;
}
.location-sharing-settings .settings-section__hint {
  margin-inline: 0;
  color: var(--ion-color-medium);
}

.notification-settings .settings-section {
  margin: 0;
}


.notification-settings__device-note {
  margin: 0 0 10px;
}


.notification-settings__delivery-note {
  margin: 8px 0 0;
}

.notification-settings__push-test {
  display: grid;
  justify-items: start;
  gap: var(--app-space-2, 8px);
  margin-top: var(--app-space-3, 12px);
  padding-top: var(--app-space-3, 12px);
  border-top: 1px solid var(--ion-color-step-150, rgba(127, 127, 127, 0.2));
}

.notification-settings__push-test-title {
  margin: 0;
  color: var(--ion-text-color);
  font-size: var(--app-font-size-body, 1rem);
  font-weight: 600;
}

.notification-settings__push-test-status {
  display: grid;
  width: min(100%, 30rem);
  gap: 4px;
  margin: 0;
  color: var(--ion-color-step-700, var(--ion-text-color));
  font-size: var(--app-font-size-small, 0.875rem);
}

.notification-settings__push-test-status > div {
  display: grid;
  grid-template-columns: minmax(7rem, 1fr) minmax(0, 1.4fr);
  gap: var(--app-space-2, 8px);
}

.notification-settings__push-test-status dt,
.notification-settings__push-test-status dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.notification-settings__push-test-status dd {
  color: var(--ion-text-color);
  font-weight: 500;
}

.notification-settings__push-test-help {
  margin: 0;
}

.notification-settings__push-test-result {
  display: grid;
  width: min(100%, 32rem);
  gap: var(--app-space-1, 4px);
  margin-top: var(--app-space-1, 4px);
  padding: var(--app-space-2, 8px) var(--app-space-3, 12px);
  border-inline-start: 3px solid var(--ion-color-medium, #92949c);
  border-radius: var(--app-radius-small, 8px);
  background: var(--ion-color-step-50, rgba(127, 127, 127, 0.08));
  color: var(--ion-text-color);
  font-size: var(--app-font-size-small, 0.875rem);
}

.notification-settings__push-test-result--waiting {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  border-inline-start-color: var(--ion-color-primary, #3880ff);
}

.notification-settings__push-test-result--waiting ion-spinner {
  width: 1rem;
  height: 1rem;
  color: var(--ion-color-primary, #3880ff);
}

.notification-settings__push-test-result--success {
  border-inline-start-color: var(--ion-color-success, #2dd36f);
}

.notification-settings__push-test-result--timeout {
  border-inline-start-color: var(--ion-color-warning, #ffc409);
}

.notification-settings__push-test-result ul {
  margin: 0;
  padding-inline-start: 1.2rem;
}

.notification-settings__push-test-result ion-button {
  justify-self: start;
  margin: 0;
}


.notification-settings__item {
  --padding-start: 0;
  --inner-padding-end: 0;

  width: 100%;
}


.notification-settings__item ion-toggle,
.notification-settings__item ion-select,
.notification-settings__item ion-input {
  width: 100%;
}


.notification-settings__planning-options {
  display: grid;

  gap: 4px;

  margin-top: 4px;
}


.notification-settings__dependent-fields--disabled {
  opacity: 0.58;
}

/* =================================================================================================================== */
/* =================================================================================================================== */

.balances-list {
  width: min(100% - 32px, 520px);
  margin: 0 auto;
  /* Keep the outer ion-content as the only vertical scroll owner. */
  overflow: visible;
  background: var(--app-surface-background);
  border: 1px solid var(--app-surface-border);
  border-radius: var(--app-surface-radius);
  box-shadow: var(--app-surface-shadow);
}

ion-tab#balance > ion-page,
ion-tab#balance > ion-page > ion-content,
#balance-content,
.balance-summary {
  min-height: 0;
}

#balance-content,
.balance-summary {
  overflow: visible;
}


/* FAB muss darunter passen, ohne die Karte zu überdecken! */
#myplan-content,#ourplan-content {
  padding-bottom: 100px;
}


/* Absenz = Abwesenheit */

:root {
  --absence-color: var(--ion-color-primary);
  --absence-background: color-mix(
    in srgb,
    var(--absence-color) 6%,
    var(--app-surface-background)
  );
  --absence-background-hover: color-mix(
    in srgb,
    var(--absence-color) 9%,
    var(--app-surface-background)
  );
  --absence-border: color-mix(
    in srgb,
    var(--absence-color) 14%,
    transparent
  );
  --absence-icon-background: color-mix(
    in srgb,
    var(--absence-color) 10%,
    transparent
  );
  --absence-status-color: color-mix(
    in srgb,
    var(--ion-text-color) 80%,
    var(--app-surface-background)
  );
  --absence-muted-color: color-mix(
    in srgb,
    var(--ion-text-color) 62%,
    var(--app-surface-background)
  );
}



/* =========================================================
   Abwesenheitskarte
   ========================================================= */

.absence-card {
  width: auto;
  margin: 0;
  box-sizing: border-box;

  overflow: hidden;

  color: var(--ion-text-color);
  background: var(--absence-background);

  border: 1px solid var(--absence-border);
  border-radius: var(--app-surface-radius);

  /*
   * Derselbe Schatten wie bei den normalen Tageskarten.
   */
  box-shadow: var(--app-surface-shadow);
}


/* =========================================================
   Klickbarer Hauptbereich
   ========================================================= */

.absence-card__main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;

  width: 100%;
  padding: 0.9rem 1rem 0.25rem;

  color: inherit;
  font: inherit;
  text-align: left;

  appearance: none;
  background: transparent;
  border: 0;
  border-radius: inherit;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  transition: background-color 150ms ease;
}

.absence-card__main:hover {
  background: var(--absence-background-hover);
}

.absence-card__main:active {
  background:
    color-mix(
      in srgb,
      var(--absence-color) 5%,
      transparent
    );
}

.absence-card__main:focus {
  outline: none;
}

.absence-card__main:focus-visible {
  outline: 3px solid
    color-mix(
      in srgb,
      var(--absence-color) 28%,
      transparent
    );

  outline-offset: -3px;
}


/* =========================================================
   Icon
   ========================================================= */

.absence-card__icon {
  display: grid;
  place-items: center;

  width: 2.3rem;
  height: 2.3rem;
  margin-top: 0.05rem;

  color: var(--absence-color);
  background: var(--absence-icon-background);

  border-radius: 50%;
}

.absence-card__icon ion-icon {
  font-size: 1.1rem;
}


/* =========================================================
   Textinhalt
   ========================================================= */

.absence-card__content {
  display: block;
  min-width: 0;
}

.absence-card__header {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  justify-content: space-between;

  min-width: 0;
}

.absence-card__title {
  min-width: 0;

  color: var(--absence-status-color);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.25;
}

.absence-card__duration {
  display: none;
}

.absence-card__period {
  display: block;

  margin-top: 0.18rem;

  color: var(--ion-text-color);
  font-size: 0.94rem;
  font-weight: 450;
  line-height: 1.35;
}

.absence-card__reason {
  display: block;
  overflow: hidden;

  margin-top: 0.15rem;

  color: var(--absence-muted-color);
  font-size: 0.83rem;
  font-weight: 400;
  line-height: 1.3;

  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Kompakte, nicht interaktive Abwesenheitsinfo innerhalb von „Unser Plan“. */
.ourPlan__absence {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  margin: 0.35rem 0.75rem 0.55rem;
  padding: 0.7rem 0.8rem;
  color: var(--ion-text-color);
  background: var(--absence-background);
  border: 1px solid var(--absence-border);
  border-radius: 12px;
}

.ourPlan__absence-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: var(--absence-color);
  background: var(--absence-icon-background);
  border-radius: 50%;
}

.ourPlan__absence-icon ion-icon {
  font-size: 1rem;
}

.ourPlan__absence-content,
.ourPlan__absence-name {
  min-width: 0;
}

.ourPlan__absence-title {
  margin-bottom: 0.2rem;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--absence-status-color);
}

.ourPlan__absence-people {
  display: grid;
  gap: 0.16rem;
}

.ourPlan__absence-person {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.45rem;
  align-items: baseline;
  font-size: 0.88rem;
  line-height: 1.35;
}

.ourPlan__absence-reason {
  color: var(--absence-muted-color);
  font-size: 0.78rem;
}

.plan-day--absence-only .plan-day__list {
  padding-bottom: 0.2rem;
}


/* =========================================================
   Unterer Aktionsbereich
   ========================================================= */

.absence-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: center;

  padding:
    0.15rem
    1rem
    0.55rem
    calc(1rem + 2.15rem + 0.75rem);
}

.absence-card__edit,
.absence-card__participate {
  min-height: 2rem;
  margin: 0;

  --padding-start: 0;
  --padding-end: 0.35rem;
  --border-radius: 0.5rem;

  font-size: 0.84rem;
  letter-spacing: 0;
  text-transform: none;

  /*
   * Ruhiger als ein gewöhnlicher Primärbutton.
   * Die Farbe passt sich dem jeweiligen Theme an.
   */
  --color:
    color-mix(
      in srgb,
      var(--absence-color) 78%,
      var(--ion-text-color)
    );

  --background-hover:
    color-mix(
      in srgb,
      var(--absence-color) 6%,
      transparent
    );

  --background-activated:
    color-mix(
      in srgb,
      var(--absence-color) 10%,
      transparent
    );
}



.absence-card__edit {
  --color: var(--ion-color-medium);
  font-weight: 450;

  min-height: 2.25rem;

  --padding-start: 0.35rem;
  --padding-end: 0.45rem;

  display: inline-flex;
  align-items: center;

  overflow: visible;
}

.absence-card__edit ion-icon {
  display: block;

  width: 1.15rem;
  height: 1.15rem;
  min-width: 1.15rem;
  min-height: 1.15rem;

  margin-inline-end: 0.35rem;

  font-size: 1.15rem;
  line-height: 1;

  overflow: visible;
}

.absence-card__participate {
  --padding-start: 0.45rem;
  --padding-end: 0.45rem;
  --color: var(--absence-action-color);

  font-weight: 550;
}

/* =========================================================
   Schmale Displays
   ========================================================= */

@media (max-width: 380px) {
  .absence-card__main {
    gap: 0.625rem;
    padding-inline: 0.8rem;
  }

  .absence-card__icon {
    width: 2.15rem;
    height: 2.15rem;
  }

  .absence-card__header {
    gap: 0.4rem;
  }

  .absence-card__title {
    font-size: 0.96rem;
  }

  .absence-card__period {
    font-size: 0.9rem;
  }

  .absence-card__footer {
    padding-left:
      calc(0.8rem + 2.15rem + 0.625rem);
    padding-right: 0.8rem;
  }
}


/* =========================================================
   Dark Theme
   ========================================================= */

.dark-theme {
  --absence-background:
    color-mix(
      in srgb,
      var(--absence-color) 10%,
      var(--ion-card-background, var(--ion-item-background))
    );

  --absence-background-hover:
    color-mix(
      in srgb,
      var(--absence-color) 13%,
      var(--ion-card-background, var(--ion-item-background))
    );

  --absence-border:
    color-mix(
      in srgb,
      var(--absence-color) 11%,
      rgba(255, 255, 255, 0.06)
    );

  --absence-icon-background:
    color-mix(
      in srgb,
      var(--absence-color) 14%,
      transparent
    );

}

/* Rebind semantic status text on the active theme scope. No warning/error color. */
.dark-theme,
.nature-theme,
.aquarell-theme {
  --absence-status-color: color-mix(in srgb, var(--ion-text-color) 80%, var(--app-surface-background));
  --absence-muted-color: color-mix(in srgb, var(--ion-text-color) 62%, var(--app-surface-background));
}



/* =========================================================
   Reduzierte Animationen
   ========================================================= */

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

/* =========================================================
   Toggles / Switches
   ========================================================= */

:root {
  /*
   * Ausgeschalteter Track:
   * neutral und ausreichend sichtbar auf hellen Hintergründen.
   */
  --app-toggle-track-background:
    color-mix(
      in srgb,
      var(--ion-text-color) 18%,
      var(--ion-item-background, var(--ion-background-color))
    );

  /*
   * Eingeschalteter Track:
   * gedämpfte Primärfarbe statt des kräftigen Plattform-Blaus.
   */
  --app-toggle-track-background-checked:
    color-mix(
      in srgb,
      var(--ion-color-primary) 72%,
      var(--ion-item-background, var(--ion-background-color))
    );

  --app-toggle-handle-background: #ffffff;
  --app-toggle-handle-background-checked: #ffffff;

  --app-toggle-handle-shadow:
    0 1px 3px rgb(0 0 0 / 18%),
    0 1px 1px rgb(0 0 0 / 10%);
}


/* Gemeinsame Grundlage für Android und iOS */

ion-toggle {
  --track-background:
    var(--app-toggle-track-background);

  --track-background-checked:
    var(--app-toggle-track-background-checked);

  --handle-background:
    var(--app-toggle-handle-background);

  --handle-background-checked:
    var(--app-toggle-handle-background-checked);

  --handle-box-shadow:
    var(--app-toggle-handle-shadow);
}


/* =========================================================
   Android / Material Design
   ========================================================= */

/*
 * Der Android-Toggle darf etwas kräftiger wirken als unter iOS,
 * soll aber die Theme-Farbe statt eines festen Android-Blaus nutzen.
 */
ion-toggle.md {
  --track-background-checked:
    color-mix(
      in srgb,
      var(--ion-color-primary) 65%,
      var(--ion-item-background, var(--ion-background-color))
    );

  --handle-background: #ffffff;
  --handle-background-checked: #ffffff;
}


/* =========================================================
   iOS
   ========================================================= */

/*
 * Die vorhandene Ionic-iOS-Geometrie bleibt bestehen.
 * Nur Farben, Abstand und Schatten werden etwas verfeinert.
 */
ion-toggle.ios {
  --handle-spacing: 2px;

  --track-background:
    color-mix(
      in srgb,
      var(--ion-text-color) 16%,
      var(--ion-item-background, var(--ion-background-color))
    );

  --track-background-checked:
    color-mix(
      in srgb,
      var(--ion-color-primary) 78%,
      var(--ion-item-background, var(--ion-background-color))
    );

  --handle-background: #ffffff;
  --handle-background-checked: #ffffff;
}


/* =========================================================
   Dark Theme
   ========================================================= */

.dark-theme {
  --app-toggle-track-background:
    color-mix(
      in srgb,
      var(--ion-text-color) 22%,
      var(--ion-item-background, var(--ion-background-color))
    );

  --app-toggle-track-background-checked:
    color-mix(
      in srgb,
      var(--ion-color-primary) 72%,
      var(--ion-item-background, var(--ion-background-color))
    );

  --app-toggle-handle-background: #e9ecef;
  --app-toggle-handle-background-checked: #ffffff;

  --app-toggle-handle-shadow:
    0 1px 3px rgb(0 0 0 / 35%),
    0 1px 1px rgb(0 0 0 / 22%);
}

.dark-theme ion-toggle.md {
  --track-background-checked:
    color-mix(
      in srgb,
      var(--ion-color-primary) 68%,
      var(--ion-item-background, var(--ion-background-color))
    );
}

.dark-theme ion-toggle.ios {
  --track-background-checked:
    color-mix(
      in srgb,
      var(--ion-color-primary) 74%,
      var(--ion-item-background, var(--ion-background-color))
    );
}


/* =========================================================
   Nature Theme
   ========================================================= */

.nature-theme {
  --app-toggle-track-background-checked:
    color-mix(
      in srgb,
      var(--ion-color-primary) 68%,
      white
    );
}

.nature-theme ion-toggle.md {
  --track-background-checked:
    color-mix(
      in srgb,
      var(--ion-color-primary) 62%,
      white
    );
}

.nature-theme ion-toggle.ios {
  --track-background-checked:
    color-mix(
      in srgb,
      var(--ion-color-primary) 72%,
      white
    );
}


/* =========================================================
   Aquarell Theme
   ========================================================= */

.aquarell-theme {
  --app-toggle-track-background-checked:
    color-mix(
      in srgb,
      var(--ion-color-primary) 72%,
      white
    );
}

.aquarell-theme ion-toggle.md {
  --track-background-checked:
    color-mix(
      in srgb,
      var(--ion-color-primary) 65%,
      white
    );
}

.aquarell-theme ion-toggle.ios {
  --track-background-checked:
    color-mix(
      in srgb,
      var(--ion-color-primary) 76%,
      white
    );
}


/* Optional: etwas Abstand zum rechten Rand einer Einstellungszeile */

.settings-item ion-toggle {
  margin-inline-end: 0.25rem;
}

/* Our Plan */

.ourPlan__tripDiv{
  padding: 0px 18px 0px 18px;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  /* display: table; */
}

.ourPlan__trip--running {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--ion-color-primary) 55%, transparent);
  background: color-mix(in srgb, var(--ion-color-primary) 6%, transparent);
  border-radius: 0.7rem;
}

.ourPlan__trip-status {
  margin: 0.2rem 0 0 0.3rem;
  color: var(--ion-color-medium);
  font-size: 0.78rem;
  line-height: 1.25;
}

.ourPlan__groupActions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem;
  margin-top: 0.35rem;
  padding-inline: 0.25rem;
}

.ourPlan__groupAction {
  --color: var(--ion-color-medium-shade);
  --padding-start: 0.45rem;
  --padding-end: 0.45rem;
  min-height: 1.9rem;
  margin: 0;
  font-size: 0.76rem;
  text-transform: none;
}

.ourPlan__groupAction ion-icon {
  font-size: 0.95rem;
}

.ourPlan__groupActionLabel--compact {
  display: none;
}

.dark-theme .ourPlan__trip--running {
  background: color-mix(in srgb, var(--ion-color-primary) 12%, transparent);
}



/* Mobile first: zunächst als Voreinstellung Handy */

.ourPlan__timeRouteGroup{
  display: table-cell;
  padding: 8px;
}
.ourPlan__timeGroup{
  display: table-cell;
  width: 30%;
  min-width: 6rem;
  padding: 0px 5px 0px 5px;
}
.ourPlan__routeGroup{
  display: table-cell;
      padding: 0px 5px 0px 5px;
}

.ourPlan__passengersGroup{
  display: table-cell;
  /* padding: 8px; */
  /* width: 10rem; */
  padding: 0px 5px 0px 5px;
}

.ourPlan__carDivGroup{
  /* display: table-cell; */
  /* display: table; */
  /* width: 60%; */
  /* width: 100%; */
  padding: 0px 5px 0px 5px;
}

.ourPlan__driverGroup{
  display: table;
  /* padding: 8px; */
  width: 10rem;
  padding: 0px 5px 0px 5px;
}

.ourPlan__driver {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ourPlan__driver-main {
  font-size: 0.88rem;
  line-height: 1.25;
}

.ourPlan__driver-status {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;

  margin-top: 0.12rem;

  color: var(--ion-color-medium);
  font-size: 0.78rem;
  line-height: 1.25;
}

.ourPlan__driver-status ion-icon {
  font-size: 0.95rem;
}

.ourPlan__driver-status--assignment {
  color: var(--ion-color-medium);
  font-weight: 500;
}

.ourPlan__driver-status:not(.ourPlan__driver-status--assignment) {
  color: var(--ion-color-medium);
  font-weight: 400;
  font-size: 0.72rem;
}

/* 2.8.2026 */
  .ourPlan__carDiv{
    display: table;
  }

/* Größere Smartphones / kleine Tablets */
@media (min-width: 450px) {
  .ourPlan__passengersGroup{
    display: table-cell;
    padding: 8px;
    /* width: 10rem; */
    /* min-width: 10rem; */
    width: 50%;
  }
  .ourPlan__driverGroup{
    display: table-cell;
    padding: 8px;
    /* width: 10rem; */
    /* min-width: 10rem; */
    width: 50%;
    padding: 0px 5px 0px 5px;
  }
  .ourPlan__carDiv{
    display: table;
  }
  .ourPlan__carDivSub{
    display: table;
    width: 100%;
  }
  .ourPlan__timeRouteGroup{
    width: 40%;
  }  

}

@media (min-width: 576px) and (max-width: 1024px){
  /* Erzwinge Route unter (statt neben) der Uhrzeit */
  .ourPlan__route{
    font-size: small;
  }
  .ourPlan__timeGroup{
    /* display: table-cell; */
    display: table;
  }
  /* .ourPlan__carDiv{
    display: table;
  } */
   .ourPlan__timeRouteGroup{
    width: 40%;
  }  

}
/* Größere Smartphones / kleine Tablets */
@media (min-width: 576px) {

  .ourPlan__timeRouteGroup{
    display: table-cell;
  }

  .ourPlan__routeGroup{
    display: table-cell;
  }
  .ourPlan__carDivGroup{
    /* width: 60%; */
    display: table-cell;
  }
  .ourPlan__tripDiv{
    display: table;
  }
}

/* Tablet */
@media (min-width: 768px) {
  .ourPlan__tripDiv{
    display: table;
  }
}

/* Laptop */
@media (min-width: 1024px) {
  .ourPlan__timeGroup{
    display: table-cell;
    /* display: block; */
  }
  /* Route wieder groß in der Hauptzeile */
  .ourPlan__route{
    font-size: unset;
  }
  .ourPlan__carDivGroup {
    width: unset;
  }
}



.ourPlan__time{
  font-size: 21px;
  font-weight: 600;
}


.aquarell-theme .ourPlan__carDiv{
  background: #fef3ef;
}
.nature-theme .ourPlan__carDiv{
  background: #66a18221;
}
.dark-theme .ourPlan__carDiv{
  background: #bfd6ff0d;
}
.ourPlan__carDiv{
  background: #bfd6ff29;
}

.ourPlan__carDiv{
  /* display: table-cell; */
  /* display: table; */
  width: 100%;
  border-radius: 15px;
  /* border: 1px #ededed solid; */
  
  margin-bottom: 10px;
  padding: 0px 10px 10px 10px;
  min-width: 0;
  box-sizing: border-box;
}


.ourPlan__carDiv {
  display: block;
}

.ourPlan__carDivLayout {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  width: 100%;
  min-width: 0;
}

.ourPlan__actionbuttonGroup{
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-end;
  align-self: flex-start;
  gap: 0.125rem;
  flex-basis: 44px;
  width: 44px;
  margin-inline-start: 0;
  padding: 0.125rem 0;
  text-align: right;
}

.ourPlan__carDivSub {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.375rem;
  min-width: 0;
}

.ourPlan__carDivSub > .ourPlan__passengersGroup,
.ourPlan__carDivSub > .ourPlan__driverGroup {
  min-width: 0;
}

.ourPlan__carDivSub > .ourPlan__passengersGroup {
  padding: 0;
}

.ourPlan__carDivGroup {
  padding: 8px;
  min-width: 0;
  box-sizing: border-box;
}

.ourPlan__carDivSub > .ourPlan__passengersGroup,
.ourPlan__carDivSub > .ourPlan__driverGroup {
  flex: 0 1 auto;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  row-gap: 0.125rem;
  padding: 0;
  box-sizing: border-box;
}

.ourPlan__carDivSub > .ourPlan__passengersGroup > .ourPlan__groupLabel,
.ourPlan__carDivSub > .ourPlan__driverGroup > .ourPlan__groupLabel {
  grid-column: 1;
  width: 1.75rem;
  margin: 0;
  --padding-start: 0;
  --padding-end: 0;
}

.ourPlan__carDivSub > .ourPlan__passengersGroup > .ourPlan__passengers,
.ourPlan__carDivSub > .ourPlan__driverGroup > .ourPlan__driver,
.ourPlan__carDivSub > .ourPlan__driverGroup > .ourPlan__vehicle-warning {
  grid-column: 1;
  min-width: 0;
}

@media (min-width: 1025px) {
  .ourPlan__carDivSub {
    flex-direction: row;
  }

  .ourPlan__carDivSub > .ourPlan__passengersGroup,
  .ourPlan__carDivSub > .ourPlan__driverGroup {
    flex: 1 1 0;
    width: auto;
  }
}

@media (min-width: 1200px) {
  .ourPlan__actionbuttonGroup {
    flex-basis: auto;
    width: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
  }
}

.ourPlan__quick-action ion-button {
  --color: var(--ion-color-medium-shade);
}

.ourPlan__quick-action--join ion-button {
  --color: var(--ion-color-primary);
}

.ourPlan__quick-action--leave ion-button {
  --color: var(--ion-color-warning-shade);
}

.ourPlan__quick-action--location-active ion-button {
  --color: var(--ion-color-success-shade);
}

.ourPlan__trip-chat-slot {
  display: contents;
}

.ourPlan__trip-chat ion-button {
  --color: var(--ion-color-medium);
  min-width: 44px;
  min-height: 44px;
}

.ourPlan__trip-chat--unread ion-button {
  --color: var(--ion-color-primary);
}

@media (max-width: 450px) {
  /* Keep the ride hierarchy, but do not spend three full insets on a phone. */
  .plan-day__list > ion-item.ourPlan_tripItem {
    --padding-start: 8px;
    --padding-end: 0;
    --inner-padding-end: 0;
  }

  .ourPlan__tripDiv {
    padding-inline: 8px;
  }

  .ourPlan__timeRouteGroup {
    padding-inline: 4px;
    max-width: 100%;
    box-sizing: border-box;
  }

  .ourPlan__carDivGroup {
    width: 100%;
    padding: 4px 0;
  }

  .ourPlan__carDiv {
    width: 100%;
    padding: 0 6px 8px;
    margin-bottom: 8px;
  }

  .ourPlan__actionbuttonGroup {
    flex-basis: 40px;
    width: 40px;
  }

  .ourPlan__carDivSub {
    gap: 0.25rem;
  }

  .ourPlan__groupActionLabel {
    display: none;
  }

  .ourPlan__groupActionLabel--compact {
    display: inline;
  }
}

@media (max-width: 340px) {
  .ourPlan__tripDiv {
    padding-inline: 4px;
  }

  .ourPlan__carDiv {
    padding-inline: 4px;
  }
}

@media (max-width: 420px) {
  :root {
    --ourplan-fab-edge: 12px;
    --ourplan-fab-top: calc(58px + var(--ion-safe-area-top, 0px));
  }

  #ourplan-content {
    padding-bottom: calc(var(--bottom-navigation-height) + 96px);
  }
}


.mini-button {
  --padding-start: 6px;
  --padding-end: 6px;
  --padding-top: 2px;
  --padding-bottom: 2px;

  --border-radius: 12px;

  min-height: 24px;
  height: 24px;

  font-size: 0.75rem;
}

.member-card {
  overflow: hidden;
  background: var(--plan-card-background);
  border: 1px solid var(--plan-card-border);
  border-radius: var(--app-surface-radius);
  box-shadow: var(--app-surface-shadow);

  padding: 10px;
  margin-top: 20px;
  margin-bottom: 20px;

}

.member-card {
  margin: 0 0 1rem;
}

.member-card ion-card-title {
  font-size: 1.05rem;
}

.member-card ion-item {
  --padding-start: 0;
}

.member-card ion-icon[slot="start"] {
  margin-inline-end: 0.75rem;
  color: var(--ion-color-medium);
  font-size: 1.25rem;
}

.member-card ion-label p {
  margin-bottom: 0.15rem;
  color: var(--ion-color-medium);
  font-size: 0.75rem;
}

.member-card ion-label h3,
.member-card ion-label a {
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.member-card__thumbnail {
  width: 4rem;
  height: 4rem;
}

.member-card__thumbnail img {
  object-fit: cover;
  border-radius: 50%;
}

/* Chat und Chat-Footer */

/* .chat-page {
  height: 100%;
} */

.chat-content {
  --padding-top: 0.75rem;
  --padding-bottom: 0.75rem;
}

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;

  min-height: 100%;
  padding-inline: 0.75rem;
}

.chat-footer {
  background: var(--ion-background-color);
  border-top: 1px solid
    color-mix(in srgb, var(--ion-color-medium) 22%, transparent);
}

.chat-composer {
  padding:
    0.4rem
    max(0.65rem, env(safe-area-inset-right))
    calc(0.4rem + env(safe-area-inset-bottom))
    max(0.65rem, env(safe-area-inset-left));

  background: var(--ion-background-color);
}

.chat-composer__recipients {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;

  width: 100%;
  min-height: 2.6rem;
  padding: 0.35rem 0.45rem;
  margin: 0 0 0.25rem;

  background: transparent;
  border: 0;
  border-radius: 0.6rem;

  color: var(--ion-text-color);
  font: inherit;
  text-align: start;
}

.chat-composer__recipients ion-icon {
  color: var(--ion-color-medium);
  font-size: 1.15rem;
}

.chat-composer__recipients-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chat-composer__recipients-label {
  color: var(--ion-color-medium);
  font-size: 0.72rem;
}

#chat-recipients-summary {
  overflow: hidden;

  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-composer__input-row {
  display: flex;
  align-items: flex-end;
  gap: 0.45rem;
}

.chat-typing-indicator {
  min-height: 1.2rem;
  padding: 0.1rem 0.75rem 0.25rem;
  color: var(--ion-color-medium);
  font-size: 0.78rem;
  line-height: 1.25;
}

.chat-typing-indicator[hidden] {
  display: none;
}

.chat-unread-badge {
  position: absolute;
  inset-block-start: 0.15rem;
  inset-inline-end: max(0.4rem, calc(50% - 1.5rem));
  min-width: 0.7rem;
  min-height: 0.7rem;
  padding: 0;
  box-sizing: content-box;
  --background: var(--ion-color-warning);
  --color: var(--ion-color-warning-contrast, var(--ion-color-dark));
  border: 2px solid var(--ion-tab-bar-background, var(--ion-background-color));
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(var(--ion-color-dark-rgb), 0.28);
  font-size: 0;
}

.chat-unread-badge.chat-unread-badge--count {
  min-width: 1.15rem;
  min-height: 1.15rem;
  padding-inline: 0.2rem;
  border-radius: 999px;
  font-size: 0.68rem;
  line-height: 1.15rem;
  font-weight: 700;
  text-align: center;
}

.chat-composer__textarea {
  flex: 1;
  min-width: 0;

  --background: color-mix(
    in srgb,
    var(--ion-color-medium) 10%,
    var(--ion-background-color)
  );
  --border-radius: 1.3rem;
  --padding-top: 0.65rem;
  --padding-bottom: 0.65rem;
  --padding-start: 0.9rem;
  --padding-end: 0.9rem;

  max-height: 8rem;
}

.chat-composer__send {
  flex: 0 0 auto;

  width: 2.75rem;
  height: 2.75rem;
  margin: 0;
  --padding-start: 0;
  --padding-end: 0;
}

:root {
  --app-tabbar-height: 56px;
}

/* .chat-footer {
  margin-bottom: var(--app-tabbar-height);
} */

/* ion-split-pane #chat ion-page  {
  height: calc(100% - var(--app-tabbar-height));
} */

/* ion-split-pane ion-tab#chat {
  bottom: var(--app-tabbar-height);
  height: auto !important;
} */

/* Kein zusätzlicher Abstand am Footer */
ion-split-pane ion-tab#chat .chat-footer {
  margin: 0;
}

ion-split-pane #chat > ion-page {
  /* height: calc(100% - var(--app-tabbar-height)) !important; */
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

ion-split-pane #chat > ion-page > ion-content {
  flex: 1 1 0;
  width: 100%;
  height: auto !important;
  min-height: 0;
}

/* Footer nicht selbst positionieren */
ion-split-pane #chat .chat-footer {
  position: relative;
  bottom: auto;
  margin: 0;
  flex-shrink: 0;
}
/* ion-split-pane #chat ion-content {
  height: auto;
} */

/* .fixed-floating-box-tab {
  position: absolute; 
  left: 16px;
  right: 16px;
  bottom: calc(env(safe-area-inset-bottom) + 16px); 
  z-index: 10;
}   */

.dialog-close-button {
  --padding-start: 8px;
  --padding-end: 8px;
  --border-radius: 50%;
  --color: var(--ion-color-medium-shade);

  width: 40px;
  min-width: 40px;
  height: 40px;
  margin-inline-start: 4px;
}

.dialog-close-button ion-icon {
  font-size: 1.5rem;
}

.dialog-close-button:hover {
  --background: color-mix(
    in srgb,
    var(--ion-color-medium) 12%,
    transparent
  );
}

.dialog-close-button:focus-visible {
  outline: 2px solid var(--ion-color-primary);
  outline-offset: 2px;
}

.actionElement{
  cursor: pointer;
}


/* Hilfe-Seiten */

.page-help {
  box-sizing: border-box;
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  padding: 1.25rem 1.25rem 3rem;

  color: var(--ion-text-color);
  font-size: 1rem;
  line-height: 1.55;
}

.page-help__intro {
  margin-bottom: 2rem;
}

.page-help__eyebrow {
  margin: 0 0 0.35rem;

  color: var(--ion-color-medium);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.page-help h1 {
  margin: 0 0 1.25rem;

  font-size: clamp(1.8rem, 7vw, 2.35rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.page-help h2 {
  margin: 0 0 0.75rem;

  font-size: clamp(1.3rem, 5.5vw, 1.7rem);
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.page-help p {
  margin: 0 0 1rem;
}

.page-help p:last-child {
  margin-bottom: 0;
}

.page-help__summary {
  padding: 1rem 1.1rem 1.1rem 1.75rem;

  background:
    color-mix(
      in srgb,
      var(--ion-color-primary) 7%,
      var(--ion-background-color)
    );

  border-inline-start:
    0.25rem solid
    color-mix(
      in srgb,
      var(--ion-color-primary) 70%,
      var(--ion-background-color)
    );
  border-radius: 0.75rem;
}

.page-help__summary h2 {
  margin-bottom: 0.5rem;
  color:
    color-mix(
      in srgb,
      var(--ion-color-primary) 75%,
      var(--ion-text-color)
    );
  font-size: 1.15rem;
}

.page-help__section {
  margin-top: 2.25rem;
}

.page-help ul,
.page-help ol {
  margin: 0.75rem 0 1rem;
  padding-inline-start: 1.4rem;
}

.page-help li {
  margin-bottom: 0.55rem;
  padding-inline-start: 0.15rem;
}

.page-help strong {
  font-weight: 650;
}

.page-help__notice {
  margin: 1rem 0;
  padding: 1rem 1.1rem;

  background:
    color-mix(
      in srgb,
      var(--ion-color-warning) 10%,
      var(--ion-background-color)
    );
  border-inline-start: 0.25rem solid var(--ion-color-warning);
  border-radius: 0.75rem;
}

@media (max-width: 360px) {
  .page-help {
    padding-inline: 1rem;
  }

  .page-help__section {
    margin-top: 1.85rem;
  }
}

/* Hilfe für Anfänger oben auf den Hauptseiten  */

.page-hint {

    display: flex;
    align-items: flex-start;

    position: relative;

    margin: 0 0 1.25rem;
    padding: 0.9rem 1rem;

    border-radius: 16px;

    background:
        color-mix(
            in srgb,
            var(--ion-color-primary) 6%,
            var(--ion-background-color)
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--ion-color-primary) 18%,
            transparent
        );
}

.page-hint__icon {

    flex: none;

    margin-right: 0.9rem;

    color: var(--ion-color-primary);

    font-size: 1.7rem;
}

.page-hint__content {

    flex: 1;
}

.page-hint__title {

    margin-bottom: .2rem;

    font-size: 1rem;
    font-weight: 700;

    color: var(--ion-text-color);
}

.page-hint__text {

    color: var(--ion-color-medium-shade);

    line-height: 1.4;
}

.page-hint__button {

    margin-top: .45rem;

    margin-left: -.45rem;
}

.page-hint__close {

    position: absolute;

    top: .45rem;
    right: .45rem;

    width: 30px;
    height: 30px;

    padding: 0;

    border: none;

    border-radius: 50%;

    background: transparent;

    color: var(--ion-color-medium);

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}

.page-hint__close:hover {
    background:
        color-mix(
            in srgb,
            var(--ion-color-medium) 12%,
            transparent
        );
}

.page-hint__close ion-icon {
    font-size: 1.15rem;
}

/*
 * Teilnehmer eines Autos in „Unser Plan“
 */

.ride-passengers {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;

  min-width: 0;
  width: 100%;
}

.ride-participant {
  min-width: 0;
  min-height: 1.55rem;
  color: var(--ion-text-color);
  font-size: 0.88rem;
  line-height: 1.25;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;

  width: fit-content;
  max-width: 100%;
}

.ride-participant__identity {
  flex: 1 1 auto;
  min-width: 0;
}

.ride-participant__name-highlight {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;

  min-width: 0;
  max-width: 100%;
  padding: 0.08rem 0;

  border-radius: 0.38rem;
}

.ride-participant__name {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.ride-participant__read-status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;

  color: var(--ion-color-medium);
  font-size: 0.76rem;
  line-height: 1;
  opacity: 0.72;
}

.ride-participant__read-status--read {
  color: var(--ion-color-primary);
  opacity: 1;
}

.ride-participant__read-status ion-icon {
  display: block;
  font-size: 1em;
}

.ride-participant__status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;

  min-width: 0;
  margin-inline-start: 0;

  color: var(--ion-color-medium);
  font-size: 0.78rem;
  line-height: 1;
  white-space: nowrap;
}


/*
 * Aktueller User
 */

.current-user-name {
  /* A current-user marker is descriptive, not an interactive link. */
  color: var(--ion-text-color);
  font-weight: 600;
}

.current-user-name__me {
  color: var(--ion-color-medium);
  font-size: 0.9em;
  font-weight: 400;
  opacity: 1;
}

/*
 * Eigene Kinder
 */

.ride-participant--own-child .ride-participant__name-highlight {
  background:
    color-mix(
      in srgb,
      var(--ion-color-primary) 6%,
      transparent
    );
}

.ride-participant--own-child .ride-participant__name {
  font-weight: 600;
}


/*
 * Alle Kinder
 */

.ride-participant__child-icon {
  flex: 0 0 auto;

  color: var(--ion-color-medium-shade);
  font-size: 0.78rem;
}




/*
 * Aktuelle Fassung gesehen
 */

.ride-participant__seen {
  color: var(--ion-color-primary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: -0.13em;

  /*
   * Die negative Buchstabenweite lässt die beiden Häkchen
   * wie ein kompaktes Doppelhäkchen erscheinen.
   */
  padding-inline-end: 0.13em;
}


/*
 * Leere Teilnehmerliste
 */

.ride-passengers--empty {
  color: var(--ion-color-medium);
  font-size: 0.82rem;
  font-style: italic;
}


/*
 * Schmale Screens
 */

@media (max-width: 420px) {
  .ride-passengers {
    gap: 0.18rem;
  }

  .ride-participant {
    min-height: 1.65rem;
    font-size: 0.9rem;
  }

  .ride-participant__name-highlight {
    gap: 0.2rem;
    padding-inline: 0;
  }

  .ride-participant__read-status {
    font-size: 0.72rem;
  }
}


/*
 * Dark Theme: Hervorhebung etwas verstärken
 */

.dark-theme .ride-participant--own-child .ride-participant__name-highlight {
  background:
    color-mix(
      in srgb,
      var(--ion-color-primary) 12%,
      transparent
    );
}

/* Popover für die Teilnehmer in Our Plan (Passengers/Participants) */

.participant-popover {
  min-width: 0;
}

.participant-popover__description {
  margin: 0 0 0.75rem;

  color: var(--ion-color-medium-shade);
  font-size: 0.84rem;
  line-height: 1.4;
}

.participant-popover__list {
  padding: 0;
  background: transparent;
}

.participant-option {
  --min-height: 3.5rem;
  --padding-start: 0.55rem;
  --inner-padding-end: 0.65rem;
  --background: transparent;

  margin-block: 0.12rem;

  border-radius: 0.7rem;
}

.participant-option__checkbox {
  margin-inline-end: 0.75rem;
}

.participant-option__label {
  min-width: 0;
  margin-block: 0.5rem;
}

.participant-option__name-row {
  display: flex;
  align-items: center;
  gap: 0.28rem;

  min-width: 0;
  width: fit-content;
  max-width: 100%;
  padding: 0.08rem 0.28rem;

  border-radius: 0.38rem;
}

.participant-option__name {
  overflow: hidden;

  min-width: 0;

  color: var(--ion-text-color);
  font-size: 0.95rem;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.participant-option__child-icon {
  flex: 0 0 auto;

  color: var(--ion-color-medium-shade);
  font-size: 0.78rem;
}

.participant-option__status {
  display: flex;
  align-items: center;
  gap: 0.3rem;

  margin-top: 0.18rem;
  padding-inline-start: 0.28rem;

  color: var(--ion-color-medium-shade);
  font-size: 0.76rem;
  line-height: 1.25;
}

.participant-option__status[hidden] {
  display: none;
}

.participant-option__status ion-icon {
  flex: 0 0 auto;
  font-size: 0.88rem;
}




/* Eigene Kinder */

.participant-option--own-child
.participant-option__name-row {
  background:
    color-mix(
      in srgb,
      var(--ion-color-primary) 6%,
      transparent
    );
}

.participant-option--own-child
.participant-option__name {
  font-weight: 600;
}


/* Neuer Mitfahrwunsch */

.participant-option__name-row .ride-change-chip {
  margin-inline-start: 0;
}


/* Mitfahrwunsch zurückgezogen */

.participant-option--wish-withdrawn {
  --background:
    color-mix(
      in srgb,
      var(--ion-color-warning) 7%,
      transparent
    );
}

.participant-option--wish-withdrawn
.participant-option__status {
  color:
    color-mix(
      in srgb,
      var(--ion-color-warning-shade) 82%,
      var(--ion-text-color)
    );

  font-weight: 550;
}


/* Bereits einem anderen Fahrzeug zugeordnet */

.participant-option--already-driver {
  --background: transparent;
  color: var(--ion-color-medium);
}

.participant-option--already-driver .participant-option__status {
  color: var(--ion-color-medium);
}

.participant-option--other-vehicle {
  --background:
    color-mix(
      in srgb,
      var(--ion-color-warning) 7%,
      transparent
    );
}

.participant-option--other-vehicle
.participant-option__status {
  color:
    color-mix(
      in srgb,
      var(--ion-color-warning-shade) 78%,
      var(--ion-text-color)
    );
}


/* Im Editor in dieses Fahrzeug verschieben */

.participant-option--move-here {
  --background:
    color-mix(
      in srgb,
      var(--ion-color-primary) 10%,
      transparent
    );
}

.participant-option--move-here
.participant-option__status {
  color: var(--ion-color-primary-shade);
  font-weight: 600;
}


/* Einheitliches Absenz-Design */

.participant-option--absent {
  --background: var(
    --absence-background,
    color-mix(
      in srgb,
      var(--ion-color-tertiary) 8%,
      transparent
    )
  );
}

.participant-option--absent
.participant-option__name {
  color: var(--absence-muted-color);
}

.participant-option--absent
.participant-option__status {
  color: var(--absence-status-color);
}

.participant-option--absent
.participant-option__checkbox {
  opacity: 0.58;
}

.ride-participant--absent {
  color: var(--absence-muted-color);
}

.ride-participant--absent .ride-participant__name {
  color: var(--absence-muted-color);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.ride-participant__absence-status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  margin-inline-start: 0.35rem;
  color: var(--absence-status-color);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
}


/* Kleine Erklärung der Doppelhäkchen */

.participant-popover__legend {
  display: flex;
  align-items: center;
  gap: 0.45rem;

  margin-top: 0.75rem;
  padding-top: 0.65rem;

  border-top:
    1px solid
    color-mix(
      in srgb,
      var(--ion-color-medium) 18%,
      transparent
    );

  color: var(--ion-color-medium-shade);
  font-size: 0.74rem;
}

.participant-popover__legend-checks {
  color: var(--ion-color-primary);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: -0.13em;
  padding-inline-end: 0.13em;
}


/* Dark Theme */

.dark-theme
.participant-option--own-child
.participant-option__name-row {
  background:
    color-mix(
      in srgb,
      var(--ion-color-primary) 12%,
      transparent
    );
}

/* Neue Einstellungen für Popover */
/* ==========================================================================
   Ride Field Popover
   ========================================================================== */

.ride-field-popover {
  --width: min(420px, calc(100vw - 24px));
  --max-width: 420px;
  --max-height: calc(100dvh - 24px);

  --border-radius: 18px;
  --box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
}

.ride-field-popover::part(content) {
  overflow: hidden;
  border-radius: var(--border-radius);
}


/* ==========================================================================
   Layout
   ========================================================================== */

.ride-field-popover__layout {
  display: flex;
  flex-direction: column;

  width: 100%;
  height: 100%;

  overflow: hidden;

  background: var(--ion-background-color);
  color: var(--ion-text-color);
}


/* ==========================================================================
   Header
   ========================================================================== */

.ride-field-popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  flex: 0 0 auto;

  min-height: 56px;

  padding: 8px 12px 8px 20px;

  border-bottom: 1px solid var(--ion-color-step-150);
}

.ride-field-popover__title {
  flex: 1;

  margin: 0;

  overflow: hidden;

  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.ride-field-popover__close {
  flex: 0 0 auto;

  margin: 0;

  --padding-start: 8px;
  --padding-end: 8px;
  --padding-top: 8px;
  --padding-bottom: 8px;

  --border-radius: 999px;
}


/* ==========================================================================
   Body
   ========================================================================== */

.ride-field-popover__body {
  flex: 1 1 auto;

  /*
   * Ganz wichtig bei Flexbox!
   */
  min-height: 0;

  overflow-y: auto;
  overflow-x: hidden;

  padding: 20px;

  overscroll-behavior: contain;

  -webkit-overflow-scrolling: touch;
}

.ride-editor__route-choices:not(:empty) {
  margin-block-start: var(--app-space-3, 12px);
}

.ride-editor__route-choices-title {
  color: var(--ion-color-medium);
  font-size: 0.875rem;
  font-weight: 600;
  margin-block-end: var(--app-space-2, 8px);
}

.ride-editor__route-choice {
  --padding-start: 0;
  --inner-padding-end: 0;
  cursor: pointer;
}

.ride-editor__route-choice ion-radio {
  width: 100%;
  white-space: normal;
}


/* ==========================================================================
   Footer
   ========================================================================== */

.ride-field-popover__footer {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  gap: 10px;

  flex: 0 0 auto;

  padding: 14px 20px;

  border-top: 1px solid var(--ion-color-step-150);

  background: var(--ion-background-color);
}

.ride-field-popover__footer ion-button {
  margin: 0;
}


/* ==========================================================================
   Scrollbar (Desktop)
   ========================================================================== */

.ride-field-popover__body::-webkit-scrollbar {
  width: 8px;
}

.ride-field-popover__body::-webkit-scrollbar-track {
  background: transparent;
}

.ride-field-popover__body::-webkit-scrollbar-thumb {
  background: var(--ion-color-step-300);
  border-radius: 999px;
}

.ride-field-popover__body::-webkit-scrollbar-thumb:hover {
  background: var(--ion-color-step-400);
}

/* Highlight, Fehler usw.  */

.app-highlight {
    animation: appHighlight 2.2s ease;
}

@keyframes appHighlight {

    0% {
        background-color:
            color-mix(in srgb,
                var(--ion-color-primary) 18%,
                transparent);
        box-shadow:
            inset 4px 0 0 var(--ion-color-primary);
    }

    30% {
        background-color:
            color-mix(in srgb,
                var(--ion-color-primary) 12%,
                transparent);
        box-shadow:
            inset 4px 0 0 var(--ion-color-primary);
    }

    100% {
        background-color: transparent;
        box-shadow:
            inset 0 0 0 transparent;
    }
}

/* Anfängliches Verstecken des Popovers, um es dann nach dem Positionieren ohne Ruckeln anzuzeigen */
.ride-field-popover__hidden{
  opacity: 0;
}

/* Hervorhebung des aktiven Elements */
.ride-field-trigger--active {
  position: relative;
  z-index: 1;

  background: color-mix(
    in srgb,
    var(--ion-color-primary) 10%,
    transparent
  );

  box-shadow:
    0 0 0 2px color-mix(
      in srgb,
      var(--ion-color-primary) 40%,
      transparent
    );

  border-radius: 8px;
}

/* Zusätzlicher Platz über dem Auto-Feld */
.ourPlan_tripItem{
  padding-top: 10px;
}


/* Kontext für Modal zur Fahrt zu Teilnehmern, Fahrern etc. */

.ride-field-dialog__context {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem var(--mcp-spacing-row);

  margin-bottom: 0.75rem;

  color: var(--ion-color-medium);
  font-size: 0.875rem;
  line-height: 1.35;
}

.ride-field-dialog__context-part {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}

.ride-field-dialog__context-part ion-icon {
  flex: 0 0 auto;
  font-size: 1rem;
}

.ride-field-dialog__context-time {
  flex: 0 0 auto;
  color: var(--ion-text-color);
  font-weight: 600;
}

.ride-field-dialog__context-route {
  min-width: 0;
  overflow-wrap: anywhere;
}

.ride-field-popover .ride-field-dialog__context {
  display: none;
}

.ride-field-modal .ride-field-dialog__context {
  display: flex;
}

.ride-route-editor__time-info {
    display: none;

    align-items: center;
    gap: 0.45rem;

    margin-top: 0.75rem;

    color: var(--ion-color-medium);
    font-size: 0.9rem;
    line-height: 1.35;
}

.ride-route-editor__time-info--visible {
    display: flex;
}

.ride-route-editor__time-info ion-icon {
    flex: 0 0 auto;

    font-size: 1.15rem;
    color: var(--ion-color-primary);
}

/* Wiederholungs-Editor in "Mein Plan" */

.ride-recurrence-editor {
    display: grid;
    gap: 0.75rem;
}

.ride-recurrence-editor__modes {
    display: block;
}

.ride-recurrence-editor__custom {
    display: none;

    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;

    padding: 0 1rem 0.75rem;
}

.ride-recurrence-editor__custom--visible {
    display: flex;
}

.ride-recurrence-editor__interval {
    width: 5rem;
}

.ride-recurrence-editor__unit {
    min-width: 8.5rem;
    flex: 1 1 auto;
}

.ride-recurrence-editor__custom-prefix {
    color: var(--ion-color-medium);
}

.ride-recurrence-editor__auto-select {
    margin-top: 0.25rem;
}

@media (max-width: 380px) {
    .ride-recurrence-editor__custom {
        display: none;
        grid-template-columns: auto 1fr;
    }

    .ride-recurrence-editor__custom--visible {
        display: grid;
    }

    .ride-recurrence-editor__custom-prefix {
        grid-column: 1 / -1;
    }

    .ride-recurrence-editor__interval,
    .ride-recurrence-editor__unit {
        width: 100%;
    }
}

/* Settings - Carpool-Einstellungen  */

.settings-page {
  --settings-page-space: 16px;
  --settings-card-radius: 12px;

  padding:
    16px
    0
    calc(32px + var(--ion-safe-area-bottom, 0px));
}


/* Einleitende Infobox */

.settings-info {
  display: flex;
  gap: 14px;
  align-items: flex-start;

  margin:
    0
    var(--settings-page-space)
    24px;
  padding: 16px;

  border: 1px solid
    color-mix(
      in srgb,
      var(--ion-color-primary) 22%,
      var(--ion-color-step-200, #d7d8da)
    );
  border-radius: var(--settings-card-radius);

  background:
    color-mix(
      in srgb,
      var(--ion-color-primary) 7%,
      var(--ion-background-color)
    );
}

.settings-info__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;

  width: 40px;
  height: 40px;

  border-radius: 50%;
  background:
    color-mix(
      in srgb,
      var(--ion-color-primary) 14%,
      transparent
    );

  color: var(--ion-color-primary);
  font-size: 1.35rem;
}

.settings-info__content {
  min-width: 0;
}

.settings-info__title {
  margin: 0 0 6px;

  color: var(--ion-text-color);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.settings-info__text {
  margin: 0;

  color: var(--ion-color-medium);
  font-size: 0.91rem;
  line-height: 1.45;
}


/* Abschnitte */

.settings-section {
  /* Compatibility geometry for pages not yet opted into the pilot. */
  margin: 18px 0 var(--mcp-spacing-section);
}

.settings-section__title {
  margin: 0 var(--settings-page-space) var(--mcp-spacing-row);
  color: var(--ion-color-medium);
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.045em;
  line-height: 1.3;
  text-transform: uppercase;
}

.settings-section__hint {
  margin:
    8px
    calc(var(--settings-page-space) + 4px)
    0;

  color: var(--ion-color-medium);
  font-size: 0.84rem;
  line-height: 1.4;
}


/* Listen und Items */

.settings-list {
  margin-top: 0;
  margin-bottom: 0;

  border:
    1px
    solid
    var(--ion-color-step-200, #d7d8da);
  border-radius: var(--settings-card-radius);

  background: var(--ion-item-background);
  overflow: hidden;
}

.settings-item {
  --background: var(--ion-item-background);
  --min-height: 70px;
  --padding-start: 16px;
  --inner-padding-end: 10px;
}

.settings-item > ion-icon[slot="start"] {
  margin-inline-end: 16px;

  color: var(--ion-color-primary);
  font-size: 1.3rem;
}

.settings-item__label {
  min-width: 0;
}

.settings-item__title {
  margin-bottom: 4px;

  color: var(--ion-text-color);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
}

.settings-item__value {
  overflow: hidden;

  color: var(--ion-color-medium);
  font-size: 0.9rem;
  line-height: 1.35;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-item__value--code {
  color: var(--ion-text-color);
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    "Liberation Mono",
    monospace;
}

.settings-item__value--missing {
  color: var(--ion-color-warning-shade);
}

.settings-item__icon-action {
  --padding-start: 10px;
  --padding-end: 10px;

  margin-inline-start: 6px;
}


@media (max-width: 420px) {
  .settings-page {
    --settings-page-space: 12px;
  }

  .settings-info {
    gap: 11px;
    padding: 14px;
  }

  .settings-item {
    --padding-start: 14px;
    --inner-padding-end: 6px;
  }

  .settings-item > ion-icon[slot="start"] {
    margin-inline-end: 12px;
  }
}

/*
 * Erste Sektion ohne zusätzlichen oberen Abstand
 */

.settings-section--first {
  margin-top: 0;
}


/*
 * Toggle-Items
 */

.settings-item--toggle {
  --min-height: 78px;
}

/* .settings-item--toggle ion-toggle {
  width: 100%;
  min-width: 0;
}

.settings-item--toggle ion-toggle::part(label) {
  width: 100%;
  min-width: 0;
  margin-inline-end: 16px;
}

.settings-item__toggle-content {
  min-width: 0;
} */

.settings-item__value--wrap {
  overflow: visible;
  text-overflow: initial;
  white-space: normal;
}


/*
 * Auswahlkarten
 */

.settings-choice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;

  margin-inline: var(--settings-page-space);
}

.settings-choice {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: 13px;
  align-items: center;

  width: 100%;
  min-height: 76px;
  padding: 14px 16px;

  border:
    1px
    solid
    var(--ion-color-step-200, #d7d8da);
  border-radius: var(--settings-card-radius);

  background: var(--ion-item-background);
  color: var(--ion-text-color);

  font: inherit;
  text-align: start;
  cursor: pointer;

  -webkit-tap-highlight-color: transparent;

  transition:
    border-color 140ms ease,
    background-color 140ms ease,
    box-shadow 140ms ease,
    transform 100ms ease;
}

.settings-choice:active {
  transform: scale(0.995);
}

.settings-choice:focus-visible {
  outline:
    2px
    solid
    var(--ion-color-primary);
  outline-offset: 2px;
}

.settings-choice--selected {
  border-color:
    color-mix(
      in srgb,
      var(--ion-color-primary) 65%,
      var(--ion-color-step-200, #d7d8da)
    );

  background:
    color-mix(
      in srgb,
      var(--ion-color-primary) 7%,
      var(--ion-item-background)
    );

  box-shadow:
    0 0 0 1px
    color-mix(
      in srgb,
      var(--ion-color-primary) 18%,
      transparent
    );
}

.settings-choice__indicator {
  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--ion-color-medium);
  font-size: 1.3rem;
}

.settings-choice--selected .settings-choice__indicator {
  color: var(--ion-color-primary);
}

.settings-choice__icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  border-radius: 50%;

  background:
    color-mix(
      in srgb,
      var(--ion-color-primary) 10%,
      transparent
    );

  color: var(--ion-color-primary);
  font-size: 1.25rem;
}

.settings-choice__content {
  display: block;
  min-width: 0;
}

.settings-choice__title {
  display: block;

  color: var(--ion-text-color);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.settings-choice__subtitle {
  display: block;
  margin-top: 4px;

  color: var(--ion-color-medium);
  font-size: 0.87rem;
  line-height: 1.35;
}


/*
 * Erklärung zur gewählten Methode
 */

.cost-model-explanation {
  margin-top: 12px;
}

.settings-info--compact {
  margin-bottom: 0;
}

.settings-info__secondary {
  margin: 8px 0 0;

  color: var(--ion-color-medium);
  font-size: 0.86rem;
  line-height: 1.45;
}


/*
 * Aufklappbarer Zusatzhinweis
 */

.settings-disclosure,
.mcp-settings-help {
  display: block;
  margin: var(--mcp-spacing-row) var(--settings-page-space);
  border: 1px solid var(--mcp-border-subtle);
  border-radius: var(--mcp-radius-card);
  background: var(--mcp-surface-card);
  overflow: hidden;
}

.settings-disclosure > summary,
.mcp-settings-help ion-item[slot="header"] {
  color: var(--ion-text-color);
  font-size: 0.95rem;
  font-weight: 500;
}

.settings-disclosure > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mcp-spacing-row);
  min-height: var(--mcp-settings-row-height);
  box-sizing: border-box;
  padding: var(--mcp-spacing-row) var(--settings-page-space);
  cursor: pointer;
  list-style: none;
}

.settings-disclosure > summary::-webkit-details-marker {
  display: none;
}

.settings-disclosure > summary::after {
  content: "›";
  flex: 0 0 auto;
  color: var(--ion-color-medium);
  font-size: var(--mcp-icon-size);
  transform: rotate(90deg);
  transition: transform 160ms ease;
}

.settings-disclosure[open] > summary::after {
  transform: rotate(270deg);
}

.settings-disclosure__summary-main {
  display: flex;
  align-items: center;
  gap: var(--mcp-spacing-row);
  min-width: 0;
}

.settings-disclosure__summary-main ion-icon {
  flex: 0 0 auto;
  color: var(--ion-color-primary);
  font-size: var(--mcp-icon-size);
}

.settings-disclosure__content,
.mcp-settings-help .settings-example-text {
  margin: 0;
  padding: 0 var(--settings-page-space) var(--settings-page-space);
  color: var(--ion-color-medium);
  font-size: 0.9rem;
  line-height: 1.45;
}

.mcp-settings-help ion-item[slot="header"] {
  --background: var(--mcp-surface-card);
  --min-height: var(--mcp-settings-row-height);
  --padding-start: var(--settings-page-space);
  --inner-padding-end: var(--settings-page-space);
  --border-width: 0;
}


/*
 * Versteckte Elemente
 */

.carpool-cost-sharing [hidden] {
  display: none !important;
}


/*
 * Kleinere Displays
 */

@media (max-width: 420px) {

  .settings-choice {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;

    min-height: 70px;
    padding: 13px 14px;
  }

  .settings-choice__icon {
    display: none;
  }

  .settings-choice__title {
    font-size: 0.96rem;
  }

  .settings-choice__subtitle {
    font-size: 0.84rem;
  }

  .settings-disclosure__content {
    padding-inline-start: 16px;
  }
}

.settings-item--toggle {
  --min-height: 84px;
  --padding-start: 16px;
  --inner-padding-end: 14px;
}

.settings-item--toggle .settings-item__label {
  min-width: 0;
  margin-top: 12px;
  margin-bottom: 12px;
  margin-inline-end: 14px;
}

.settings-item--toggle ion-toggle[slot="end"] {
  flex: 0 0 auto;
  margin-inline-start: 8px;
}


/*
 * Gemeinsame Zeilen mit einem bedienbaren Element.
 *
 * Ionic reserviert in Toggles und Selects rechts Platz für den Track bzw.
 * den Indikator. Ohne eine explizite Label-Regel kann der Shadow-DOM-Default
 * lange fachliche Beschriftungen einzeilig abschneiden. Das Muster hält das
 * Bedienelement rechts stabil und erlaubt dem bedeutungstragenden Label,
 * innerhalb des verbleibenden Platzes umzubrechen.
 */
.settings-control-row,
.settings-item--toggle,
.ourplan-warning-setting__item,
.advanced-personal-setting__item,
.calendar-export-setting__item {
  --min-height: 56px;
}


.settings-control-row > ion-toggle,
.settings-control-row > ion-select,
.settings-control-row > ion-input,
.settings-control-row > ion-radio,
.settings-item--toggle > ion-toggle,
.ourplan-warning-setting__item > ion-toggle,
.advanced-personal-setting__item > ion-toggle,
.advanced-personal-setting__item > ion-select,
.advanced-personal-setting__item > ion-input,
.calendar-export-setting__item > ion-toggle,
.calendar-export-setting__item > ion-select,
.calendar-export-setting__item > ion-input {
  width: 100%;
  min-width: 0;
}

.settings-control-row > ion-radio {
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

.settings-control-row > ion-radio::part(container) {
  flex: 0 0 auto;
}


.settings-control-row > ion-toggle::part(label),
.settings-control-row > ion-radio::part(label),
.settings-item--toggle > ion-toggle::part(label),
.ourplan-warning-setting__item > ion-toggle::part(label),
.advanced-personal-setting__item > ion-toggle::part(label),
.calendar-export-setting__item > ion-toggle::part(label) {
  min-width: 0;
  overflow: visible;

  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
  line-height: 1.35;
}

.settings-control-row > ion-radio::part(label) {
  display: block;
  flex: 1 1 auto;
  margin-inline-start: 8px;
  text-align: left;
}


.settings-control-row > ion-select::part(label),
.settings-control-row > ion-input::part(label),
.advanced-personal-setting__item > ion-select::part(label),
.advanced-personal-setting__item > ion-input::part(label),
.calendar-export-setting__item > ion-select::part(label),
.calendar-export-setting__item > ion-input::part(label) {
  white-space: normal;
  overflow-wrap: anywhere;
  text-overflow: clip;
  line-height: 1.35;
}


.settings-control-row > ion-label,
.settings-item > ion-label.settings-item__label,
.settings-item--toggle > ion-label {
  flex: 1 1 0;
  min-width: 0;

  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}

/*
 * The cost-sharing period switch has a real two-line description. It uses the
 * regular settings item rhythm instead of the larger spacing intended for
 * long, standalone toggle controls. The end toggle is an icon-sized control,
 * not a full-width form field.
 */
.cost-start-date-toggle {
  --min-height: 70px;
}

.cost-start-date-toggle .settings-item__label {
  margin-top: 8px;
  margin-bottom: 8px;
}

.cost-start-date-toggle > ion-toggle[slot="end"] {
  width: auto;
  min-width: 0;
}

.vehicle-assignment-mode__copy {
  display: grid;
  min-width: 0;
  gap: 3px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.vehicle-assignment-mode__copy strong {
  color: var(--ion-text-color);
  font-weight: 600;
  line-height: 1.3;
}

.vehicle-assignment-mode__copy small {
  color: var(--ion-color-medium);
  font-size: 0.82rem;
  line-height: 1.35;
}

.our-plan-car-picker {
  display: grid;
  gap: var(--settings-control-gap, 0.5rem);
}

.our-plan-car-picker__item {
  --min-height: 56px;
  --padding-start: var(--settings-control-padding, 0.75rem);
  --inner-padding-end: var(--settings-control-padding, 0.75rem);
  --background: var(--ion-item-background, var(--ion-background-color));

  overflow: hidden;
  border: 1px solid var(--app-surface-border);
  border-radius: var(--settings-control-radius, 0.75rem);
}

.our-plan-car-picker__item::part(native) {
  border-radius: inherit;
}

.our-plan-car-picker__item:has(.our-plan-car-picker__radio.radio-checked),
.our-plan-car-picker__item:has(.our-plan-car-picker__radio[aria-checked="true"]) {
  --background: color-mix(
    in srgb,
    var(--ion-color-primary) 9%,
    var(--ion-item-background, var(--ion-background-color))
  );
  border-color: color-mix(
    in srgb,
    var(--ion-color-primary) 34%,
    var(--app-surface-border)
  );
}

.our-plan-car-picker__radio {
  width: 100%;
  min-width: 0;
  margin: 0;
  align-items: center;
  justify-content: flex-start;
  text-align: left;
}

.our-plan-car-picker__radio::part(container) {
  flex: 0 0 auto;
}

.our-plan-car-picker__radio::part(label) {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  margin-inline-start: var(--settings-control-gap, 0.5rem);
  overflow: visible;
  white-space: normal;
  text-align: left;
}

.our-plan-car-picker__copy {
  display: grid;
  min-width: 0;
  gap: calc(var(--settings-control-gap, 0.5rem) / 2);
  text-align: left;
}

.our-plan-car-picker__primary {
  color: var(--ion-text-color);
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: break-word;
}

.our-plan-car-picker__secondary {
  color: var(--ion-color-medium);
  font-size: 0.82rem;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.settings-item__title {
  overflow: visible;
  white-space: normal;
}

.settings-item__value--wrap {
  overflow: visible;
  text-overflow: initial;
  white-space: normal;
}

@media (max-width: 420px) {
  .settings-item--toggle {
    --padding-start: 14px;
    --inner-padding-end: 12px;
  }

  .settings-item--toggle .settings-item__label {
    margin-inline-end: 8px;
  }

  .settings-item--toggle ion-toggle[slot="end"] {
    margin-inline-start: 4px;
  }
}

/* Andere Verkehrsmittel - Icons wählen  */

.settings-icon-choice-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;

  margin-inline: var(--settings-page-space, 16px);
}

.settings-icon-choice {
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: center;
  justify-content: center;

  min-width: 0;
  min-height: 82px;
  padding: 10px 6px;

  border: 1px solid var(--ion-color-step-200, #d7d8da);
  border-radius: var(--settings-card-radius, 12px);

  background: var(--ion-item-background);
  color: var(--ion-color-medium);

  font: inherit;
  cursor: pointer;
}

.settings-icon-choice--selected {
  border-color: var(--ion-color-primary);

  background:
    color-mix(
      in srgb,
      var(--ion-color-primary) 9%,
      var(--ion-item-background)
    );

  color: var(--ion-color-primary);
}

.settings-icon-choice:focus-visible {
  outline: 2px solid var(--ion-color-primary);
  outline-offset: 2px;
}

.settings-icon-choice__visual {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 34px;
  font-size: 1.8rem;
}

.settings-icon-choice__none {
  font-size: 1.7rem;
  line-height: 1;
}

.settings-icon-choice__label {
  overflow: hidden;
  width: 100%;

  color: var(--ion-color-medium);
  font-size: 0.75rem;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-icon-choice--selected .settings-icon-choice__label {
  color: var(--ion-color-primary);
  font-weight: 600;
}

.settings-item--danger {
  --color: var(--ion-color-danger);
}

.settings-item--danger ion-icon {
  color: var(--ion-color-danger);
}

@media (max-width: 360px) {
  .settings-icon-choice-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.settings-section__hint {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.settings-section__hint ion-icon {
  flex: 0 0 auto;

  margin-top: 2px;

  color: var(--ion-color-primary);
  font-size: 1rem;
}

:root {
  --settings-page-space: 16px;
  --settings-section-gap: 28px;
  --settings-card-radius: 12px;

  /*
   * V2 UI primitives (Pilot)
   *
   * These semantic tokens deliberately resolve through Ionic's theme
   * surfaces. Light, dark, nature, aquarell and automatic therefore share
   * geometry without introducing a parallel color palette.
   */
  --mcp-radius-card: 12px;
  --mcp-radius-control: 8px;
  --mcp-border-subtle: var(
    --app-surface-border,
    var(--ion-color-step-200, var(--ion-border-color))
  );
  --mcp-surface-card: var(
    --ion-item-background,
    var(--ion-background-color)
  );
  --mcp-surface-info: color-mix(
    in srgb,
    var(--ion-color-primary) 7%,
    var(--ion-background-color)
  );
  --mcp-spacing-section: 24px;
  --mcp-spacing-row: 8px;
  --mcp-settings-row-height: 56px;
  --mcp-control-height: 2.5rem;
  --mcp-icon-size: 1.25rem;
}

/* Resolve the semantic surface where Ionic's active theme variables live.
 * Native Capacitor applies the theme to body; a value computed on :root alone
 * otherwise retains the light fallback inside dark modals. */
body {
  --mcp-surface-card: var(
    --ion-item-background,
    var(--ion-card-background, var(--ion-background-color))
  );
  /* Custom properties containing var() are resolved before inheritance.
   * Resolve info surfaces here too: native themes live on body, while the
   * web-only root synchronization must not be required for correct colors. */
  --mcp-surface-info: color-mix(
    in srgb,
    var(--ion-color-primary) 7%,
    var(--ion-background-color)
  );
}

/*
 * Opt-in V2 primitives. During the pilot they are used together with the
 * established component classes, so no non-pilot page changes implicitly.
 */
.mcp-settings-page,
.mcp-form {
  box-sizing: border-box;
}

.mcp-form {
  display: grid;
  gap: var(--mcp-spacing-row);
}

.settings-section.mcp-settings-section {
  margin: var(--mcp-spacing-section) 0 0;
}

.settings-section.mcp-settings-section.mcp-settings-section--first {
  margin-top: 0;
}

.mcp-settings-page > .mcp-settings-section:first-child {
  margin-top: 0;
}

.mcp-settings-section > .settings-section__title {
  margin-inline: var(--settings-page-space);
}

.mcp-settings-card,
.settings-menu-page.mcp-settings-page ion-list {
  border: 1px solid var(--mcp-border-subtle);
  border-radius: var(--mcp-radius-card);
  background: var(--mcp-surface-card);
  overflow: hidden;
}

.mcp-settings-row,
.settings-menu-page.mcp-settings-page ion-item {
  --background: var(--mcp-surface-card);
  --min-height: var(--mcp-settings-row-height);
  --padding-start: var(--settings-page-space);
  --inner-padding-end: var(--settings-page-space);
  --border-color: var(--mcp-border-subtle);
  --border-width: 0 0 1px;
  --inner-border-width: 0;
}

.mcp-settings-card > .mcp-settings-row:last-child,
.settings-menu-page.mcp-settings-page ion-list > ion-item:last-child {
  --border-width: 0;
}

/* Separate exceptional actions within a settings card, without a new section. */
.mcp-settings-row--separated-action {
  margin-block-start: var(--mcp-spacing-section);
}

.mcp-settings-row ion-label,
.settings-menu-page.mcp-settings-page ion-item ion-label {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  margin-block: var(--mcp-spacing-row);
}

.mcp-settings-row ion-note[slot="end"] {
  max-inline-size: 40%;
  white-space: normal;
  text-align: end;
}

.mcp-settings-row .settings-item__title,
.mcp-settings-row .car-settings-item__title,
.mcp-settings-row ion-label > div:first-child {
  margin: 0;
  color: var(--ion-text-color);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
}

.mcp-settings-row .settings-item__description,
.mcp-settings-row .settings-item-description {
  margin-block-start: calc(var(--mcp-spacing-row) / 2);
  color: var(--ion-color-medium);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.4;
}

.mcp-settings-row::part(detail-icon),
.settings-menu-page.mcp-settings-page ion-item::part(detail-icon) {
  color: var(--ion-color-medium);
  margin-inline-start: var(--mcp-spacing-row);
}

.mcp-settings-row > ion-icon[slot="start"] {
  color: var(--ion-color-primary);
  font-size: var(--mcp-icon-size);
}

.mcp-settings-row.settings-item--danger > ion-icon[slot="start"] {
  color: var(--ion-color-danger);
}

ion-radio-group.mcp-settings-card {
  display: block;
  margin-inline: var(--settings-page-space);
}

.mcp-settings-row.mcp-settings-card {
  --border-width: 0;
}

.mcp-settings-row :is(ion-toggle, ion-radio, ion-select, ion-input) {
  min-width: 0;
  max-width: 100%;
}

.mcp-settings-row :is(ion-toggle, ion-radio)::part(label),
.mcp-settings-row ion-select::part(label) {
  white-space: normal;
  overflow-wrap: anywhere;
}

.mcp-settings-page .settings-help {
  color: var(--ion-color-medium);
  font-size: 0.9rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

/* Keep keyboard focus visible without changing touch/hover presentation. */
ion-button:focus-visible,
ion-fab-button:focus-visible,
ion-item[button]:focus-visible {
  outline: 2px solid var(--ion-color-primary);
  outline-offset: 2px;
}

.mcp-info-box {
  border-color: color-mix(
    in srgb,
    var(--ion-color-primary) 22%,
    var(--mcp-border-subtle)
  );
  border-radius: var(--mcp-radius-card);
  background: var(--mcp-surface-info);
}

.mcp-info-box .settings-info__icon {
  width: 40px;
  height: 40px;
  font-size: var(--mcp-icon-size);
}

.mcp-warning-box {
  border-color: color-mix(
    in srgb,
    var(--ion-color-warning) 30%,
    var(--mcp-border-subtle)
  );
  background: color-mix(
    in srgb,
    var(--ion-color-warning) 9%,
    var(--ion-background-color)
  );
}

ion-input.mcp-form-row,
ion-textarea.mcp-form-row {
  --border-radius: var(--mcp-radius-control);
  --background: var(--mcp-surface-card);
  --color: var(--ion-text-color);
  --placeholder-color: var(--ion-color-medium);
  min-height: var(--mcp-control-height);
}

/* Ionic places the stacked outline label across the textarea's top border.
 * The enclosing ion-item must not clip that part of the label/notch. */
ion-item.settings-control-row:has(> ion-textarea.mcp-form-row[fill="outline"]) {
  overflow: visible;
}

.mcp-add-action,
.mcp-secondary-action,
.mcp-destructive-action {
  --border-radius: var(--mcp-radius-control);
  min-height: var(--mcp-control-height);
  margin: 0;
  text-transform: none;
}

.mcp-add-action ion-icon,
.mcp-destructive-action ion-icon {
  font-size: var(--mcp-icon-size);
}

ion-button.mcp-add-action[fill="clear"] {
  --color: var(--ion-color-primary);
  font-size: 0.9rem;
  font-weight: 500;
  margin: var(--mcp-spacing-row) var(--settings-page-space) 0;
  max-width: calc(100% - 2 * var(--settings-page-space));
  height: auto;
  white-space: normal;
}

ion-button.mcp-add-action[fill="clear"]::part(native) {
  white-space: normal;
  text-align: start;
}

.mcp-settings-section > ion-list.mcp-settings-card {
  margin-block: 0;
}

.mcp-settings-page .settings-hint,
.mcp-settings-page .settings-section__hint {
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ion-color-medium);
}

.mcp-destructive-action {
  --color: var(--ion-color-danger);
  --border-color: color-mix(
    in srgb,
    var(--ion-color-danger) 38%,
    transparent
  );
}

.mcp-stepper {
  --numeric-stepper-control-size: var(--mcp-control-height);
  --numeric-stepper-radius: var(--mcp-radius-control);
  --numeric-stepper-gap: var(--mcp-spacing-row);
}

.empty-state.mcp-empty-state {
  min-height: 0;
  max-width: 36rem;
  margin: var(--mcp-spacing-section) auto;
  padding: calc(var(--mcp-spacing-section) + 8px) 20px;
  border: 1px solid var(--mcp-border-subtle);
  border-radius: var(--mcp-radius-card);
  background: var(--mcp-surface-card);
}

.mcp-empty-state > ion-icon {
  font-size: 2.5rem;
}

@media (max-width: 420px) {
  .mcp-settings-row {
    --padding-start: 14px;
    --inner-padding-end: 10px;
  }

  .empty-state.mcp-empty-state {
    margin-inline: 12px;
    padding: 24px 16px;
  }
}

.addButtonDiv{
  text-align: center;
}



.members-list .member-guest-status {
  display: inline-block;
  margin-inline-start: 0.45rem;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  color: var(--ion-color-medium-shade);
  background: var(--ion-color-step-100);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  vertical-align: middle;
  white-space: nowrap;
}

.settings-datetime-button::part(native),
.settings-section ion-datetime-button::part(native),
.settings-editor ion-datetime-button::part(native) {
  color: var(--ion-text-color);
  background: var(--ion-color-step-100);
  border: 1px solid var(--ion-color-step-250);
  border-radius: 10px;
}

.settings-datetime-button[disabled]::part(native),
.settings-section ion-datetime-button[disabled]::part(native),
.settings-editor ion-datetime-button[disabled]::part(native) {
  color: var(--ion-color-medium);
  opacity: 0.7;
}

.v2-date-picker {
  min-width: 0;
}

.v2-date-picker .settings-control-row > ion-label {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
}

.v2-date-picker .settings-datetime-button {
  flex: 1 1 9.5rem;
  min-width: 9.5rem;
  max-width: 100%;
}

.dark-theme ion-modal::part(backdrop) {
  background: #000;
      opacity: 0.72 !important;
}

.dark-theme ion-popover::part(backdrop) {
  background: #000;
  opacity: 0.62;
}

.driver-transport-editor__description {
  margin: 0 16px 16px;
  color: var(--ion-color-medium);
  font-size: 0.92rem;
  line-height: 1.4;
}


.driver-transport-editor__section {
  margin-top: 20px;
}


.driver-transport-editor__section-title {
  margin: 0 16px 7px;

  color: var(--ion-color-medium);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


.driver-transport-editor__list {
  margin: 0;
}


.driver-transport-option {
  --min-height: 58px;
}

.driver-transport-option::part(native) {
  align-items: flex-start;
  min-width: 0;
  overflow: visible;
}


.driver-transport-option__name {
  font-size: 1rem;
  line-height: 1.3;
}


.driver-transport-option__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;

  margin-top: 3px;

  font-size: 0.82rem;
  line-height: 1.25;
}


.driver-transport-option__proposal {
  margin-top: 8px;

  font-size: 0.82rem;
  line-height: 1.25;
}


.driver-transport-option__proposal-reason {
  margin-top: 2px;

  color: var(--ion-color-medium);
  font-size: 0.82rem;
  line-height: 1.25;
}


.driver-transport-option__proposed {
  color: var(--ion-color-primary);
  font-weight: 600;
}


.driver-transport-option__status {
  color: var(--ion-color-medium);
}


.driver-transport-option__check {
  margin-right: 3px;
  font-weight: 700;
}


.driver-transport-option__transport-icon {
  color: var(--ion-color-medium);
  font-size: 1.35rem;
}


/*
 * Vorgeschlagenen Fahrer nur dezent markieren.
 * Keine Warn-/Gelbfläche wie früher.
 */
.driver-transport-option--proposed {
  --background:
    color-mix(
      in srgb,
      var(--ion-color-primary) 5%,
      transparent
    );
}


/*
 * Prozentindikator
 */

.driver-usage-indicator {
  appearance: none;

  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 4px;

  border: 0;
  background: transparent;

  cursor: pointer;
}


.driver-usage-indicator__circle {
  --size: 46px;

  position: relative;

  display: grid;
  flex: 0 0 var(--size);
  width: var(--size);
  height: var(--size);
  box-sizing: border-box;
  place-items: center;

  border-radius: 50%;
  border: 1px solid var(--ion-border-color);
  overflow: hidden;

  background:
    conic-gradient(
      var(--ion-color-primary)
        0 var(--driver-usage-progress),
      var(--ion-border-color)
        var(--driver-usage-progress) 100%
    );
}


.driver-usage-indicator__circle::before {
  position: absolute;
  z-index: 0;
  inset: 4px;

  border-radius: 50%;

  background:
    var(
      --ion-item-background,
      var(--ion-background-color)
    );

  content: "";
}


.driver-usage-indicator__inner {
  position: relative;
  z-index: 1;

  color: var(--ion-text-color);
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.driver-usage-indicator:focus-visible {
  outline: 2px solid var(--ion-color-primary);
  outline-offset: 2px;
}

.driver-usage-indicator__value {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 5px 9px;
  border-radius: 10px;
  background: var(--ion-color-step-100);
  color: var(--ion-color-medium);
  font-size: 0.76rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}


/*
 * Aufgeklappte Begründung
 */

.driver-usage-details {
  margin: 0 12px 8px 52px;
  padding: 9px 12px;

  border-radius: 10px;

  background: var(--ion-color-step-100);
  color: var(--ion-color-medium);

  font-size: 0.84rem;
  line-height: 1.4;
} 

.driver-usage-details__line + .driver-usage-details__line {
  margin-top: 5px;
}

.driver-transport-option-group {
  display: block;
}

.driver-transport-editor__usage-hint {
  display: flex;
  gap: 7px;
  align-items: flex-start;

  margin: 14px 16px 4px;

  color: var(--ion-color-medium);

  font-size: 0.8rem;
  line-height: 1.4;
}


.driver-transport-editor__usage-hint ion-icon {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 1rem;
}


.driver-transport-editor__empty {
  padding: 20px 16px;
  color: var(--ion-color-medium);
  text-align: center;
}

.driver-transport-option__radio {
  display: flex;
  align-items: flex-start;
  width: 100%;
  min-width: 0;
  text-align: left;
}

.driver-transport-option__radio::part(container) {
  flex: 0 0 auto;
  width: 1.25rem;
  min-width: 1.25rem;
  margin-top: 2px;
}

.driver-transport-option__radio::part(label) {
  display: block;
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  margin-inline-start: 8px;
  justify-content: flex-start;
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  text-align: left;
}

.driver-transport-option__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  align-items: start;
}

.driver-transport-option__row--with-usage {
  grid-template-columns: minmax(0, 1fr) 54px;
  column-gap: 8px;
}

.driver-transport-option__selection {
  display: block;
  width: 100%;
  min-width: 0;
}

.driver-transport-option__name {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  column-gap: 0.4rem;
  width: 100%;
  min-width: 0;
}

.driver-transport-option__name--transport {
  grid-template-columns: 1.35rem minmax(0, 1fr);
}

.driver-transport-option__name > ion-icon {
  grid-column: 1;
  grid-row: 1;
}

.driver-transport-option__name > span {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  overflow: visible;
  overflow-wrap: break-word;
  white-space: normal;
  text-overflow: clip;
}

.driver-transport-option__name--transport > span {
  grid-column: 2;
}

.driver-transport-option--fallback {
  margin-block-start: var(--mcp-spacing-row);
  border-block-start: 1px solid var(--ion-border-color);
}

.driver-transport-option__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-width: 0;
  overflow: visible;
  text-align: left;
}

.driver-transport-option__details {
  flex: 0 0 auto;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;

  gap: 4px;
  margin-left: 10px;
}

.driver-transport-option__details--usage {
  grid-column: 2;
  width: 54px;
  margin-left: 0;
}

.driver-transport-option__details--usage .driver-usage-indicator {
  width: 100%;
  justify-content: center;
}

.ride-series-label {
  display: block;
  min-width: 0;
  color: var(--ion-color-medium);
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.driver-car-details {
  color: var(--ion-color-medium);
  font-size: 0.78rem;
  line-height: 1.2;
}

.driver-car-details__capacity-warning {
  display: block;
  margin-top: 2px;
  color: var(--ion-color-warning-shade, var(--ion-color-medium));
}

/* Auswahl von Chat-Empfängern */

.recipient-selection-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.25rem;
  padding: 0 1rem 0.4rem;
}

.recipient-selection-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0 0 0.5rem;
}

.recipient-selection-actions__button {
  margin: 0;
  --padding-start: 0.5rem;
  --padding-end: 0.5rem;
  min-height: 32px;
}

/* Persönliche Zugangsdaten: E-Mail und Passwort */

.personal-credentials-editor {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.personal-credentials-editor__section {
  display: flex;
  flex-direction: column;
}

.personal-credentials-editor__section-title {
  margin: 0 1rem 0.25rem;

  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.personal-credentials-editor__description {
  margin: 0 1rem 0.75rem;

  color: var(--ion-color-medium);
  font-size: 0.9rem;
  line-height: 1.4;
}

.personal-credentials-editor__item {
  --padding-start: 1rem;
  --inner-padding-end: 1rem;
}

.name-in-carpool-editor {
  display: flex;
  flex-direction: column;
}

.name-in-carpool-editor__description {
  margin: 0 1rem 0.75rem;

  color: var(--ion-color-medium);
  font-size: 0.9rem;
  line-height: 1.4;
}

.name-in-carpool-editor__item {
  --padding-start: 1rem;
  --inner-padding-end: 1rem;
}

/* My Stops Editor  */

.my-stops-editor {
  display: flex;
  flex-direction: column;
}

.my-stops-editor__description {
  margin: 0 1rem 1.25rem;

  color: var(--ion-color-medium);
  font-size: 0.9rem;
  line-height: 1.4;
}

.my-stops-route {
  margin-bottom: 1.5rem;
}

.my-stops-route + .my-stops-route {
  padding-top: 1.25rem;
  border-top: 1px solid var(--ion-color-light-shade);
}

.my-stops-route__title {
  margin: 0 1rem 0.25rem;

  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
}

.my-stops-route__hint {
  margin: 0 1rem 0.5rem;

  color: var(--ion-color-medium);
  font-size: 0.85rem;
  line-height: 1.35;
}

.my-stops-route__list {
  padding: 0;
}

.my-stops-route__item {
  --padding-start: 1rem;
  --inner-padding-end: 1rem;
}

.my-stops-route__checkbox {
  width: 100%;
}

.my-stops-route__error {
  margin: 0.5rem 1rem 0;

  color: var(--ion-color-danger);
  font-size: 0.85rem;
  line-height: 1.35;
}

.my-stops-editor__empty {
  margin: 0 1rem;

  color: var(--ion-color-medium);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Hinweise beim Bestätigen (früher: Warnhinweise) */

.ourplan-warning-settings {
  padding: 0 4px 8px;
}

.ourplan-warning-settings__intro {
  margin: 4px 12px 6px;
  font-size: 1rem;
  line-height: 1.4;
}

.ourplan-warning-settings__hint {
  margin: 0 12px 24px;
  color: var(--ion-color-medium);
  font-size: 0.9rem;
  line-height: 1.4;
}


.ourplan-warning-setting {
  margin-bottom: 24px;
}

.ourplan-warning-setting__item {
  --padding-start: 16px;
  --inner-padding-end: 12px;

  --background: var(--ion-item-background, var(--ion-background-color));
  --border-radius: 10px;

  border: 1px solid var(--ion-color-step-200, #d7d7d7);
  border-radius: 10px;
}

.ourplan-warning-setting__item ion-label {
  white-space: normal;
  font-size: 1rem;
  font-weight: 500;
}

.ourplan-warning-setting__description {
  margin: 7px 16px 0;
  color: var(--ion-color-medium);
  font-size: 0.88rem;
  line-height: 1.4;
}

.ourplan-warning-setting__item ion-toggle {
  width: 100%;
  font-size: 1rem;
  font-weight: 500;
}

/* Preview */

.theme-preview--light {
  --preview-color-1: var(--theme-light-primary);
  --preview-color-2: var(--theme-light-secondary);
  --preview-color-3: var(--theme-light-tertiary);
}

.theme-preview--dark {
  --preview-color-1: var(--theme-dark-primary);
  --preview-color-2: var(--theme-dark-secondary);
  --preview-color-3: var(--theme-dark-tertiary);
}

.theme-preview--aquarell {
  --preview-color-1: var(--theme-aquarell-primary);
  --preview-color-2: var(--theme-aquarell-secondary);
  --preview-color-3: var(--theme-aquarell-tertiary);
}

.theme-preview--nature {
  --preview-color-1: var(--theme-nature-primary);
  --preview-color-2: var(--theme-nature-secondary);
  --preview-color-3: var(--theme-nature-tertiary);
}

.theme-color-preview {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: 16px;
}

.theme-color-dot {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border-radius: 50%;

  border: 1px solid
    color-mix(
      in srgb,
      var(--ion-text-color) 20%,
      transparent
    );
}

.theme-color-dot--1 {
  background: var(--preview-color-1);
}

.theme-color-dot--2 {
  background: var(--preview-color-2);
}

.theme-color-dot--3 {
  background: var(--preview-color-3);
}

/* Zurücksetzen bei lokalen Fehlern oder Inkonsistenzen */

.troubleshooting-settings {
  padding: 4px 12px 20px;
}

.troubleshooting-settings__intro {
  margin: 4px 4px 24px;

  color: var(--ion-color-medium);
  font-size: 0.95rem;
  line-height: 1.45;
}


.troubleshooting-setting {
  padding: 16px;

  background: var(
    --ion-card-background,
    var(--ion-item-background)
  );

  border: 1px solid var(--ion-border-color);
  border-radius: 12px;
}


.troubleshooting-setting__header {
  display: flex;
  align-items: center;
  gap: 12px;
}


.troubleshooting-setting__icon {
  flex: 0 0 auto;

  color: var(--ion-color-primary);
  font-size: 24px;
}


.troubleshooting-setting__title {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
}


.troubleshooting-setting__description {
  margin: 10px 0 16px;

  color: var(--ion-color-medium);
  font-size: 0.9rem;
  line-height: 1.45;
}


.troubleshooting-setting__button {
  margin: 0;
}

/* Erweiterte Einstellungen für Power-User */

.advanced-personal-settings {
  padding: 0 4px 8px;
}

.advanced-personal-settings__intro {
  margin: 4px 12px 24px;

  color: var(--ion-color-medium);
  font-size: 0.95rem;
  line-height: 1.45;
}


.advanced-personal-setting {
  margin-bottom: 24px;
}

.advanced-personal-setting__item {
  --padding-start: 16px;
  --inner-padding-end: 12px;

  --background:
    var(
      --ion-item-background,
      var(--ion-card-background)
    );

  border: 1px solid var(--ion-border-color);
  border-radius: 10px;
}

.advanced-personal-setting__item ion-toggle {
  width: 100%;

  font-size: 1rem;
  font-weight: 500;
}

.advanced-personal-setting__description {
  margin: 7px 16px 0;

  color: var(--ion-color-medium);
  font-size: 0.88rem;
  line-height: 1.4;
}

/* Mehr Themes */
.theme-preview--auto {
  --auto-light-primary: var(--theme-light-primary);
  --auto-dark-primary: var(--theme-dark-primary);
}

.theme-color-dot--auto {
  background:
    linear-gradient(
      90deg,
      var(--theme-light-background) 0 50%,
      var(--theme-dark-background) 50% 100%
    );
}

.theme-color-dot--auto-light {
  background: var(--theme-light-primary);
}

.theme-color-dot--auto-dark {
  background: var(--theme-dark-primary);
}

/* Kalender-Export-Einstellungen */

.calendar-export-settings {
  padding: 0 4px 12px;
}

.calendar-export-settings__intro {
  margin: 4px 12px 26px;

  color: var(--ion-color-medium);
  font-size: 0.95rem;
  line-height: 1.45;
}


.calendar-export-section {
  margin-block: var(--mcp-spacing-section);
}


.calendar-export-setting {
  margin-block-end: var(--mcp-spacing-row);
}

.calendar-export-setting__item ion-toggle {
  width: 100%;
  font-size: 1rem;
  font-weight: 500;
}

.calendar-export-setting__description {
  margin: var(--mcp-spacing-row) var(--settings-page-space) 0;

  color: var(--ion-color-medium);
  font-size: 0.9rem;
  line-height: 1.4;
}


/* Select und Input etwas ruhiger */

.calendar-export-setting__item ion-select,
.calendar-export-setting__item ion-input {
  width: 100%;
}


/* Deaktivierte abhängige Optionen */

.calendar-export-setting__item ion-select[disabled],
.calendar-export-setting__item ion-toggle[disabled] {
  opacity: 0.5;
}


@media (max-width: 520px) {

  .pasttrip-table-weekday,
  .pasttrip-table-date-value {
    display: block;
  }

  .pasttrip-table-weekday {
    margin-inline-end: 0;
  }
}

.pasttrip-table-weekday,
.pasttrip-table-date-value {
  display: inline;
}

.pasttrip-table-weekday {
  margin-inline-end: 0.25em;
}

/* ============================================================
   Abwesenheiten verwalten
   ============================================================ */

.absence-manage {
  width: 100%;
}


.absence-manage__description {
  margin:
    0
    0
    22px;

  color:
    var(--ion-color-medium);

  line-height: 1.45;
}


.absence-manage__list {
  overflow: hidden;

  border:
    1px solid
    var(--ion-border-color);

  border-radius: 10px;

  background:
    var(
      --ion-card-background,
      var(--ion-background-color)
    );
}


.absence-manage__item {
  --padding-start: 16px;
  --inner-padding-end: 10px;
}


.absence-manage__item-content {
  width: 100%;

  min-width: 0;

  padding-block: 10px;
}


.absence-manage__period {
  font-size: 1rem;

  font-weight: 500;
}


.absence-manage__reason {
  margin-top: 3px;

  color:
    var(--ion-color-medium);

  font-size: 0.92rem;
}


.absence-manage__empty {
  padding: 22px 16px;

  color:
    var(--ion-color-medium);

  text-align: center;
}


.absence-manage__add {
  display: flex;

  justify-content: center;

  margin-top: 12px;
}


/* ============================================================
   Abwesenheit bearbeiten
   ============================================================ */

.absence-editor {
  width: 100%;
}


.absence-editor__dates {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 12px;
}


.absence-editor__dates ion-item,
.absence-editor__reason-item {
  --padding-start: 0;
  --inner-padding-end: 0;
}


.absence-editor__reason-item {
  margin-top: 16px;
}


.absence-editor__delete {
  display: flex;

  justify-content: flex-start;

  margin-top: 22px;

  padding-top: 10px;

  border-top:
    1px solid
    var(--ion-border-color);
}


@media (max-width: 500px) {

  .absence-editor__dates {
    grid-template-columns: 1fr;
  }
}

/* Header im Hauptmenü */

.main-menu-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: 2px;

  /* This branding block sits directly in ion-menu, outside Ionic's
     header toolbar, so it must reserve the top safe area itself. */
  padding: calc(12px + var(--ion-safe-area-top, env(safe-area-inset-top, 0px))) 22px 11px;

  background: var(--ion-background-color);

  border-bottom: 1px solid var(--ion-border-color);
}


/* ------------------------------------------------------------
   MyCarpoolApp-Schriftzug
   ------------------------------------------------------------ */

.main-menu-header__logo {
  width: 150px;
  height: 38px;

  background-color: var(--ion-color-primary);

  mask:
    url("./mcp_font_logo-yX42YOLc.svg")
    left center / contain
    no-repeat;

  -webkit-mask:
    url("./mcp_font_logo-yX42YOLc.svg")
    left center / contain
    no-repeat;
}


/* ------------------------------------------------------------
   Aktuelle Fahrgemeinschaft
   ------------------------------------------------------------ */

.main-menu-header__carpool-name {
  max-width: 100%;

  color: var(--ion-text-color);

  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

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

.ride-editor__datetime-button::part(native),
.ride-editor__time-picker-button::part(native) {
  background: rgba(var(--ion-text-color-rgb), 0.05);
  color: var(--ion-text-color);

  border: 1px solid rgba(var(--ion-text-color-rgb), 0.10);
  border-radius: 10px;

  min-height: 40px;
  padding-inline: 12px;
}

.ride-editor__time-picker-button {
  font-size: 1rem;
}

ion-modal.time-picker-modal,
ion-modal.modal-default.show-modal ~ ion-modal.time-picker-modal.modal-default {
  --width: 360px;
  --height: auto;
  --border-radius: 16px;
  --backdrop-opacity: var(--time-picker-backdrop-opacity, 0.43);
  --background: var(--ion-card-background, var(--ion-background-color));
  --border-width: 1px;
  --border-style: solid;
  --border-color: var(--ion-border-color);
  --box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
}

.dark-theme ion-modal.time-picker-modal {
  --time-picker-backdrop-opacity: 0.5;
}

.dark-theme ion-modal.time-picker-modal::part(backdrop) {
  /* Override the existing global dark-modal opacity, only for this layer. */
  opacity: var(--backdrop-opacity) !important;
}

.time-picker-modal::part(content) {
  position: relative;
}

.time-picker-modal__layout {
  box-sizing: border-box;
  width: 100%;
  background: var(--ion-card-background, var(--ion-background-color));
  color: var(--ion-text-color);
}

.time-picker-modal__header {
  padding: 18px 20px 6px;
}

.time-picker-modal__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
}

.time-picker-modal__body {
  padding: 4px 16px 0;
}

.time-picker-modal__datetime {
  --background: var(--ion-card-background, var(--ion-background-color));
  margin-inline: auto;
}

.time-picker-modal__minute-step-control {
  display: flex;
  justify-content: flex-end;
  box-sizing: border-box;
  width: 100%;

  min-height: 44px;
  margin-top: 10px;
  padding-block: 4px;
  padding-inline: 12px;

  border-radius: 12px;
  background: rgba(var(--ion-text-color-rgb), 0.05);
}

.time-picker-modal__minute-exact-toggle {
  min-height: 36px;
  font-size: 0.875rem;
}

.time-picker-modal__error {
  padding: 10px 4px 0;
  color: var(--ion-color-danger);
  font-size: 0.875rem;
  line-height: 1.35;
}

.time-picker-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
  padding: 12px 12px 14px;
}

@media (max-width: 420px) {
  ion-modal.time-picker-modal {
    --width: calc(100% - 24px);
  }
}

:root {
  --change-pending-accent: #d39a18;
  --change-pending-bg: rgba(211, 154, 24, 0.10);

  --change-added-accent: #3f8f63;
  --change-added-bg: rgba(63, 143, 99, 0.10);

  --change-removed-accent: #b76565;
  --change-removed-bg: rgba(183, 101, 101, 0.10);

  --change-text-muted: var(--ion-color-medium);
}

/* Light */
.theme-light {
  --change-pending-accent: #b77900;
  --change-pending-bg: rgba(183, 121, 0, 0.10);

  --change-added-accent: #377a52;
  --change-added-bg: rgba(55, 122, 82, 0.10);

  --change-removed-accent: #a84f4f;
  --change-removed-bg: rgba(168, 79, 79, 0.10);
}


/* Dark */
.theme-dark {
  --change-pending-accent: #e0ad36;
  --change-pending-bg: rgba(224, 173, 54, 0.13);

  --change-added-accent: #6bb58a;
  --change-added-bg: rgba(107, 181, 138, 0.12);

  --change-removed-accent: #d47a7a;
  --change-removed-bg: rgba(212, 122, 122, 0.12);
}


/* Aquarell */
.theme-aquarell {
  --change-pending-accent: #b88a32;
  --change-pending-bg: rgba(184, 138, 50, 0.11);

  --change-added-accent: #5e9684;
  --change-added-bg: rgba(94, 150, 132, 0.10);

  --change-removed-accent: #b57777;
  --change-removed-bg: rgba(181, 119, 119, 0.10);
}


/* Nature */
.theme-nature {
  --change-pending-accent: #b38a2f;
  --change-pending-bg: rgba(179, 138, 47, 0.11);

  --change-added-accent: #4d8460;
  --change-added-bg: rgba(77, 132, 96, 0.10);

  --change-removed-accent: #ad6a63;
  --change-removed-bg: rgba(173, 106, 99, 0.10);
}

.ourPlan__carDiv--pending-change {
  position: relative;
}

.ourPlan__carDiv--pending-change::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: var(--change-pending-accent);
}

.ourPlan__carDiv--validation-error {
  outline: 2px solid var(--ion-color-warning);
  outline-offset: -2px;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ion-color-warning) 18%, transparent);
}

.ourPlan__slot-validation-error {
  margin: 0.35rem 0 0.15rem;
  padding: 0.45rem 0.65rem;
  border-radius: 0.6rem;
  background: color-mix(in srgb, var(--ion-color-warning) 16%, var(--ion-background-color));
  color: var(--ion-text-color);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.35;
}

.ourPlan__carDiv--personal-warning {
  outline: 2px solid var(--ion-color-warning);
  outline-offset: -2px;
  background: color-mix(
    in srgb,
    var(--ion-color-warning) 9%,
    var(--ion-card-background, var(--ion-background-color))
  );
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ion-color-warning) 14%, transparent);
}

.ourPlan__member--personal-warning {
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--ion-color-warning) 22%, transparent);
  box-shadow: inset 0 -2px 0 var(--ion-color-warning-shade, var(--ion-color-warning));
}

.ourPlan__driver-main.ourPlan__member--personal-warning,
.ride-participant.ourPlan__member--personal-warning {
  color: var(--ion-text-color);
}

.ride-change-chip {
  display: inline-flex;
  align-items: center;
  margin-left: 0.4rem;
  padding: 0.1rem 0.4rem;
  border-radius: 999px;
  font-size: 0.72rem;
  line-height: 1.2;
  white-space: nowrap;
}

.ride-change-chip--withdrawn {
  color: var(--change-removed-accent);
  background: var(--change-removed-bg);
}

.ride-change-chip--added {
  color: var(--change-added-accent);
  background: var(--change-added-bg);
}

.ride-change-chip--pending {
  color: var(--change-pending-accent);
  background: var(--change-pending-bg);
}

/*
 * Neuer Mitfahrwunsch
 */

.ride-participant--added .ride-participant__name {
  font-weight: 600;
}

.ride-participant__status .ride-change-chip {
  margin-inline-start: 0;
}


/*
 * Mitfahrwunsch zurückgezogen
 */

.ride-participant--withdrawn {
  color: var(--ion-color-medium);
  opacity: 0.58;
}

.ride-participant--withdrawn .ride-participant__name {
  text-decoration-line: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: currentColor;
}

.ride-participant--withdrawn .ride-participant__child-icon {
  opacity: 0.6;
}

/* --------------------------- */

.ride-editor__validation-message {
  padding: 8px 16px 0;
  font-size: 0.9rem;
  color: var(--ion-color-danger);
}

.pasttrip-editor-navigation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding: 8px 4px 2px;
  border-top: 1px solid var(--ion-color-step-150, rgba(var(--ion-text-color-rgb), 0.12));
}

.pasttrip-editor-navigation ion-button {
  min-height: 40px;
}


.ride-editor--past > :is(
  .ride-editor__field,
  .participant-popover,
  .driver-transport-editor,
  .ride-editor-field--toll-payer
) + :is(
  .ride-editor__field,
  .participant-popover,
  .driver-transport-editor,
  .ride-editor-field--toll-payer
) {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--ion-color-step-150, rgba(var(--ion-text-color-rgb), 0.12));
}


/* Ionic-Hosts berücksichtigen das HTML-Attribut hidden nicht in jedem
 * Renderpfad zuverlässig. Der komplette Mautzahler-Wrapper muss verborgen
 * sein, nicht nur das darin enthaltene ion-select. */
.ride-editor--past .ride-editor-field--toll-payer[hidden] {
  display: none !important;
}


.pasttrip-editor-delete {
  display: flex;
  justify-content: flex-start;
  margin: 8px 16px 16px;
  padding-top: 10px;
  border-top: 1px solid var(--ion-color-step-150, rgba(var(--ion-text-color-rgb), 0.12));
}


.pasttrip-editor-delete ion-button {
  min-height: 40px;
}


.driver-suggestion-method-help {
  padding: 0 var(--settings-page-space) var(--settings-page-space);
  color: var(--ion-color-medium);
  font-size: 0.9rem;
  line-height: 1.45;
}

.driver-suggestion-method-help > p {
  margin: 0;
}

.driver-suggestion-method-help__guidance {
  display: grid;
  gap: var(--mcp-spacing-row);
  margin: var(--mcp-spacing-section) 0 0;
  font-size: 0.82rem;
}

.driver-suggestion-method-help__guidance dt {
  font-weight: 600;
}

.driver-suggestion-method-help__guidance dd {
  margin: 0;
  color: var(--ion-color-medium);
}

.driver-cycle-status,
.driver-weekday-status {
  max-width: 40%;
  text-align: right;
}

.driver-suggestion-editor {
  padding-bottom: var(--settings-page-space);
}

.driver-suggestion-editor ion-radio {
  width: 100%;
}

.driver-cycle-status,
.driver-weekday-status {
  max-width: 40%;
  text-align: right;
}



.settings-hint {
  margin: 6px 16px 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ion-color-medium);
}

.settings-editor ion-list[inset="true"] {
  margin-top: 8px;
  margin-bottom: 8px;
}

.carpool-invite-error:not([hidden]) {
  display: block;
  margin: 8px 16px 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.driver-weekday-row {
  --min-height: 58px;
}

.driver-weekday-name {
  flex: 0 0 42%;
  font-weight: 500;
}

.driver-weekday-select {
  flex: 1;
  max-width: 58%;
}

.energy-settings-item ion-note {
  font-size: 0.95rem;
}

.settings-add-button {
  margin-top: 8px;
}

.settings-example-text {
  padding: 4px 16px 16px;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ion-color-medium);
}

.settings-empty-state {
  padding: 20px 16px;
  text-align: center;
  color: var(--ion-color-medium);
}

/* Stepper */

.numeric-stepper {
  --numeric-stepper-control-size: var(--mcp-control-height, 2.5rem);
  --numeric-stepper-radius: var(--mcp-radius-control, 8px);
  --numeric-stepper-gap: var(--mcp-spacing-row, 0.5rem);

  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--numeric-stepper-gap);
  max-width: 100%;
}

.numeric-stepper__button {
  --border-radius: var(--numeric-stepper-radius);
  --padding-start: 0;
  --padding-end: 0;

  flex: 0 0 auto;
  inline-size: var(--numeric-stepper-control-size);
  min-inline-size: var(--numeric-stepper-control-size);
  block-size: var(--numeric-stepper-control-size);
  min-block-size: var(--numeric-stepper-control-size);
  margin: 0;
  font-size: 1rem;
}

.numeric-stepper__actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: calc(var(--numeric-stepper-gap) / 2);
  white-space: nowrap;
}

.numeric-stepper__value-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  flex: 0 1 auto;
  min-width: 0;
  min-block-size: var(--numeric-stepper-control-size);
}

.numeric-stepper__input {
  box-sizing: border-box;
  width: 6.5em;
  min-width: 0;
  block-size: var(--numeric-stepper-control-size);
  padding-inline: 0.65rem;

  border: 1px solid var(--ion-border-color, var(--ion-color-light-shade));
  border-radius: var(--numeric-stepper-radius);
  outline: none;

  background: var(--ion-item-background, var(--ion-background-color));
  color: var(--ion-text-color);

  font: inherit;
  font-size: 1.05rem;
  text-align: right;
}

.numeric-stepper__input:focus-visible {
  border-color: var(--ion-color-primary);
  box-shadow: 0 0 0 1px var(--ion-color-primary);
}

.numeric-stepper__unit {
  white-space: nowrap;
  color: var(--ion-color-medium);
}

.numeric-stepper--external-input .numeric-stepper__value-control {
  flex: 1 1 11rem;
  min-width: 9rem;
}

/* --- */
.energy-price-stepper-wrap {
  display: flex;
  justify-content: flex-start;
  padding: 4px 16px 8px;
}

.energy-price-stepper-wrap .numeric-stepper {
  flex: 0 1 auto;
  width: auto;
}

.energy-price-stepper-wrap .numeric-stepper__value-wrap {
  flex: 0 0 auto;
  min-width: 8.5rem;
}

.energy-price-stepper-wrap .numeric-stepper__input {
  width: 4.5rem;
}

.car-editor #carSeatsStepper {
  max-width: 320px;
}

.car-editor #carSeatsStepper .numeric-stepper__value-wrap {
  flex: 0 0 auto;
  min-width: 4rem;
}



/* Karten */

.location-picker-map {
  display: block;
  width: 100%;
  height: min(55vh, 500px);
  min-height: 300px;

  border-radius: 12px;
  overflow: hidden;
}

/* @capacitor/google-maps renders below the Android WebView. Every painted
   ancestor has to be transparent, but only for the modal that owns an active
   native map. The normal app and all other overlays keep their backgrounds. */
html.native-google-map-active,
html.native-google-map-active body,
body.native-google-map-active > ion-app {
  background: transparent !important;
}

/* Ionic keeps the routed page and any previously opened modal mounted below a
   stacked modal. Those layers still paint inside the WebView and therefore
   cover Capacitor's native Android map even though the map modal itself is
   transparent. Hide only the inactive WebView layers for the lifetime of the
   native map; visibility can be restored on the owning modal without making
   the whole application permanently transparent. */
body.native-google-map-active > ion-app,
body.native-google-map-active ion-modal:not(.native-google-map-modal--active) {
  visibility: hidden !important;
}

body.native-google-map-active ion-modal.native-google-map-modal--active {
  visibility: visible !important;
}

body.native-google-map-active ion-modal.native-google-map-modal--active {
  --background: transparent !important;
}

body.native-google-map-active ion-modal.native-google-map-modal--active::part(content),
body.native-google-map-active ion-modal.native-google-map-modal--active::part(backdrop),
body.native-google-map-active ion-modal.native-google-map-modal--active .ride-field-modal__layout,
body.native-google-map-active ion-modal.native-google-map-modal--active .ride-field-modal__content,
body.native-google-map-active ion-modal.native-google-map-modal--active .ride-field-modal__content::part(background),
body.native-google-map-active ion-modal.native-google-map-modal--active .ride-field-modal__body,
body.native-google-map-active ion-modal.native-google-map-modal--active .ride-field-modal__content-inner,
body.native-google-map-active ion-modal.native-google-map-modal--active .native-google-map-surface,
body.native-google-map-active ion-modal.native-google-map-modal--active .location-picker-map,
body.native-google-map-active ion-modal.native-google-map-modal--active .trip-live-position,
body.native-google-map-active ion-modal.native-google-map-modal--active .trip-live-position__map {
  background: transparent !important;
}

/* The native map needs a transparent path through the WebView only at its
   viewport. Restore the normal Ionic surface for all text and controls so the
   light theme never exposes Android's background outside the map. */
body.native-google-map-active ion-modal.trip-live-position-modal.native-google-map-modal--active .ride-field-modal__header,
body.native-google-map-active ion-modal.trip-live-position-modal.native-google-map-modal--active .ride-field-modal__header ion-toolbar,
body.native-google-map-active ion-modal.trip-live-position-modal.native-google-map-modal--active .ride-field-modal__body-title,
body.native-google-map-active ion-modal.trip-live-position-modal.native-google-map-modal--active .trip-live-position__panel {
  background: var(--ion-background-color) !important;
  color: var(--ion-text-color);
}

body.native-google-map-active ion-modal.trip-live-position-modal.native-google-map-modal--active .ride-field-modal__header ion-toolbar {
  --background: var(--ion-background-color) !important;
  --color: var(--ion-text-color);
}

/* Avoid transparent padding next to the native map: it would reveal the
   Android surface even though it is not part of the map viewport. */
body.native-google-map-active ion-modal.trip-live-position-modal.native-google-map-modal--active .ride-field-modal__body {
  padding: 0 !important;
}

body.native-google-map-active ion-modal.trip-live-position-modal.native-google-map-modal--active .ride-field-modal__body-title {
  margin: 0;
  padding: var(--app-space-3, 12px);
}

body.native-google-map-active ion-modal.trip-live-position-modal.native-google-map-modal--active .trip-live-position__map {
  border-radius: 0;
}

body.native-google-map-active ion-modal.native-google-map-modal--active::part(backdrop) {
  opacity: 0 !important;
}

body.native-google-map-active ion-modal.native-google-map-modal--active .ride-field-modal__content {
  --background: transparent !important;
}

.trip-live-position__map {
  display: block;
  width: 100%;
  height: min(48vh, 420px);
  min-height: 260px;
  border-radius: var(--app-card-radius, 12px);
  overflow: hidden;
}

.trip-live-position__panel {
  margin-block-start: 0;
  padding: var(--app-space-3, 12px);
  border-radius: var(--app-card-radius, 12px);
}

.trip-live-position__consent {
  margin-block-end: var(--app-space-3, 12px);
  padding-block-end: var(--app-space-3, 12px);
  border-block-end: 1px solid var(--ion-color-step-150, rgba(0, 0, 0, 0.12));
}

.trip-live-position__consent p {
  margin-block-start: 0;
}

.trip-live-position__consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--app-space-2, 8px);
}

.trip-live-position__consent-actions ion-button {
  margin: 0;
}

.trip-live-position__participants {
  display: grid;
  gap: var(--app-space-2, 8px);
  padding: 0;
  margin: var(--app-space-3, 12px) 0;
  list-style: none;
}

.trip-live-position__participant {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--app-space-2, 8px);
  align-items: baseline;
  padding-block: var(--app-space-1, 4px);
}

.trip-live-position__participant span {
  color: var(--ion-color-medium-shade);
  font-size: 0.875rem;
  text-align: end;
}

.trip-live-position__participant ion-button {
  grid-column: 2;
  justify-self: end;
  min-height: 32px;
  margin: 0;
}

.trip-live-position__participant--stale span {
  color: var(--ion-color-warning-shade);
}

.trip-location-consent ion-radio-group {
  display: grid;
  gap: var(--app-space-3, 12px);
}

@media (max-width: 420px) {
  .trip-live-position__participant {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .trip-live-position__participant span {
    text-align: start;
  }
  .trip-live-position__participant ion-button {
    grid-column: 1;
    justify-self: start;
  }
}

.location-picker-coordinates {
  margin-top: 10px;
  text-align: center;
}

/* Bestätigungs-Dialog als Modal */

ion-modal.my-confirm-modal {
  --width: min(520px, calc(100vw - 32px));
  --height: auto;

  --border-radius: 18px;

  --backdrop-opacity: 0.48;

  align-items: center;
  justify-content: center;
}


ion-modal.my-confirm-modal::part(content) {
  position: relative;

  height: auto;
  max-height: calc(100vh - 48px);

  border-radius: 18px;

  box-shadow:
    0 12px 32px
    rgba(0, 0, 0, 0.28);
}


ion-modal.my-confirm-modal::part(backdrop) {
  background: #000;
}


.my-confirm-dialog {
  padding: 24px 24px 14px;

  background:
    var(--ion-background-color);
}


.my-confirm-title {
  margin-bottom: 18px;

  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 600;

  color:
    var(--ion-text-color);
}


.my-confirm-content {
  font-size: 1rem;
  line-height: 1.45;

  color:
    var(--ion-text-color);
}


.my-confirm-content p {
  margin:
    0 0 14px;
}


.ourplan-confirm-hints {
  display: grid;
  gap: 12px;
  margin: 0;
  padding-left: 22px;
}


.ourplan-confirm-hints li span {
  display: block;
  margin-top: 2px;
  color: var(--ion-color-medium);
}


.my-confirm-content
.settings-consequence-list {
  margin:
    12px 0 18px;

  padding-left:
    24px;
}


.my-confirm-content
.settings-consequence-list li {
  margin:
    7px 0;
}


.my-confirm-content
.settings-hint {
  margin-top:
    18px;

  font-size:
    0.9rem;

  line-height:
    1.4;

  color:
    var(--ion-color-medium);
}


.my-confirm-buttons {
  display: flex;

  justify-content:
    flex-end;

  gap:
    4px;

  margin-top:
    20px;
}

.route-merge-comparison {
  margin: 18px 0;
}

.route-merge-label {
  margin-top: 14px;

  font-size: 0.78rem;
  font-weight: 600;

  color: var(--ion-color-medium);

  text-transform: uppercase;
}

.route-merge-route {
  margin-top: 3px;

  font-size: 1rem;
  line-height: 1.4;
}

.route-merge-route--result {
  padding: 10px 12px;

  border-radius: 10px;

  background:
    rgba(
      var(--ion-color-primary-rgb),
      0.08
    );

  font-weight: 500;
}

.route-merge-buttons {
  display: flex;

  justify-content: flex-end;
  align-items: center;

  flex-wrap: wrap;

  gap: 4px;

  margin-top: 20px;
}

.route-place-item--selected {
  --background:
    rgba(
      var(--ion-color-primary-rgb),
      0.06
    );
}

.route-editor-preview {
  margin: 12px 0 22px;

  padding: 12px 14px;

  border-radius: 10px;

  background:
    rgba(
      var(--ion-color-primary-rgb),
      0.07
    );

  font-size: 1rem;
  line-height: 1.4;
  font-weight: 500;
}

.distance-editor-route {
  margin: 8px 0 18px;

  padding: 12px 14px;

  border-radius: 10px;

  background:
    rgba(
      var(--ion-color-primary-rgb),
      0.07
    );

  font-size: 1rem;
  line-height: 1.4;
  font-weight: 500;
}


.distance-editor-unit {
  margin-left: 8px;

  color:
    var(--ion-color-medium);
}

.settings-status-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.settings-status-dot--spaced-start {
  margin-inline-start: 8px;
}

.settings-status-dot--inline {
  margin-inline: 4px;
  vertical-align: middle;
}

.settings-status-dot--warning {
  background: var(--ion-color-warning);
}

.menu-item-preview {
  margin-inline-start: 10px;

  font-size: 0.9rem;

  color: var(--ion-color-medium);

  white-space: nowrap;
}

.distance-value-stepper-wrap {
  margin-top: 10px;
}


.distance-editor-field--missing {
  padding-inline-start: 12px;

  border-inline-start:
    3px solid
    var(--ion-color-warning);
}


.settings-field-warning {
  margin-top: 7px;

  font-size: 0.84rem;
  line-height: 1.3;

  color:
    var(--ion-color-warning-shade);
}

.location-input {
  width: 100%;
}


.location-input-value {
  margin-top: 8px;
  margin-bottom: 8px;

  font-size: 0.95rem;
  line-height: 1.35;

  color: var(--ion-text-color);
}


.location-input-value--empty {
  color: var(--ion-color-medium);
}


.location-input-actions {
  display: flex;
  flex-wrap: wrap;

  gap: 2px 6px;

  margin-top: 4px;
}


.location-input-actions ion-button {
  margin-inline-start: 0;
  margin-inline-end: 0;
}


.settings-section__optional {
  margin-left: 0.45rem;

  color: var(--ion-color-medium);
  font-size: 0.8em;
  font-weight: 500;
  text-transform: none;
}

.schedule-settings-item__main {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
}

.schedule-settings-item__time {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.schedule-settings-item__route {
  min-width: 0;
}

.schedule-weekday-selection__days {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.schedule-weekday-selection {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.settings-field-error {
  margin-top: 0.4rem;
  color: var(--ion-color-danger);
  font-size: 0.9rem;
}

.main-menu-header__user-name {
  font-weight: 600;
}

.main-menu-header__carpool-name {
  opacity: 0.75;
}

.group-login-user-protected {
  opacity: 0.55;
}

.link-button {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
  font: inherit;
  color: var(--ion-color-primary);
  text-decoration: underline;
  cursor: pointer;
}

.settings-section-title {
  text-transform: uppercase;
}

/* Weight distinguishes personal stops without changing selection colours. */
ion-select-popover .my-plan-own-stop ion-radio::part(label) {
  font-weight: 600;
}

.welcome-wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 24px;
}

.welcome-actions {
  margin-top: auto;
}

.privacy-box {
  position: relative;
  margin-top: 24px;
  margin-bottom: 24px;
}

.privacy-close {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 1;
}

/* ======================================================
   Settings-Menüs: Label + Preview
   ====================================================== */

/*
 * Ionic darf das eigentliche Menülabel nicht auf
 * wenige Zeichen Breite zusammendrücken.
 */
#carpoolSettingsMainPage ion-item ion-label {
  min-width: 7.5rem;

  white-space: normal;

  word-break: normal;
  overflow-wrap: normal;

  hyphens: auto;

  overflow: visible;
}


/*
 * Preview rechts:
 *
 * darf auf kleinen Displays umbrechen,
 * soll aber nicht den Großteil der Zeile beanspruchen.
 */
/* ======================================================
   Gemeinsame Settings-Menüs: Label + Preview
   ====================================================== */

.settings-menu-page ion-item ion-label {
  min-width: 0;

  white-space: normal;

  word-break: normal;
  overflow-wrap: normal;

  hyphens: auto;

  overflow: visible;
}


.settings-menu-page .menu-item-preview {
  flex: 0 1 45%;

  max-width: 45%;
  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

  text-align: right;

  /* Platz für den Ionic-Detail-Chevron reservieren. */
  margin-inline-end: 8px;
}

/* Strukturverlauf der Fahrgemeinschaft */
.carpool-change-log-page {
  max-width: var(--settings-content-max-width, 52rem);
  margin-inline: auto;
  padding-block: var(--app-spacing-md, 1rem) var(--app-spacing-xl, 2rem);
}

.carpool-change-log__day {
  margin-block-start: var(--app-spacing-lg, 1.5rem);
}

.carpool-change-log__day > h2 {
  margin: 0 var(--app-spacing-md, 1rem) var(--app-spacing-xs, 0.5rem);
  color: var(--ion-color-medium);
  font-size: var(--app-font-size-sm, 0.875rem);
  font-weight: 600;
}

.carpool-change-log__event ion-icon {
  color: var(--ion-color-medium);
}

.carpool-change-log__event h3 {
  margin-block: 0.15rem;
  color: var(--ion-text-color);
  font-size: var(--app-font-size-md, 1rem);
  line-height: 1.35;
  white-space: normal;
}

.carpool-change-log__time,
.carpool-change-log__detail {
  color: var(--ion-color-medium);
  white-space: normal;
}

.carpool-change-log__empty {
  display: grid;
  justify-items: center;
  gap: var(--app-spacing-sm, 0.75rem);
  padding: var(--app-spacing-xl, 2rem) var(--app-spacing-md, 1rem);
  color: var(--ion-color-medium);
  text-align: center;
}

.carpool-change-log__empty ion-icon {
  font-size: 2rem;
}

.carpool-change-log__empty p {
  margin: 0;
}

.carpool-change-log__more {
  display: flex;
  justify-content: center;
  margin-block-start: var(--app-spacing-lg, 1.5rem);
}

.past-trip-change-log__changes {
  margin: var(--app-spacing-xs, 0.5rem) 0 0;
  padding-inline-start: 1.25rem;
  color: var(--ion-color-medium);
  font-size: var(--app-font-size-sm, 0.875rem);
  line-height: 1.45;
}


@media (max-width: 480px) {

  .settings-menu-page ion-item ion-label {
    flex: 1 1 0;

    min-width: 0;

    overflow: visible;
  }


  .settings-menu-page .menu-item-preview {
    flex: 1 1 36%;

    max-width: 36%;
  }
}


/* ======================================================
   Einsparungen
   ====================================================== */

.savings-page {
  display: grid;
  gap: 16px;
}


.savings-period,
.savings-note {
  display: block;

  color: var(--ion-color-medium);

  line-height: 1.4;
}

.savings-personal-summary {
  display: grid;
  gap: 10px;
}

.savings-personal-summary > h2 {
  margin: 0;
  color: var(--ion-text-color);
  font-size: 1rem;
  font-weight: 650;
}


.savings-metrics {
  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));

  gap: 10px;
}


.savings-metric,
.savings-section,
.savings-support-placeholder {
  border: 1px solid var(--ion-border-color);

  border-radius: 12px;

  background: var(--ion-item-background, var(--ion-background-color));
}


.savings-metric {
  display: flex;

  align-items: flex-start;

  gap: 10px;

  padding: 14px;
}


.savings-metric > ion-icon {
  flex: 0 0 auto;

  margin-top: 2px;

  color: var(--ion-color-primary);

  font-size: 1.3rem;
}


.savings-metric__content {
  min-width: 0;
}


.savings-metric__label,
.savings-detail-row span,
.savings-breakdown-row > span {
  color: var(--ion-color-medium);

  font-size: 0.82rem;
}


.savings-metric__value {
  margin-top: 2px;

  color: var(--ion-text-color);

  font-size: 1.2rem;
  font-weight: 650;
}


.savings-metric__detail {
  margin-top: 3px;

  color: var(--ion-color-medium);

  font-size: 0.8rem;
  line-height: 1.35;
}


.savings-section,
.savings-support-placeholder {
  padding: 14px;
}


.savings-section h2,
.savings-support-placeholder h2 {
  margin: 0 0 10px;

  color: var(--ion-text-color);

  font-size: 0.98rem;
  font-weight: 600;
}


.savings-details,
.savings-breakdown {
  display: grid;

  gap: 8px;
}


.savings-detail-row,
.savings-breakdown-row {
  display: flex;

  justify-content: space-between;

  gap: 16px;
}


.savings-detail-row strong {
  color: var(--ion-text-color);

  text-align: right;
}


.savings-breakdown-row {
  display: grid;

  grid-template-columns: minmax(110px, 0.8fr) minmax(0, 1.2fr);
}


.savings-breakdown-row > span {
  text-align: right;
}


.savings-support-placeholder {
  color: var(--ion-color-medium);

  background: color-mix(
    in srgb,
    var(--ion-color-light) 55%,
    transparent
  );
}


.savings-support-placeholder h2 {
  color: var(--ion-color-medium-shade);
}


.savings-support-placeholder p {
  margin: 0;

  font-size: 0.86rem;
  line-height: 1.4;
}


@media (max-width: 420px) {

  .savings-breakdown-row {
    grid-template-columns: 1fr;

    gap: 2px;
  }


  .savings-breakdown-row > span {
    text-align: left;
  }
}


/* ======================================================
   Kostendetails
   ====================================================== */

.cost-details-page {
  display: grid;
  gap: 16px;
}

.balance-detail-period,
.cost-details-summary,
.cost-details-trip {
  border: 1px solid var(--ion-border-color);
  border-radius: 14px;
  background: var(--ion-item-background, var(--ion-background-color));
}

.balance-detail-period {
  overflow: hidden;
  container-type: inline-size;
}

.balance-detail-period__custom {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 16px 16px;
}

.balance-detail-period__custom > .v2-date-picker,
.balance-detail-period__custom .settings-control-row {
  min-width: 0;
}

.balance-detail-period__custom .settings-datetime-button {
  min-width: 0;
}

@container (max-width: 30rem) {
  .balance-detail-period__custom {
    grid-template-columns: 1fr;
  }
}

.cost-details-summary,
.cost-details-trip {
  padding: 16px;
}

.cost-details__amount-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.cost-details__amount-row > span {
  min-width: 0;
}

.cost-details__amount-row > strong {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}

.cost-details-summary {
  display: grid;
  gap: 10px;
}

.cost-details-summary h2 {
  margin: 0 0 4px;
  font-size: 1rem;
}

.cost-details-summary__breakdown {
  display: grid;
  gap: 6px;
  padding: 10px 0;
  border-top: 1px solid var(--ion-border-color);
  color: var(--ion-color-medium);
  font-size: 0.82rem;
}

.cost-details-summary__ending {
  padding-top: 12px;
  border-top: 2px solid var(--ion-border-color);
}

.cost-details__zero-origin {
  color: var(--financial-neutral-color);
  font-size: 0.82rem;
}

.cost-details-trips {
  display: grid;
  gap: 14px;
  margin-block-start: var(--mcp-spacing-section);
}

.cost-details-timeline {
  display: grid;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--ion-border-color);
  border-radius: 14px;
  background: var(--ion-item-background, var(--ion-background-color));
}

.cost-details-timeline h2 {
  margin: 0 0 4px;
  font-size: 0.98rem;
}

.cost-details-timeline__start,
.cost-details-timeline__event {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.cost-details-timeline__event {
  padding-top: 8px;
  border-top: 1px solid var(--ion-border-color);
}

.cost-details-timeline__event > div {
  display: grid;
  gap: 2px;
}

.cost-details-timeline__event > div:last-child {
  min-width: 90px;
}

.cost-details-timeline__event span {
  color: var(--ion-color-medium);
  font-size: 0.78rem;
}

.cost-details-timeline__event .cost-details__amount-row:first-child strong {
  font-size: 0.82rem;
}

.cost-details-trip {
  display: grid;
  gap: 14px;
}

.cost-details-trip__header,
.cost-details-trip__metrics,
.cost-details-trip__changes {
  display: grid;
  gap: 6px;
}

.cost-details-trip__total {
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ion-border-color);
}

.cost-details-trip__total .cost-details__amount-row {
  font-size: 1rem;
}

.cost-details-trip__breakdown {
  display: grid;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ion-border-color);
}

.cost-details-trip__component {
  min-width: 0;
}

.cost-details-trip__payer {
  margin-top: 2px;
  color: var(--ion-color-medium);
  font-size: 0.78rem;
}

.cost-details-trip__section-title {
  margin-bottom: 2px;
  font-size: 0.88rem;
}

.cost-details-trip__header > span,
.cost-details-trip__metric-note,
.cost-details-trip__facts {
  color: var(--ion-color-medium);
  font-size: 0.8rem;
}

.cost-details-trip__changes {
  padding-top: 12px;
  border-top: 1px solid var(--ion-border-color);
}

.cost-details-trip__calculation summary {
  color: var(--ion-color-primary);
  cursor: pointer;
  font-size: 0.84rem;
}

.cost-details-trip__calculation[open] summary {
  margin-bottom: 10px;
}

.cost-details-trip__calculation .cost-details__amount-row {
  margin: 5px 0;
  font-size: 0.82rem;
}

.cost-details-trip__calculation-total {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--ion-border-color);
}

.cost-details-trip__calculation-total .cost-details__amount-row {
  font-size: 0.86rem;
}

.cost-details-trip__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 10px;
}

.cost-details-trip__facts span {
  min-width: 0;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: anywhere;
}

@media (max-width: 600px) {
  .balance-detail-period__custom {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 360px) {
  .driver-transport-option__row--with-usage {
    grid-template-columns: minmax(0, 1fr) 48px;
    column-gap: 6px;
  }

  .driver-transport-option__details--usage {
    width: 48px;
  }
}

/* ======================================================
   Zahlungen
   ====================================================== */

.payments-page,
.payments-list {
  display: grid;
  gap: 14px;
}

/* ======================================================
   Mautrabatte
   ====================================================== */

.discounts-page {
  display: grid;
  gap: 18px;
}

/* ======================================================
   Autobahngebühren (carpool-spezifische Zuordnung)
   ====================================================== */

.toll-settings,
.toll-settings__sections,
.toll-settings__rules {
  display: grid;
  gap: var(--settings-section-gap);
}

.toll-settings {
  padding: var(--settings-page-space);
  row-gap: calc(var(--mcp-spacing-section) + var(--mcp-spacing-row));
}

.toll-settings .settings-section {
  margin: 0;
}

.toll-settings .settings-section__title {
  margin: 0 0 var(--mcp-spacing-row);
}

.toll-settings .settings-section__hint {
  margin: 0;
}

.toll-settings__intro {
  display: grid;
  gap: var(--mcp-spacing-row);
  padding-block-start: var(--mcp-spacing-row);
  max-inline-size: 68ch;
}

.toll-settings__intro p {
  margin: 0;
}

.toll-settings__intro > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: calc(2 * var(--mcp-spacing-row));
  color: var(--ion-color-medium);
  font-size: .88rem;
}

.toll-settings__intro ion-button {
  min-height: auto;
  margin: 0;
}

.toll-settings__empty {
  margin: 0;
  color: var(--ion-color-medium);
  font-size: .92rem;
}

.toll-settings__sections,
.toll-settings__rules {
  gap: 12px;
}

.toll-settings__sections {
  grid-template-columns: minmax(0, 1fr);
}

.toll-settings [data-toll-add-section] {
  justify-self: start;
  margin: calc(2 * var(--mcp-spacing-row)) 0 0;
}

.toll-settings-section__text {
  display: grid;
  min-width: 0;
  gap: 3px;
  padding-block: 8px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.toll-settings-section__text small,
.toll-settings-section__mapping span,
.toll-settings-rule p {
  color: var(--ion-color-medium);
}

.toll-settings-section,
.toll-settings-rule {
  display: grid;
  gap: var(--mcp-spacing-row);
  min-width: 0;
  padding: var(--mcp-spacing-row) var(--settings-page-space);
}

.toll-settings-rule h3,
.toll-settings-rule p {
  margin: 0;
}

.toll-settings-rule__members {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 8px var(--settings-page-space);
  margin-top: 0;
}

.toll-settings-rule__members ion-checkbox {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}

.toll-settings-section__heading,
.toll-settings-section__mapping,
.toll-settings-picker__header,
.toll-settings-picker__option {
  display: flex;
  align-items: center;
  gap: 12px;
}

.toll-settings-section__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
}

.toll-settings-section__fee {
  align-self: start;
  max-width: none;
  text-align: end;
  color: var(--ion-color-medium);
  font-size: .88rem;
  white-space: nowrap;
}

.toll-settings-section__mapping {
  display: grid;
  grid-template-columns: minmax(8rem, .35fr) minmax(0, 1fr);
  align-items: baseline;
  gap: 8px 12px;
  margin-top: 0;
  font-size: .88rem;
}

.toll-settings-section__mapping strong {
  min-width: 0;
  text-align: end;
  overflow-wrap: anywhere;
}

.toll-settings-section__actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.toll-settings-section__actions ion-button {
  --padding-start: 0;
  --padding-end: 0;
  min-height: auto;
  margin: 0;
  font-size: .88rem;
}

.toll-settings-section__text {
  gap: 4px;
  padding-block: 0;
}

.toll-settings-section__text strong,
.toll-settings-rule h3 {
  font-size: 1rem;
  line-height: 1.35;
}

.toll-settings-section__text small,
.toll-settings-section__mapping,
.toll-settings-rule p {
  font-size: .88rem;
  line-height: 1.4;
}

.toll-settings-section__direction {
  color: var(--ion-color-medium);
}

.toll-settings-picker {
  display: grid;
  gap: var(--settings-page-space);
}

.toll-settings-picker__header > div {
  min-width: 0;
}

.toll-settings-picker__header strong,
.toll-settings-picker__step-title {
  margin: 0;
}

.toll-settings-picker__header strong {
  display: block;
  font-size: 1rem;
  line-height: 1.25;
}

.toll-settings-picker__header small {
  color: var(--ion-color-medium);
}

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

.toll-settings-picker__option {
  width: 100%;
  min-width: 0;
  justify-content: space-between;
  padding: 9px 10px;
  border: 1px solid var(--ion-border-color);
  border-radius: 10px;
  color: var(--ion-text-color);
  background: var(--ion-item-background, var(--ion-background-color));
  text-align: start;
  font: inherit;
  cursor: pointer;
}

.toll-settings-picker__option > span,
.toll-settings-picker__selection {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.toll-settings-picker__option small,
.toll-settings-picker__selection small {
  color: var(--ion-color-medium);
  white-space: normal;
}

.toll-settings-picker__route-step,
.toll-settings-picker__routes {
  display: grid;
  gap: 8px;
}

.toll-settings-picker__routes ion-checkbox {
  max-width: 100%;
  white-space: normal;
}

.toll-settings-picker__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
}

@media (max-width: 520px) {
  .toll-settings-rule__members,
  .toll-settings-picker__options {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .toll-settings-section__heading,
  .toll-settings-section__mapping {
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }

  .toll-settings-section__fee,
  .toll-settings-section__mapping strong {
    max-width: none;
    text-align: start;
  }
}

.discounts-page__section,
.discount-history {
  display: grid;
  gap: 12px;
}

.discounts-page__section > h2 {
  margin: 0;
  font-size: 1rem;
}

.discounts-page__legend {
  padding: 12px 14px;
  border: 1px solid var(--ion-border-color);
  border-radius: 12px;
  background: var(--ion-item-background, var(--ion-background-color));
  color: var(--ion-color-medium);
  font-size: 0.84rem;
}

.discounts-page__legend summary {
  color: var(--ion-text-color);
  font-weight: 600;
  cursor: pointer;
}

.discounts-page__legend p {
  margin: 9px 0 0;
  line-height: 1.45;
}

.discounts-page__legend h3 {
  margin: 14px 0 7px;
  color: var(--ion-text-color);
  font-size: 0.86rem;
}

.discounts-page__legend dl,
.discounts-page__legend dl > div {
  display: grid;
  gap: 5px 10px;
}

.discounts-page__legend dl {
  margin: 0;
}

.discounts-page__legend dl > div {
  grid-template-columns: 2.7rem minmax(0, 1fr);
}

.discounts-page__legend dt {
  color: var(--ion-text-color);
  font-weight: 650;
}

.discounts-page__legend dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.discount-history-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--ion-border-color);
  border-radius: 12px;
  background: var(--ion-item-background, var(--ion-background-color));
}

.discount-history-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
}

.discount-history-card__header > div:first-child {
  display: grid;
  gap: 2px;
}

.discount-history-card__header time,
.discount-history-card__user,
.discount-history__rules small,
.discount-history__no-discount {
  color: var(--ion-color-medium);
  font-size: 0.78rem;
}

.discount-history-card__user {
  min-width: 0;
  text-align: end;
}

.discount-history-card__amounts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 7px 16px;
  padding-block: 10px;
  border-block: 1px solid var(--ion-border-color);
}

.discount-history-card__amounts strong {
  color: var(--ion-text-color);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.discount-history__rules {
  display: grid;
  gap: 7px;
}

.discount-history__rules ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.discount-history__rules li,
.discount-history__rules small {
  display: block;
  overflow-wrap: anywhere;
}

.discount-history__rules small {
  margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.discount-history__no-discount {
  margin: 0;
}

.discount-history__technical summary {
  color: var(--ion-color-medium);
  cursor: pointer;
  font-size: 0.78rem;
}

.discount-history__technical code {
  display: block;
  margin-top: 7px;
  padding: 8px;
  overflow-wrap: anywhere;
  white-space: normal;
  border-radius: 7px;
  background: var(--ion-color-light);
  color: var(--ion-color-medium-shade);
  font-size: 0.74rem;
}

.discounts-table__scroll {
  overflow-x: auto;
  border: 1px solid var(--ion-border-color);
  border-radius: 12px;
  background: var(--ion-item-background, var(--ion-background-color));
}

.discounts-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.discounts-table th,
.discounts-table td {
  padding: 11px 14px;
  vertical-align: top;
  border-bottom: 1px solid var(--ion-border-color);
}

.discounts-table th {
  color: var(--ion-color-medium);
  font-size: 0.78rem;
  font-weight: 600;
}

.discounts-table tbody tr:last-child td {
  border-bottom: 0;
}

.discounts-table__sections {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 560px) {
  .discount-history-card__header {
    display: grid;
  }

  .discount-history-card__user {
    text-align: start;
  }

  .discounts-table__scroll {
    overflow: visible;
  }

  .discounts-table,
  .discounts-table tbody,
  .discounts-table tr,
  .discounts-table td {
    display: block;
  }

  .discounts-table thead {
    display: none;
  }

  .discounts-table tr + tr {
    border-top: 1px solid var(--ion-border-color);
  }

  .discounts-table td {
    display: grid;
    grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr);
    gap: 10px;
    padding-top: 7px;
    padding-bottom: 7px;
    border: 0;
    overflow-wrap: anywhere;
  }

  .discounts-table td::before {
    content: attr(data-label);
    color: var(--ion-color-medium);
    font-size: 0.78rem;
    font-weight: 600;
  }
}

/* ======================================================
   Statistik
   ====================================================== */

.statistics-page,
.statistics-filters,
.statistics-section {
  display: grid;
  gap: 14px;
}

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

.statistics-scope,
.statistics-section,
.statistics-explanation {
  border: 1px solid var(--ion-border-color);
  border-radius: 14px;
  background: var(--ion-item-background, var(--ion-background-color));
}

.statistics-scope {
  overflow: hidden;
}

.statistics-period-summary {
  color: var(--ion-color-medium);
  font-size: 0.82rem;
}

.statistics-section,
.statistics-explanation {
  padding: 16px;
}

.statistics-section h2,
.statistics-financial-card h3 {
  margin: 0;
}

.statistics-section h2 {
  font-size: 1rem;
}

.statistics-financial-card h3 {
  font-size: 0.92rem;
}

.statistics-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

.statistics-metric {
  display: grid;
  align-content: start;
  gap: 3px;
  min-width: 0;
}

.statistics-metric strong {
  font-size: 1.15rem;
  font-variant-numeric: tabular-nums;
}

.statistics-metric span,
.statistics-explanation p {
  color: var(--ion-color-medium);
  font-size: 0.78rem;
}

.statistics-chart-block {
  min-width: 0;
}

.statistics-chart-block + .statistics-chart-block {
  margin-block-start: var(--mcp-spacing-row);
}

.statistics-chart-block h3 {
  margin: 0 0 8px;
  font-size: 0.86rem;
}

.statistics-chart-container {
  display: grid;
  grid-template-columns: minmax(90px, 31%) minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  min-width: 0;
  background: transparent;
}

.statistics-chart-labels {
  display: grid;
  grid-template-rows: repeat(var(--statistics-member-count), minmax(0, 1fr));
  min-width: 0;
}

.statistics-chart-label {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  font-size: 0.82rem;
  line-height: 1.2;
}

.statistics-chart-label__text {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.statistics-chart-plot {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.statistics-chart-container canvas {
  display: block;
  max-width: 100%;
}

.statistics-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 4px;
  color: var(--ion-color-medium);
  font-size: 0.76rem;
}

.statistics-chart-legend span::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-inline-end: 5px;
  border-radius: 3px;
  background: var(--ion-color-primary);
}

.statistics-chart-legend .statistics-chart-legend__passenger::before {
  background: var(--ion-color-secondary);
}

.statistics-chart-values summary {
  color: var(--ion-color-medium);
  font-size: 0.8rem;
  cursor: pointer;
}

.statistics-chart-values {
  min-width: 0;
}

.statistics-chart-values__scroll {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  margin-top: 8px;
}

.statistics-chart-values table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.statistics-chart-values th,
.statistics-chart-values td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--ion-border-color);
  text-align: start;
}

.statistics-chart-values thead th {
  color: var(--ion-color-medium);
  font-weight: 500;
}

.statistics-bar {
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ion-color-step-150, var(--ion-border-color));
}

.statistics-bar > span {
  display: block;
  width: var(--statistics-bar-value, 0%);
  height: 100%;
  border-radius: inherit;
  background: var(--ion-color-primary);
}

.statistics-distribution {
  display: grid;
  gap: 8px;
}

.statistics-distribution-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(80px, 2fr) 2.5rem;
  align-items: center;
  gap: 10px;
  font-size: 0.82rem;
}

.statistics-distribution-row .statistics-bar {
  grid-column: auto;
}

.statistics-distribution-row strong {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.statistics-financial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.statistics-financial-card {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 12px;
  background: var(--ion-color-step-50, var(--ion-item-background));
}

.statistics-financial-card ion-button {
  justify-self: start;
  margin-inline-start: -12px;
}

.statistics-explanation summary {
  color: var(--ion-color-primary);
  cursor: pointer;
}

.statistics-explanation p:last-child {
  margin-bottom: 0;
}

@media (max-width: 520px) {
  .statistics-filters {
    grid-template-columns: 1fr;
  }

  .statistics-chart-values summary::after {
    content: "↔";
    margin-inline-start: var(--mcp-spacing-row);
    color: var(--ion-color-primary);
  }

  .statistics-chart-values table {
    min-width: 40rem;
  }

  .statistics-chart-values tbody td {
    white-space: nowrap;
  }
}

.payments-summary,
.payment-card {
  padding: 16px;
  border: 1px solid var(--ion-border-color);
  border-radius: 14px;
  background: var(--ion-item-background, var(--ion-background-color));
}

.payments-summary,
.payment-card {
  display: grid;
  gap: 10px;
}

.payment-card > time,
.payment-card__member-state,
.payment-card__entry > span:nth-child(2) {
  color: var(--ion-color-medium);
  font-size: 0.78rem;
}

.payment-card__direction {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.payment-card__direction > span,
.payment-card__entry > span:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.payment-card__direction > span:last-child {
  text-align: right;
}

.payment-card__direction ion-icon {
  color: var(--ion-color-medium);
}

.payment-card__amount {
  font-size: 1.12rem;
  font-variant-numeric: tabular-nums;
}

.payment-card__entries {
  display: grid;
  gap: 8px;
}

.payment-card__entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
}

.payment-card__entry strong {
  font-variant-numeric: tabular-nums;
}

.payment-card__personal,
.payment-card__comment {
  padding-top: 10px;
  border-top: 1px solid var(--ion-border-color);
}

.payment-card__comment {
  display: grid;
  gap: 3px;
  color: var(--ion-color-medium-shade);
  font-size: 0.82rem;
}

@media (max-width: 420px) {
  .payment-card__entry {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .payment-card__entry > span:nth-child(2) {
    grid-column: 1;
  }
}
.member-invite-modal {
  --width: min(94vw, 620px);
  --height: min(90%, 760px);
  --border-radius: 16px;
}

.member-invite-dialog {
  display: grid;
  gap: 18px;
  max-width: 560px;
  margin-inline: auto;
}

.member-invite-section {
  padding: 16px;
  border: 1px solid var(--ion-color-step-200, rgba(var(--ion-text-color-rgb), 0.14));
  border-radius: 14px;
  background: var(--ion-card-background, var(--ion-background-color));
}

.member-invite-section h3 {
  margin: 0 0 6px;
  font-size: 1rem;
}

.member-invite-section__description,
.member-invite-expiry,
.member-invite-qr-error {
  margin: 0 0 12px;
  color: var(--ion-color-medium);
  font-size: 0.84rem;
  line-height: 1.4;
}

.member-invite-text,
.member-invite-link,
.member-invite-code {
  overflow-wrap: anywhere;
}

.member-invite-text {
  padding: 12px;
  border-radius: 10px;
  background: var(--ion-color-light);
  line-height: 1.45;
  white-space: pre-wrap;
}

.member-invite-link {
  display: block;
  margin-top: 10px;
  font-size: 0.82rem;
}

.member-invite-expiry {
  margin-top: 8px;
  margin-bottom: 0;
}

.member-invite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.member-invite-section--qr {
  text-align: center;
}

.member-invite-qr {
  display: grid;
  place-items: center;
  min-height: 240px;
  margin-block: 14px;
}

.member-invite-qr img,
.member-invite-qr canvas {
  width: min(240px, 72vw) !important;
  height: auto !important;
  max-width: 100%;
  padding: 8px;
  background: #fff;
  border-radius: 10px;
}

.member-invite-code {
  display: grid;
  gap: 4px;
  color: var(--ion-color-medium);
  font-size: 0.78rem;
}

.member-invite-code code {
  color: var(--ion-text-color);
  font-size: 0.82rem;
  user-select: all;
}

.member-invite-trust {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.member-invite-advanced {
  border: 1px solid var(--ion-color-step-200, rgba(var(--ion-text-color-rgb), 0.14));
  border-radius: 14px;
  overflow: hidden;
}

.member-invite-advanced__content {
  padding-inline: 8px;
}

.member-invite-advanced ion-label p {
  margin: 4px 0 0;
  color: var(--ion-color-medium);
  font-size: 0.82rem;
  line-height: 1.35;
  white-space: normal;
}

.member-invite-dialog--updating {
  opacity: 0.68;
  pointer-events: none;
}

.simple-payment-editor__member-trigger h3,
.simple-payment-member-picker__row ion-label {
  min-width: 0;
  overflow: visible;
  white-space: normal;
}

.simple-payment-editor__member-trigger [data-role$="-balance"],
.simple-payment-member-picker__row strong {
  flex: 0 0 auto;
  white-space: nowrap;
}

.simple-payment-editor__suggestion {
  padding: 0 16px 8px;
}

.simple-payment-editor__paypal {
  padding: 0 16px 14px;
}

.simple-payment-editor__paypal ion-note {
  display: block;
  padding: 0 4px;
  color: var(--ion-color-medium);
  line-height: 1.35;
}

.payment-editor__amount-control {
  align-items: flex-end;
  width: 100%;
}

.payment-editor__amount-control .numeric-stepper__value-control {
  width: 100%;
}

.payment-editor__amount-buttons {
  padding-bottom: 4px;
}

.payment-editor__comment-item {
  --inner-padding-top: var(--settings-control-gap, 8px);
  --inner-padding-bottom: var(--settings-control-gap, 8px);
}

.payment-editor__comment {
  width: 100%;
  min-height: 6.5rem;
  --background: var(--ion-item-background, var(--ion-background-color));
  --border-color: var(--ion-border-color);
  --border-radius: var(--settings-control-radius, 8px);
  --padding-top: var(--settings-control-gap, 8px);
  --padding-bottom: var(--settings-control-gap, 8px);
  --padding-start: var(--settings-control-gap, 8px);
  --padding-end: var(--settings-control-gap, 8px);
}

.simple-payment-editor__secondary-actions {
  display: flex;
  justify-content: flex-start;
  padding: var(--settings-section-gap, 12px) 16px 0;
}

.simple-payment-editor__secondary-actions ion-button {
  margin: 0;
  text-transform: none;
}

.simple-payment-editor__secondary-actions ion-button[disabled] {
  opacity: 0.58;
}

.simple-payment-editor__info {
  margin: var(--settings-section-gap, 12px) 16px 14px;
  color: var(--ion-color-medium-shade, var(--ion-text-color));
  font-size: 0.82rem;
  line-height: 1.4;
}

.simple-payment-editor__info summary {
  color: var(--ion-color-primary);
  cursor: pointer;
}

.simple-payment-editor__info p {
  margin: 8px 0 0;
}

.multiple-payment-editor {
  display: grid;
  gap: var(--app-section-gap, 16px);
  max-width: 760px;
  margin-inline: auto;
}

.multiple-payment-editor__intro,
.multiple-payment-editor__booking-date {
  margin: 0;
  line-height: 1.4;
}

.multiple-payment-editor__booking-date {
  color: var(--ion-color-medium-shade, var(--ion-text-color));
  font-size: 0.84rem;
}

.multiple-payment-editor__list {
  display: grid;
  gap: var(--app-section-gap, 16px);
}

.multiple-payment-row {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.multiple-payment-row--invalid {
  border-color: var(--ion-color-danger);
}

.multiple-payment-row__header,
.multiple-payment-row__people {
  display: flex;
  align-items: center;
}

.multiple-payment-row__header {
  justify-content: space-between;
  gap: 8px;
}

.multiple-payment-row__header h3 {
  margin: 0;
  font-size: 1rem;
}

.multiple-payment-row__header ion-button {
  margin: 0;
}

.multiple-payment-row__people {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
}

.multiple-payment-row__member {
  min-width: 0;
  margin: 0;
  text-transform: none;
}

.multiple-payment-row__member::part(native) {
  min-width: 0;
  justify-content: flex-start;
}

.multiple-payment-row__member span,
.multiple-payment-row__member strong,
.multiple-payment-row__member small {
  display: block;
  min-width: 0;
  text-align: left;
  white-space: normal;
  overflow-wrap: break-word;
}

.multiple-payment-row__member small {
  margin-bottom: 2px;
  color: var(--ion-color-medium);
  font-size: 0.72rem;
}

.multiple-payment-row > .payment-editor__field-item {
  --background: transparent;
  --inner-border-width: 0;
  --inner-padding-end: 0;
  --padding-start: 0;
}

@media (max-width: 420px) {
  .multiple-payment-row__people {
    grid-template-columns: 1fr;
  }

  .multiple-payment-row__people > ion-icon {
    transform: rotate(90deg);
    justify-self: center;
  }
}

ion-popover.simple-payment-member-picker-popover {
  --width: min(420px, calc(100vw - 24px));
}

.simple-payment-member-picker__row::part(native) {
  align-items: center;
}

.simple-payment-member-picker__row ion-label {
  margin-right: 12px;
}

@media (min-width: 680px) {
  .member-invite-dialog {
    grid-template-columns: minmax(0, 1fr) minmax(250px, 0.8fr);
  }

  .member-invite-trust {
    grid-column: 1 / -1;
  }

  .member-invite-advanced {
    grid-column: 1 / -1;
  }
}

.driver-transport-editor__capacity-hint,
.ourPlan__vehicle-warning {
  color: color-mix(
    in srgb,
    var(--ion-color-warning) 58%,
    var(--ion-text-color)
  );
  background: color-mix(
    in srgb,
    var(--ion-color-warning) 12%,
    var(--ion-item-background, var(--ion-background-color))
  );
  border-radius: 10px;
  font-size: 0.78rem;
  line-height: 1.35;
}

.driver-transport-editor__capacity-hint {
  margin: 10px 0;
  padding: 9px 12px;
}

.driver-transport-editor__capacity-group {
  --background: transparent;
  --color: var(--ion-color-medium-shade, var(--ion-text-color));
  font-size: 0.78rem;
  font-weight: 600;
  min-height: 30px;
}

.ourPlan__vehicle-warning {
  flex: 1 1 100%;
  margin: 4px 8px 2px 44px;
  padding: 6px 9px;
}

.ourPlan__trip-feedback {
  margin-block: var(--app-spacing-xs, 0.5rem);
}

.ourPlan__trip-feedback .ourPlan__vehicle-warning {
  margin-inline-start: 0;
}

.ourPlan__assignment-next-step {
  color: var(--ion-color-primary);
  font-size: 0.85rem;
  margin-block: var(--app-spacing-xs, 0.5rem);
}

.ourPlan__capacity-conflict {
  color: color-mix(in srgb, var(--ion-color-warning) 60%, var(--ion-text-color));
}

.ourPlan__vehicle-warning--blocking {
  color: color-mix(in srgb, var(--ion-color-danger) 68%, var(--ion-text-color));
  background: color-mix(in srgb, var(--ion-color-danger) 10%, var(--ion-item-background, var(--ion-background-color)));
}

.ourPlan__driverGroup--unavailable .ourPlan__vehicle-warning {
  margin-inline-start: 8px;
}

.ourPlan__vehicle-warning ion-button {
  display: block;
  margin: 2px 0 0 -8px;
  min-height: 28px;
}

.our-plan-vehicle-manager__intro {
  margin-top: 0;
  color: var(--ion-color-medium-shade, var(--ion-text-color));
}

.our-plan-vehicle-manager__vehicles ion-checkbox {
  width: 100%;
}

.our-plan-vehicle-manager__vehicles ion-note {
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
}

.our-plan-vehicle-manager__error {
  margin: 10px 0;
  color: var(--ion-color-danger);
  font-size: 0.82rem;
}

.our-plan-vehicle-assignment {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--ion-color-step-150, var(--ion-color-light-shade));
}

.our-plan-vehicle-assignment h3 {
  margin: 0 0 6px;
  font-size: 0.9rem;
}

.our-plan-vehicle-assignment ion-select {
  width: 100%;
  white-space: normal;
}
.trip-live-position__leaflet-marker {
  align-items: center;
  background: var(--ion-color-success, #2f8f4e);
  border: 2px solid var(--ion-background-color, #fff);
  border-radius: 50%;
  box-shadow: 0 1px 4px rgb(0 0 0 / 35%);
  color: var(--ion-color-success-contrast, #fff);
  display: flex;
  font-size: 0.72rem;
  font-weight: 700;
  justify-content: center;
}

.trip-live-position__leaflet-marker--own {
  background: var(--ion-color-primary, #1e88e5);
  color: var(--ion-color-primary-contrast, #fff);
}
.equipment-member > .settings-list + .equipment-seats {
  margin-block-start: var(--settings-section-gap, 0.75rem);
}

.mcp-settings-row ion-label > .day-vehicle-status--normal {
  color: var(--ion-color-medium);
  font-weight: 400;
}

.mcp-settings-row ion-label > .day-vehicle-status--exception {
  color: var(--ion-text-color);
  font-weight: 500;
}

.equipment-seats__label {
  margin-block-end: var(--settings-control-gap, 0.5rem);
}

.equipment-available {
  margin-block-start: var(--settings-section-gap, 0.75rem);
}

.equipment-available > .equipment-seats {
  margin-block-start: var(--settings-section-gap, 0.75rem);
}

.invite-auth-context {
  border-inline-start: 0.25rem solid var(--ion-color-primary);
}

.invite-auth-context p {
  margin-block: 0 var(--settings-section-gap, 0.75rem);
}

.invite-auth-context__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--settings-control-gap, 0.5rem);
}

/* Farben für den Navigationsteil und URL-Eingabefeld von Safari und anderen Browsers in der Web-App  */

:root {
  --mcp-browser-surface: #95ccff;
}

.dark-theme {
  --mcp-browser-surface: #121212;
}

.aquarell-theme {
  --mcp-browser-surface: #eaf4fb;
}

.nature-theme {
  --mcp-browser-surface: #d4edda;
}
.ourPlan__driver-status--child-seats {
  flex-direction: column;
  align-items: flex-start;
}
/*
 * Small, deliberately restrained Ionic-iOS polish, not a Liquid Glass replica.
 * Remove this file and its index.html link when Ionic supplies a suitable
 * modern iOS style. App logic, MD styling and layout remain unchanged.
 * Only documented host variables / Shadow Parts are used below.
 */

/* Toggle refinement. Resolve derived colors on the host, where
 * the active theme lives, not on :root. Black is used only for neutral shading;
 * Ionic still owns track geometry, checked/unchecked colors and positioning. */
ion-toggle.ios {
  /* Experimental elongated handle on the unchanged 51 x 31px track.
   * Ionic adds 6px while activated and computes both LTR/RTL end positions. */
  --handle-width: 32px;
  --handle-height: 27px;
  --handle-border-radius: 13.5px;
  --handle-spacing: 2px;
  --mcp-ios26-toggle-track-light: color-mix(
    in srgb, var(--app-toggle-handle-background-checked) 20%, transparent
  );
  --mcp-ios26-toggle-track-shade: rgb(0 0 0 / 8%);
  --handle-box-shadow:
    inset 0 1px 0 color-mix(
      in srgb, var(--app-toggle-handle-background-checked) 60%, transparent
    ),
    0 2px 5px rgb(0 0 0 / 14%),
    var(--app-toggle-handle-shadow);
}

/* Reduce the reflected light in dark mode to avoid a glossy plastic finish. */
.dark-theme ion-toggle.ios {
  --mcp-ios26-toggle-track-light: color-mix(
    in srgb, var(--app-toggle-handle-background-checked) 8%, transparent
  );
}

ion-toggle.ios::part(track) {
  background-image: linear-gradient(
    to bottom,
    var(--mcp-ios26-toggle-track-light),
    transparent 55%,
    var(--mcp-ios26-toggle-track-shade)
  );
  box-shadow: inset 0 0 0 1px var(--mcp-border-subtle);
}

/* Preserve the existing handle background; layer a soft highlight and shade
 * without borders, resizing, transforms or changes to disabled opacity. */
ion-toggle.ios::part(handle) {
  background-image: linear-gradient(
    to bottom,
    color-mix(
      in srgb, var(--app-toggle-handle-background-checked) 28%, transparent
    ),
    transparent 45%,
    rgb(0 0 0 / 4%)
  );
}

/* Keep Ionic's border width, header height and opaque theme surface.
 * Transparent native-map overlays must retain their own header treatment. */
ion-toolbar.ios:not(.native-google-map-modal--active ion-toolbar) {
  --border-color: var(--mcp-border-subtle);
}

/* Header surface only. Leave header height, safe areas, scroll ownership and
 * Ionic's bottom hairline intact. Native-map headers intentionally stay clear.
 * Without backdrop-filter the existing opaque Ionic/theme surface is retained.
 * Actual content underlap requires Ionic's documented fullscreen property. */
ion-header.ios:not(.native-google-map-modal--active ion-header) > ion-toolbar.ios:not(.ion-color) {
  --mcp-ios26-header-surface: var(--ion-toolbar-background, var(--mcp-surface-card));
  --mcp-ios26-header-coverage: 85%;
}

.dark-theme ion-header.ios:not(.native-google-map-modal--active ion-header) > ion-toolbar.ios:not(.ion-color) {
  --mcp-ios26-header-coverage: 92%;
}

:is(.nature-theme, .aquarell-theme) ion-header.ios:not(.native-google-map-modal--active ion-header) > ion-toolbar.ios:not(.ion-color) {
  --mcp-ios26-header-coverage: 88%;
}

@supports (background: color-mix(in srgb, currentColor 85%, transparent)) and ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) {
  ion-header.ios:not(.native-google-map-modal--active ion-header) > ion-toolbar.ios:not(.ion-color) {
    --background: color-mix(in srgb, var(--mcp-ios26-header-surface) var(--mcp-ios26-header-coverage), transparent);
  }

  ion-header.ios:not(.native-google-map-modal--active ion-header) > ion-toolbar.ios:not(.ion-color)::part(background) {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

/* Opt in only existing app popovers; leave size, arrow, position, scrolling
 * and backdrop untouched. Inset contours do not change the content box. */
ion-popover.ios:is(
  .context-menu-popover,
  .ride-field-popover,
  .chat-message-actions-popover,
  .simple-payment-member-picker-popover,
  .pasttrips-export-popover
)::part(content) {
  box-shadow:
    inset 0 0 0 1px var(--mcp-border-subtle),
    var(--app-surface-shadow);
}

/* The ride-field popover already has a suitable 18px radius; keep it. */
ion-popover.ios:is(
  .context-menu-popover,
  .chat-message-actions-popover,
  .simple-payment-member-picker-popover,
  .pasttrips-export-popover
)::part(content) {
  border-radius: var(--app-surface-radius);
}

/* Login only: Ionic still controls selection, colors, focus and animation. */
#login-mode.ios ion-segment-button.ios::part(indicator-background) {
  box-shadow: var(--app-toggle-handle-shadow);
}

/* No modal override in this pass: responsive-modal / ride-field-modal also
 * host specialized and transparent overlays. Preserve their existing styles. */

/* Modern iOS-inspired buttons, not a pixel replica of an Apple component.
 * Keep semantic colors, Ionic state overlays, text/icon alignment and loading
 * content. Mini/inline actions retain their existing compact geometry.
 * The host radius also makes the existing keyboard-focus outline a capsule. */
ion-button.ios:not(.mini-button) {
  --border-radius: 999px;
  --box-shadow: none;
  border-radius: 999px;
}

/* Do not enlarge small inline actions or alter toolbar layout here.
 * Normal buttons can grow for text/Dynamic Type; never force a fixed height. */
ion-button.ios:not(.mini-button):not([size="small"]):not([fill="clear"]):not(.in-toolbar) {
  min-height: max(44px, var(--mcp-control-height));
}

/* Ionic's color=... outline implementation sets a transparent background
 * inside the shadow root. Its documented native part is therefore needed
 * for a tint that also respects danger/medium and all four theme surfaces.
 * Do not replace the pressed/focus overlay or its contrasting text color. */
ion-button.ios[fill="outline"]:not(.mini-button):not(.in-toolbar)::part(native) {
  background: color-mix(in srgb, currentColor 8%, var(--mcp-surface-card));
}

/* Toolbar actions stay clear, with quiet but perceptible Ionic state layers.
 * Text actions remain capsules, icon-only actions get a 44px circle.
 * :has() inspects public light-DOM slots, never internal shadow markup. */
ion-toolbar.ios ion-buttons ion-button.ios:not(.mini-button) {
  min-height: 44px;
  --background-activated: currentColor;
  --background-activated-opacity: 0.12;
  --background-focused: currentColor;
  --background-focused-opacity: 0.12;
  --background-hover: currentColor;
  --background-hover-opacity: 0.08;
}

ion-toolbar.ios ion-buttons ion-button.ios:not(.mini-button):has(> ion-icon[slot="icon-only"]) {
  min-width: 44px;
  --padding-start: 0;
  --padding-end: 0;
}

ion-toolbar.ios ion-buttons ion-button.ios:not(.mini-button):has(> ion-icon[slot="icon-only"])::part(native) {
  background: color-mix(in srgb, currentColor 6%, var(--mcp-surface-card));
}

/* Icon-only hosts can otherwise grow independently in each axis (toolbar
 * height versus Ionic's icon min-width). Clip native/state surfaces explicitly
 * for WebKit too; text/capsule actions never match this public slot selector. */
ion-button.ios:not(.mini-button):has(> ion-icon[slot="icon-only"]) {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  --border-radius: 50%;
  --padding-start: 0;
  --padding-end: 0;
}

ion-button.ios:not(.mini-button):has(> ion-icon[slot="icon-only"])::part(native) {
  border-radius: 50%;
  overflow: hidden;
}

/* FABs are a separate component: retain circular/extended geometry, sizes,
 * theme backgrounds, fixed positioning and safe-area offsets. Only soften
 * their elevation; no button sizing/toolbar rules are shared with them. */
ion-fab-button.ios {
  --box-shadow: 0 2px 8px color-mix(in srgb, var(--ion-text-color) 12%, transparent);
}

/* Focus is on Ionic's native button inside its shadow root, not necessarily
 * on the host matched by the app's existing :focus-visible outline. An inset
 * ring remains visible inside the capsule without enlarging the layout. */
ion-button.ios:not(.mini-button)::part(native):focus-visible,
ion-fab-button.ios::part(native):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}
/*
 * Toggle-only pilot adapted from @rdlabo/ionic-theme-ios27 1.2.1,
 * src/styles/components/ion-toggle.scss (pinned local package).
 * Disable completely by removing its single link in src/index.html.
 *
 * App adaptations: retain existing track/handle theme colors; reset only the
 * older toggle gradients, contour, radius and shadow. No full-theme defaults.
 * Ionic 8.8.7's default handle radius is 25.5px; restore it after our 13.5px
 * override. Native disabled/focus/touch behavior and mini scaling stay intact.
 *
 * MIT License — Copyright (c) 2021
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

.mca-ios-modern ion-toggle.ios:not(.ios-theme-disabled, .ios26-disabled) {
  --handle-border-radius: 25.5px;
  --handle-box-shadow: var(--app-toggle-handle-shadow);
}

.mca-ios-modern ion-toggle.ios:not(.ios-theme-disabled, .ios26-disabled)::part(track) {
  background-image: none;
  box-shadow: none;
}

.mca-ios-modern ion-toggle.ios:not(.ios-theme-disabled, .ios26-disabled)::part(handle) {
  background-image: none;
}

/* Upstream geometry, lens surface, spring timing, RTL, disabled and reduced
 * motion rules. Upstream track-color declarations deliberately omitted. */
.mca-ios-modern ion-toggle.ios:not(.ios-theme-disabled,.ios26-disabled) {
  --handle-width: 37px;
  --handle-height: 24px;
  --handle-max-width: none;
  --handle-max-height: none;
  --border-radius: 14px
}
.mca-ios-modern ion-toggle.ios:not(.ios-theme-disabled,.ios26-disabled)::part(track) {
  width:63px;
  height:28px
}
@supports(scale: 1) and (translate: 0) and (width: calc(sin(1rad) * 1px)) and (background: color-mix(in srgb, white, transparent)) and (transition-timing-function: linear(0, 1)) and ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @property --ios27-toggle-change {
    syntax:"<number>";
    inherits:true;
    initial-value:0
  }
  @property --ios27-toggle-press {
    syntax:"<number>";
    inherits:true;
    initial-value:0
  }
  @property --ios27-toggle-held {
    syntax:"<number>";
    inherits:true;
    initial-value:0
  }
  .mca-ios-modern ion-toggle.ios:not(.ios-theme-disabled,.ios26-disabled) {
    --handle-width: 37px;
    --handle-height: 24px;
    --handle-max-width: none;
    --handle-max-height: none;
    --border-radius: 14px;
    --handle-box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, calc(var(--ios27-toggle-glass) * 0.25)), inset 0 5px 3px -4px rgba(255, 255, 255, calc(var(--ios27-toggle-glass) * 0.8)), inset 0 -5px 3px -4px rgba(255, 255, 255, calc(var(--ios27-toggle-glass) * 0.8)), 0 5px 8px rgba(0, 0, 0, calc(var(--ios27-toggle-glass) * 0.18))
  }
  .mca-ios-modern ion-toggle.ios:not(.ios-theme-disabled,.ios26-disabled) {
    --ios27-toggle-release: linear( 0, 0.092 4.7%, 0.272 9.4%, 0.459 14.3%, 0.621 19%, 0.802 26.1%, 0.923 33.3%, 1.047 47.6%, 1.0666 57.1%, 1.0635 61.9%, 1.034 69%, 1.0175 83.3%, 1 );
    --handle-transition: transform 700ms var(--ios27-toggle-release);
    --ios27-toggle-change: 0;
    --ios27-toggle-press: 0;
    --ios27-toggle-held: 0;
    --ios27-toggle-progress: calc(1 - var(--ios27-toggle-change));
    --ios27-toggle-pulse: calc(sin(var(--ios27-toggle-progress) * 180deg) * (1 - var(--ios27-toggle-held)));
    --ios27-toggle-expansion: min(1.157, calc(var(--ios27-toggle-press) + var(--ios27-toggle-pulse) * 1.157));
    --ios27-toggle-expansion-y: min( max(1.028, var(--ios27-toggle-press)), calc(var(--ios27-toggle-press) + var(--ios27-toggle-pulse) * 1.028) );
    --ios27-toggle-glass: clamp(0, calc(var(--ios27-toggle-expansion) * 2), 1);
    transition:--ios27-toggle-change 600ms ease-out,--ios27-toggle-press 700ms var(--ios27-toggle-release),--ios27-toggle-held 0s 700ms
  }
  .mca-ios-modern ion-toggle.ios:not(.ios-theme-disabled,.ios26-disabled).toggle-checked {
    --ios27-toggle-change: 1;
    --ios27-toggle-progress: var(--ios27-toggle-change)
  }
  .mca-ios-modern ion-toggle.ios:not(.ios-theme-disabled,.ios26-disabled):is(.toggle-activated,:active):not(.toggle-disabled) {
    --ios27-toggle-press: 1;
    --ios27-toggle-held: 1;
    transition:--ios27-toggle-change 600ms ease-out,--ios27-toggle-press 250ms linear(0, 0.7 20%, 1.122 50%, 1.075 67%, 1),--ios27-toggle-held 0s 120ms
  }
  .mca-ios-modern ion-toggle.ios:not(.ios-theme-disabled,.ios26-disabled)::part(track) {
    overflow:visible;
    width:63px;
    height:28px
  }
  .mca-ios-modern ion-toggle.ios:not(.ios-theme-disabled,.ios26-disabled)::part(handle) {
    transform:none;
    translate:0;
    scale:calc(1 + .5675675676*var(--ios27-toggle-expansion)) calc(1 + .5972222083*var(--ios27-toggle-expansion-y));
    background:color-mix(in srgb, var(--handle-background) calc(100% - var(--ios27-toggle-glass) * 90%), transparent);
    backdrop-filter:blur(calc(var(--ios27-toggle-glass) * 0.5px)) saturate(calc(100% + var(--ios27-toggle-glass) * 20%));
    -webkit-backdrop-filter:blur(calc(var(--ios27-toggle-glass) * 0.5px)) saturate(calc(100% + var(--ios27-toggle-glass) * 20%));
    transition:var(--handle-transition);
    transition-property:translate
  }
  .mca-ios-modern ion-toggle.ios:not(.ios-theme-disabled,.ios26-disabled).toggle-checked::part(handle) {
    translate:calc(var(--handle-spacing)*-2);
    background:color-mix(in srgb, var(--handle-background-checked) calc(100% - var(--ios27-toggle-glass) * 90%), transparent)
  }
  .mca-ios-modern ion-toggle.ios:not(.ios-theme-disabled,.ios26-disabled).toggle-checked.toggle-rtl::part(handle) {
    translate:calc(var(--handle-spacing)*2)
  }
  .mca-ios-modern ion-toggle.ios:not(.ios-theme-disabled,.ios26-disabled).toggle-disabled {
    --ios27-toggle-expansion: 0;
    --ios27-toggle-expansion-y: 0
  }
  @media(prefers-reduced-motion: reduce) {
    .mca-ios-modern ion-toggle.ios:not(.ios-theme-disabled,.ios26-disabled) {
      --handle-transition: none;
      --ios27-toggle-expansion: 0;
      --ios27-toggle-expansion-y: 0;
      transition:none
    }
    .mca-ios-modern ion-toggle.ios:not(.ios-theme-disabled,.ios26-disabled)::part(handle) {
      transition:none
    }
  }
  .mca-ios-modern ion-item.ios:not(.ios-theme-disabled,.ios26-disabled) ion-toggle.ios:not(.ios-theme-disabled,.ios26-disabled) {
    padding-inline-end:10px
  }
}


@media (prefers-reduced-transparency: reduce) {
  .mca-ios-modern ion-toggle.ios::part(handle) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--handle-background);
  }
  .mca-ios-modern ion-toggle.ios.toggle-checked::part(handle) { background: var(--handle-background-checked); }
}

/* Modern layer only; retain Ionic semantic colors and state overlays. */
.mca-ios-modern ion-button.ios:not(.mini-button) {
  --border-radius: 999px;
  --box-shadow: none;
}
.mca-ios-modern ion-button.ios:not(.mini-button):not(.in-toolbar):not([size="small"]):not([fill="clear"]) {
  min-height: 44px;
  --padding-start: 22px;
  --padding-end: 22px;
}
.mca-ios-modern ion-button.ios[fill="outline"]:not(.mini-button):not(.in-toolbar)::part(native) {
  background: var(--mcp-surface-card);
  background: color-mix(in srgb, currentColor 12%, var(--mcp-surface-card));
}
/* Only public icon-only slots, not text actions or internal shadow markup. */
.mca-ios-modern ion-button.ios:not(.mini-button):has(> ion-icon[slot="icon-only"]) {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  --border-radius: 50%;
  --padding-start: 0;
  --padding-end: 0;
  --background-hover: currentColor;
  --background-hover-opacity: 0.08;
  --background-activated: currentColor;
  --background-activated-opacity: 0.12;
  --background-focused: currentColor;
  --background-focused-opacity: 0.12;
}
.mca-ios-modern ion-button.ios:not(.mini-button):has(> ion-icon[slot="icon-only"])::part(native) {
  border-radius: 50%;
  overflow: hidden;
  background: var(--mcp-surface-card);
  background: color-mix(in srgb, currentColor 9%, var(--mcp-surface-card));
  box-shadow: inset 0 0 0 1px var(--mcp-border-subtle);
}
/* Floating appearance without absolute/fixed overlay: Ionic reserves the whole
 * bar + margins in its layout. Existing measured FAB positioning stays owner.
 * Scoped to the main navigation; overlay/dialog navigation is not changed. */
.mca-ios-modern #mainTabs > ion-tab-bar.ios {
  --background: var(--ion-tab-bar-background, var(--mcp-surface-card));
  --border: 0;
  --color-selected: var(--ion-color-primary);
  flex-shrink: 0;
  box-sizing: border-box;
  height: 60px;
  min-height: 60px;
  width: calc(100% - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  max-width: 560px;
  align-self: center;
  margin-top: 8px;
  margin-bottom: calc(8px + var(--ion-safe-area-bottom, env(safe-area-inset-bottom, 0px)));
  padding-bottom: 0;
  border-radius: 30px;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--mcp-border-subtle),
    0 4px 16px color-mix(in srgb, var(--ion-text-color) 12%, transparent);
}
.mca-ios-modern #mainTabs > ion-tab-bar.ios ion-tab-button.ios {
  --background: transparent;
  min-height: 44px;
  border-radius: 26px;
}
/* GLASS SURFACE START: remove this block through GLASS SURFACE END to keep
 * the existing floating geometry with its solid fallback. No geometry below. */
.mca-ios-modern #mainTabs > ion-tab-bar.ios {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ion-color-primary-contrast) 55%, transparent),
    inset 0 0 0 1px var(--mcp-border-subtle),
    0 6px 20px color-mix(in srgb, var(--ion-text-color) 18%, transparent);
}
@supports (background: color-mix(in srgb, white, transparent)) and ((backdrop-filter: blur(20px)) or (-webkit-backdrop-filter: blur(20px))) {
  .mca-ios-modern #mainTabs > ion-tab-bar.ios {
    --background: color-mix(in srgb, var(--ion-tab-bar-background, var(--mcp-surface-card)) 66%, transparent);
    backdrop-filter: blur(20px) saturate(145%);
    -webkit-backdrop-filter: blur(20px) saturate(145%);
  }
  .mca-ios-modern:has(.dark-theme) #mainTabs > ion-tab-bar.ios {
    --background: color-mix(in srgb, var(--ion-tab-bar-background, var(--mcp-surface-card)) 80%, transparent);
  }
  .mca-ios-modern:has(:is(.nature-theme, .aquarell-theme)) #mainTabs > ion-tab-bar.ios {
    --background: color-mix(in srgb, var(--ion-tab-bar-background, var(--mcp-surface-card)) 72%, transparent);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .mca-ios-modern #mainTabs > ion-tab-bar.ios,
  .mca-ios-modern:has(:is(.dark-theme, .nature-theme, .aquarell-theme)) #mainTabs > ion-tab-bar.ios {
    --background: var(--ion-tab-bar-background, var(--mcp-surface-card));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}
/* GLASS SURFACE END */
/* Independent active pill; remove its index.html link to disable.
 * Ionic owns .tab-selected. No selection/position/layout logic here. */
.mca-ios-modern #mainTabs > ion-tab-bar.ios ion-tab-button.ios.tab-selected::part(native) {
  border-radius: 26px;
  background: var(--mcp-surface-card);
  background: color-mix(in srgb, var(--ion-color-primary) 20%, var(--mcp-surface-card));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ion-color-primary-contrast) 48%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--ion-color-primary) 28%, transparent),
    0 2px 6px color-mix(in srgb, var(--ion-text-color) 10%, transparent);
}
.mca-ios-modern:has(.dark-theme) #mainTabs > ion-tab-bar.ios ion-tab-button.ios.tab-selected::part(native) {
  background: color-mix(in srgb, var(--ion-color-primary) 28%, var(--mcp-surface-card));
}
@supports (background: color-mix(in srgb, white, transparent)) and ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
  .mca-ios-modern #mainTabs > ion-tab-bar.ios ion-tab-button.ios.tab-selected::part(native) {
    background: color-mix(in srgb, var(--ion-color-primary) 20%, color-mix(in srgb, var(--mcp-surface-card) 82%, transparent));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
  .mca-ios-modern:has(.dark-theme) #mainTabs > ion-tab-bar.ios ion-tab-button.ios.tab-selected::part(native) {
    background: color-mix(in srgb, var(--ion-color-primary) 28%, color-mix(in srgb, var(--mcp-surface-card) 92%, transparent));
  }
}
@media (prefers-reduced-transparency: reduce) {
  .mca-ios-modern #mainTabs > ion-tab-bar.ios ion-tab-button.ios.tab-selected::part(native) {
    background: var(--mcp-surface-card);
    background: color-mix(in srgb, var(--ion-color-primary) 20%, var(--mcp-surface-card));
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .mca-ios-modern:has(.dark-theme) #mainTabs > ion-tab-bar.ios ion-tab-button.ios.tab-selected::part(native) {
    background: color-mix(in srgb, var(--ion-color-primary) 28%, var(--mcp-surface-card));
  }
}
/* No position/size/safe-area changes. Keep extended Confirm and small FABs. */
.mca-ios-modern ion-fab-button.ios {
  --box-shadow: 0 4px 12px color-mix(in srgb, var(--ion-text-color) 18%, transparent);
}
.mca-ios-modern ion-fab-button.ios::part(native) {
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--ion-color-primary-contrast) 28%, transparent), var(--box-shadow);
}
.mca-ios-modern ion-fab-button.ios::part(native):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -4px;
}
/* Independent modest press expansion inspired by the pinned iOS27 pilot.
 * Use the public native part: host layout/touch area and positioned transforms
 * remain unchanged. No hover scale, permanent will-change or JS listeners.
 * Remove this stylesheet link to disable all three interaction families. */
.mca-ios-modern ion-button.ios:not(.mini-button)::part(native),
.mca-ios-modern ion-fab-button.ios::part(native) {
  transition: transform 220ms cubic-bezier(0.37, 0.36, 0.03, 1.15),
    background-color 100ms linear, opacity 100ms linear;
}
/* Text buttons; compact inline actions are deliberately excluded. */
.mca-ios-modern ion-button.ios:not(.mini-button):not([size="small"]):not(:has(> ion-icon[slot="icon-only"])):not(.button-disabled):not([disabled]):is(:active, .ion-activated)::part(native) {
  transform: scale(1.04);
}
/* Icon-only controls receive slightly more perceptible expansion. */
.mca-ios-modern ion-button.ios:not(.mini-button):has(> ion-icon[slot="icon-only"]):not(.button-disabled):not([disabled]):is(:active, .ion-activated)::part(native) {
  transform: scale(1.08);
}
/* Extended Confirm and circular left/right FABs retain host size/position. */
.mca-ios-modern ion-fab-button.ios:not(.fab-button-disabled):not([disabled]):is(:active, .ion-activated)::part(native) {
  transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .mca-ios-modern ion-button.ios:not(.mini-button):not([size="small"]):not(:has(> ion-icon[slot="icon-only"])):not(.button-disabled):not([disabled]):is(:active, .ion-activated)::part(native),
  .mca-ios-modern ion-button.ios:not(.mini-button):has(> ion-icon[slot="icon-only"]):not(.button-disabled):not([disabled]):is(:active, .ion-activated)::part(native),
  .mca-ios-modern ion-fab-button.ios:not(.fab-button-disabled):not([disabled]):is(:active, .ion-activated)::part(native) {
    transform: none;
  }
  .mca-ios-modern ion-button.ios:not(.mini-button)::part(native),
  .mca-ios-modern ion-fab-button.ios::part(native) {
    transform: none;
    transition: background-color 100ms linear, opacity 100ms linear;
  }
}