/* ════════════════════════════════════════════════════════════════════════
 * av-start.css — nur fuer die Startseite (DE + EN).
 *
 * Karte 428 (Auftrag Martin, 04.09.2026): Aus den drei Textlinks unter den
 * Bildern der Angebots-Spalten werden Knoepfe in der Farbe der jeweiligen
 * Spalte; aus dem Textlink „Mehr ueber Peter-Johannes Hensel" wird ein Knopf
 * im Look des Hero-Knopfes „Mehr erfahren", aber mit dunkelblauem Rahmen
 * und dunkelblauer Schrift.
 *
 * Warum eine eigene Datei und nicht custom.less: die Spalte
 * j_template_styles.params ist mit 64.094 von 65.535 Byte fast voll
 * (build/README.md „Fallen"). Eingehaengt wird sie wie av-admin.css als
 * <link> im Seiten-JSON (build_pages.py::start_assets()).
 *
 * Farben = die Spaltenfarben aus custom.less (.av-badge-*):
 *   Persoenliche Horoskope  #3B7DD8   (av-badge-persoenlichkeit)
 *   Design-Horoskope        #4B3FBF   (av-badge-design)
 *   Astrologie lernen (APL) #3F9C5A   (av-badge-beruf)
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Knoepfe der drei Angebots-Spalten ───────────────────────────────── */
/* `.av-angebot .el-link` in custom.less stammt aus der Zeit des Textlinks
   (padding 0, 12 px, Laufweite .3, dunkelblaue Schrift). Hier auf die Masse
   der uebrigen Knoepfe der Seite zurueckgeholt — nachgemessen am Hero-Knopf
   „Zu den Horoskopen": 0 28px, 13 px, Laufweite .7 px, weisse Schrift. */
.av-angebot .el-link.uk-button {
  margin-top: 18px;
  width: 100%;
  border: 1px solid transparent;
  padding: 0 28px;
  font-size: 13px;
  letter-spacing: .7px;
  color: #FFFFFF;
}
.av-angebot .el-link.uk-button:hover,
.av-angebot .el-link.uk-button:focus,
.av-angebot .el-link.uk-button:active { color: #FFFFFF; }

.av-angebot-persoenlichkeit .el-link.uk-button-primary { background-color: #3B7DD8; border-color: #3B7DD8; }
.av-angebot-persoenlichkeit .el-link.uk-button-primary:hover,
.av-angebot-persoenlichkeit .el-link.uk-button-primary:focus { background-color: #2F66B4; border-color: #2F66B4; }
.av-angebot-persoenlichkeit .el-link.uk-button-primary:active { background-color: #27548F; border-color: #27548F; }

.av-angebot-design .el-link.uk-button-primary { background-color: #4B3FBF; border-color: #4B3FBF; }
.av-angebot-design .el-link.uk-button-primary:hover,
.av-angebot-design .el-link.uk-button-primary:focus { background-color: #3C329B; border-color: #3C329B; }
.av-angebot-design .el-link.uk-button-primary:active { background-color: #2F277B; border-color: #2F277B; }

.av-angebot-beruf .el-link.uk-button-primary { background-color: #3F9C5A; border-color: #3F9C5A; }
.av-angebot-beruf .el-link.uk-button-primary:hover,
.av-angebot-beruf .el-link.uk-button-primary:focus { background-color: #337F4A; border-color: #337F4A; }
.av-angebot-beruf .el-link.uk-button-primary:active { background-color: #2A683C; border-color: #2A683C; }

/* ── „Mehr ueber Peter-Johannes Hensel" ──────────────────────────────── */
/* Grundform ist der Sekundaer-Knopf (transparent, Rahmen + Schrift); statt
   Orange hier das Dunkelblau der Marke. */
.uk-button.av-btn-blau {
  color: #1A2A6C;
  border-color: #1A2A6C;
}
.uk-button.av-btn-blau:hover,
.uk-button.av-btn-blau:focus {
  background-color: #1A2A6C;
  border-color: #1A2A6C;
  color: #FFFFFF;
}
.uk-button.av-btn-blau:active {
  background-color: #13204F;
  border-color: #13204F;
  color: #FFFFFF;
}

/* ── Karte 430 (04.09.2026): Knopffarben auf der farbigen Karte ──────── */
/* Mit der Fläche aus Karte 310 ist die Farbe einer Spalte wieder die des
   Entwurfs „Astrovitalis-Homepage 1a": Spalte 1 grün, Spalte 2 dunkelblau,
   Spalte 3 indigo (Haken und Plakette laufen in theme.css schon so mit).
   Die Knöpfe nehmen genau diese Farben an — sonst stünde ein blauer Knopf
   auf der grünen Karte.

   Warum so lange Selektoren: `.av-angebote-farbig>div:nth-child(n)
   .av-angebot .el-link{color:…}` aus theme.css (0,3,1) stammt aus der Zeit
   des Textlinks und würde die Schrift des Knopfes einfärben. Die Regeln hier
   liegen mit (0,4,1) bzw. (0,5,1) darüber. */
.av-angebote-farbig > div .av-angebot .el-link.uk-button,
.av-angebote-farbig > div .av-angebot .el-link.uk-button:hover,
.av-angebote-farbig > div .av-angebot .el-link.uk-button:focus,
.av-angebote-farbig > div .av-angebot .el-link.uk-button:active { color: #FFFFFF; }

.av-angebote-farbig > div:nth-child(1) .av-angebot .el-link.uk-button-primary { background-color: #2F7A46; border-color: #2F7A46; }
.av-angebote-farbig > div:nth-child(1) .av-angebot .el-link.uk-button-primary:hover,
.av-angebote-farbig > div:nth-child(1) .av-angebot .el-link.uk-button-primary:focus { background-color: #245E36; border-color: #245E36; }
.av-angebote-farbig > div:nth-child(1) .av-angebot .el-link.uk-button-primary:active { background-color: #1D4C2B; border-color: #1D4C2B; }

.av-angebote-farbig > div:nth-child(2) .av-angebot .el-link.uk-button-primary { background-color: #1A2A6C; border-color: #1A2A6C; }
.av-angebote-farbig > div:nth-child(2) .av-angebot .el-link.uk-button-primary:hover,
.av-angebote-farbig > div:nth-child(2) .av-angebot .el-link.uk-button-primary:focus { background-color: #13204F; border-color: #13204F; }
.av-angebote-farbig > div:nth-child(2) .av-angebot .el-link.uk-button-primary:active { background-color: #0F1A42; border-color: #0F1A42; }

.av-angebote-farbig > div:nth-child(3) .av-angebot .el-link.uk-button-primary { background-color: #4B3FBF; border-color: #4B3FBF; }
.av-angebote-farbig > div:nth-child(3) .av-angebot .el-link.uk-button-primary:hover,
.av-angebote-farbig > div:nth-child(3) .av-angebot .el-link.uk-button-primary:focus { background-color: #3A3096; border-color: #3A3096; }
.av-angebote-farbig > div:nth-child(3) .av-angebot .el-link.uk-button-primary:active { background-color: #2F277B; border-color: #2F277B; }

/* ── Karte 1202 (Martin, 14.10.2026): ganze Angebots-Karte klickbar ──── */
/* „Kannst Du bitte auch auf https://astrovitalis.astrolix.de/ die drei
   Bereiche (Persönliche Horoskope, Design-Horoskope und Astrologie lernen)
   komplett klickbar machen, d.h. der User muss nicht direkt auf den Button
   ‚Alle Horoskope entdecken‘ klicken." — wie die Kacheln auf /horoskope.

   Gelöst ohne Umbau des Panels: die Klickfläche des Knopf-Links wird per
   ::after über die ganze Karte gelegt (`.uk-card` ist position: relative,
   der Knopf selbst nicht positioniert). Damit bleibt es EIN echter Link je
   Karte (Tastatur/Screenreader unverändert), und alle Karten-Regeln aus
   custom.less (`.av-angebot.uk-card-default`, Flächenfarben) greifen weiter.
   `panel_link` hätte die Klasse av-angebot auf einen Wrapper verschoben und
   die Karte zum <a> gemacht — dafür hätte custom.less umgebaut werden müssen
   (Style-Spalte fast voll, README „Fallen").
   Nebeneffekt, gewollt: Maus irgendwo auf der Karte = Knopf im Hover-Zustand
   (dunklere Spaltenfarbe), dazu das Anheben der Karte aus theme.css. */
.av-angebot .el-link.uk-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}