/* Auto-extracted from public/index.html (inline styles, block 1) */

/* === Mobile Slot Nudge (Option 1) ============================= */
@media (max-width: 500px){
  @keyframes slot-wiggle {
0%   { transform: translateX(0); }
20%  { transform: translateX(-8px); }  /* statt -14px */
40%  { transform: translateX(8px); }   /* statt  14px */
60%  { transform: translateX(-6px); }  /* statt -10px */
80%  { transform: translateX(6px); }   /* statt  10px */
100% { transform: translateX(0); }
  }
  .slot-wiggle-once {
animation: slot-wiggle 900ms ease-out 1;
will-change: transform;
transform: translateZ(0);
transform-origin: 50% 50%;
  }
  @keyframes overlay-nudge {
0%   { transform: translateY(0); }
22%  { transform: translateY(-10px); }
45%  { transform: translateY(10px); }
70%  { transform: translateY(-6px); }
100% { transform: translateY(0); }
  }
  .overlay-nudge-once {
animation: overlay-nudge 920ms ease-out 1;
will-change: transform;
  }
}
@media (prefers-reduced-motion: reduce){
  .slot-wiggle-once,
  .overlay-nudge-once { animation: none; }
}
/* === /Mobile Slot Nudge ======================================= */

/* Floating chevron attach (Header/Description) ================= */
@keyframes hintChevronAttach {
  /* Fade-in ≈ 0.5s (10% von 5.25s) mit gleichzeitigem ersten Schub */
  0%   { opacity: 0;   transform: translate(var(--chevron-offset, -50%), -50%) translateX(-6px) scale(0.92); }
  10%  { opacity: 1;   transform: translate(var(--chevron-offset, -50%), -50%) translateX(6px)  scale(1); }
  /* zurück */
  22%  { opacity: 1;   transform: translate(var(--chevron-offset, -50%), -50%) translateX(-4px) scale(1); }
  /* zweiter Rechts-Impuls */
  34%  { opacity: 1;   transform: translate(var(--chevron-offset, -50%), -50%) translateX(6px)  scale(1); }
  /* zurück; sofort Ausfaden starten und in ~0.5s beenden */
  44%  { opacity: 1;   transform: translate(var(--chevron-offset, -50%), -50%) translateX(-2px) scale(1); }
  54%  { opacity: 0;   transform: translate(var(--chevron-offset, -50%), -50%) translateX(-2px) scale(0.98); }
  100% { opacity: 0;   transform: translate(var(--chevron-offset, -50%), -50%) translateX(-2px) scale(0.98); }
}
.hint-attach-chevron {
  position: absolute;
  pointer-events: none;
  z-index: 1010;
}

.hint-attach-chevron::after {
  content: "\203A";
  display: block;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1;
  color: rgba(42, 106, 70, 0.88);
  opacity: 0;
  animation: hintChevronAttach 5.25s ease-out 1;
  will-change: transform, opacity;
}

.hint-attach-chevron[data-variant="description"] {
  /* small horizontal nudge for description chevron */
  --chevron-node-shift-desc: 8px;
}
.hint-attach-chevron[data-variant="description"]::after {
  font-size: 1.25rem;
}
.hint-attach-chevron[data-variant="avatar"]::after {
  font-size: 1.6rem;
}

.hint-attach-chevron[data-compact="true"] {
  /* additional small nudge on narrow screens */
  --chevron-node-shift-compact: 4px;
}
.hint-attach-chevron[data-compact="true"]::after {
  font-size: 1.6rem;
}
.hint-attach-chevron[data-compact="true"] {
  --chevron-offset: -60%;
  --chevron-shift-start: -6px;
  --chevron-shift-mid: 2px;
  --chevron-shift-end: 8px;
}

@media (prefers-reduced-motion: reduce){
  .hint-attach-chevron::after {
animation: none !important;
opacity: 1;
transform: translate(-100%, -50%);
  }
}
/* === /Floating chevron attach ================================ */
/* Einheitlicher Text in allen Eingabefeldern */
input[type="text"],
textarea {
  font-family: var(--font-family-base) !important;
  font-size: 1rem !important;
  line-height: 1.4 !important;
  color: #333 !important;
}

/* Avatar weich einblenden; bis data-ready fehlt bleibt er versteckt (mobile stabiler) */
img[data-avatar="true"] { opacity: 0; transition: opacity .2s ease; visibility: hidden; }
img[data-avatar="true"][data-ready="true"] { opacity: 1; visibility: visible; }

html { scrollbar-gutter: stable both-edges; }

  html {
-webkit-text-size-adjust: 100%;
  }

  body {
	  font-family: var(--font-family-base);
	  max-width: var(--layout-max);
	  min-width: var(--layout-min);
	  margin: 0 auto;
	  padding: 0 20px 20px;
	  background-color: #f5f5f5;
	  color: #333;
	}

h1 {
  text-align: center;
  color: #365945;
  margin-bottom: 8px;
}

input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

/* ANKER: globale Inputs – Buttons NICHT global anfassen */
input[type="text"],
textarea {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}


.button-group button {
  flex: 0 0 auto;        /* keine automatische Skalierung */
  text-align: center;     /* Text mittig */
  width: auto;
  background-color: #e0e0e0;
  color: #333;
}



#client_goal{
  margin-top: 8px;
  width: 100%;
  padding: 10px;
  color: #000 !important;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
  height: calc(4.2em + 20px);
  min-height: calc(4.2em + 20px);
  max-height: calc(4.2em + 20px);
  resize: none;
}

#goalFeedbackMessage:empty::before {
  content: "–";
  color: #333;
}

/* Mobil: Anliegen-Feld auf 4 Zeilen vergrößern */
@media (max-width: 500px){
  .button-group button {
padding: 8px 8px !important;
  }
  #client_goal{
height: calc(5.6em + 20px);
min-height: calc(5.6em + 20px);
max-height: calc(5.6em + 20px);
  }
}

.price {
  font-size: 2rem;
  font-weight: 600;
}
.unit {
  font-size: 0.9rem;
}

.intro-text {
  font-size: 1rem;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  text-align: center;
  max-width: 700px;
  font-weight: 600;
  margin-left: auto;
  margin-right: auto;
}

.hero-stepper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  max-width: 700px;
  margin: 6px auto 1.5rem;
  padding: 0;
  list-style: none;
  color: #365945;
}

.hero-stepper__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 400;
  line-height: 1.3;
  background: transparent;
  border-radius: 0;
  padding: 0;
}

.hero-stepper__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid #365945;
  color: #365945;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1;
}

.hero-stepper__label {
  display: inline-flex;
  align-items: center;
  color: #365945;
}

@media (max-width: 560px) {
  .hero-stepper {
    gap: 0.4rem;
  }

  .hero-stepper__item {
    font-size: 0.9rem;
  }
}

.button-group {
  display: flex;
  gap: 12px;
}

.button-group button {
  width: auto;
  min-width: 60px;
  padding: 8px 12px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #f9f9f9;
  cursor: pointer;
}

.button-group button.active {
background-color: #365945 !important;
color: white !important;
border-color: #365945 !important;
}

.feedback-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.feedback-row .button-group {
  margin: 0;
}

.feedback-message {
  margin-top: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
  min-height: 1.2em;
  flex: 1 1 240px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.feedback-circles {
  display: inline-flex;
  gap: 9px;
}

.feedback-circle {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  color: var(--tb-green, #365945);
  background: transparent;
  opacity: 0.3;
  transition: opacity 0.2s ease, background-color 0.2s ease;
}

.feedback-circle.filled {
  background-color: currentColor;
  opacity: 1;
}

.location-input-wrapper,
.availability-input-wrapper{
  position: relative;
  min-width: 0;       /* wichtig für Ellipsis */
  --apply-w: 110px;   /* Standardbreite des Buttons */
}

.location-radius {
  flex: 1 1 300px;
  min-width: 300px;
}
  .location-left{
display: grid;
row-gap: 12px;            /* vertikaler Abstand Ort ↔ Umkreis */
align-self: center; /* vertikal mittig in location-radius */
  }
  .location-field{ display: grid; row-gap: 8px; min-width: 0; }
.location-input-wrapper{ min-width: 0; }
.availability-input-wrapper{ min-width: 0; }

.location-input { width:100%; padding-right: calc(var(--apply-w) + 8px); }

.location-input {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.location-input::placeholder { text-overflow: ellipsis; }


.location-apply-btn {
  position: absolute;
  top: 4px;
  bottom: 4px;
  right: 6px;
  width: var(--apply-w);
  transform: none;
  min-width: auto;
  padding: 0 12px;
  font-size: 0.95rem;
  line-height: 1;
  border-radius: 4px;
  background: #365945;
  color: #fff;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.location-apply-btn:disabled {
  opacity: .5;
  cursor: default;
}

.filter-map-grid {
  display: flex;
  flex-wrap: wrap;
  margin-top: 8px;
  align-items: center;
}

.location-radius {
  display: grid;
  grid-template-columns: minmax(0,1fr) clamp(160px, 28%, 240px); /* links flexibel, rechts passt sich an */
  column-gap: 16px;
  align-items: start;
}

.map-wrapper {
  flex: 1 1 10px;
  min-width: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#map {
  width: 100%;
  max-width: 160px;     /* feste Kartenbreite wie früher */
  aspect-ratio: 5 / 4;  /* quadratisch */
  border-radius: 8px;
  border: 0;
  opacity: 0;
  background: #f5f5f5;
}

button {
  background-color: #365945;
  color: white;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}



label {
  font-weight: 600;
}

.label-text--desktop { display: inline; }
.label-text--mobile { display: none; }

@media (max-width: 500px) {
  .label-text--desktop { display: none; }
  .label-text--mobile { display: inline; }
}

.section {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.spaced-group {
  margin-top: 30px;
}




#topMatches {
  text-align: center;
  font-size: 16px;
  line-height: 1.4;
}

#topMatches div {
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}

.small-space{
  margin-top: 2rem;   /* Abstand Slider → Button */
  margin-bottom: 0;   /* unten nichts extra */
  text-align: center;
  font-weight: 600;
}

/* (Anker: .small-space endet hier) */

/* Basis bleibt wie zuvor */
#matchingSection {
  display: none;
}

#matchingSection .small-space{
  --results-banner-h: 96px;
  min-height: var(--results-banner-h);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  margin: 0;
  box-sizing: border-box;
}
#matchingSection .small-space h3{ margin:0; line-height:1.2; }

/* ⬇️ Neu: Wenn Sektion leer oder Eingaben fehlen → vertikal im weißen Bereich mittig */
#matchingSection.is-empty .small-space,
#matchingSection.is-awaiting-input .small-space{
  min-height: 80px;         /* etwas höher, damit „Banner“ sichtbar mittig wirkt */
}

/* Oberes Padding der Sektion vermeiden, damit die Mitte sauber stimmt */
#matchingSection.section{ padding-top: 0 !important; }

/* Erste Karte darf nicht hochdrücken */
#matchingSection .coach-card:first-child{ margin-top: 0 !important; }
#matchingSection.is-loading #matchResults,
#matchingSection.is-loading #showMoreBtn { display: none !important; }
#matchingSection.is-loading #loader { display: block !important; }

#loader {
  display: none;
  text-align: center;
  margin-bottom: 1rem;
}

.matching-spinner {
  border: 5px solid #f3f3f3;
  border-top: 5px solid #365945;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
  margin: 0 auto;
}

#showMoreBtn {
  width: auto;
  display: none;
  margin: 1rem auto 0;
}

#showMoreStatus {
  display: none;
  text-align: center;
  margin: 0.5rem auto 0;
  max-width: 34rem;
}

@media (max-width: 600px) {
  .collab-heading { font-size: 0 !important; }
  .collab-heading::after {
content: "Welche Zusammenarbeit suchen Sie?";
font-size: clamp(0.95rem, 0.2vw + 0.95rem, 1.05rem);
  }
}

.collab-heading {
  display: block;
  margin-bottom: 8px;
}

.section > label:not(.availability-heading):not(.collab-heading),
.availability-heading,
.collab-heading {
  font-weight: 600;
  font-size: 1.05rem;
}

@media (max-width: 900px) {
  .section > label:not(.availability-heading):not(.collab-heading),
  .availability-heading,
  .collab-heading {
font-size: 1rem;
  }
}

@media (orientation: landscape) {
  .section > label:not(.availability-heading):not(.collab-heading),
  .availability-heading,
  .collab-heading {
font-size: 1rem;
  }
}

.hero-sub {
  display: inline-block;
  white-space: nowrap;
  text-align: center;
  color: #365945;
}

.hero-sub-break { display: inline; }

@media (max-width: 480px) {
  .hero-sub {
white-space: normal;
  }
  .hero-sub-break {
display: block;
  }
}
#matchingSection.is-loading #matchResults,
#matchingSection.is-loading #showMoreBtn { display: none !important; }
#matchingSection.is-loading #loader { display: block !important; }

.match-btn {
  width: 42%;
  margin: 1rem auto;
  display: block;
  font-family: var(--font-family-base);
  font-size: 1rem;
  line-height: 1.2;
  font-weight: 400;
  padding: 1rem;
  border-radius: 8px;
  background-color: #365945;
  color: #fff;
  text-align: center;
}
.match-btn:hover { background-color: #4a6a57; }

  .match-text {
display: inline-block;
white-space: nowrap;
  }
  .match-text-break { display: inline; }

@media (max-width: 500px) {
  .match-text {
white-space: normal;
  }
  .match-text-break {
display: block;
  }
  .match-btn{
padding: 1rem 0.5rem;
  }
  .intro-text {
font-size: 0.95rem;
margin-top: 1rem;
margin-bottom: 0.5rem;
  }
}

/* Mittelbreite Viewports: Button-Text darf umbrechen */
@media (max-width: 600px) {
  .match-text { white-space: normal; }
  .match-text-break { display: block; }
}

/* Mittelbreite bis 650px: Umbruch im Button sicher erzwingen */
@media (max-width: 650px) {
  .match-btn .match-text {
white-space: normal;     /* Umbruch erlauben */
display: inline;         /* nicht inline-block → darf im Parent umbrechen */
max-width: 100%;         /* nicht breiter als der Button */
overflow-wrap: anywhere; /* falls sehr lange Wörter */
word-break: normal;
  }
  .match-btn .match-text-break { display: block; }
}

.results-hint {
  position: fixed;
  left: 50%;
  bottom: clamp(14px, 5vh, 32px);
  transform: translate3d(-50%, 12px, 0);
  z-index: 1100;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(54, 89, 69, 0.92);
  color: #fff;
  box-shadow: 0 18px 30px rgba(0,0,0,.25);
  font-size: 0.95rem;
  backdrop-filter: blur(4px);
  max-width: min(92vw, 420px);
  width: max-content;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
opacity 220ms ease,
transform 220ms ease,
visibility 0s linear 220ms;
}

.results-hint[data-visible="true"] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0);
  transition:
opacity 220ms ease,
transform 220ms ease,
visibility 0s linear 0s;
}

.results-hint__icon{
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18); /* neutraler, weniger farbig */
  color: #e5e7eb;                     /* helles Grau (nahe Weiß) */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;                    /* etwas kräftiger */
  line-height: 1;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .results-hint {
bottom: clamp(24px, 7vh, 44px);
font-size: 1rem;
  }
}



#geoSection {
  display: none;
}

#matchResults .coach-card .price:empty { display: none; }

   



.overlay-avatar-wrapper {
  width: clamp(88px, 12vw, 100px);
  height: clamp(88px, 12vw, 100px);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #ddd;
  overflow: hidden;
  border: 3px solid  #fff;
  box-shadow: 0 0 0 2px #365945;;
}
.overlay-avatar-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.placeholder {
  font-size: 28px;
  color: #888;
}

.coach-modal-inner {
  border-radius: 12px;
  padding: 1.5rem;
  background-color: #fff; /* keep fully opaque white during animation */
  display: flex;
  flex-direction: column;
  max-height: min(90vh, calc(100vh - 32px));
  overflow: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Smoothen overlay animation and avoid subpixel flicker */
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
  position: relative; /* layer above ghost */
  z-index: 1;
  isolation: isolate; /* keep blending local so card stays opaque */
}

@supports (height: 100svh) {
  .coach-modal-inner {
max-height: min(90svh, calc(100svh - 32px));
  }
}


.coach-modal {
  background: transparent;
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  overflow: visible;
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  position: relative;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

.coach-modal-inner {
  scrollbar-width: none;
}

.coach-modal-inner::-webkit-scrollbar {
  width: 0;
  height: 0;
}
.overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(1.6px);
  -webkit-backdrop-filter: blur(1.6px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.coach-modal-inner[data-view="details"] #coachOverlayFront { display: none !important; }
.coach-modal-inner[data-view="details"] #coachOverlayDetails { display: block !important; }




.close-button {
  position: absolute;
  top: 1.5rem;
  right: 2rem;

  background: none;
  border: none;
  color: #bdbdbd;
  font-size: 2.5rem;
  opacity: 0.2;
  font-weight: 600;
  line-height: 1;
  padding: 0;

  display: inline;
  width: auto;
  height: auto;
}
.close-button:hover { 
  color: #959595;
  opacity: 0.6;
}
.close-button,
.close-button:hover,
.close-button:focus-visible {
  background: none !important;  /* verhindert jeden Hintergrund */
  box-shadow: none !important;  /* kein Klick-Schatten */
  outline: none !important;     /* kein blauer Fokusrahmen */
}

.overlay-nudge-once .close-button,
.overlay-nudge-once.close-button {
  opacity: 0 !important;
  pointer-events: none !important;
}


.overlay-top {
  margin: 0.5rem auto 1rem auto;
  display: flex;
  justify-content: center;     /* beide Blöcke zur Mitte */
  align-items: center;
  gap: 1rem;                   /* Abstand zwischen links/rechts */
  padding-inline: 2rem;       /* gleicher Rand links und rechts */
  width: 100%;
  box-sizing: border-box;
}



.coach-overlay {
  padding: 0 2rem;
  text-align: initial;
  font-family: var(--font-family-base) !important;
}

.overlay-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.overlay-footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(180deg, rgba(253, 253, 253, 0) 0%, rgba(253, 253, 253, 1) 65%);
}

.overlay-footer .booking-submit {
  margin: 0.5rem auto 0;
}

.overlay-footer .form-status {
  width: 100%;
  margin: 0;
}

.avatar-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #ddd;
  overflow: hidden;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #365945;
}
.avatar-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.coach-right { 
  display: flex;
  align-items: flex-start;   /* statt stretch/center */
 
  flex-direction: column; 
  min-width: 0;            /* notwendig für Ellipsis innerhalb Flex-Childs */
  gap:0.1rem
}

.coach-name-overlay {
  --name-base-size: clamp(24px, 1.2rem + 1vw, 34px);
  --name-scale: 1;
  --name-lines: 2;
  max-width: min(26ch, 360px);
  font-size: calc(var(--name-base-size) * var(--name-scale));
  line-height: 1.07;
  font-weight: 300;
  color: #000;
  text-align: left;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.coach-name-overlay .line {
  display: block;
  white-space: nowrap;
  overflow-wrap: normal;
}
/* Honorarzeile: stets einzeilig, keine Umbrüche */
.coach-right .price-line {
  white-space: nowrap;          /* nie umbrechen */
  overflow: hidden;
  text-overflow: ellipsis;      /* falls zu lang → … */
  font-size: 0.95rem;
  margin-bottom: 0.1rem;
}



#coachOverlayCollaboration {
  text-align: center;
  font-size: 1rem;
  max-width: 500px;
  width: 100%;
  margin: 0;
}

/* sorgt dafür, dass der potenzielle Umbruch mit <wbr> auch genutzt wird,
   ohne zu hart zu brechen */
  #coachOverlayCollaborationShort,
  #detailsCollab{
  overflow-wrap: anywhere;
  word-break: normal;
  
}

/* Location-Zeile unter dem Namen immer linksbündig */
#coachOverlayCollaborationShort,
.coach-right .collab-line{
  display: block;
  text-align: left;
  align-self: flex-start;     /* falls ein Parent center ausrichtet */
  max-width: 100%;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-size: 0.95rem;
  line-height: 1;
  
}

#coachOverlayCollaborationShort .collab-line-secondary,
#detailsCollab .collab-line-secondary{
  display: block;
  line-height: 1;
}

@media (max-width: 520px){
  .details-right{
align-items: center;
text-align: center;
  }
  #detailsCollab{
display: inline-block;
text-align: center;
  }
  #coachOverlayCollaborationShort{
display: block;
text-align: left;
  }

  
}

/* optional (gleiche Breite wie der Name, damit die Kante sauber ist) */
#coachOverlayCollaborationShort{
  max-width: 280px;           /* wie .coach-name-overlay */
}

.coach-location-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
}

.coach-location {
  font-size: 1rem;
  text-align: center;
  width: 100%;
}

.coach-collaboration-map {
  display: flex;
  justify-content: center;
}

.coach-map-wrapper {
  width: 120px;
  height: 80px;
  flex-shrink: 0;
}
.coach-map {
  width: 120px;
  aspect-ratio: 3 / 1;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
}

.coach-modal .overlay-description {

  text-align: center;
  max-width: 500px;
  margin: auto;
  
  color: #000;
  font-size: clamp(1.1rem, 0.8rem + 1cqw, 1.2rem);
  font-weight: 300;

  hyphens: auto;
  overflow-wrap: break-word;
  word-break: keep-all;
  hyphenate-character: "-";
}

#coachOverlayDetails #detailsWebsite {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin: 0;
  color: #333;
  font-weight: 600;
  font-size: clamp(0.95rem, 0.8rem + 0.35vw, 1.15rem);
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

#coachOverlayDetails #detailsWebsite:hover,
#coachOverlayDetails #detailsWebsite:focus-visible {
  border-color: rgba(148, 163, 184, 0.4);
  background-color: rgba(255, 255, 255, 0.94);
  outline: none;
}

#coachOverlayDetails #detailsWebsite:focus-visible {
  outline: 2px solid rgba(54, 89, 69, 0.45);
  outline-offset: 2px;
}

.details-website-icon {
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  color: var(--tb-green, #365945);
  display: block;
}

#detailsWebsiteLink {
  text-decoration: none;
  color: inherit;
  display: block;
}

#detailsWebsiteLink:hover,
#detailsWebsiteLink:focus-visible {
  text-decoration: none;
}

.details-link-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin: 0.75rem auto 0.5rem auto;
  color: #333;
  flex-wrap: wrap;
}

.details-link-row #detailsCertifications {
  order: 1;
}

.details-link-row #detailsWebsite {
  order: 2;
}

.overlay-certifications {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  color: #333;
  font-size: clamp(0.95rem, 0.8rem + 0.35vw, 1.15rem);
  flex-wrap: wrap;
}

.overlay-certifications .certifications-trigger {
  display: inline-flex;
  align-items: baseline;
  gap: 0.2rem;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: transparent;
  color: #333;
  font: inherit;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease;
  text-decoration: none;
  appearance: none;
  box-shadow: none;
  min-width: 0;
  text-align: left;
}

.overlay-certifications .certifications-trigger:disabled {
  cursor: default;
  opacity: 0.6;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.overlay-certifications .certifications-trigger:hover,
.overlay-certifications .certifications-trigger:focus-visible,
.overlay-certifications.is-popover-open .certifications-trigger {
  border-color: rgba(148, 163, 184, 0.4);
  background-color: rgba(255, 255, 255, 0.94);
  box-shadow: none;
  outline: none;
}

.overlay-certifications .certifications-trigger:focus-visible {
  outline: 2px solid rgba(54, 89, 69, 0.45);
  outline-offset: 2px;
}

.overlay-certifications .certifications-primary {
  font-weight: 700;
  color: #333;
}

.overlay-certifications .certifications-more-label {
  font-weight: 500;
  color: #333;
}

.overlay-certifications .certifications-popover {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.98);
  width: min(520px, 92vw);
  min-width: 280px;
  --cert-popover-row-min-h: 2.25rem;
  --cert-popover-list-gap: 0.35rem;
  padding: 0.75rem 0.85rem 0.85rem;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.18);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
  z-index: 60;
}

.overlay-certifications.is-popover-open .certifications-popover {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.overlay-certifications .certifications-popover-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
}

.overlay-certifications .certifications-heading {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #333;
  text-align: center;
  padding: 0 2.25rem;
}

.overlay-certifications .certifications-popover-close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  color: #64748b;
  font: inherit;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.overlay-certifications .certifications-popover-close:hover,
.overlay-certifications .certifications-popover-close:focus-visible {
  color: #333;
  outline: none;
}

.overlay-certifications .certifications-list {
  display: flex;
  flex-direction: column;
  gap: var(--cert-popover-list-gap);
  min-height: calc(
    var(--cert-popover-row-min-h) + var(--cert-popover-row-min-h) + var(--cert-popover-row-min-h) +
    var(--cert-popover-row-min-h) + var(--cert-popover-list-gap) + var(--cert-popover-list-gap) +
    var(--cert-popover-list-gap)
  );
  max-height: min(45vh, 320px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}

.overlay-certifications .certifications-item {
  display: flex;
  align-items: center;
  min-height: var(--cert-popover-row-min-h);
  min-width: 0;
  padding: 0.25rem 0.55rem;
  border-radius: 8px;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  background: rgba(243, 244, 246, 0);
  transition: background 0.16s ease, color 0.16s ease;
}

.overlay-certifications .certifications-item-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  min-width: 0;
  overflow: hidden;
  overflow-wrap: anywhere;
  line-height: 1.35;
}

.overlay-certifications a.certifications-item:hover,
.overlay-certifications a.certifications-item:focus-visible {
  background: transparent;
  color: var(--tb-green, #365945);
  text-decoration: underline;
  text-underline-offset: 2px;
  outline: none;
}

.overlay-certifications .certifications-item[aria-disabled="true"] {
  color: #333;
  cursor: default;
}

.overlay-certifications .certifications-item[aria-disabled="true"]:hover,
.overlay-certifications .certifications-item[aria-disabled="true"]:focus-visible {
  background: transparent;
  color: #333;
}

@media (max-width: 520px) {
  .overlay-certifications {
    justify-content: center;
  }

  .overlay-certifications .certifications-popover {
    width: min(460px, 92vw);
  }

  .details-link-row {
    margin: 0.5rem auto 0.3rem auto;
    gap: 0rem;
  }
}

#coachOverlayFront .overlay-description { cursor: pointer; }
#coachOverlayDetails .overlay-description { cursor: default; }

@media (hover: none) and (pointer: coarse) {
  #coachOverlayDetails .overlay-description {
max-width: 80%;
  }
}

@media (max-width: 520px) {
  #coachOverlayDetails #detailsDescription,
  #coachOverlayDetails #detailsSpecialization {
cursor: pointer;
  }
}


/* Auf kleinen Screens → links/rechts etwas Rand sichtbar lassen */
@media (max-width: 500px) {
  input {
  margin-bottom: 0px;
  }

  .section {
  min-width: 22rem;
}


/* Honorar-Zeile */
.price-line {
  font-size: clamp(0.85rem, 0.5vw, 1rem);
}
/* Location-Zeile */
.collab-line {
  font-size: clamp(0.85rem, 0.5vw, 1rem);
}

  .coach-modal {
width: calc(100% - 1rem); /* lässt links & rechts ~1rem frei */
margin: 0 auto;           /* mittig */
border-radius: 1rem;      /* optional: abgerundete Kanten, wirkt noch leichter */
overflow: hidden;         /* verhindert Scrollbars durch Rundung */
padding: 0;
  }
  .coach-modal-inner {
padding: 1rem;
  }
  .overlay-footer {
margin-top: 0;
padding: 0;
  }
  .coach-modal-inner .close-button{
top: 0.8rem;
right: 1.4rem;
font-size: 2rem;
  }

  .button-group{
justify-content: center;   /* Buttons mittig */
flex-wrap: nowrap;         /* nicht umbrechen */
gap: 8px;                  /* etwas luft zwischen den buttons */
  }

  #budgetPresets {
display: flex;
justify-content: center;   /* mittig */
flex-wrap: nowrap;         /* nicht umbrechen */
margin-top: 0.5rem;        /* leichter Abstand nach oben */
margin-bottom: 0.5rem;     /* Abstand nach unten (zum Slider oder Text) */
  }
}
/* <= 500px: Karte unter die Felder + volle Breite für Ort/Umkreis */
@media (max-width:500px){
  /* aus 2 Spalten wird 1 Spalte */
  .location-radius{
grid-template-columns: 1fr;
row-gap: 4px; /* Abstand Felder <-> Karte */
  }

  /* Karte unterhalb platzieren (nimmt die ganze Zeile) */
  .map-wrapper{
grid-column: 1 / -1;
justify-content: center;
margin-top: 4px;
  }

  /* Breitenlimits der Karte überschreiben */
  #map{
width: 50%;
max-width: 100%;
aspect-ratio: 2 / 1; /* gern anpassen (z.B. 3/2) */
  }
}





.guidance-heading {
  text-align: center;
  font-size: 1rem;
  max-width: 500px;
  margin-top: 0.5rem;
  padding: 0;
  font-weight: 600;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0rem;
}



  
.noUi-connect {
  background: #365945 !important;
}

.button-group button {
  transition: background-color 0s, color 0s;
}
.button-group button:hover {
  transition: background-color 0.2s ease-in-out;
}

/* === Topbar (1:1 wie Profil) === */
:root{
  --layout-min: 360px;  /* <— HIER stellen Sie die Mindestbreite ein */
  --layout-max: 800px;  /* optional: gemeinsame Maximalbreite */
  --topbar-min-width: var(--layout-min);
  --topbar-max-width: var(--layout-max);
  --topbar-padding-x: 20px;
}

@media (max-width: 720px){
  :root{
    --topbar-min-width: 0px;
    --topbar-max-width: 100%;
  }
}




#topMatches {
  text-align: center;
  font-size: 16px;
  line-height: 1.4;
}
#topMatches div {
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}



#geoSection { display: none; }
#matchResults .coach-card .price:empty { display: none; }

.coach-info { flex: 1; }
.coach-card h3 { margin: 0 0 8px 0; color: #365945; }
.coach-card p { margin: 4px 0; font-size: 0.95rem; }








.close-button:hover { color: #959595; opacity: 0.6; }



:root{
    --c-green:#365945; --c-muted:#475569;
    --c-bg:#fff; --c-ring:#365945; --radius:12px; --gap:14px;
    --elev-0:0 2px 10px rgba(0,0,0,.06);
    --elev-1:0 6px 16px rgba(0,0,0,.08);
  }
  *, *::before, *::after { box-sizing: border-box; }

  /* === LISTEN-CONTAINER =================================================== */
  #matchResults{
    display:grid;
    grid-template-columns:1fr;
    gap:1rem;
  }

  /* === COACH CARD BASIS =================================================== */
  #matchResults .coach-card{
    display:grid;
    grid-template-columns:minmax(80px,clamp(80px,10vw,112px)) 1fr;
    gap:var(--gap);
    align-items:center;
    padding:10px 0;
    background:var(--c-bg);
    border:1px solid var(--c-ring);
    border-radius:var(--radius);
    box-shadow:var(--elev-0);
    transition:transform .15s ease, box-shadow .15s ease;
    cursor:pointer;
    width:100%;
  }
  #matchResults .coach-card:hover{ box-shadow:var(--elev-1); }

  #matchResults .coach-card .media{
    inline-size:clamp(80px,10vw,112px);
    aspect-ratio:1/1; border-radius:50%;
    overflow:hidden; border:3px solid #fff; box-shadow:0 0 0 2px var(--c-ring);
  }
  #matchResults .coach-card .media>img{ width:100%; height:100%; object-fit:cover; display:block; }

  #matchResults .coach-card .content{ display:grid; gap:6px; }
  #matchResults .coach-card .name{
    margin:0; color:var(--c-green); font-weight: 400;
    font-size:clamp(1.1rem,2.2vw,1.35rem); line-height:1; text-align:left;
  }
  #matchResults .coach-card .pitch{
    margin:0; color:var(#000);
    display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; text-overflow:ellipsis;
  }

  /* Meta + Trenner */
  #matchResults .coach-card .meta{
    display:flex; flex-wrap:wrap; align-items:baseline;
    gap:6px 10px; font-size: 0.95rem;
  }
  #matchResults .coach-card .meta .meta-item + .meta-item::before{
    content:"|"; opacity:.5; margin:0 8px 0 4px;
  }

  /* Preis Basis */
  #matchResults .coach-card .price,
  #matchResults .coach-card .price--mobile{
    font-weight: 400;
    font-size:1rem;
    line-height:1.5;
    margin:0;
  }
  #matchResults .coach-card .price:empty,
  #matchResults .coach-card .price--mobile:empty { display:none; }

  /* === KOMPAKT: bis 500px ================================================ */
  @media (max-width:500px){
    #matchResults .coach-card{
      grid-template-columns:auto auto;
      justify-content:center;
      align-items:center;
      column-gap:1rem;
      padding:12px 14px;
    }
    #matchResults .coach-card .media{ inline-size:80px; aspect-ratio:1/1; }
    #matchResults .coach-card .content{
      display:grid; gap:0px; align-self:center; align-items:start; justify-items:start;
    }
    #matchResults .coach-card .name{ 
      margin-bottom: 0.1rem;
      /* Schriftgröße passt sich an – nie zu groß, nie zu klein */
      font-size: 1.1rem;
      width: 12rem;
    
      /* Zeilenumbruch erlauben */
      white-space: normal;
      word-break: break-word;
      overflow-wrap: anywhere;

      /* Maximal 2 Zeilen, Rest abgeschnitten */
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Sichtbarkeit kompakt */
    #matchResults .coach-card .pitch{ display:none; }
    #matchResults .coach-card .price--mobile{
      display:block !important; /* Honorar sichtbar */
    }
    #matchResults .coach-card .price{ display:none !important; }
    #matchResults .coach-card .meta .meta-price{ display:none; }
    #matchResults .coach-card .meta .meta-rich{ display:none; }
    #matchResults .coach-card .meta .meta-compact{ display:inline; }

    #matchResults .coach-card .meta .meta-item::before {
    content:none !important;
  }
  }

  /* === BREIT: ab 501px =================================================== */
  @media (min-width:501px){
    #matchResults .coach-card{
      grid-template-columns:minmax(80px,clamp(88px,10vw,108px)) 1fr;
      column-gap:18px; padding:14px 28px;
    }
    #matchResults .coach-card .media{
      inline-size:clamp(88px,9vw,100px);
      aspect-ratio:1/1; border-radius:50%;
      overflow:hidden; border:3px solid #fff; box-shadow:0 0 0 2px var(--c-ring);
    }
    #matchResults .coach-card .content{ gap:6px; }
    #matchResults .coach-card .pitch{ display:-webkit-box; }
    #matchResults .coach-card .price--mobile{ display:none !important; }
    #matchResults .coach-card .meta .meta-price{ display:inline; }
    #matchResults .coach-card .meta .meta-rich{ display:inline; }
    #matchResults .coach-card .meta .meta-compact{ display:none; }
    #matchResults .coach-card .meta{
      flex-wrap:nowrap; overflow:hidden; min-width:0;
    }
    #matchResults .coach-card .meta .meta-item{
      white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    }
    #matchResults .coach-card .price{ justify-self:end; white-space:nowrap; }
  }


  /* === A11Y FOKUS ========================================================= */
  #matchResults .coach-card:focus-visible{
    outline:3px solid rgba(45,92,59,.35); outline-offset:2px;
  }






/* --- Booking Slot Grid (überarbeitet) --- */
.booking-slot-grid {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: nowrap;
  cursor: default;
  gap: 0.5rem; /* ~15% tighter vertical + horizontal spacing */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  user-select: none; /* verhindert Textmarkierung beim Drag */
  padding-bottom: 14px;           /* Platz für die horizontale Scrollbar */
  margin-bottom: -6px;            /* optisch wieder dichter an den Text rücken */
  scrollbar-gutter: stable both-edges; /* reserviert Platz, wo unterstützt */
}

.booking-slot-grid .no-slots-hint {
  flex: 1 0 100%;
  align-self: center;
  text-align: center;
  color: #64748b;
}

.no-slots-hint__actions {
  margin-top: .35rem;
}

.btn-link {
  background: none;
  border: 0;
  padding: 0;
  color: #2a6a46;
  cursor: pointer;
  text-decoration: underline;
  font: inherit;
}

.btn-link:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  text-decoration: none;
}


@media (max-width: 550px){
  .booking-slot-grid:hover,
  .booking-slot:hover {
cursor: pointer;
  }

  .booking-slot-grid.is-dragging {
  cursor: grabbing;
}



}


.booking-slot {
  flex: 0 0 auto;
  text-align: center;
  padding: 0.1rem 0.3rem;
  border-bottom: 2px solid #e2e8f0;
  transition: border-color .2s ease, color .2s ease;
  width: auto;
  display: inline-block;
}

.booking-slot .slot-line {
  display: inline-block;
  padding: 0;
  color: #111827;
  font-weight: 400;
  transition: color .2s ease, font-weight .2s ease;
  white-space: nowrap; /* verhindert Zeilenumbruch innerhalb des Slots */
}

.booking-slot.selected {
  border-bottom-color: #365945;
  border-bottom-width: 2px;
}

.booking-slot.selected .slot-line {
  color: #365945;
  font-weight: 600;
}

/* --- Breiter Modus: Grid-Darstellung ab 551px --- */
@media (min-width: 551px){

  .booking-slot-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
overflow: visible;
max-width: 500px;
margin: 0 auto;
justify-items: center;
  }

  .booking-slot:hover {
border-bottom-color: #64748b;
  }

  .booking-slot:hover .slot-line {
color: #1f2937;
  }

  /* Desktop begrenzen wir auf 12 Slots, Rest bleibt im DOM für mobile Scroll */
  .booking-slot-grid .booking-slot:nth-child(n+13) { display: none !important; }
}

/* --- Immer: Spezialfall für 1–2 Slots → mittig --- */
.booking-slot-grid:has(.booking-slot:nth-child(-n+2):last-child){
  display: flex !important;
  justify-content: center !important;
  gap: 1rem;
  overflow-x: visible;
}

/* === Slot Skeleton Loader === */
.slots-skeleton {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  width: 100%;
}
.slots-skeleton .shimmer {
  width: 60px;
  height: 18px;
  border-radius: 4px;
  background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ===== Skeleton-Slots für Ladezustand ===== */
.skeleton-slot {
  flex: 0 0 auto;
  width: 100%;
  text-align: center;
  border-bottom: none;
  position: relative;
  overflow: hidden;
}

.booking-slot.skeleton-slot {
  border-bottom: none;
}

.skeleton-slot .slot-line {
  display: inline-block;
  width: 60%;              /* mittige "Text-Breite" */
  height: 1rem;            /* gleiche Höhe wie Schrift */
  background: #e2e8f0;     /* hellgrau */
  border-radius: 4px;
}

.skeleton-slot::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  100% {
left: 100%;
  }
}

/* Desktop: Grid-Ausrichtung beibehalten */
@media (min-width: 551px) {
  .skeleton-slot {
flex: initial;
width: 100%;
  }
}

/* Skeleton für Slots während des Ladens */
.slots-skeleton {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem 1rem;
  max-width: 500px;
  margin: .25rem auto;
}
@media (max-width: 600px){
  .slots-skeleton { grid-template-columns: repeat(3, 1fr); max-width: 500px; }
}
@media (max-width: 560px){
  .slots-skeleton { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 360px){
  .slots-skeleton { grid-template-columns: 1fr; }
}
.slots-skeleton .shimmer {
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(90deg, #f1f4f2 0%, #e8eeeb 50%, #f1f4f2 100%);
  background-size: 200% 100%;
  animation: shimmer 1.1s infinite;
  border: 1px solid #e5ebe8;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.slots-skeleton { min-height: 120px; }


/* Skeleton fürs Slot-Laden */
.slots-skeleton { 
  display: flex; 
  gap: 12px; 
  align-items: center; 
}
.slots-skeleton .shimmer {
  width: 80px; 
  height: 22px; 
  border-radius: 6px;
  background: linear-gradient(90deg,#e5e7eb 0%,#f3f4f6 40%,#e5e7eb 80%);
  background-size: 200% 100%;
  animation: shimmer 1.1s infinite;
}
@keyframes shimmer { 
  0% { background-position: 200% 0 } 
  100% { background-position: -200% 0 } 
}



/* === Overlay Slide & Ghost-Animationen === */
/* Overlay animation container (applied to .coach-modal-inner) */
#coachOverlay {
  will-change: transform, opacity;
  touch-action: pan-y;
}

.overlay-slide-in-up {
  /* Subtle entrance from below */
  transform: translateY(36px);
  opacity: 1; /* keep card opaque to avoid background shining through */
}
.overlay-slide-in-down {
  /* Subtle entrance from above */
  transform: translateY(-36px);
  opacity: 1; /* keep card opaque to avoid background shining through */
}
.overlay-slide-active {
  transform: translateY(0);
  transition: transform 0.26s cubic-bezier(.22,.61,.36,1);
}

/* Exit-Ghosts */
.overlay-exit {
  position: absolute;
  inset: 0;
  /* Keep the original white card background */
  background: #fff;
  pointer-events: none;
  z-index: 0; /* behind the incoming panel */
  transition: transform 0.26s cubic-bezier(.22,.61,.36,1), opacity 0.26s ease-out;
  /* Make the outgoing card perceptible under the incoming one */
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.14);
  /* Slightly larger to peek around the incoming card */
  transform: scale(1.02);
}
.overlay-exit > * { visibility: hidden; }
.overlay-exit-up   { transform: translateY(-16%) scale(1.02); opacity: 0; }
.overlay-exit-down { transform: translateY(16%)  scale(1.02); opacity: 0; }


      

/* Legacy keyframe-based slide kept minimal/no-op to avoid conflicts */
#coachOverlay { transition: none; }
#coachOverlay.slide-up, #coachOverlay.slide-down { animation: none; }



/* === Overlay: Exit-Animationen (altes Panel fliegt weg) =============== */
.coach-modal { position: relative; } /* für absolut positioniertes Ghost */

.overlay-exit {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform, opacity;
  /* übernimmt Optik der Kopie; keine extra Transition hier */
}

.overlay-exit-up {
  transform: translateY(-12%);
  opacity: 0;
}

.overlay-exit-down {
  transform: translateY(12%);
  opacity: 0;
}

@media (prefers-reduced-motion: reduce){
  .overlay-exit-up,
  .overlay-exit-down { transition: none; }
  .overlay-slide-in-up,
  .overlay-slide-in-down { transform: translateY(0) !important; opacity: 1 !important; }
  .overlay-slide-active { transition: none !important; }
}
/* Roh-Gesten auf der gesamten Overlay-Fläche */
.overlay-backdrop {
  touch-action: pan-y;
}
  

label + .button-group {
  margin-top: 8px;
}

.button-group > button.active {
  background-color: #365945 !important;
  color: white !important;
  border-color: #365945 !important;
}

html.no-scroll { 
  overflow: hidden;          /* verhindert Scrollen im Hintergrund */
  height: 100%;              /* iOS: verhindert Bounce */
  touch-action: pan-y;
  overscroll-behavior: none;
}

/* Body fixieren, wenn Overlay offen (Scrollposition wird in JS gesetzt) */
body.no-scroll {
  position: fixed;
  top: var(--scroll-lock-top, 0px);
  left: 0;
  right: 0;
  width: 100%;
  max-width: var(--layout-max);
  min-width: var(--layout-min);
  margin: 0 auto;
  box-sizing: border-box;
}

/* Nur das Nachrichtenfeld scrollt; keine Scroll-Ketten ins Overlay */
#bookingClientMessage {
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
}




/* .coach-divider {
  width: clamp(50px, 50%, 500px);
  height: 2px;
  background-color: var(--c-green, #365945);
  opacity: 1;
  margin: 0.5rem auto 0.5rem auto;
  border-radius: 1px;
} */



/* Booking Senden / Formular darunter */
/* Formular */
.booking-contact {
  display: flex;
  flex-direction: column;
  max-width: 500px;
  align-items: center;
  margin: auto;
}

#bookingForm {
  display: none;
}

.form-status {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  line-height: 1.4;
  text-align: center;
}
.form-status[hidden] {
  display: none;
}
.form-status[data-state="loading"] {
  color: #365945;
}
.form-status[data-state="success"] {
  color: #365945;
}
.form-status[data-state="error"] {
  color: #b91c1c;
}


.booking-input,
.booking-textarea {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
  margin-bottom: 0;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

#bookingClientMessage {
  color: #000;
  font-size: 1rem;
  margin-top: 1rem;
  width: 100%;
  padding: 10px;
  line-height: 1.4;
  border-radius: 6px;
  resize: vertical;
  box-sizing: border-box;
  min-height: 48px;
  max-height: 120px;
}
#bookingClientMessage::placeholder { font-style: italic;
overscroll-behavior: contain; /* Scroll bleibt im Element */
touch-action: pan-y;          /* nur vertikal im Feld */
}

@media (max-width: 500px){
#bookingClientMessage{
  height: 22px !important;        /* verhindert festes 3-Zeilen-Startmaß */
}
}



.form-field {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.form-field label {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 6px;
  color: #333;
}

.booking-textarea {
  resize: vertical;
  box-sizing: border-box;
  min-height: 38px;
  max-height: 144px;
}

.booking-submit {
  margin: 0.5rem auto 0rem auto;
  color: white;
  font-weight: 400;
  border: none;
  border-radius: 6px;
  padding: 10px;
  width: 50%;
  display: block;
  min-width: 80px;
  font-family: var(--font-family-base);
  font-size: 1rem;
  line-height: 1;
  background-color: #365945;
  cursor: pointer;
  transition: background-color 0.3s;
  text-align: center;
}
.booking-submit:hover { background-color: #4a6a57; }
.booking-submit[disabled] {
  background-color: #365945;
  cursor: not-allowed;
  opacity: 0.75;
}
.booking-submit[disabled]:hover {
  background-color: #4a6a57;
}


.booking-row {
  display: flex;
  gap: 0.8rem;
  width: 100%;
  margin: 0.8rem;
}
.booking-input.half {
  margin-bottom: 0;
}


  /* Einheitlicher Placeholder-Stil für input und textarea */
  input::placeholder,
  textarea::placeholder {
color: #666;                /* grauer Farbton */
   /* font-style: italic;         /* kursiv, falls gewünscht */
font-family: var(--font-family-base); /* gleiche Schriftfamilie */
opacity: 1;                 /* verhindert abgedunkelte Platzhalter */
  }
  
  /* Einheitliche Schrift für alle Eingaben */
  input,
  textarea {
font-family: var(--font-family-base); /* Ihre Hauptschrift */
font-size: 1rem;                   /* z.B. 16px */
line-height: 1.4;                  /* angenehme Zeilenhöhe */
color: #333;                       /* Fließtext-Farbe */
  }
  
  
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#radiusSlider {
  margin: 8px 0;
}
  
  label + .button-group {
    margin-top: 8px;
  }
  
      .noUi-connect {
        background-color: #365945 !important;
      }

      /* Standard-Slider-Höhe (optisch schlank) */
      .noUi-horizontal { height: 10px !important; }

  
      .noUi-handle::before,
  .noUi-handle::after {
    top: 50% !important;              /* Mitte des Handles */
    transform: translateY(-50%) !important;  
    /* … plus Width/Height, Background etc. wie gewünscht … */
  }
  
      .noUi-horizontal .noUi-handle {
        border-color: #365945 !important;
      }

      .noUi-horizontal .noUi-handle {
        width: 34px !important;
        height: 20px !important;
        right: -17px !important;
        top: -6px !important;
    }

    /* Budget-Slider: Stacking-Order fixen */
#budgetSlider .noUi-connects,
#budgetSlider .noUi-connect { z-index: 1; }

#budgetSlider .noUi-origin { z-index: 2; }                 /* beide Origins über Connect */
#budgetSlider .noUi-origin + .noUi-origin { z-index: 3; }  /* rechter Origin über linkem */

#budgetSlider .noUi-handle  { position: absolute; z-index: 4; 
  transform: translateZ(0); backface-visibility: hidden; } /* Safari-Repaint */

    
  .button-group button {
    transition: background-color 0s, color 0s;
    font-family: var(--font-family-base); /* gleiche Schrift wie überall */
    /* line-height: 1.2;                  /* sorgt für saubere Vertikal-Ausrichtung */
    /* padding: 8px 12px;                 /* bei Bedarf Innenabstände angleichen */
  }
  .button-group button:hover {
    transition: background-color 0.2s ease-in-out;
  }


  /*

  /* Budget-Buttons: gleiche Optik wie Kollaborations-Buttons, aber schmaler */
  /*
.button-group.budget {
  gap: 4px;
  flex-wrap: nowrap;
}
.button-group.budget button {
  width: auto;
  min-width: 72px;     
  padding: 6px 10px;   
  font-size: 0.95rem;
  border: 1px solid #ccc;
  border-radius: 3px;
  background: #f9f9f9;
  cursor: pointer;
}
.button-group.budget button.active {
  background-color: #365945 !important;
  color: #fff !important;
  border-color: #365945 !important;
}



/* ANKERZEILE: Shared label line (Budget & Availability) */
.label-line{
  display:flex;
  align-items:baseline;
  margin:8px 0;
}

/* einzeilige Wert-Anzeige mit Ellipsis */
.label-value{
  flex:1;
  min-width:0;
  font-weight: 600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}


/* (optional) falls vorhanden: Inline-Buttons dürfen umbrechen */
#availabilityInline.button-group.budget{ flex-wrap:wrap; margin-right:4px; }
#availabilityInline.button-group.budget button{ flex-wrap:wrap; margin-right:4px; }

/* Availability-Buttons */
.button-group.availability{ display:flex; flex-wrap:wrap; margin-top:.25rem; }

/* Gemeinsamer Button-Look */
.button-group.collab-buttons button,
.button-group.availability button{
  width:auto;
  min-width:100px;
  padding:8px 12px;
  font-size:1rem;
  border:1px solid #ccc;
  border-radius:6px;
  background:#f9f9f9;
  cursor:pointer;
}
.button-group.collab-buttons button.active,
.button-group.availability button.active{
  background-color:#365945 !important;
  color:#fff !important;
  border-color:#365945 !important;
}

/* Leaflet: keine Bildskalierung global */
.leaflet-container img,
.leaflet-container .leaflet-tile{ max-width:none !important; }
.leaflet-container{
  background: #f5f5f5 !important;
}

#advancedAvailabilityPanel{ margin-top:.5rem; }

/* Status-Text */
.availability-status{ margin:.35rem 0; font-size:.95rem; color:#666; }

/* Buttons nicht global auf 100% Breite setzen */
button{ width:auto; margin-bottom:0; }

/* === Input + Übernehmen-Button im Feld ================================ */
:root{ --apply-w:110px; }   /* Standardbreite des Buttons */

/* Wrapper dient als Bezugspunkt für den absolut positionierten Button */
.location-input-wrapper,
.availability-input-wrapper{
  position:relative;
  min-width:0;              /* notwendig für Ellipsis im Input */
}

/* Input: Platz für Button reservieren + Ellipsis */
.location-input,
.availability-input{
  width:100%;
  box-sizing:border-box;
  margin-bottom:0;
  padding-right:calc(var(--apply-w) + 10px); /* Text endet vor dem Button */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  border:1px solid #ccc;
  border-radius:6px;
}
.location-input::placeholder,
.availability-input::placeholder{ text-overflow:ellipsis; }

/* der Button sitzt im Feld (rechts) */
.location-apply-btn,
.availability-apply-btn{
  position:absolute;
  top:4px;
  bottom:4px;
  right:6px;
  width:var(--apply-w);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  font-size:.95rem;
  line-height:1.1;
  border-radius:4px;
  background:#365945;
  color:#fff;
  border:none;
  cursor:pointer;
  white-space:nowrap;
}
.location-apply-btn:disabled,
.availability-apply-btn:disabled{ opacity:.5; cursor:default; }

/* Input darf schrumpfen, ohne zu überlaufen */
.availability-input{ flex:1 1 260px; min-width:0; }
@media (max-width:560px){
  .availability-input{ flex:1 1 100%; min-width:0; }
  .location-apply-btn,
  .availability-apply-btn{ padding:0 10px; }  /* etwas kompakter */
}



/* Label-Zeile */

/* Buttons */
.button-group.availability{display:flex;flex-wrap:wrap;margin-top:.25rem}
.button-group.collab-buttons button,
.button-group.availability button{
  width:auto;min-width:100px;padding:8px 12px;font-size:1rem;
  border:1px solid #ccc;border-radius:6px;background:#f9f9f9;cursor:pointer;
}
.button-group.collab-buttons button.active,
.button-group.availability button.active{background:#365945!important;color:#fff!important;border-color:#365945!important}

/* — zentrale Lösung — */
.input-with-apply{                 /* gemeinsamer Feld-Rahmen */
  display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center;
  border:1px solid #ccc; border-radius:6px; background:#fff; padding:0 6px 0 0;
}
.input-with-apply:focus-within{ border-color:#36594566; box-shadow:0 0 0 2px #3659451a }

/* Input: ellipsen vor dem Button */
.input-with-apply input{
  width:100%; min-width:0; border:0; outline:0;
  padding:10px; margin:0; box-sizing:border-box;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.input-with-apply input::placeholder{ text-overflow:ellipsis }

/* Button: schrumpfbar, bleibt im Feld */
.apply-btn{
  height:34px; inline-size:clamp(80px,22vw,110px);
  padding:0 10px; border:0; border-radius:4px;
  background:#365945; color:#fff; display:inline-flex; align-items:center; justify-content:center;
  white-space:nowrap; cursor:pointer;
}
.apply-btn:disabled{opacity:.5;cursor:default}


  /* --- Gemeinsames Eingabefeld (Input + Button teilen sich einen Rahmen) --- */
  :root { --apply-max: 110px; } /* Button-Zielbreite (wird responsiv reduziert) */

  .input-shell{
display: grid;
grid-template-columns: minmax(0,1fr) auto; /* Text links, Button rechts */
gap: 8px;
align-items: center;
padding: 3px 5px 3px 8px;     /* reduziert rechten Innenabstand für Button */
border: 1px solid #ccc;
border-radius: 6px;
background: #fff;
min-width: 0;                 /* wichtig für Ellipsis */
  }

  /* Input im Shell: ohne eigenen Rahmen, ellipsiert vor dem Button */
  .input-shell .field-input{
border: 0 !important;
outline: none;
padding: 0;                   /* Padding übernimmt die Shell */
font: inherit;
color: #000 !important;
background: transparent;
min-width: 0;                 /* erlaubt Schrumpfen */
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;      /* … GREIFT VOR DEM BUTTON */
  }
  .input-shell .field-input::placeholder{ text-overflow: ellipsis; }

  /* Apply-Button: bleibt IM Feld, passt sich in der Breite an */
  .input-shell .apply-btn{
width: auto !important;       /* überschreibt evtl. globale 100%-Regel */
max-inline-size: var(--apply-max);
height: 1.6rem;
display: inline-flex;
align-items: center;
justify-content: center;
background: #365945;
color: #fff;
border: 0;
border-radius: 4px;
cursor: pointer;
white-space: nowrap;
  }
  .input-shell .apply-btn:disabled{ opacity:.5; cursor: default; }


/* Basis: normal */
:root { --apply-w:110px; --apply-max:110px; }

/* SCHMAL: ≤500px → Icon-only ✓ */
@media (max-width:500px){
  :root { 
--apply-w: 44px;          /* für die alte absolute Variante */
--apply-max: 44px;        /* tatsächliche Buttonbreite */
  }

  .apply-btn,
  .location-apply-btn,
  .availability-apply-btn{
width: clamp(56px, 16vw, var(--apply-max)) !important;        /* minimale Breite, dennoch flexibel */
inline-size: clamp(56px, 16vw, var(--apply-max)) !important;
max-inline-size: var(--apply-max) !important;
min-width: clamp(56px, 16vw, var(--apply-max)) !important;
padding: 0;
  }

  /* Text aus, Haken an */
  .apply-btn .btn-txt,
  .location-apply-btn .btn-txt,
  .availability-apply-btn .btn-txt{ display:none !important; }
.apply-btn::after,
.location-apply-btn::after,
.availability-apply-btn::after{
  content:"✓";
  display:inline-block;
  font-size:1rem;
  line-height:1;
width:100%;
text-align:center;
}

  .button-group budget {
  min-width: none;
  gap: 4px !important;
  }

  #presetMax100,
  #presetMax200{
min-width: 0 !important;  /* statt "none" */
width: auto;               /* falls global 100% gesetzt ist */
padding-inline: 8px;       /* optional etwas schmaler */
  }

  .availability-input-shell{
width:auto;
  }

}


/* Titelzeile */
.availability-heading{
  display:block;
  font-weight: 600;
  margin-top: 2rem;
  margin-bottom: 8px;
}

/* Zusammenfassung zwischen Buttons und Eingabefeld */


.availability-summary{
  margin:.5rem 0 .5rem;
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
  width:100%;
}

.availability-input-shell{
  width:min(95%);
  display:grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items:center;
  gap:3px;
  justify-self:start;
}

.availability-input-half{
  width:100%;
}

.availability-summary.is-hidden{
  display:none;
}

.availability-chips{
  width:100%;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-start;
  align-content:flex-start;
  }


.availability-chip{
  display:flex;
  align-items:center;
  gap:2px;
  padding:7px 8px;
  border-radius:8px;
  background:#f9f9f9;
  border:1px solid #e5e7eb;
  color:#000;
  font-size:.95rem;
  font-weight: 400;
  flex:0 0 auto;

}


.availability-chip__label{
  pointer-events:none;
}

.availability-chip__remove{
  border:0;
  background:transparent;
  color:#333;
  cursor:pointer;
  width: .8rem;
  height: .8rem;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:4px;
  font-size:.95rem;
  line-height:1;
  transition:background .18s ease, color .18s ease;
}

.availability-chip__remove:hover,
.availability-chip__remove:focus-visible{
  background:rgba(75, 85, 99, 0.12);
}

.availability-chip__remove:focus-visible{
  outline:2px solid #333;
  outline-offset:2px;
}

@media (max-width: 600px){
  .availability-input-shell{
width:100%;
  }
  .availability-chips{
  width:100%; max-height:160px; }
}


  /* Bestehende Availability-Helfer (unverändert) */
.button-group.availability{ display:flex; flex-wrap:wrap; margin-top:.25rem; }
.button-group.availability button.active{ background:#365945 !important; color:#fff !important; border-color:#365945 !important; }




/* ✅ Confirmation Modal – kompakt & konsistent */
.confirm-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.52);
  backdrop-filter: blur(1.6px);
  -webkit-backdrop-filter: blur(1.6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1100;         /* über Overlay & Toast */
}
.confirm-backdrop[hidden]{ display: none; }

.confirm-modal{
  width: min(640px, 92vw);
  max-height: 90vh; overflow: auto;
  background: #fff; border-radius: 16px; padding: 2rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
}

.confirm-close{
  position: absolute; top: 8px; right: 12px;
  border: 0; background: none; cursor: pointer;
  font-size: 28px; line-height: 1; opacity: .6;
}
.confirm-close:focus-visible{ outline: 2px solid #365945; outline-offset: 3px; }

.confirm-header,
.confirm-body { text-align: center; }
.confirm-icon{ font-size: 32px; }

/* Einheitliches Copy-Format (mittlerer & untere Texte) */
.confirm-sub{
  color: #1f2937;
  line-height: 1.5;
  margin: .5rem 0 0;
  font-size: 1rem;
  font-weight: 400;
}

.confirm-sub-link{
  text-decoration: underline;
  color: #365945;
}
.confirm-sub-link .link-like{
  text-decoration: inherit;
  color: inherit;
}

.confirm-body{ display: flex; flex-direction: column; gap: 12px; }

/* Aktionen: zentraler OK-Button */
.confirm-actions{
  display: flex; justify-content: center; margin-top: .5rem;
}

/* Buttons */
.btn{ border: 0; border-radius: 8px; padding: 0.5rem 2rem; font-size: 1rem; cursor: pointer; }
.btn-primary{ background: #365945; color: #fff; }
.btn-primary:hover{ background: #4a6a57; }

/* Link-Button im Fließtext */
.link-like{
  background: none; border: 0; padding: 0; font: inherit;
  color: #365945; text-decoration: underline; cursor: pointer;
}

/* Mobile: kein Vollbild, wie Overlay – nur niedriger */
@media (max-width: 500px){
  .confirm-modal{
width: min(520px, 92vw);
max-height: 70vh;
border-radius: 16px;
padding: 16px 16px 20px;
  }

  #coachOverlayDetails .details-top{
margin:none !important;
margin-top:none !important;
margin-bottom: 1.1rem;
margin-top: 0;

  }



  .overlay-top {
margin: 0.45rem auto 0.6rem auto;
  }

  .coach-modal .overlay-description {
margin-bottom: 0 !important;
  }
}

/* KI-Empfehlung Box */
#coachOverlayWhy{
  display:none;                 /* per JS einschalten */
  position: relative;
  border:1px solid #365945;
  border-radius:14px;
  padding:0.5rem 1rem 0.5rem;
  max-width: 500px;
  margin: 1.5rem auto 1.2rem auto;
  background:#fff;
}

#coachOverlayWhy .why-label{
  position: absolute;
  top: -0.65rem;
  left: 1.4rem;
  padding: 0 .4rem;
  background: #fff;
  color: #365945;
  white-space: nowrap;
}

#coachOverlayWhy .why-label::before{
  display: none;
}

#coachOverlayWhy .why-text{
  display:block;
  margin-top:.1rem;
  hyphens:auto;
  overflow-wrap:anywhere;
  word-break:normal;
  color: #000;
}

@media (max-width: 520px){
  #coachOverlayWhy{
padding:none;

  }
  #coachOverlayWhy .why-label{
left:1.2rem;
  }
  #coachOverlayWhy .why-label::before{
left:-1.2rem;
width:0.9rem;
  }
  #coachOverlayWhy .why-text{
line-height: 1.1;
font-size: 1rem;
  }
  #coachOverlayFront .overlay-description{
text-align: center;
text-align-last: center;
  }


}

/* Optional: Trennstrich-Zeichen (Support v.a. Safari/WebKit) */
#coachOverlayWhy .why-text{
  hyphenate-character: "-"; /* geschützter Bindestrich (optisch schöner) */
}



/* ANKER: Overlay – Detailseite */
.details-avatar-wrapper{
  width: clamp(176px, 24vw, 200px);   /* doppelt so groß wie Front (88–100) */
  height: clamp(176px, 24vw, 200px);
  border-radius: 50%;
  overflow: hidden;
  background: #ddd;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px #365945;
  flex-shrink: 0;
}
.details-avatar-wrapper img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Touch-Zonen: oberer Bereich klickbar bleibt sichtbar wie zuvor */
.overlay-top{ cursor: pointer; }

.details-name{
  --details-base-size: clamp(26px, 1.35rem + 0.8vw, 36px);
  --details-scale: 1;
  max-width: min(24ch, 520px);
  font-size: calc(var(--details-base-size) * var(--details-scale));
  font-weight: 300;
  text-align: left;
  line-height: 1.1;
}

.details-name .line{
  display: block;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.details-name[data-measuring="true"] {
  display: block !important;
}

@media (max-width: 480px){
  .details-name{
--details-base-size: clamp(1rem, 1.05rem + 0.7vw, 30px);
max-width: min(24ch, 85vw);
  }
  .details-name .line{
overflow-wrap: anywhere;
word-break: break-word;
  }
}




#coachOverlayDetails .close-button,
#coachOverlayDetails .back-button {
  position: absolute;
  top: 1.5rem;
  background: none !important;
  border: none !important;
  color: #bdbdbd;
  font-size: 2.5rem;
  line-height: 1;
  padding: 0;
  width: auto;
  height: auto;
  opacity: 0.3;
  cursor: pointer;
}

#coachOverlayDetails .close-button {
  right: 2rem;
  font-weight: 600;
}

#coachOverlayDetails .back-button {
  left: 3rem;
  font-weight: 600;
}

#coachOverlayDetails .close-button:hover,
#coachOverlayDetails .close-button:focus-visible,
#coachOverlayDetails .back-button:hover,
#coachOverlayDetails .back-button:focus-visible {
  color: #959595;
  opacity: 0.6;
  outline: none;
}

@media (max-width: 600px) {
  #coachOverlayDetails .close-button,
  #coachOverlayDetails .back-button {
top: 0.8rem;
font-size: 2rem;
  }
  #coachOverlayDetails .close-button {
right: 1.4rem;
  }
  #coachOverlayDetails .back-button {
left: 1.8rem;
  }
  
}

/* Rückseite: Texte mittig wie auf der Vorderseite */
#coachOverlayDetails{
  text-align: center;
}


/* Kopfbereich der Rückseite */
#coachOverlayDetails .details-top{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(16px, 2.5vw, 24px);   /* sinnvoller Abstand Avatar ↔ Name */
  margin-top:1rem;
  margin-bottom: 1.1rem;
}

#coachOverlayDetails .details-top { cursor: pointer; }

/* rechte Spalte: linksbündig am Avatar ausgerichtet */
#coachOverlayDetails .details-right{
  display:flex;
  flex-direction:column;
  align-items:flex-start;          /* linksbündig */
  min-width:0;                     /* Ellipsis-Schutz */
}

/* Kollaboration/Ort unter dem Namen (wie Front) */
#coachOverlayDetails .details-collab{
  margin-top:.1rem;
  font-size: clamp(0.95rem, 0.8rem + 0.35vw, 1.15rem);
  white-space: normal;        /* <— wichtig: Umbruch wieder erlauben */
  overflow-wrap: anywhere;    /* falls Städte sehr lang sind */
  text-align: left;
}

/* Mehr Abstand unter dem Kopfbereich zum ersten Textblock */
#coachOverlayDetails .details-body{
  text-align:left;    /* Beschreibung mittig */
  font-weight: 300;
}

/* +20% Schriftgröße für beide Textblöcke der Rückseite */
#coachOverlayDetails .overlay-description{
  max-width: 550px;
  text-align: center;
  font-style: normal;
  margin: 0.5rem auto;
}

/* Restore session banner */
.restore-banner {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  width: min(90vw, 500px);
  padding: 1rem 1.25rem;
  background: white;
  z-index: 9999;
  
  border: 1px solid rgba(54, 89, 69, 0.25);
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
  display: none;
  text-align: left;
}

.restore-banner__content {
  display: grid;
  gap: .75rem;
}

.restore-banner__text {
  display: grid;
  gap: .35rem;
}

.restore-banner__title {
  font-size: 1rem;
  font-weight: var(--font-weight-semibold);
  color: #365945;
}

.restore-banner__message {
  font-size: .95rem;
  line-height: 1.4;
  opacity: .85;
}

.restore-banner__actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.restore-banner__button {
  flex: 1 1 45%;
  min-width: 120px;
  padding: .55rem 1rem;
  border-radius: 10px;
  border: 1px solid transparent;
  font-weight: var(--font-weight-semibold);
  font-size: .95rem;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.restore-banner__button:focus-visible {
  outline: 2px solid #255d3e;
  outline-offset: 2px;
}

.restore-banner__button--primary {
  background: #365945;
  border-color: #365945;
  color: #fff;
}

.restore-banner__button--primary:hover {
  background: #4a6a57;
  border-color: #4a6a57;
}

.restore-banner__button--secondary {
  background: transparent;
  border-color: #365945;
  color: #365945;
}

.restore-banner__button--secondary:hover {
  background: rgba(54, 89, 69, 0.12);
  border-color: #4a6a57;
  color: #4a6a57;
}

@media (max-width: 480px) {
  .restore-banner {
bottom: 1rem;
  }

  .restore-banner__actions {
flex-direction: column;
  }

  .restore-banner__button {
flex: 1 1 auto;
width: 100%;
  }
}