/* Zeichenfabrik -- die Seiten der Teamevent-Formate: Übersicht /teamevents/ und Format-Seite
   /teamevents/<slug>/ (Werkbank 375, Inhaber 18.10.2026: „zu sehr wie die Kurse“).
   Beide laden die Kurs-Stile (kursdetail.css, startseite.css) NICHT mehr. Was sie mit der übrigen
   Website teilen, kommt aus basis.css: Kicker, Knöpfe, Weg mit Pfeil, Brotkrumen, Bild-Platzhalter,
   Bild-Zoom, die nummerierte Spalte samt Reihe (.weg-schritte) und die Fläche --farbe-teal-flaeche.
   Hier stehen die vier Bausteine (Register „Die Website“ im Bausteinsatz) und das Gerüst der
   beiden Seiten. */

/* ======================================================================================
   Bausteine
   ====================================================================================== */

/* ---- Format-Tafel (teamevent/_formattafel.html) -- groß und klein ---- */
.formattafel { display: flex; flex-direction: column; min-width: 0; }
.formattafel-bild {
  position: relative;
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;                       /* Rahmen für den Bild-Zoom (basis.css) */
}
.formattafel-text { flex: 1 0 auto; padding-bottom: 22px; }
.formattafel-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.formattafel-kategorie {
  margin: 22px 0 8px;
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--farbe-muted);
}
.formattafel-titel { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -0.015em; }
.formattafel-titelweg { color: var(--farbe-tinte); text-decoration: none; }
.formattafel-kurz { margin: 12px 0 0; font-size: 17px; line-height: 1.55; color: #3A362F; }
/* Das Highlight: ein Satz mit Strich davor -- dieselbe Geste wie auf der Format-Seite, kleiner. */
.formattafel-highlight {
  margin: 16px 0 0;
  display: flex;
  gap: 12px;
  align-items: baseline;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 600;
  color: #22403F;
}
.formattafel-highlight::before {
  content: "";
  flex: 0 0 22px;
  height: 2px;
  background: var(--farbe-teal);
  transform: translateY(-4px);
}
.formattafel-wege { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.formattafel-wege .link-pfeil { min-height: 44px; }   /* Tippfläche; Schrift und Farbe trägt basis.css */
@media (min-width: 1024px) {
  .formattafel-titel { font-size: 32px; }
  .formattafel-kurz { font-size: 18px; }
}

/* klein: die ganze Tafel ist der Weg */
.formattafel--klein { color: var(--farbe-tinte); text-decoration: none; }
.formattafel--klein .formattafel-kategorie { margin: 16px 0 6px; font-size: 11px; }
.formattafel--klein .formattafel-titel { font-size: 22px; line-height: 1.2; }
.formattafel--klein .formattafel-kurz { margin-top: 8px; font-size: 15px; line-height: 1.5; }
.formattafel-fakten { margin-top: 12px; font-size: 14px; color: #6B665E; }

/* Das Raster der Tafeln: groß zwei Spalten, klein drei. */
.formattafeln { display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; }
.formattafeln--klein { gap: 40px; }
@media (min-width: 768px) {
  .formattafeln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px 40px; }
  .formattafeln--klein { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .formattafeln { gap: 80px 64px; }
  .formattafeln--klein { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
}

/* ---- Eckdaten-Leiste (teamevent/_eckdaten.html) ---- */
.eckdaten { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; }
.eckdaten-paar { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.eckdaten dt {
  font-family: var(--schrift-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--farbe-muted);
}
.eckdaten dd { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
.eckdaten-hinweis { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; color: #6B665E; }
@media (min-width: 768px) {
  .eckdaten { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
}
/* in der Tafel: unter einer Linie, drei Spalten auf jeder Breite, kleinerer Wert */
.eckdaten--tafel {
  padding-top: 16px;
  border-top: 1px solid var(--farbe-rand);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-columns: none;
  gap: 16px;
}
.eckdaten--tafel dd { font-size: 15px; }

/* ---- Logo-Leiste (teamevent/_logoleiste.html) ---- */
.logoleiste {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
  border-top: 1px solid var(--farbe-rand);
  border-bottom: 1px solid var(--farbe-rand);
}
.logoleiste-etikett {
  margin: 0;
  font-family: var(--schrift-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--farbe-muted);
}
.logoleiste-fenster { container-type: inline-size; display: flex; overflow: hidden; min-width: 0; }
.logoleiste-logos { flex: 0 0 auto; display: flex; margin: 0; padding: 0; list-style: none; }
/* Sechs Logos füllen das Fenster (am Telefon drei) — die Breite kommt vom Fenster, nicht vom Logo. */
.logoleiste-logos li { flex: 0 0 auto; width: calc(100cqw / 3); padding: 0 12px; }
.logoleiste-logos img {
  display: block;
  width: 100%;
  height: 40px;                         /* height-Attribut am Bild nur zusammen mit dieser Höhe */
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.7;
}
/* Das Laufband: beide Listen wandern um ihre eigene Breite, drei Sekunden je Logo. */
.logoleiste-fenster--laeuft {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.logoleiste-fenster--laeuft .logoleiste-logos { animation: logoleiste-lauf calc(var(--anzahl, 12) * 3s) linear infinite; }
.logoleiste-fenster--laeuft:hover .logoleiste-logos,
.logoleiste-fenster--laeuft:focus .logoleiste-logos { animation-play-state: paused; }
@keyframes logoleiste-lauf { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  .logoleiste-fenster--laeuft { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .logoleiste-fenster--laeuft .logoleiste-logos { animation: none; }
  .logoleiste-fenster--laeuft .logoleiste-logos[aria-hidden="true"] { display: none; }
}
@media (min-width: 1024px) {
  .logoleiste { flex-direction: row; align-items: center; gap: 48px; padding: 26px 56px 28px; }
  .logoleiste-etikett { flex: 0 0 150px; }
  .logoleiste-fenster { flex: 1; }
  .logoleiste-logos li { width: calc(100cqw / 6); padding: 0 18px; }
}

/* ---- Inklusive-Fläche (teamevent/_inklusive.html) ---- */
.inklusive {
  background: var(--farbe-teal-flaeche);
  padding: 32px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}
.inklusive-etikett {
  margin: 0;
  font-family: var(--schrift-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #22403F;
}
.inklusive-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px 40px;
}
.inklusive-liste li { display: flex; gap: 12px; align-items: flex-start; font-size: 17px; line-height: 1.45; }
.inklusive-liste svg { flex: 0 0 auto; margin-top: 2px; color: var(--farbe-teal); }
@media (min-width: 640px) { .inklusive-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .inklusive { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 48px; padding: 44px 48px 40px; }
  .inklusive-liste { gap: 18px 40px; }
}

/* ======================================================================================
   Die Übersicht /teamevents/
   ====================================================================================== */

.teamevent-kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 40px 24px 48px; }
.teamevent-kopf-text { display: flex; flex-direction: column; gap: 18px; }
.teamevent-kopf-text .kicker { margin: 0; }
.teamevent-kopf h1 { margin: 0; font-size: 40px; line-height: 1.04; letter-spacing: -0.02em; }
.teamevent-kopf-text > p:not(.kicker) { margin: 0; font-size: 18px; line-height: 1.55; color: #3A362F; max-width: 30em; }
.teamevent-kopf-wege { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
.teamevent-kopf-bild { position: relative; aspect-ratio: 4 / 3; }
.teamevent-kopf-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Innerer Terrakotta-Rahmen im Bild, an einer Ecke offen -- Pendant zu .hero-rahmen der Startseite. */
.teamevent-kopf-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;
}
@media (min-width: 600px) { .teamevent-kopf h1 { font-size: 56px; } }
@media (min-width: 1024px) {
  .teamevent-kopf { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; padding: 64px 56px 56px; }
  .teamevent-kopf h1 { font-size: 64px; line-height: 1.02; }
  .teamevent-kopf-text > p:not(.kicker) { font-size: 20px; }
}

.teamevent-werte { padding: 32px 24px; border-bottom: 1px solid var(--farbe-rand); }
.teamevent-werte h3 { margin: 0 0 8px; font-size: 18px; }
.teamevent-werte p { margin: 0; font-size: 15px; line-height: 1.55; color: #6B665E; }
.teamevent-formate { padding: 48px 24px 56px; border-bottom: 1px solid var(--farbe-rand); scroll-margin-top: var(--kopf-hoehe); }
.teamevent-prozess { padding: 48px 24px 56px; border-bottom: 1px solid var(--farbe-rand); }
.teamevent-prozess h2 { margin: 0 0 8px; font-size: 26px; font-weight: 800; }

/* Kopf einer Liste: links Kicker, Überschrift, Satz; rechts der Netto-Hinweis bzw. der Weg. */
.formate-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 32px; margin-bottom: 40px; }
.formate-kopf h2 { margin: 0 0 10px; font-size: 32px; line-height: 1.1; letter-spacing: -0.015em; }
.formate-kopf-satz { margin: 0; font-size: 17px; line-height: 1.55; color: #6B665E; max-width: 40em; }
.formate-hinweis { margin: 0; font-size: 14px; color: #6B665E; }
@media (min-width: 1024px) {
  .teamevent-werte { padding: 52px 56px 56px; }
  .teamevent-formate { padding: 88px 56px 72px; }
  .teamevent-prozess { padding: 56px 56px 60px; }
  .teamevent-prozess h2 { font-size: 30px; }
  .formate-kopf { margin-bottom: 52px; }
  .formate-kopf h2 { font-size: 44px; }
  .formate-kopf-satz { font-size: 18px; }
}

/* ======================================================================================
   Die Format-Seite /teamevents/<slug>/
   ====================================================================================== */

/* Kopf: das Bild über die ganze Breite, der Titelblock greift von unten hinein. */
.format-kopf-bild { position: relative; height: 300px; }
.format-kopf-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.format-kopf-text {
  position: relative;
  margin: -48px 16px 0;
  padding: 24px 20px 8px;
  background: var(--farbe-creme);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.format-kopf-text .kicker { margin: 0; }
.format-kopf-text h1 { margin: 0; font-size: 44px; line-height: 1; letter-spacing: -0.02em; }
.format-kopf-kurz { margin: 4px 0 0; font-size: 18px; line-height: 1.5; color: #3A362F; }
@media (min-width: 1024px) {
  .format-kopf-bild { height: 560px; }
  .format-kopf-text { margin: -150px 0 0 56px; width: 720px; max-width: calc(100% - 112px); padding: 40px 48px 36px; gap: 14px; }
  .format-kopf-text h1 { font-size: 68px; }
  .format-kopf-kurz { font-size: 21px; }
}

/* Die Eckdaten-Leiste mit dem Knopf daneben */
.format-leiste {
  margin: 24px 24px 0;
  padding: 24px 0;
  border-top: 1px solid var(--farbe-rand);
  border-bottom: 1px solid var(--farbe-rand);
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.format-leiste .eckdaten { flex: 1; }
.format-leiste-knopf { display: flex; flex-direction: column; gap: 6px; }
.format-leiste-knopf span { font-size: 13px; color: #6B665E; }
@media (min-width: 1024px) {
  .format-leiste { margin: 28px 56px 0; flex-direction: row; align-items: center; gap: 32px; }
  .format-leiste-knopf { align-items: flex-end; flex: 0 0 auto; }
}

/* Worum es geht | Highlight + „Geleitet von“ */
.format-abschnitt { padding: 56px 24px 0; }
.format-abschnitt > .kicker { margin: 0 0 24px; }
.format-zweispaltig { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.format-text { font-size: 18px; line-height: 1.65; color: #2B2822; max-width: 38em; }
.format-text p { margin: 0 0 18px; }
.format-text p:last-child { margin-bottom: 0; }
.format-text :is(h1, h2, h3) { margin: 1.4em 0 0.5em; font-size: 1.2em; }
.format-seitenspalte { display: flex; flex-direction: column; gap: 36px; }
.format-highlight { margin: 0; display: flex; flex-direction: column; gap: 14px; font-size: 24px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em; color: #22403F; }
.format-highlight::before { content: ""; width: 40px; height: 3px; background: var(--farbe-teal); }
.format-leitung { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--farbe-rand); padding-top: 18px; }
.format-leitung .kicker { margin: 0; font-size: 11px; letter-spacing: 0.1em; }
.format-ablauf { margin: 0; padding: 0; list-style: none; }
.format-inklusive, .format-logos { margin: 72px 24px 0; }
@media (min-width: 1024px) {
  .format-abschnitt { padding: 72px 56px 0; }
  .format-abschnitt--ablauf { padding-top: 88px; }
  .format-abschnitt > .kicker { margin-bottom: 30px; }
  .format-zweispaltig { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 88px; }
  .format-text { font-size: 19px; }
  .format-seitenspalte { padding-top: 34px; gap: 40px; }
  .format-highlight { font-size: 27px; }
  .format-inklusive { margin: 88px 56px 0; }
  .format-logos { margin: 72px 0 0; }
}

/* Der Anfrage-Block: dunkler Grund (die Fußfarbe); Knopf .btn-hell und Fokus .grund-dunkel aus basis.css */
.format-anfrage {
  margin-top: 72px;
  padding: 48px 24px;
  background: var(--farbe-footer);
  color: #F4F1EA;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}
.format-anfrage .kicker { margin: 0 0 14px; color: var(--farbe-teal-hell); }
.format-anfrage h2 { margin: 0 0 14px; font-size: 32px; line-height: 1.1; letter-spacing: -0.015em; color: var(--farbe-creme); }
.format-anfrage p:not(.kicker) { margin: 0; font-size: 18px; line-height: 1.55; color: #D9D3C7; }
@media (min-width: 1024px) {
  .format-anfrage { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 64px; align-items: center; padding: 64px 56px; }
  .format-anfrage h2 { font-size: 44px; }
  .format-anfrage-knopf { justify-self: end; }
}

/* Weitere Formate */
.format-weitere { padding: 64px 24px 72px; }
.format-weitere .formate-kopf { padding-bottom: 16px; margin-bottom: 32px; border-bottom: 1px solid var(--farbe-rand); align-items: center; }
.format-weitere .formate-kopf h2 { margin: 0; font-size: 26px; }
.format-weitere-wege { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
@media (min-width: 1024px) { .format-weitere { padding: 80px 56px 88px; } }