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


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

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

#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 {

  --ion-color-primary: #5c7cfa;
  --ion-color-primary-contrast: #ffffff;

  --ion-background-color: #f8f9fa;
  --ion-text-color: #212529;

  --ion-color-secondary: #868e96;
  --ion-color-tertiary: #dee2e6;

  --ion-card-background: #ffffff;
  --ion-border-color: #e9ecef;

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

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

  --chat-border: var(--ion-border-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: color-mix(in srgb, var(--ion-item-background) 94%, var(--ion-text-color));
  --rq-action-color: color-mix(in srgb, var(--ion-text-color) 70%, transparent ); */

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

}

.dark-theme {
  
 --ion-color-primary: #748ffc;
  --ion-color-primary-contrast: #ffffff;

  --ion-background-color: #121212;
  --ion-text-color: #e9ecef;

  --ion-color-secondary: #adb5bd;
  --ion-color-tertiary: #343a40;

  --ion-card-background: #1e1e1e;
  --ion-border-color: #2c2c2c;

  --ion-toolbar-background: #1e1e1e;
  --ion-toolbar-color: #e9ecef;

  --ion-tab-bar-background: #1e1e1e;
  --ion-tab-bar-color: #adb5bd;
  --ion-tab-bar-color-selected: var(--ion-color-primary);

  --ion-item-background: #1e1e1e;
  --ion-item-color: #e9ecef;

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

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

  /* --ride-selected-background:  color-mix(in srgb, var(--ion-color-primary) 55%, transparent);
  --ride-selected-color: var(--ion-text-color); */
  --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%);

   /* --absence-background: color-mix(
    in srgb,
    var(--ion-color-medium) 14%,
    transparent
  ); */

}

.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: #7fb3d5;
  --ion-color-primary-contrast: #ffffff;

  --ion-color-secondary: #f7cac9;
  --ion-color-tertiary: #c7ceea;

  --ion-background-color: #f9fbfc;
  --ion-text-color: #2f3e46;

  --ion-card-background: #ffffff;
  --ion-border-color: #e3e8ee;

  --chat-me-bg: #dceef8;
  --chat-other-bg: #ffffff;
  --chat-me-color: #2f3e46;
  --chat-other-color: #2f3e46;

  --rq-action-background: #edf3f7;

  --ride-selected-background:  color-mix(in srgb, #7fb3d5 55%, white);
  --ride-selected-color: #244b63;

  /* --ride-selected-border: #9cc8df; */

}

/* .aquarell-theme #myplan-content { */
 /* background-image: radial-gradient(
    circle at 20% 20%,
    rgba(163, 213, 255, 0.15),
    transparent 40%
  );
*/

/*
.aquarell-theme .split-pane-main ion-content {
  --background: #cccccc url('/img/theme_aquarell_bright.jpg') center / cover no-repeat;
}
*/

/* .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: #66a182;
  --ion-color-primary-contrast: #ffffff;

  --ion-color-secondary: #a3b18a;
  --ion-color-tertiary: #dad7cd;

  --ion-background-color: #f6f7f5;
  --ion-text-color: #2b2d2f;

  --ion-card-background: #ffffff;
  --ion-border-color: #e5e7eb;

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

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

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

  --rq-action-background: #eef2ed;

  --ride-selected-background: color-mix(in srgb, #66a182 48%, white);
  --ride-selected-color: #244c36;

  /* Calm, theme-consistent absence state. */
  --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
  );

  /* --rq-action-background: color-mix(in srgb, var(--ion-item-background) 94%, var(--ion-text-color));
  --rq-action-color: color-mix(in srgb, var(--ion-text-color) 70%, 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;
}

.pasttrip-row {
  display: flex;
  width: 100%;
  align-items: center;
  margin-top: 4px;
  margin-bottom: 4px;
}

.pasttrip-date {
  flex: 0 0 100px;
  font-size: 0.8em;
  white-space: nowrap;
}

.pasttrip-participants {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pasttrip-actions {
  flex: 0 0 40px;
  text-align: right;
  display: none;
}

.pasttrip-passengers{
  font-size: 0.9em;
  color: var(--ion-color-medium);
}

.pasttrip-time{
  color: var(--ion-color-medium);
}

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

ion-popover.context-menu-popover {
  --width: 320px;
  --max-width: calc(100vw - 16px);
}

.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));      
}
.chatuser{
	color: #E076C4;
	font-weight:bold;
	display: inline-block;
    max-width: 120px;
}
.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;

}
.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 */
  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 */
  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:#D87A7D;
	font-weight:700;
}
.value-positive {
	color:#38C;
	font-weight:700;
}
.value-zero {
	color:#9d9d9d;
	font-weight:700;
}

.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: #62afab;
    color: #ffead3!important;
	border-radius: 6px;
}

.rq-absencebutton,
.rq-plusbutton {
    background: var(--rq-action-background);
    
    color: var(--rq-action-color);
}
.dark-theme .rq-holiday{
	background: #76a277;
	color: #ffead3;
}
.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(date-target) {
    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-bottom: 16px;
  margin-right: 16px;
}

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

/* FAB die unten sitzen */
:root {
    --bottom-navigation-height: 56px;
    --floating-action-gap: 16px;
}

ion-fab[vertical="bottom"] {
    /* margin-bottom: calc(
        var(--bottom-navigation-height)
        + var(--floating-action-gap)
    ); */
  position: fixed !important;
  bottom: calc(20px + var(--ion-safe-area-bottom, 0px)) !important; 
  margin-bottom: 0 !important;
  top: auto !important;
}

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

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

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

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

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

.balances-list {
  width: min(100% - 32px, 520px);
  margin: 0 auto;
  overflow: hidden;
  background: var(--app-surface-background);
  border: 1px solid var(--app-surface-border);
  border-radius: var(--app-surface-radius);
  box-shadow: var(--app-surface-shadow);
}


/* 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-muted-color: color-mix(
    in srgb,
    var(--ion-text-color) 62%,
    transparent
  );
}



/* =========================================================
   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(--ion-text-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;
}


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



/* =========================================================
   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%;
  /* display: table; */
}



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

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

@media (max-width: 450px) {
  .ourPlan__driverGroup {
      margin-top: 15px;
  }	  
}

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


.ourPlan__actionbuttonGroup{
  display: table-cell;
  padding: 8px;
  width: 50px;
  padding: 0px 5px 0px 5px;
  text-align: right;
}


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

  max-width: 100%;
  padding: 0.08rem 0.28rem;

  border-radius: 0.38rem;
}

.ride-participant__name {
  overflow: hidden;

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

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

.ride-participant__status {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;

  min-width: 0;
  margin-inline-start: 0.15rem;

  color: var(--ion-color-medium);
  font-size: 0.78rem;
  line-height: 1;
  white-space: nowrap;
}


/*
 * Aktueller User
 */

.current-user-name {
  color: var(--ion-color-primary);
  font-weight: 600;
}

.current-user-name__me {
  font-size: 0.9em;
  font-weight: 500;
  opacity: 0.8;
}

.ride-participant--self .ride-participant__name-highlight {
  background:
    color-mix(
      in srgb,
      var(--ion-color-primary) 8%,
      transparent
    );
}

.ride-participant--self .ride-participant__name {
  font-weight: 650;
}


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


/*
 * Neuer Mitfahrwunsch
 */

.ride-participant--new-wish .ride-participant__name {
  font-weight: 600;
}

.ride-participant__new-wish-icon {
  color: var(--ion-color-primary);
  font-size: 0.92rem;
}


/*
 * Mitfahrwunsch zurückgezogen
 */

.ride-participant--withdrawn {
  color: var(--ion-color-medium);
}

.ride-participant--withdrawn .ride-participant__name {
  text-decoration-line: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: currentColor;

  opacity: 0.72;
}

.ride-participant--withdrawn .ride-participant__child-icon {
  opacity: 0.6;
}


/*
 * 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 {
    padding-inline: 0.25rem;
  }
}


/*
 * Dark Theme: Hervorhebung etwas verstärken
 */

.dark-theme .ride-participant--self .ride-participant__name-highlight {
  background:
    color-mix(
      in srgb,
      var(--ion-color-primary) 16%,
      transparent
    );
}

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




/* Aktuell angemeldeter User */

.participant-option--self
.participant-option__name-row {
  background:
    color-mix(
      in srgb,
      var(--ion-color-primary) 8%,
      transparent
    );
}

.participant-option--self
.participant-option__name {
  font-weight: 650;
}


/* 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--new-wish {
  --background:
    color-mix(
      in srgb,
      var(--ion-color-primary) 7%,
      transparent
    );
}

.participant-option--new-wish
.participant-option__status {
  color: var(--ion-color-primary-shade);
  font-weight: 600;
}


/* 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--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(--ion-color-medium);
}

.participant-option--absent
.participant-option__status {
  color: var(
    --absence-text,
    var(--ion-color-medium-shade)
  );
}

.participant-option--absent
.participant-option__checkbox {
  opacity: 0.58;
}


/* 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--self
.participant-option__name-row {
  background:
    color-mix(
      in srgb,
      var(--ion-color-primary) 16%,
      transparent
    );
}

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


/* ==========================================================================
   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;
  align-items: baseline;
  gap: 0.35rem;

  margin-bottom: 0.75rem;

  color: var(--ion-color-medium);
  font-size: 0.875rem;
  line-height: 1.35;
}

.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: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ride-field-popover .ride-field-dialog__context {
  display: none;
}

.ride-field-modal .ride-field-dialog__context {
  display: flex;
}

.ride-field-modal .ride-field-dialog__context {
  align-items: flex-start;
}

.ride-field-modal .ride-field-dialog__context-route {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

@media (max-width: 420px) {
  .ride-field-modal .ride-field-dialog__context {
    display: grid;
    gap: 0.125rem;
  }

  .ride-field-modal .ride-field-dialog__context-separator {
    display: none;
  }
}



.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 {
  margin-top: 24px;
}

.settings-section__title {
  margin:
    0
    calc(var(--settings-page-space) + 4px)
    18px;

  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 {
  margin-inline: var(--settings-page-space);

  border:
    1px
    solid
    var(--ion-color-step-200, #d7d8da);
  border-radius: var(--settings-card-radius);

  background: var(--ion-item-background);
  overflow: hidden;
}

.settings-disclosure__summary {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;

  min-height: 58px;
  padding: 12px 16px;

  color: var(--ion-text-color);
  font-size: 0.94rem;
  font-weight: 500;
  cursor: pointer;

  list-style: none;
  -webkit-tap-highlight-color: transparent;
}

.settings-disclosure__summary::-webkit-details-marker {
  display: none;
}

.settings-disclosure__summary-main {
  display: flex;
  gap: 11px;
  align-items: center;
  min-width: 0;
}

.settings-disclosure__summary-main ion-icon {
  flex: 0 0 auto;

  color: var(--ion-color-primary);
  font-size: 1.25rem;
}

.settings-disclosure__chevron {
  flex: 0 0 auto;

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

  transition: transform 160ms ease;
}

.settings-disclosure[open]
.settings-disclosure__chevron {
  transform: rotate(180deg);
}

.settings-disclosure__content {
  padding:
    0
    16px
    16px
    51px;

  color: var(--ion-color-medium);
  font-size: 0.87rem;
  line-height: 1.45;
}


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

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

.addButtonDiv{
  text-align: center;
}

.members-list .settings-item__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
}

.members-list .settings-item__description {
  margin-top: 2px;
  color: var(--ion-color-medium);
  font-size: 0.9rem;
  line-height: 1.3;
}

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

.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__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__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;
  width: var(--size);
  height: var(--size);
  place-items: center;

  border-radius: 50%;

  background:
    conic-gradient(
      var(--ion-color-primary)
        calc(var(--driver-usage-percent) * 1%),
      var(--ion-color-step-200)
        0
    );
}


.driver-usage-indicator__circle::before {
  position: absolute;
  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;
}


/*
 * 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-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 {
  width: 100%;
}

.driver-transport-option__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.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-car-details {
  color: var(--ion-color-medium);
  font-size: 0.78rem;
  line-height: 1.2;
  white-space: nowrap;
}

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