/*
 * Home-Header (Stufe-B-Embed) — 1:1 aus dem zentralen cod-general-header.css.
 * Wird vom Shortcode [header] in cod-embed geladen. Das HTML selbst kommt
 * serverseitig vom zentralen Render-Endpunkt (cod-ui/v1/public-render/header),
 * dieses CSS liefert nur die identische Optik lokal (keine Cross-Origin-Styles).
 */

.cod-container {
  width: 60%;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .cod-container {
    width: 80%;
  }
}

@media (max-width: 767px) {
  .cod-container {
    width: 90%;
  }
}

.angebote-header-wrap {
  margin-top: 24px;
  text-align: center;
  position: relative;
  top: 0;
}

.cod-design-heading[data-cod-design-text-module="header"] .cod-design-heading__eyebrow {
  font-family: var(--cod-header-heading-eyebrow-font, inherit) !important;
  font-size: var(--cod-header-heading-eyebrow-size, inherit) !important;
  font-weight: normal !important;
  font-style: normal !important;
  color: var(--cod-header-heading-eyebrow-color, var(--cod-eyebrow-color, inherit)) !important;
}

.cod-design-heading[data-cod-design-text-module="header"] .cod-design-heading__title {
  font-family: var(--cod-header-heading-title-font, inherit) !important;
  font-size: var(--cod-header-heading-title-size, inherit) !important;
  font-weight: normal !important;
  font-style: normal !important;
  color: var(--cod-header-heading-title-color, inherit) !important;
}

.cod-design-heading[data-cod-design-text-module="header"] .cod-design-heading__body {
  font-family: var(--cod-header-heading-body-font, inherit) !important;
  font-size: var(--cod-header-heading-body-size, inherit) !important;
  font-weight: normal !important;
  font-style: normal !important;
  color: var(--cod-header-heading-body-color, inherit) !important;
}

.angebote-header-body {
  width: 100%;
  margin: 0 auto 10px;
  text-align: center;
}

.cod-fade {
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.cod-fade.is-visible {
  opacity: 1;
}

.cod-fade-delay-1 {
  transition-delay: .1s;
}

.cod-fade-delay-2 {
  transition-delay: .3s;
}

.cod-fade-delay-3 {
  transition-delay: .5s;
}

.angebote-title {
  position: relative;
  display: inline-block;
  text-align: center;
  margin: 0 auto 18px;

  /* Platz für die hochgestellte Zahl. Sie hängt frei rechts neben der ersten
     Zeile (siehe .angebote-title-counter) und nimmt deshalb keinen Einfluss auf
     die Mittigkeit des Titels — genau darum weiß der Zeilenumbruch aber auch
     nichts von ihr und die Zahl rutschte aus dem sichtbaren Bereich. Der
     Innenabstand steht auf BEIDEN Seiten: der Text bleibt exakt mittig, der
     Umbruch kommt eine Spur früher, die Zahl bleibt im Bild.
     --cod-hdr-counter-space liefert das Render passend zur Stellenzahl. */
  box-sizing: border-box;
  max-width: 100%;
  padding-inline: var(--cod-hdr-counter-space, 1.55em);
}

.angebote-title-line {
  position: relative;
  display: inline-block;
}

/* Alles nach dem ersten Wort, wenn im Titel kein eigener Umbruch steht.
   Kurze Reste („of Dreams") bleiben als Einheit zusammen: bricht die
   Überschrift um, steht der Rest komplett in der zweiten Zeile, statt
   mittendrin zerrissen zu werden („Community of" / „Dreams"). Längere Titel
   bekommen die Klasse --tight nicht und brechen weiterhin normal um. */
.angebote-title-rest--tight {
  white-space: nowrap;
}

/* Bezugspunkt für die hochgestellte Zahl: Beim Einzeiler hängt sie hinten am
   Rest ("… of Dreams³"), beim Zweizeiler vorne am ersten Wort — umgehängt wird
   nach dem Zeichnen (placeTitleCounter, widget-header.php), weil erst dann
   feststeht, ob überhaupt umgebrochen wird. */
.angebote-title-rest {
  position: relative;
}

.angebote-title-counter {
  position: absolute;
  left: 100%;
  top: 0;
  transform: translate(0, -50%);
  color: #3B97D3;
  line-height: 1;
  white-space: nowrap;
}

.angebote-intro {
  width: 100%;
  margin: 0 auto 18px;
  text-align: center;
}

.angebote-intro a {
  color: var(--cod-color-link, #2b86c5);
  text-decoration: underline;
}

.angebote-tabs {
  /* Ein Abstand für alles — waagerecht wie senkrecht, damit die Buttons überall
     gleichmäßig auseinanderstehen. Der erzwungene Umbruch unten rechnet mit
     genau diesem Wert. */
  --cod-hdr-tabs-gap: 8px;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cod-hdr-tabs-gap);
  margin-top: 50px;
  margin-bottom: 16px;
}

/* Erzwungener Zeilenumbruch für die gleichmäßige 2-Zeilen-Aufteilung (per JS
   eingefügt, balanceTabs in widget-header.php). Nimmt keine Breite/Höhe ein,
   zwingt die folgenden Buttons aber in die nächste Flex-Zeile. */
.angebote-tabs .angebote-tab-break {
  flex-basis: 100%;
  width: 0;
  height: 0;
  padding: 0;
  border: 0;

  /* Der Umbruch liegt als eigene (0 Pixel hohe) Flex-Zeile zwischen den
     Button-Zeilen und bekommt dadurch den Zeilenabstand doppelt: einmal davor,
     einmal danach. Genau das war die größere Lücke zwischen den Buttons. Die
     negative Außenkante nimmt die zweite Hälfte wieder zurück — der Abstand ist
     damit überall derselbe. */
  margin: calc(var(--cod-hdr-tabs-gap) * -0.5) 0;
}

.angebote-tab {
  border-radius: 8px;
  border: none;
  padding: 10px 18px;
  cursor: pointer;
  /* Grundfarbe der Schrift. Die Flächen sind hell, deshalb dunkel und nicht
     weiss - die Regeln je Bereich setzen sie ohnehin gleich noch einmal. */
  color: #1A1A1A;

  /* Glanzkante oben + flacher Bodenschatten: die Volltonfläche wirkt dadurch
     wie eine Taste statt wie ein farbiges Rechteck. Beide Werte kommen aus
     dem zentralen Token-Satz (:root im Frontend-Bundle), damit die
     Schattenfarbe dem Branding folgt - --cod-shadow-sm ist bitgleich mit dem
     Wert, der vorher hier stand. Die rgba-Angaben sind nur der Notnagel,
     falls das Bundle einmal nicht geladen ist. */
  box-shadow: var(--cod-shadow-inset-light, inset 0 1px 0 rgba(255, 255, 255, .66)),
              var(--cod-shadow-sm, 0 2px 6px rgba(0, 0, 0, .08));

  /* Vorher: transition:.2s - unqualifiziert, hätte also auch jeden Farbwechsel
     mitanimiert. Jetzt der Hausstandard: nur die bewegten Eigenschaften. */
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  font: inherit;
}

/* Anheben beim Zeigen, Eindrücken beim Antippen. Farbneutral - der Effekt
   rechnet nur mit Schatten, Helligkeit und Bewegung und wandert deshalb mit
   jeder Farbe aus dem Betreiber-Dashboard mit.

   Die Bewegung steht in (hover: hover), weil es auf Touchgeräten kein Zeigen
   gibt; :active ist dort die einzige Rückmeldung und steht bewusst ausserhalb
   der Abfrage. Gleiches Muster wie cod-btn.css.

   Die beiden Elementor-Regler "Helligkeit bei Hover" und "Vergrössern beim
   Klick" schreiben mit !important und schlagen diese Werte weiterhin - hier
   stehen genau ihre Platzhalter (1.05 / 0.97), damit ohne Eintrag im
   Dashboard das passiert, was der Platzhalter verspricht. */
@media (hover: hover) {
  .angebote-tab:hover,
  .angebote-tab:focus-visible {
    transform: translateY(-1px);
    box-shadow: var(--cod-shadow-inset-light, inset 0 1px 0 rgba(255, 255, 255, .66)),
                var(--cod-shadow-md, 0 8px 20px rgba(31, 65, 102, .18));
    filter: brightness(1.05);
  }
}

.angebote-tab:active {
  transform: scale(.97);
  box-shadow: var(--cod-shadow-inset-light, inset 0 1px 0 rgba(255, 255, 255, .66)),
              var(--cod-shadow-sm, 0 2px 6px rgba(0, 0, 0, .08));
}

@media (prefers-reduced-motion: reduce) {
  .angebote-tab { transition: none !important; }
  .angebote-tab:hover,
  .angebote-tab:focus-visible,
  .angebote-tab:active { transform: none !important; }
}

/* ── Kategorien-Aufklapper (seit 06.08.2026) ────────────────────────────────
   Die sechs Reiter brauchten auf dem Handy drei Zeilen. Im Ruhezustand steht
   deshalb nur noch "Alle N Kategorien" da — auf jedem Gerät gleich, so die
   Vorgabe des Betreibers.

   ZWEI Knöpfe, nicht einer zum Umschalten: "anzeigen" steht vor der Reihe,
   "zumachen" hinter der letzten Zeile. Beide sehen gleich aus, nur der Pfeil
   zeigt andersherum.

   Der Zustand hängt an .is-collapsed am Rahmen und kommt schon so vom Server —
   würde erst JS zuklappen, blitzten die Reiter beim Laden auf.

   Zwilling: community-of-dreams/assets/css/cod-general-header.css — immer
   gemeinsam ändern und deployen. */

.angebote-tabs.is-collapsed > .angebote-tab:not(.angebote-tab--toggle) { display: none; }
.angebote-tabs.is-collapsed .angebote-tab--close { display: none; }
.angebote-tabs:not(.is-collapsed) .angebote-tab--open { display: none; }

/* Bleiben nach dem Ausblenden einzelner Reiter weniger als zwei übrig, spart
   das Zuklappen keine Zeile mehr — dann verschwinden beide Knöpfe und die
   Reihe steht offen da. Die Klasse setzt das Skript, weil erst der Browser
   weiss, welche Reiter per CSS ausgeblendet sind. */
.angebote-tabs.cod-tabs-ohne-aufklapper > .angebote-tab--toggle { display: none; }

/* Flex-Kasten, damit Text und Pfeil sauber nebeneinander mittig sitzen. Der
   Text steckt deshalb in einem eigenen span (siehe cod-general-header.php):
   lose Textstücke würden hier je zu einem eigenen Flex-Element und ihre
   Leerzeichen dabei verlieren. */
.angebote-tab--toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
}

/* Farbe wie bei den sechs Reitern: eigenes Token zuerst (setzt der
   Elementor-Regler des Header-Widgets), dahinter die Bereichsfarbe "Alle" aus
   der Bereichs-Registry — sie heisst wörtlich so und ist damit die eigene
   Rolle dieses Knopfes, keine geliehene. Die Schrift rechnet sich wie überall
   selbst aus (--cod-bereich-all-text). */
.angebote-tab--toggle,
.angebote-tab--toggle:hover,
.angebote-tab--toggle:focus,
.angebote-tab--toggle.active {
  background: var(--cod-hdr-btn-alle-bg, var(--cod-bereich-all, #94A4B4));
  color: var(--cod-hdr-btn-alle-color, var(--cod-bereich-all-text, #1A1A1A));
}

/* Derselbe Pfeil wie beim Aufklappen der Rolle in der Partner-Karte: das
   Zeichen "\203A", gedreht — 90 Grad zeigt nach unten (aufklappen), -90 nach
   oben (zumachen).

   Vergrössert wird über scale statt über font-size: eine grössere Schrift
   würde die Zeilenhöhe und damit den ganzen Knopf wachsen lassen, und er
   stünde neben den anderen Reitern zu hoch. scale wirkt nur optisch, der
   Kasten bleibt 1em × 1em. */
.angebote-tab--toggle::after {
  content: "\203A";
  display: block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-align: center;
  font-weight: 900;
  transform: rotate(90deg) scale(1.6);
}

.angebote-tab--close::after { transform: rotate(-90deg) scale(1.6); }

/* Trefferfläche auf 44 px. ::before, weil ::after schon den Pfeil trägt — eine
   zweite Regel darauf würde den Pfeil ersetzen statt die Fläche zu vergrössern.
   Aufgerechnet über min-width/min-height statt über ein festes inset, damit die
   Fläche bei jeder Schriftgrösse stimmt.

   Mittig aufgeweitet ist hier in Ordnung: Zugeklappt steht der Knopf allein in
   seiner Zeile, aufgeklappt sitzt der Zumachen-Knopf hinter der letzten Reihe.
   Der Zuwachs (rund 2 px je Seite) bleibt unter der Hälfte des Zeilenabstands
   von 8 px, nimmt den Nachbarreihen also nichts weg. */
@media (pointer: coarse) {
  .angebote-tab--toggle { position: relative; }
  .angebote-tab--toggle::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    min-width: 44px;
    min-height: 44px;
    z-index: 0;
  }
}

/* Jeder Button trägt die Farbe seiner Inhalts-Art aus den Bereichs-Farben
   (--cod-bereich-*, kommen über den zentralen Design-Tokens-Endpunkt an). Die
   Schriftfarbe kommt aus derselben Quelle. Sie ist auf allen sechs Buttons
   DUNKEL, und das ist keine Zufälligkeit: Die Bereichs-Farben sind hell genug
   gewählt, dass die dunkle Schrift darauf immer mindestens 4,5:1 erreicht.

   Vorher zeigten drei dieser Regeln auf Elementor-Globalfarben
   (--e-global-color-*), von denen zwei im Kit dieser Seite auf denselben Pinkton
   gesetzt waren: Events und Angebote waren bitgleich, Partner fast gleich.

   Zwilling: community-of-dreams/assets/css/cod-general-header.css - immer
   gemeinsam ändern und deployen. */

.angebote-tab[data-view="events"],
.angebote-tab[data-view="events"]:hover,
.angebote-tab[data-view="events"]:focus,
.angebote-tab[data-view="events"].active {
  background: var(--cod-hdr-btn-events-bg, var(--cod-bereich-events, #FE4BC0));
  color: var(--cod-hdr-btn-events-color, var(--cod-bereich-events-text, #1A1A1A));
}

.angebote-tab[data-view="events"] {
  font-family: var(--cod-hdr-btn-events-font, inherit);
  font-size: var(--cod-hdr-btn-events-size, inherit);
}

.angebote-tab[data-view="angebote"],
.angebote-tab[data-view="angebote"]:hover,
.angebote-tab[data-view="angebote"]:focus,
.angebote-tab[data-view="angebote"].active {
  background: var(--cod-hdr-btn-angebote-bg, var(--cod-bereich-angebote, #03A1FC));
  color: var(--cod-hdr-btn-angebote-color, var(--cod-bereich-angebote-text, #1A1A1A));
}

.angebote-tab[data-view="angebote"] {
  font-family: var(--cod-hdr-btn-angebote-font, inherit);
  font-size: var(--cod-hdr-btn-angebote-size, inherit);
}

.angebote-tab[data-view="partner"],
.angebote-tab[data-view="partner"]:hover,
.angebote-tab[data-view="partner"]:focus,
.angebote-tab[data-view="partner"].active {
  background: var(--cod-hdr-btn-partner-bg, var(--cod-bereich-partner, #07B24E));
  color: var(--cod-hdr-btn-partner-color, var(--cod-bereich-partner-text, #1A1A1A));
}

.angebote-tab[data-view="partner"] {
  font-family: var(--cod-hdr-btn-partner-font, inherit);
  font-size: var(--cod-hdr-btn-partner-size, inherit);
}

.angebote-tab[data-view="gewinnspiele"],
.angebote-tab[data-view="gewinnspiele"]:hover,
.angebote-tab[data-view="gewinnspiele"]:focus,
.angebote-tab[data-view="gewinnspiele"].active {
  background: var(--cod-hdr-btn-gewinnspiele-bg, var(--cod-bereich-gewinnspiele, #DE860D));
  color: var(--cod-hdr-btn-gewinnspiele-color, var(--cod-bereich-gewinnspiele-text, #1A1A1A));
}

.angebote-tab[data-view="gewinnspiele"] {
  font-family: var(--cod-hdr-btn-gewinnspiele-font, inherit);
  font-size: var(--cod-hdr-btn-gewinnspiele-size, inherit);
}

.angebote-tab[data-view="academy"],
.angebote-tab[data-view="academy"]:hover,
.angebote-tab[data-view="academy"]:focus,
.angebote-tab[data-view="academy"].active {
  background: var(--cod-hdr-btn-academy-bg, var(--cod-bereich-academy, #CD68FF));
  color: var(--cod-hdr-btn-academy-color, var(--cod-bereich-academy-text, #1A1A1A));
}

.angebote-tab[data-view="academy"] {
  font-family: var(--cod-hdr-btn-academy-font, inherit);
  font-size: var(--cod-hdr-btn-academy-size, inherit);
}

.angebote-tab[data-view="crowdfunding"],
.angebote-tab[data-view="crowdfunding"]:hover,
.angebote-tab[data-view="crowdfunding"]:focus,
.angebote-tab[data-view="crowdfunding"].active {
  background: var(--cod-hdr-btn-crowdfunding-bg, var(--cod-bereich-crowdfunding, #FF6045));
  color: var(--cod-hdr-btn-crowdfunding-color, var(--cod-bereich-crowdfunding-text, #1A1A1A));
}

.angebote-tab[data-view="crowdfunding"] {
  font-family: var(--cod-hdr-btn-crowdfunding-font, inherit);
  font-size: var(--cod-hdr-btn-crowdfunding-size, inherit);
}

/* Auch auf dem Handy sind die Buttons nur so breit wie ihre Beschriftung.
   Vorher standen sie hier auf voller Zeilenbreite (flex: 1 1 100%) — sie sahen
   dadurch wie Blöcke aus und der erzwungene Umbruch fiel als größere Lücke auf.
   Sie brechen weiterhin von selbst um, sobald eine Zeile voll ist. */
@media (max-width: 480px) {
  .angebote-tab {
    flex: 0 1 auto;
  }
}