/* ============================================================
   Concierge mit Mr. Phippsie - Schritt 22
   Nutzt die Farbvariablen aus 4myvip-reise.css, damit die Seite
   sich nicht fremd anfuehlt. Keine neuen Schriftarten.
   ============================================================ */

.concierge {
  max-width: 60rem;
  margin: 0 auto;
}

/* ---------- Fortschritt ---------- */

.cg-fortschritt {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0 0 1.25rem;
}

.cg-fortschritt__balken {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 999px;
  background: var(--vip-blue-pale, #d8e2ff);
  overflow: hidden;
}

.cg-fortschritt__fuellung {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--vip-blue, #0058bc);
  transition: width 0.35s ease;
}

.cg-fortschritt__text {
  flex: 0 0 auto;
  font-size: 0.85rem;
  color: var(--text-muted, #5f5e5e);
  font-variant-numeric: tabular-nums;
}

/* ---------- Videobuehne ---------- */

.cg-buehne {
  /* Die Kopfzeile der Website bleibt beim Blaettern oben stehen und ist
     73 Pixel hoch. Ohne diesen Abstand schneidet sie den Kopf ab. */
  scroll-margin-top: 6rem;
  /* Ohne Begrenzung wird das Video auf grossen Bildschirmen ueber
     500 Pixel hoch und die Frage rutscht unter den Bildrand. */
  max-width: 44rem;
  margin: 0 auto;
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #e9e7ea;
  box-shadow: var(--shadow, 0 14px 38px rgba(0, 44, 105, 0.12));
  aspect-ratio: 16 / 9;
}

.cg-buehne video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #e9e7ea;
}

/* Tonschalter liegt ueber dem Video, aber nie ueber dem Gesicht */
.cg-ton {
  position: absolute;
  right: 0.75rem;
  bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 26, 65, 0.72);
  color: #fff;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  backdrop-filter: blur(4px);
}

.cg-ton:hover,
.cg-ton:focus-visible {
  background: rgba(0, 26, 65, 0.9);
}

.cg-wiederholen {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 26, 65, 0.72);
  color: #fff;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.cg-wiederholen:hover,
.cg-wiederholen:focus-visible {
  background: rgba(0, 26, 65, 0.9);
}

/* ---------- Frage ---------- */

.cg-frage {
  margin: 1.5rem 0 0.25rem;
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.7rem);
  line-height: 1.3;
  color: var(--vip-navy, #001a41);
}

.cg-hinweis {
  margin: 0 0 1.1rem;
  color: var(--text-muted, #5f5e5e);
  font-size: 0.95rem;
}

/* ---------- Antwortkaestchen ---------- */

.cg-optionen {
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.cg-optionen--eng {
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}

.cg-optionen--monate {
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
}

.cg-option {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  width: 100%;
  padding: 0.9rem 1rem;
  border: 2px solid var(--outline, #c1c6d7);
  border-radius: 14px;
  background: var(--surface, #fff);
  color: var(--text, #1b1b1e);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

/* Die Website faerbt jeden Knopf beim Zeigen kraeftig blau. Damit sah
   das Kaestchen unter dem Finger ausgewaehlter aus als das wirklich
   gewaehlte. Zeigen bleibt deshalb dezent, Auswahl bleibt deutlich. */
.cg-option:hover {
  border-color: var(--vip-blue, #0058bc);
  background: #eef3ff;
  color: var(--text, #1b1b1e);
}

.cg-option:hover .cg-option__titel {
  color: var(--text, #1b1b1e);
}

.cg-option:hover .cg-option__zusatz {
  color: var(--text-muted, #5f5e5e);
}

/* Der Kreis darf beim Zeigen nicht gefuellt aussehen, sonst wirkt das
   Kaestchen bereits angekreuzt. */
.cg-option:hover .cg-option__haken {
  border-color: var(--vip-blue, #0058bc);
  background: #fff;
}

.cg-option[aria-pressed='true']:hover .cg-option__haken {
  background: var(--vip-blue, #0058bc);
}

.cg-option[aria-pressed='true']:hover {
  background: var(--vip-blue-pale, #d8e2ff);
}

.cg-option[aria-pressed='true']:hover .cg-option__titel {
  color: var(--vip-navy, #001a41);
}

.cg-option:active {
  transform: translateY(1px);
}

.cg-option:focus-visible {
  outline: 3px solid var(--vip-blue-bright, #0070eb);
  outline-offset: 2px;
}

/* Die Textfarbe muss hier ausdruecklich stehen. Die bestehende Website
   faerbt alles mit aria-pressed="true" weiss, das waere auf dem
   hellblauen Grund nicht mehr zu lesen. */
.cg-option[aria-pressed='true'],
.cg-option.ist-gewaehlt {
  border-color: var(--vip-blue, #0058bc);
  background: var(--vip-blue-pale, #d8e2ff);
  color: var(--vip-navy, #001a41);
}

.cg-option[aria-pressed='true'] .cg-option__titel,
.cg-option.ist-gewaehlt .cg-option__titel {
  color: var(--vip-navy, #001a41);
}

.cg-option[aria-pressed='true'] .cg-option__zusatz,
.cg-option.ist-gewaehlt .cg-option__zusatz {
  color: #3c4a6b;
}

.cg-option__haken {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.1rem;
  border: 2px solid var(--outline, #c1c6d7);
  border-radius: 50%;
  background: #fff;
  position: relative;
}

.cg-optionen--mehrfach .cg-option__haken {
  border-radius: 5px;
}

.cg-option[aria-pressed='true'] .cg-option__haken {
  border-color: var(--vip-blue, #0058bc);
  background: var(--vip-blue, #0058bc);
}

.cg-option[aria-pressed='true'] .cg-option__haken::after {
  content: '';
  position: absolute;
  left: 0.32rem;
  top: 0.12rem;
  width: 0.35rem;
  height: 0.62rem;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}

.cg-option__text {
  display: block;
}

.cg-option__titel {
  display: block;
  font-weight: 700;
}

.cg-option__zusatz {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.85rem;
  color: var(--text-muted, #5f5e5e);
}

/* ---------- Eingabefelder ---------- */

.cg-feld {
  display: block;
  margin: 0 0 1.1rem;
}

.cg-feld__label {
  display: block;
  margin-bottom: 0.35rem;
  font-weight: 700;
  color: var(--vip-navy, #001a41);
}

.cg-feld input[type='text'],
.cg-feld textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 2px solid var(--outline, #c1c6d7);
  border-radius: 12px;
  background: var(--surface, #fff);
  color: var(--text, #1b1b1e);
  font: inherit;
}

.cg-feld input[type='text']:focus,
.cg-feld textarea:focus {
  border-color: var(--vip-blue, #0058bc);
  outline: 3px solid rgba(0, 112, 235, 0.25);
  outline-offset: 0;
}

.cg-feld textarea {
  min-height: 6.5rem;
  resize: vertical;
}

.cg-feld__fehler {
  display: block;
  margin-top: 0.4rem;
  color: #a4262c;
  font-size: 0.9rem;
}

.cg-teilfrage {
  margin: 1.4rem 0 0.6rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--vip-navy, #001a41);
}

/* ---------- Schaltflaechen ---------- */

.cg-steuerung {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--outline, #c1c6d7);
}

.cg-knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.8rem 1.5rem;
  border: 2px solid var(--vip-blue, #0058bc);
  border-radius: 999px;
  background: var(--vip-blue, #0058bc);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.cg-knopf:hover {
  background: var(--vip-blue-bright, #0070eb);
  border-color: var(--vip-blue-bright, #0070eb);
}

.cg-knopf:focus-visible {
  outline: 3px solid var(--vip-blue-bright, #0070eb);
  outline-offset: 3px;
}

.cg-knopf[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Auch hier ausdruecklich: die Website faerbt jeden Link blau, das
   waere auf dem blauen Knopf unsichtbar. */
a.cg-knopf,
a.cg-knopf:link,
a.cg-knopf:visited,
a.cg-knopf:hover,
a.cg-knopf:focus {
  color: #fff;
  text-decoration: none;
}

.cg-knopf--leise {
  background: transparent;
  color: var(--vip-blue, #0058bc);
}

a.cg-knopf--leise,
a.cg-knopf--leise:link,
a.cg-knopf--leise:visited {
  color: var(--vip-blue, #0058bc);
}

.cg-knopf--leise:hover {
  background: var(--vip-blue-pale, #d8e2ff);
  border-color: var(--vip-blue, #0058bc);
  color: var(--vip-navy, #001a41);
}

.cg-knopf--text {
  border-color: transparent;
  background: transparent;
  color: var(--text-muted, #5f5e5e);
  font-weight: 400;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  text-decoration: underline;
}

.cg-knopf--text:hover {
  background: transparent;
  border-color: transparent;
  color: var(--vip-navy, #001a41);
}

.cg-steuerung__abstand {
  flex: 1 1 auto;
}

/* ---------- Ergebnis ---------- */

.cg-treffer {
  display: grid;
  gap: 1.1rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.cg-treffer__karte {
  position: relative;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--outline, #c1c6d7);
  border-radius: 16px;
  background: var(--surface, #fff);
  box-shadow: var(--shadow, 0 14px 38px rgba(0, 44, 105, 0.12));
}

.cg-treffer__karte:first-child {
  border-color: var(--vip-blue, #0058bc);
  border-width: 2px;
}

.cg-treffer__rang {
  display: inline-block;
  min-width: 1.9rem;
  padding: 0.1rem 0.5rem;
  margin-right: 0.5rem;
  border-radius: 999px;
  background: var(--vip-blue, #0058bc);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  vertical-align: 0.15rem;
}

.cg-treffer__name {
  display: inline;
  font-size: 1.3rem;
  color: var(--vip-navy, #001a41);
}

.cg-treffer__name a {
  color: inherit;
}

.cg-treffer__meta {
  margin: 0.5rem 0 0.9rem;
  color: var(--text-muted, #5f5e5e);
  font-size: 0.9rem;
}

.cg-treffer__gruende {
  margin: 0 0 0.9rem;
  padding-left: 1.2rem;
}

.cg-treffer__gruende li {
  margin-bottom: 0.3rem;
}

.cg-treffer__aber {
  margin: 0 0 1rem;
  padding: 0.7rem 0.9rem;
  border-left: 4px solid #d9a406;
  border-radius: 0 10px 10px 0;
  background: #fdf6e3;
  font-size: 0.93rem;
}

.cg-treffer__punkte {
  float: right;
  font-size: 0.85rem;
  color: var(--text-muted, #5f5e5e);
  font-variant-numeric: tabular-nums;
}

.cg-hinweiskasten {
  margin: 1.5rem 0 0;
  padding: 0.9rem 1.1rem;
  border: 1px dashed var(--outline, #c1c6d7);
  border-radius: 12px;
  background: #f4f6fb;
  font-size: 0.92rem;
  color: var(--text-muted, #5f5e5e);
}

.cg-hinweiskasten strong {
  color: var(--vip-navy, #001a41);
}

.cg-hinweiskasten ul {
  margin: 0.5rem 0 0;
  padding-left: 1.2rem;
}

.cg-profil {
  margin: 1.2rem 0 0;
}

.cg-profil summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--vip-blue, #0058bc);
}

.cg-profil pre {
  overflow-x: auto;
  margin: 0.7rem 0 0;
  padding: 0.9rem;
  border-radius: 12px;
  background: #0f1836;
  color: #dce4ff;
  font-size: 0.8rem;
  line-height: 1.5;
}

/* ---------- Ladezustand ---------- */

.cg-laedt {
  display: grid;
  gap: 0.8rem;
  margin: 1.5rem 0;
}

.cg-laedt__zeile {
  height: 1rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #eceaf0 25%, #f6f5f8 37%, #eceaf0 63%);
  background-size: 400% 100%;
  animation: cg-schimmer 1.3s ease-in-out infinite;
}

.cg-laedt__zeile:nth-child(2) { width: 80%; }
.cg-laedt__zeile:nth-child(3) { width: 60%; }

@keyframes cg-schimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .cg-laedt__zeile { animation: none; }
  .cg-fortschritt__fuellung { transition: none; }
  .cg-option { transition: none; }
}

/* ---------- Kleine Bildschirme ---------- */

@media (max-width: 34rem) {
  .cg-optionen {
    grid-template-columns: 1fr;
  }

  .cg-optionen--eng,
  .cg-optionen--monate {
    grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  }

  .cg-steuerung .cg-knopf {
    flex: 1 1 100%;
    justify-content: center;
  }

  .cg-steuerung__abstand {
    display: none;
  }

  .cg-treffer__punkte {
    float: none;
    display: block;
    margin-bottom: 0.4rem;
  }
}

/* ----------------------------------------------------------------
   Wechsel zwischen Video und Formular. Der Link steht unter dem
   Video, weil der Gast dort hinsieht, wenn ihm das Video nicht
   passt. Er bleibt ein Text, damit er das Gespraech beginnen
   nicht ueberstrahlt.
   ---------------------------------------------------------------- */
.cg-wechsel {
  margin: 0.5rem 0 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.95rem;
}

.cg-textlink {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--vip-blue, #0058bc);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.cg-textlink:hover,
.cg-textlink:focus-visible {
  color: var(--vip-blue-bright, #0070eb);
}

.cg-textlink:focus-visible {
  outline: 2px solid var(--vip-blue-bright, #0070eb);
  outline-offset: 3px;
  border-radius: 2px;
}

.cg-wechsel__zusatz {
  color: var(--text-muted, #5f5e5e);
}

@media (max-width: 30rem) {
  .cg-wechsel {
    flex-direction: column;
    gap: 0.15rem;
  }
}

/* ----------------------------------------------------------------
   Schritt 25: Mehrfachauswahl der Monate und Bild im Ergebnis
   ---------------------------------------------------------------- */

/* Hinweis unter der Teilfrage und die laufende Auswahlanzeige. Beide
   sind Text, kein Kasten: sie sollen erklaeren, nicht ablenken. */
.cg-teilfrage__zusatz {
  margin: -0.35rem 0 0.6rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-muted, #5f5e5e);
}

.cg-auswahlstand {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--vip-navy, #001a41);
}

/* Bild oben in der Ergebniskarte. Die Karte hat innen Abstand, das
   Bild soll aber bis an die Kante gehen, deshalb die negativen
   Aussenabstaende. Ein festes Seitenverhaeltnis verhindert, dass die
   Karte beim Nachladen des Bildes springt. */
.cg-treffer__bild {
  margin: -1.2rem -1.3rem 1rem;
  border-radius: 15px 15px 0 0;
  overflow: hidden;
  background: var(--vip-blue-pale, #d8e2ff);
}

.cg-treffer__karte:first-child .cg-treffer__bild {
  /* Die erste Karte hat einen 2 px breiten Rand statt 1 px. */
  margin: calc(-1.2rem - 1px) calc(-1.3rem - 1px) 1rem;
}

.cg-treffer__bildlink {
  display: block;
}

.cg-treffer__bild img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* Wenn der Browser aspect-ratio nicht kennt, greift die Hoehe. */
  max-height: 15rem;
}

/* Die Punktzahl schwebt rechts. Ueber dem Bild waere sie unlesbar,
   darum steht sie erst darunter, mit etwas Luft nach oben. */
.cg-treffer__bild + .cg-treffer__punkte {
  margin-top: 0.1rem;
}

/* Der Anreisser aus der Einleitung der Zielseite. Etwas dunkler als
   die Zeile mit Region und Anreise, damit er sich abhebt, aber
   ruhiger als die Begruendungen darunter. */
.cg-treffer__einleitung {
  margin: 0.7rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text, #1b1b1e);
}

@media (max-width: 40rem) {
  .cg-treffer__bild img {
    aspect-ratio: 3 / 2;
    max-height: 11rem;
  }
}