/* Zeichenfabrik -- Teamevents-Übersicht, sektionsspezifische Stile.
   .detail-hero/.detail-untertitel/.kicker kommen aus kursdetail.css/basis.css (identisches
   Hero-Muster wie Kursdetail); .weg-schritte/.weg-schritt/.weg-nummer kommen aus startseite.css
   (identisches 4er-Raster wie "So läuft ein Kurs ab"); .buchung-schritt-inhalt/.buchung-agb/
   .buchung-fehler kommen aus buchung.css (identische Formular-Optik wie das Buchungsmodal).
   Hier nur, was wirklich neu ist. */

/* ---- Hero: Kreisschnörkel um "Gemeinsam." (Pendant zu .unterstrichen, aber ein Kreis statt
   eines Unterstrichs) ---- */
.teamevent-kreis { position: relative; display: inline-block; }
.teamevent-kreis-strich {
  position: absolute;
  left: -11%; top: -26%;
  width: 122%; height: 150%;
  overflow: visible;
  pointer-events: none;
  fill: none;
  stroke: var(--farbe-terrakotta);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Innerer Terrakotta-Rahmen im Hero-Bild (wie in der Design-Vorlage) -- Pendant zu .hero-rahmen
   auf der Startseite, aber ein vollständiges, eingerücktes Rechteck. .detail-hero-bild ist
   position:relative (kursdetail.css). */
.teamevent-hero-rahmen {
  position: absolute;
  top: 22px; left: 22px;
  width: calc(100% - 44px); height: calc(100% - 44px);
  fill: none;
  stroke: var(--farbe-terrakotta);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.teamevent-hero-cta { display: flex; gap: 14px; margin-top: 30px; flex-wrap: wrap; }
.teamevent-hero h1 { font-size: 38px; line-height: 1.05; }
@media (min-width: 600px) { .teamevent-hero h1 { font-size: 56px; line-height: 1.02; } }

/* ---- Value points + Formate + Prozess ---- */
.teamevent-werte { padding: 32px 24px; border-bottom: 1px solid var(--farbe-rand); }
.teamevent-formate { padding: 32px 24px 40px; border-bottom: 1px solid var(--farbe-rand); scroll-margin-top: 70px; }
.teamevent-formate h2 { margin: 0 0 8px; font-size: 26px; font-weight: 800; }
.teamevent-sektion-byline { margin: 0 0 28px; font-size: 16px; line-height: 1.55; color: #6B665E; max-width: 40em; }
.teamevent-prozess { padding: 32px 24px 40px; border-bottom: 1px solid var(--farbe-rand); }
.teamevent-prozess h2 { margin: 0 0 34px; font-size: 26px; font-weight: 800; }

.teamevent-formate-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 600px) { .teamevent-formate-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .teamevent-formate-grid { grid-template-columns: repeat(4, 1fr); } }

@media (min-width: 1024px) {
  .teamevent-werte { padding: 52px 56px 56px; }
  .teamevent-formate, .teamevent-prozess { padding: 56px 56px 60px; }
  .teamevent-formate h2, .teamevent-prozess h2 { font-size: 30px; }
}

/* ---- Teamevent-Kachel: Zusatz zu .kurs-karte (Dauer/Gruppe-Zeile + zweite Aktion) ---- */
.teamevent-fakten { display: flex; flex-direction: column; gap: 5px; margin-top: 4px; font-size: 13px; color: #4A463F; }
.teamevent-fakten > div { display: flex; justify-content: space-between; }
.teamevent-fakten span:first-child { color: #8A8377; }
.teamevent-fakten span:last-child { font-weight: 600; }
.teamevent-karte-aktionen { display: flex; align-items: center; gap: 12px; }

/* ---- Anfrage-Sektion: teal Infospalte + Formular ---- */
.teamevent-anfrage-sektion { display: grid; grid-template-columns: minmax(0, 1fr); border-bottom: 1px solid var(--farbe-rand); scroll-margin-top: 70px; }
.teamevent-anfrage-info { padding: 40px 24px; background: var(--farbe-teal-hell); display: flex; flex-direction: column; justify-content: center; }
.teamevent-anfrage-info .kicker { font-size: 12px; margin-bottom: 8px; }
.teamevent-anfrage-info .kicker--dunkel { color: #22403F; }
.teamevent-anfrage-info h2 { margin: 0 0 14px; font-size: 26px; font-weight: 800; color: #152B2A; }
.teamevent-anfrage-info p { margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: #1C3A39; max-width: 26em; }
.teamevent-anfrage-punkte { display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: #1C3A39; }
.teamevent-anfrage-punkte div { display: flex; gap: 10px; align-items: center; }
.teamevent-anfrage-punkte span { font-weight: 800; color: #22403F; }
.teamevent-anfrage-formular { padding: 32px 24px; }
@media (min-width: 1024px) {
  .teamevent-anfrage-sektion { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
  .teamevent-anfrage-info { padding: 56px; }
  .teamevent-anfrage-formular { padding: 52px 56px; }
}

.teamevent-form-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 16px; }
@media (min-width: 640px) { .teamevent-form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.teamevent-form-grid .teamevent-form-feld--breit { grid-column: 1 / -1; }
.teamevent-form-optional { font-weight: 400; color: #8A8377; }
.teamevent-form-fuss { margin-top: 18px; }

/* ---- Referenzen: Kunden-Logos (Referenz-Modell) ---- */
.teamevent-referenzen { padding: 32px 24px 40px; }
.teamevent-referenzen h2 { margin: 0 0 28px; font-size: 26px; font-weight: 800; }
.teamevent-referenzen-grid { display: grid; gap: 28px; grid-template-columns: repeat(2, 1fr); }
.teamevent-referenz-logo { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.teamevent-referenz-logo img { max-width: 140px; max-height: 56px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: 0.75; }
.teamevent-referenz-logo span { font-size: 12px; color: #8A8377; text-align: center; }
@media (min-width: 600px) { .teamevent-referenzen-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) {
  .teamevent-referenzen { padding: 56px 56px 60px; }
  .teamevent-referenzen h2 { font-size: 30px; }
  .teamevent-referenzen-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ---- Danke-Seite (Übersicht wie /warteliste/bestaetigt, aber eigene Seite statt Inline-Zustand) ---- */
.teamevent-danke {
  max-width: 640px;
  padding: 64px 24px 80px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.teamevent-danke h1 { margin: 0 0 10px; font-size: 30px; font-weight: 800; }
.teamevent-danke .btn { margin-top: 8px; }
@media (min-width: 1024px) { .teamevent-danke { padding: 84px 56px 100px; } }