/* ════════════════════════════════════════════════════════════════════════
 * av-gratis.css — die Seite /gratis bzw. /en/free (Karte 513) und, seit
 * Karte 518, das Tier-Band unten auf /horoskope (Block am Dateiende).
 *
 * Auftrag Martin vom 09.09.2026 (WhatsApp, 19:35): „Nachfolgend das Aussehen
 * der neuen ‚Gratis'-Seite. Die Buttons unter den 3 Tier-Bildern sollen zum
 * jeweiligen Bestell-Formular fuehren. So wie es auf
 * https://astrovitalis.astrolix.de/horoskope angedacht war (das wird danach
 * geaendert). Der Button unten im Abschnitt ‚Kostenlose APL-Ausbildung' soll
 * zur Seite www.astrologie.gratis verlinken."
 * Vorlage: design/mockups/2026-09-09_Gratis-neu.pdf (ein flaches Bild).
 *
 * Warum eine eigene Datei und nicht custom.less: wie bei av-start.css,
 * av-order.css und av-varianten.css — j_template_styles.params ist knapp
 * (build/README.md „Fallen"). Eingehaengt wird sie ueber
 * build_pages.py::gratis_assets().
 *
 * Farben = Marken-Palette aus theme.av-build.less:
 *   Dunkelblau #1A2A6C · Orange #E8731A · CTA-Orange #B05A0A
 *   Creme #FDF8F1 · Creme-Rand #EADFCF
 * Der Entwurf benutzt ein helleres Blau (#043FA5) und ein grelleres Orange
 * (#FD5013); wie schon bei Karte 457 bleibt die Site bei ihrer eigenen
 * Palette, damit die neue Seite nicht aus der Reihe faellt.
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Handschrift (Caveat, SIL Open Font License 1.1, selbst gehostet) ─────
   Der Entwurf setzt an vier Stellen handschriftliche Zeilen ins Bild. Sie
   stehen hier als echter Text darueber — nur so gibt es sie auch auf
   Englisch (dieselbe Ueberlegung wie beim Abschluss-Band von Karte 457). */
@font-face {
  font-family: 'Caveat'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url(/av/fonts/caveat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Caveat'; font-style: normal; font-weight: 400 700;
  font-display: swap; src: url(/av/fonts/caveat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

.av-hand {
  font-family: 'Caveat', 'Segoe Script', cursive;
  font-weight: 600; color: #1A2A6C; line-height: 1.18;
  transform: rotate(-5deg); transform-origin: left center;
}
.av-hand .av-hand-strich { display: block; width: 74%; height: 14px; margin-top: 2px; }
.av-hand .av-hand-herz { display: block; margin-top: 10px; }

/* ── 1. Kopf-Band ────────────────────────────────────────────────────────
   Aufbau wie auf der Startseite (.av-hero-band): Text links, Foto randlos
   rechts. Neu sind nur die beiden Zeilen im Foto und die kleine
   Vorteilsleiste unter dem Knopf. */
/* Bezugsrahmen ist die Kachel mit dem Hintergrundbild (.uk-tile), nicht die
   Spalte — die traegt oben und unten noch den Innenabstand aus Karte 292.
   Dazwischen liegen zwei `.uk-panel`; UIkit gibt jedem `position: relative`,
   sie waeren also der Bezugsrahmen. Der aeussere wird deshalb ueber die
   ganze Kachel gelegt, der innere (das Text-Element) auf `static` gesetzt. */
.av-gratis-hero .av-hero-photo .uk-tile { position: relative; }
.av-gratis-hero .av-hero-photo .uk-tile > .uk-panel { position: absolute; inset: 0; }
.av-gratis-hero .av-hero-photo .uk-tile > .uk-panel > .uk-panel { position: static; }
.av-gratis-hero-schrift {
  position: absolute; top: 5%; right: 5%; width: 34%; max-width: 300px;
  font-size: clamp(20px, 2.4vw, 34px); text-align: left; z-index: 1;
}
.av-gratis-hero-schrift .av-hand-herz { margin-left: 22%; margin-top: 4px; }
/* Karte 527 (10.09.2026): die zweite Zeile im Foto („Auch Tiere haben ihre
   Sterne.", .av-gratis-hero-fuss) ist abbestellt — sie lag ueber der Katze und
   war schwer zu lesen. Sie wird nicht mehr erzeugt, die Regeln dafuer sind hier
   entfernt. */
/* Gestapelt (Handy/Tablet) liegt das Foto ueber dem Text und ist niedriger —
   dort wuerde die Handschrift ins Motiv rutschen. */
@media (max-width: 959px) {
  .av-gratis-hero-schrift { display: none; }
}

/* Karte 527: der Lead ueber den drei Tier-Kacheln steht am Schreibtisch
   zentriert, unter 960 px aber linksbuendig — dort wirkt die zentrierte Form
   fremd, weil alles darueber und darunter linksbuendig steht. `uk-text-center`
   traegt !important, deshalb hier ebenfalls. */
@media (max-width: 959px) {
  .av-gratis-tiere-lead { text-align: left !important; }
}

/* Vorteilsleiste „100 % kostenlos · Ohne Abo · Sofort online" */
.av-gratis-vorteile {
  display: flex; flex-wrap: wrap; gap: 12px 34px; align-items: center;
  margin-top: 22px; color: #1A2A6C; font-size: 15px; font-weight: 600;
}
.av-gratis-vorteile > span { display: inline-flex; align-items: center; gap: 10px; }
.av-gratis-vorteile img { flex: none; width: 24px; height: 24px; }

/* ── 2. Die drei Tier-Kacheln ────────────────────────────────────────────
   Eine Karte je Spalte, komplett als HTML: Foto randlos oben (das runde
   Tier-Icon steckt im Foto), darunter Titel + gruene Plakette, Text und ein
   Knopf, der ueber die volle Kartenbreite laeuft und unten buendig sitzt. */
/* Gleich hohe Karten: die Rasterspalte gibt ihre Hoehe bis zur Karte durch. */
.av-gratis-karte-col { display: flex; }
.av-gratis-karte-col > .uk-panel { display: flex; width: 100%; }
.av-gratis-karte {
  display: flex; flex-direction: column; flex: 1 1 auto; height: 100%;
  background: #FFFFFF; border: 1px solid #EADFCF; border-radius: 16px;
  overflow: hidden; box-shadow: 0 2px 10px rgba(26,42,108,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.av-gratis-karte:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(26,42,108,.12); }
.av-gratis-karte-bild {
  display: block; width: 100%; aspect-ratio: 608 / 302; object-fit: cover;
}
.av-gratis-karte-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 22px 24px 24px; }
.av-gratis-karte-kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.av-gratis-karte-kopf h3 { margin: 0; font-size: 22px; line-height: 1.2; color: #1A2A6C; }
.av-gratis-karte-body p { margin: 0 0 18px; color: #1A2A6C; }
.av-gratis-karte-knopf { margin-top: auto; width: 100%; }

/* Lange Knopfbeschriftungen: Text und Pfeil bleiben nebeneinander, auf
   schmalen Schirmen wird der Innenabstand kleiner statt der Pfeil umzubrechen. */
.av-gratis-karte-knopf,
.av-gratis-apl .uk-button,
.av-gratis-band .uk-button {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
}
@media (max-width: 639px) {
  .av-gratis-karte-knopf,
  .av-gratis-apl .uk-button,
  .av-gratis-band .uk-button { padding-left: 12px; padding-right: 12px; letter-spacing: .3px; }
}

/* Plakette „Derzeit kostenlos" */
.av-gratis-pille {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 6px 12px; border-radius: 12px; background: #DFF5DB;
  color: #1F7A3A; font-size: 11px; font-weight: 800; line-height: 1.15;
  letter-spacing: .4px; text-transform: uppercase;
}
.av-gratis-pille img { flex: none; width: 22px; height: 22px; }
.av-gratis-pille span { display: block; }

/* ── 3. „Warum verschenken wir diese Horoskope?" ─────────────────────── */
.av-gratis-warum {
  background: #FDF1E4; border: 1px solid #F3DCC4; border-radius: 18px;
  padding: 30px 34px;
}
.av-gratis-warum .uk-grid-divider > :not(.uk-first-column)::before { border-left-color: #EFD3B4; }
.av-gratis-warum-kopf { display: flex; align-items: flex-start; gap: 18px; }
.av-gratis-frage {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%; background: #E8731A;
  color: #FFFFFF; font-size: 30px; font-weight: 800; line-height: 1;
}
.av-gratis-warum h2 { margin: 0; font-size: 26px; line-height: 1.25; color: #1A2A6C; }
.av-gratis-warum .av-gratis-warum-sub {
  margin: 6px 0 0; font-size: 19px; font-weight: 700; color: #E8731A;
}
.av-gratis-warum-text { margin: 16px 0 0; color: #1A2A6C; }
.av-gratis-warum .av-checks > li { font-size: 17px; color: #1A2A6C; margin-bottom: 12px; }
.av-gratis-warum-fazit { margin: 16px 0 0; font-size: 15px; color: #1A2A6C; }
@media (max-width: 639px) {
  .av-gratis-warum { padding: 24px 20px; }
  .av-gratis-frage { width: 44px; height: 44px; font-size: 24px; }
}

/* ── 4. Band „Kostenlose APL-Ausbildung" ─────────────────────────────── */
.av-gratis-apl { background: #EBF4FD; padding-top: 46px; }
.av-gratis-apl-portraet { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
/* Karte 527: die Handschrift ueber dem Portraet („Astrologie verstehen. …",
   .av-gratis-apl-schrift) ist abbestellt — sie hat das Bild nach unten
   gedrueckt und unter der Ueberschrift eine grosse Leere gelassen. */
.av-gratis-apl-lead { color: #E8731A; font-size: 19px; font-weight: 600; margin: 0 0 14px; }
.av-gratis-apl-merkmale {
  display: flex; flex-wrap: wrap; gap: 10px 40px; margin: 20px 0 0; padding: 0;
  list-style: none;
}
.av-gratis-apl-merkmale > li { position: relative; padding-left: 30px; font-size: 17px; color: #1A2A6C; }
.av-gratis-apl-merkmale > li::before {
  content: ""; position: absolute; left: 0; top: .18em; width: 20px; height: 20px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8731A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.av-gratis-apl-hinweis { margin: 14px 0 0; font-size: 14px; color: #5B6070; }
.av-gratis-apl-hinweis strong { color: #1A2A6C; }
@media (max-width: 959px) {
  .av-gratis-apl-portraet { max-width: 300px; }
}

/* ── 5. Abschluss-Band mit Bergpanorama ──────────────────────────────────
   Wie .av-apl-cta (Karte 457/458): ab 960 px traegt die Sektion das Foto,
   darunter steht es als eigenes Bild unter dem Text. */
.av-gratis-band { position: relative; background-color: #EAF0F7; }
.av-gratis-band h2 { color: #1A2A6C; }
.av-gratis-band-text { color: #1A2A6C; }
/* Das Panorama traegt nur am Schreibtisch (ab 960 px) die Sektion; auf dem
   Handy steht es als eigenes Bild unter dem Text (Bauform aus Karte 458).
   YOOtheme setzt das Hintergrundbild nicht auf <section>, sondern per
   Inline-Stil auf das innere .uk-background-cover — daher !important. */
.av-gratis-band-bild { display: none; }
.av-gratis-band-schrift {
  position: absolute; right: 5%; top: 22%; width: 26%; max-width: 250px;
  font-size: clamp(19px, 1.8vw, 26px); text-align: left;
}
@media (max-width: 959px) {
  .av-gratis-band .uk-background-cover { background-image: none !important; }
  .av-gratis-band-schrift { display: none; }
  .av-gratis-band-bild { display: block; }
  .av-gratis-band-bild img {
    display: block; width: 100%; aspect-ratio: 5 / 2; object-fit: cover;
    object-position: center right; border-radius: 16px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Karte 518 (09.09.2026) — das Tier-Band auf /horoskope bzw. /en/horoscopes
 *
 * Martin (WhatsApp, 22:23): „Auf der Seite .../horoskope bitte folgendes
 * vollstaendig entfernen: 1) die 3 Tier-Horoskope 2) darunter die Tabelle
 * ‚Zwei Varianten...' 3) die Tabelle ‚Was ist der Unterschied?'. Stattdessen
 * unterhalb der kostenpflichtigen Horoskope (unter ‚Astrokartographie') das
 * Bild in der naechsten Nachricht umsetzen. Der Button unten verlinkt auf die
 * neue ‚Gratis-Seite'."
 * Vorlage: design/mockups/2026-09-09_Horoskope-Tierband.jpg (ein flaches Bild),
 * Motive: build/karte518_bilder.py.
 *
 * Warum in DIESER Datei und nicht in einer eigenen: das Band ist der Anreisser
 * der Seite /gratis und benutzt deren Bausteine — die gruene Plakette
 * (.av-gratis-pille), die Kartenform (.av-gratis-karte) und die Handschrift
 * (.av-hand, Webfont Caveat). Eine zweite Datei waere eine zweite Kopie
 * derselben Regeln und ein zweiter Font-Download. /horoskope laedt sie ueber
 * build_pages.py::gratis_assets().
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Kopf: Kicker, Ueberschrift, Subline, Fliesstext ──────────────────── */
/* Bezugsrahmen fuer Handschrift und Pfoten (beide absolut gesetzt). */
.av-tier-kopf { position: relative; }

/* „◆ Neu bei Astrovitalis ◆" — zentrierte Fassung von .av-apl-kicker. */
.av-tier-kicker {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0 0 10px;
}
.av-tier-kicker span {
  color: #E8731A; font-size: 14px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase; text-align: center;
}
.av-tier-kicker::before, .av-tier-kicker::after {
  content: ""; display: block; height: 14px; flex: 0 1 190px;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E8731A'%3E%3Cpath d='M12 0l2.6 8.2L23 12l-8.4 3.8L12 24l-2.6-8.2L1 12l8.4-3.8z'/%3E%3C/svg%3E"),
    linear-gradient(90deg, rgba(232,115,26,0) 0%, #E8731A 45%, #E8731A 55%, rgba(232,115,26,0) 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: 14px 14px, 100% 1px;
}
.av-tier-kicker::before { background-position: right center, center center; }
.av-tier-kicker::after  { background-position: left center, center center; }
/* Auf dem Handy sonst: Linien oben, Text darunter in zwei Zeilen. */
@media (max-width: 639px) {
  .av-tier-kicker { gap: 10px; }
  .av-tier-kicker::before, .av-tier-kicker::after { flex: 0 0 26px; }
  .av-tier-kicker span { font-size: 13px; letter-spacing: 1px; }
}

.av-tier-titel { margin: 0 0 6px; color: #1A2A6C; text-align: center; }
/* Subline und Fliesstext stehen im Entwurf als schmale Saeule in der Mitte —
   ueber die volle Sektionsbreite waeren es zu lange Zeilen (und der Text liefe
   in die Handschrift links). */
.av-tier-sub {
  max-width: 780px; margin: 0 auto 14px; color: #E8731A; font-weight: 700;
  text-align: center; font-size: clamp(20px, 2.1vw, 27px); line-height: 1.25;
}
.av-tier-lead { max-width: 780px; margin: 0 auto; color: #1A2A6C; text-align: center; }

/* Handschrift links („Besondere Menschen auf vier Pfoten.") und die beiden
   Pfotenabdruecke rechts sind reine Zier: ab 1200 px stehen sie neben dem
   Text, darunter waere kein Platz — dort verschwinden sie ersatzlos. */
.av-tier-schrift, .av-tier-pfoten { display: none; }
@media (min-width: 1200px) {
  .av-tier-schrift {
    display: block; position: absolute; left: 0; top: 4px; width: 200px;
    font-size: 27px; text-align: left; z-index: 1;
  }
  .av-tier-schrift .av-hand-herz { margin-left: 34%; margin-top: 2px; }
  /* Die beiden Pfoten sind im Entwurf nur ein blasser Schatten im Creme —
     deshalb stark ausgeblendet, nicht in Markenblau. */
  .av-tier-pfoten {
    display: block; position: absolute; right: 0; top: -14px; width: 240px;
    height: 230px; opacity: .13; z-index: 0; pointer-events: none;
  }
  .av-tier-pfoten img { position: absolute; width: 116px; height: 116px; }
  .av-tier-pfoten img:first-child { right: 4px; top: 0; transform: rotate(14deg); }
  .av-tier-pfoten img:last-child  { right: 88px; top: 104px; transform: rotate(-6deg); }
}

/* ── Die drei Karten ──────────────────────────────────────────────────────
   Form wie auf /gratis (.av-gratis-karte), nur ohne Knopf: hier soll genau
   EIN Knopf stehen, der auf die Gratis-Seite fuehrt (Martins Wortlaut). Das
   Foto ist etwas hoeher als dort — im Entwurf 494 x 339. */
.av-tier-karte .av-gratis-karte-bild { aspect-ratio: 494 / 339; }
.av-tier-karte .av-gratis-karte-body p { margin-bottom: 0; }
/* Im Entwurf steht die Plakette direkt neben der Ueberschrift, nicht am
   rechten Kartenrand. */
.av-tier-karte .av-gratis-karte-kopf { justify-content: flex-start; }

/* Karte 1145 (09.10.2026, Martin): Karten, Ueberschrift und Testphasen-Band sind Links auf die
   Gratis-Seite. Aussehen bleibt wie vorher — kein Linkblau, keine Unterstreichung; die Karten heben
   sich beim Darueberfahren wie auf /gratis, das Band bekommt denselben Schatten. */
a.av-tier-karte, a.av-tier-karte:hover, a.av-tier-test, a.av-tier-test:hover,
.av-tier-titel a, .av-tier-titel a:hover { color: inherit; text-decoration: none; }
.av-tier-titel a:hover { opacity: .85; }
a.av-tier-test { transition: transform .25s ease, box-shadow .25s ease; }
a.av-tier-test:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(26,42,108,.10); }
a.av-tier-karte:focus-visible, a.av-tier-test:focus-visible, .av-tier-titel a:focus-visible {
  outline: 3px solid #E8731A; outline-offset: 3px;
}

/* ── Band „Aktuell in der Testphase" ────────────────────────────────────── */
.av-tier-test {
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
  margin-top: 34px; padding: 24px 30px;
  background: #FDF1E4; border: 1px solid #F3DCC4; border-radius: 18px;
}
.av-tier-test-kopf { display: flex; align-items: center; gap: 18px; flex: 1 1 300px; }
.av-tier-test-kopf img { flex: none; width: 46px; height: 46px; }
.av-tier-test-kopf strong {
  color: #1A2A6C; font-size: 20px; font-weight: 800; line-height: 1.3;
}
.av-tier-test-text {
  flex: 2 1 420px; margin: 0; color: #1A2A6C; font-size: 15px; line-height: 1.6;
  padding-left: 26px; border-left: 1px solid #EFD3B4;
}
.av-tier-test-text strong { color: #1A2A6C; }
@media (max-width: 959px) {
  .av-tier-test { padding: 22px 20px; gap: 18px; }
  .av-tier-test-text { padding-left: 0; border-left: 0; }
}

/* ── Knopf auf die Gratis-Seite ─────────────────────────────────────────── */
.av-tierband .uk-button.av-btn-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding-left: 34px; padding-right: 34px; letter-spacing: .6px;
}

/* ── Schlusszeile „Weil auch Tiere ihren ganz eigenen Weg gehen." ───────── */
.av-tier-schluss {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin-top: 26px; color: #5B6070; font-size: 15px;
}
.av-tier-schluss img { flex: none; width: 22px; height: 22px; }
.av-tier-schluss::before, .av-tier-schluss::after {
  content: ""; display: block; height: 1px; flex: 0 1 150px;
  background: linear-gradient(90deg, rgba(26,42,108,0) 0%, rgba(26,42,108,.28) 100%);
}
.av-tier-schluss::after { background: linear-gradient(90deg, rgba(26,42,108,.28) 0%, rgba(26,42,108,0) 100%); }
@media (max-width: 639px) {
  .av-tier-schluss { font-size: 14px; }
  .av-tier-schluss::before, .av-tier-schluss::after { flex-basis: 30px; }
}

/* ── Karte 843 (21.09.2026): Kopf-Band der Seite /ueber-uns ──────────────
   Dieselbe Bauform wie oben (Handschrift im Foto), das Foto aber hoeher als
   die Textspalte — wie in Martins Entwurf, damit die Handschrift im Himmel
   ueber dem Wegweiser steht und ihn nicht verdeckt. Unter 960 px greift die
   Regel oben (Handschrift aus, Foto ueber dem Text). */
@media (min-width: 960px) {
  .av-hero-ueber .av-hero-photo { min-height: clamp(460px, 40vw, 620px); }
  .av-hero-ueber .av-gratis-hero-schrift {
    top: 6%; right: 5%; width: 30%; font-size: clamp(20px, 2.1vw, 32px);
  }
}