@font-face {
font-family:"korolev-condensed";
src:url("https://use.typekit.net/af/741ec3/00000000000000007735e8b8/31/l?subset_id=2&fvd=n9&v=3") format("woff2"),url("https://use.typekit.net/af/741ec3/00000000000000007735e8b8/31/d?subset_id=2&fvd=n9&v=3") format("woff");
font-display:swap;font-style:normal;font-weight:900;font-stretch:normal;
}

@font-face {
font-family:"puffin-display-soft";
src:url("https://use.typekit.net/af/ec56f1/00000000000000007735e71a/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff2"),url("https://use.typekit.net/af/ec56f1/00000000000000007735e71a/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n4&v=3") format("woff");
font-display:swap;font-style:normal;font-weight:400;font-stretch:normal;
}

@font-face {
font-family:"puffin-display-soft";
src:url("https://use.typekit.net/af/015e0a/00000000000000007735e707/31/l?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff2"),url("https://use.typekit.net/af/015e0a/00000000000000007735e707/31/d?primer=7cdcb44be4a7db8877ffa5c0007b8dd865b3bbc383831fe2ea177f62257a9191&fvd=n7&v=3") format("woff");
font-display:swap;font-style:normal;font-weight:700;font-stretch:normal;
}

body {
	font-family: "puffin-display-soft", sans-serif;
	font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "korolev-condensed", sans-serif;
	font-weight: 900;
}

/* Sprachabhängiges Logo im Header */
.site-logo-lang {
	display: none;
}
html[lang="de-CH"] .site-logo-de {
	display: block;
}
html[lang="fr-FR"] .site-logo-fr {
	display: block;
}
html[lang="it-IT"] .site-logo-it {
	display: block;
}

/* Language switcher pill styling */
.wp-block-polylang-navigation-language-switcher .wp-block-navigation-item__content {
	background: #08467e;
	color: #9a9a9a;
	font-weight: 400;
	text-decoration: none;
	padding: 8px 14px;
	display: inline-block;
	/* color: red!important; */
}
.wp-block-polylang-navigation-language-switcher:not(.lang-item-first) {
	margin-left: -16px;
}
.wp-block-polylang-navigation-language-switcher.lang-item-first .wp-block-navigation-item__content {
	border-top-left-radius: 999px;
	border-bottom-left-radius: 999px;
}
.wp-block-polylang-navigation-language-switcher:not(:has(+ .wp-block-polylang-navigation-language-switcher)) .wp-block-navigation-item__content {
	border-top-right-radius: 999px;
	border-bottom-right-radius: 999px;
}
.wp-block-polylang-navigation-language-switcher.current-lang .wp-block-navigation-item__content {
	color: #ffffff;
	font-weight: 700;
}

/* DAM */
.fdam-sidebar {
    width: 230px;
    flex: 0 0 230px;
    color: #ffffff;
}

:root .has-text-align-center {
    text-align: center;
	color: #FFF;
}
.wp-block-column.is-layout-flow.wp-block-column-is-layout-flow {
    color: #ffffff;
}
p.has-text-align-left.wp-block-paragraph {
    color: #ffffff;
    margin-bottom: -30px;
}

/* Seitentitel auf "Lehrmittel" ausblenden */
body.page-id-128 .wp-block-post-title {
	    display: none;
}

span.wc-block-components-checkbox__label a {
    color: #06365a !important;
}
/* Seitentitel auf "Sample Page" ausblenden (Seitenabstand wie bei Lehrmittel) */
body.page-id-2 .wp-block-post-title {
    display: none;
}

#loginform {
    max-width: 400px;
    margin: 0 auto;
}
.wp-block-column:has(#loginform) {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
h1.wp-block-post-title.has-secondary-font-family{
    display: flex;
    flex-direction: column;
    align-items: center;
	font-size: 3.5rem;

}


/* ===== Lehrmittel: Kacheln in der Farbe der Heft-Cover ===== */
.feature-boxes {
    --heft-1: #013f6e;   /* Blau */
    --heft-2: #98022b;   /* Rot */
    --heft-3: #326f42;   /* Grün */
    --heft-4: #f59732;   /* Gelb */
}

.feature-boxes .is-layout-grid > .wp-block-group:nth-child(1) {--heft: #026eb1;--heft-text: #fff;}
.feature-boxes .is-layout-grid > .wp-block-group:nth-child(2) {--heft: #ce0030;--heft-text: #fff;}
.feature-boxes .is-layout-grid > .wp-block-group:nth-child(3) {--heft: #009e3a;--heft-text: #fff;}
.feature-boxes .is-layout-grid > .wp-block-group:nth-child(4) {--heft: #ff9821;--heft-text: #fff;}

/* Hintergrund + Rahmen */
.feature-boxes .is-layout-grid > .wp-block-group {
    background-color: var(--heft) !important;
    border-color: var(--heft) !important;
    color: var(--heft-text) !important;
}

/* Texte */
.feature-boxes .is-layout-grid > .wp-block-group h1,
.feature-boxes .is-layout-grid > .wp-block-group h2,
.feature-boxes .is-layout-grid > .wp-block-group h3,
.feature-boxes .is-layout-grid > .wp-block-group h4,
.feature-boxes .is-layout-grid > .wp-block-group p {
    color: var(--heft-text) !important;
}

/* Buttons: in Textfarbe, Schrift in Kachelfarbe */
.feature-boxes .is-layout-grid > .wp-block-group .wp-block-button__link {
    background-color: var(--heft-text) !important;
    color: var(--heft) !important;
    border: 1px solid var(--heft-text) !important;
}
.feature-boxes .is-layout-grid > .wp-block-group .wp-block-button__link:hover {
    background-color: transparent !important;
    color: var(--heft-text) !important;
}

/* ===== Lehrmittel: Titel kleiner, Cover randlos ===== */

/* Titel ("Heft 1 – …") und Untertitel kleiner */
.feature-boxes .is-layout-grid > .wp-block-group h1,
.feature-boxes .is-layout-grid > .wp-block-group h2,
.feature-boxes .is-layout-grid > .wp-block-group h3,
.feature-boxes .is-layout-grid > .wp-block-group h4 {
    font-size: clamp(1rem, 0.9rem + 0.4vw, 1.25rem) !important;
    line-height: 1.25 !important;
}
.feature-boxes .is-layout-grid > .wp-block-group p {
    font-size: 0.95rem !important;
}

/* Kachel: seitlichen Innenabstand entfernen … */
.feature-boxes .is-layout-grid > .wp-block-group {
    --kachel-rand: var(--wp--preset--spacing--medium, 1.5rem);
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden;
}

/* … und allen Inhalten ausser dem Bild wieder zurückgeben */
.feature-boxes .is-layout-grid > .wp-block-group > * > *:not(.wp-block-image),
.feature-boxes .is-layout-grid > .wp-block-group > .wp-block-buttons {
    padding-left: var(--kachel-rand) !important;
    padding-right: var(--kachel-rand) !important;
    box-sizing: border-box;
}

/* Cover-Bild über die volle Breite, ohne Rand links/rechts */
.feature-boxes .is-layout-grid > .wp-block-group .wp-block-image {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.feature-boxes .is-layout-grid > .wp-block-group .wp-block-image img {
    display: block;
    width: 100% !important;
    height: auto !important;
    border-radius: 0 !important;
}

/* Lehrmittel: weniger Abstand zwischen den Kacheln */
.feature-boxes .is-layout-grid {
    gap: 16px !important;
}

/* Lehrmittel: Kacheln ohne Rahmen */
.feature-boxes .is-layout-grid > .wp-block-group {
    border: none !important;
    box-shadow: none !important;
}


.feature-boxes .is-layout-grid > .wp-block-group .wp-block-image {
    margin-top: 0 !important;   /* Bild bündig oben in der Box */
}

/* ===== Lehrmittel: Buttons Leseprobe + Warenkorb mit Symbolen ===== */
.feature-boxes .wp-block-buttons {
    gap: 8px !important;
    align-items: center;
}

/* gemeinsames Symbol-Grundgerüst */
.feature-boxes .btn-leseprobe .wp-block-button__link,
.feature-boxes .btn-warenkorb .wp-block-button__link {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.feature-boxes .btn-leseprobe .wp-block-button__link::before,
.feature-boxes .btn-warenkorb .wp-block-button__link::before {
    content: "";
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    background-color: currentColor;
    -webkit-mask: var(--icon) center / contain no-repeat;
            mask: var(--icon) center / contain no-repeat;
}

/* Buch-Symbol (Leseprobe) */
.feature-boxes .btn-leseprobe .wp-block-button__link {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E");
}

/* Warenkorb-Symbol – nur Icon, Text versteckt */
.feature-boxes .btn-warenkorb .wp-block-button__link {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='21' r='1'/%3E%3Ccircle cx='20' cy='21' r='1'/%3E%3Cpath d='M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6'/%3E%3C/svg%3E");
    font-size: 0 !important;      /* Text ausblenden */
    gap: 0;
    width: 44px;
    height: 44px;
    padding: 0 !important;
}
/* Lehrmittel: Leseprobe füllt die Zeile, Warenkorb rechts daneben */
.feature-boxes .wp-block-buttons {
    flex-wrap: nowrap !important;
}
.feature-boxes .btn-leseprobe {
    flex: 1 1 auto;
    min-width: 0;
}
.feature-boxes .btn-leseprobe .wp-block-button__link {
    width: 100%;
}
.feature-boxes .btn-warenkorb {
    flex: 0 0 auto;
}
/* Lehrmittel: Korrektur Buttons – kein Extra-Abstand auf den einzelnen Buttons */
.feature-boxes .is-layout-grid > .wp-block-group > .wp-block-buttons > .wp-block-button:not(.x) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.feature-boxes .is-layout-grid > .wp-block-group > .wp-block-buttons {
    width: 100%;
    box-sizing: border-box;
}
.feature-boxes .btn-leseprobe .wp-block-button__link {
    white-space: nowrap;
}


/* ===== Aufzählung mit Icon statt Kreis ===== */
.icon-liste {
    list-style: none;
    padding-left: 0;
    --icon-farbe: #ffffff;   /* Farbe des Icons */
    --icon-groesse: 20px;
}
.icon-liste li {
    position: relative;
    padding-left: calc(var(--icon-groesse) + 12px);
    margin-bottom: 0.5em;
}
.icon-liste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2em;
    width: var(--icon-groesse);
    height: var(--icon-groesse);
    background-color: var(--icon-farbe);
    /* Häkchen im Kreis */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wp-block-columns.alignwide.is-layout-flex.wp-container-core-columns-is-layout-f15824f9.wp-block-columns-is-layout-flex {
    margin-top: 35px;
}

.wp-block-site-logo img {
    height: auto;
    max-width: 100%;
    margin-left: -10px;
    padding-bottom: 5px;
}

@media (max-width: 600px) {
  /* Globaler Seitenrand (Ollie: clamp(1.5rem, 4vw, 2rem)) */
  :root,
  body {
    --wp--style--root--padding-left: 12px;
    --wp--style--root--padding-right: 12px;
  }

  /* Zusätzliche 64px Inhaltsbreite der Main-Gruppe aufheben */
  main.wp-block-group > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
  main.wp-block-group > .alignwide {
    max-width: 100% !important;
  }
}

/* ===== Hamburger-Umbruch auf 700px ===== */
@media (min-width: 600px) and (max-width: 699px) {
  /* Hamburger-Button anzeigen */
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex !important;
  }
  /* Ausgeklapptes Desktop-Menü ausblenden (ausser Overlay ist offen) */
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none !important;
  }
}

/* ===== Sprachwahl ===== */
/* Desktop: separate Sprachwahl ausblenden */
.lang-mobile {
  display: none !important;
}

/* Mobile bis 699px: Sprachwahl immer sichtbar */
@media (max-width: 699px) {
  .lang-mobile {
    display: flex !important;
  }
  /* Sprachwahl im Hamburger-Overlay ausblenden */
  .wp-block-navigation:not(.lang-mobile) .lang-item {
    display: none !important;
  }
}

.bild-300 .wc-block-grid__product-image img {
  width: 300px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.bild-300 .wc-block-grid__product {
  text-align: center;
}

body {
  position: relative;
  background-image: radial-gradient(rgb(9,81,149) 0%, rgb(4,44,68) 100%);
}

body::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('/wp-content/uploads/2026/10/Reifenspur-scaled.png')
              no-repeat left -25vw top 26vh / 130% auto;
  opacity: 0.3;
}

.site-header {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 100;
}

.add_to_cart_button:hover,
.add_to_cart_button:focus-visible {
  background-color: var(--wp--preset--color--main) !important;
  border-color: var(--wp--preset--color--main) !important;
  color: #fff !important;
}

body.page-id-128 .feature-boxes { margin-top: 0 !important; }

/* FR + IT: leeren Tabs-Block ausblenden, Abstand wie DE */
body.page-id-158 .feature-boxes > .wp-block-tabs,
body.page-id-160 .feature-boxes > .wp-block-tabs {
  display: none;
}
body.page-id-158 .feature-boxes > .wp-block-tabs + *,
body.page-id-160 .feature-boxes > .wp-block-tabs + * {
  margin-block-start: 0 !important;
}

ul.wp-block-social-links.has-icon-color.has-icon-background-color.is-style-default.is-content-justification-left.is-layout-flex.wp-container-core-social-links-is-layout-b2f11956.wp-block-social-links-is-layout-flex {
    display: none;
}

.wp-block-separator:not(.is-style-dots), .wp-block-separator.has-background:not(.is-style-dots) {
    border-bottom: 2px solid rgb(92 118 142);
    height: 1px;
}
@media (max-width: 781px) {
  .feature-boxes .wp-block-buttons.btn-paar,
  .wp-block-buttons.btn-paar {
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
   .wp-block-columns.bild-zuerst-mobil {
    flex-direction: column-reverse;
  }
  .feature-boxes .btn-paar .wp-block-button,
  .btn-paar .wp-block-button {
    flex: 1 1 100% !important;
    width: 100% !important;
  }
}


/* Let's Drive – 4 Autos in den Farben der Lehrhefte fahren im oberen Bereich des Footers von rechts nach links
   Einfügen unter: Design → Editor → Stile → ⋮ → Zusätzliches CSS

   Reihenfolge (vorne nach hinten): Heft 1 blau, Heft 2 rot, Heft 3 grün, Heft 4 orange
   Blau, Rot und Orange fahren gleichmässig (::before).
   Das grüne Auto (::after) fährt schneller, holt das rote ein, bremst ab und fährt dann hinter ihm her. */

footer.site-footer {
  position: relative;       /* Bezugspunkt für die Autos */
}

/* Platz für die Autos reservieren: der Footer-Abstand oben ist fluid (4–7rem)
   und auf dem Handy nur 64px – darum mindestens 96px, damit kein Text überlappt */
footer.site-footer > .wp-block-group:first-child {
  padding-top: max(var(--wp--preset--spacing--xx-large, 7rem), 96px) !important;
}

/* Autos fahren per transform (GPU, läuft in allen Browsern zuverlässig).
   Ruhezustand ohne Animation: Autos stehen sichtbar im Footer. */
footer.site-footer {
  overflow-x: clip;         /* fahrende Autos erzeugen keinen horizontalen Scrollbalken */
}

footer.site-footer::before,
footer.site-footer::after {
  content: "";
  position: absolute;
  left: 0;
  top: 38px;                /* Abstand vom oberen Footer-Rand */
  height: 34px;
  pointer-events: none;     /* blockiert keine Klicks */
  z-index: 2;
  background-repeat: no-repeat;
  background-size: 111px 34px;
  will-change: transform;
  animation-duration: 22s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* Blau, Rot, Orange – gleichmässiges Tempo (eine Kolonne, Abstände 210px / 760px) */
footer.site-footer::before {
  width: 871px;
  background-image:
    /* Heft 1 – blau */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-84 -18 118 36'%3E%3Cdefs%3E%3ClinearGradient id='b'%3E%3Cstop offset='0' stop-color='%23fff6b0' stop-opacity='.6'/%3E%3Cstop offset='1' stop-color='%23fff6b0' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='scale%28-1 1%29'%3E%3Cpath d='M29 -10 L82 -18 L82 4 L29 -6 Z' fill='url%28%23b%29'/%3E%3Cpath d='M29 10 L82 18 L82 -4 L29 6 Z' fill='url%28%23b%29'/%3E%3Crect x='-27' y='-11' width='60' height='28' rx='11' fill='%23000' opacity='.35'/%3E%3Crect x='-30' y='-14' width='60' height='28' rx='11' fill='%23006eb1'/%3E%3Crect x='4' y='-17' width='5' height='4' rx='1.5' fill='%23111'/%3E%3Crect x='4' y='13' width='5' height='4' rx='1.5' fill='%23111'/%3E%3Cpath d='M6 -11 Q15 -10 17 -6 L17 6 Q15 10 6 11 Z' fill='%23111'/%3E%3Cpath d='M-22 -10 L-15 -9 L-15 9 L-22 10 Q-24 0 -22 -10 Z' fill='%23111'/%3E%3Crect x='-13' y='-10' width='17' height='20' rx='4' fill='%23111'/%3E%3Crect x='-11' y='-8' width='13' height='16' rx='3' fill='%23006eb1'/%3E%3Cellipse cx='28' cy='-8' rx='2' ry='3' fill='%23fff7c2'/%3E%3Cellipse cx='28' cy='8' rx='2' ry='3' fill='%23fff7c2'/%3E%3Crect x='-30.5' y='-11' width='3' height='5' rx='1.2' fill='%23ff2a2a'/%3E%3Crect x='-30.5' y='6' width='3' height='5' rx='1.2' fill='%23ff2a2a'/%3E%3C/g%3E%3C/svg%3E"),
    /* Heft 2 – rot */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-84 -18 118 36'%3E%3Cdefs%3E%3ClinearGradient id='b'%3E%3Cstop offset='0' stop-color='%23fff6b0' stop-opacity='.6'/%3E%3Cstop offset='1' stop-color='%23fff6b0' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='scale%28-1 1%29'%3E%3Cpath d='M29 -10 L82 -18 L82 4 L29 -6 Z' fill='url%28%23b%29'/%3E%3Cpath d='M29 10 L82 18 L82 -4 L29 6 Z' fill='url%28%23b%29'/%3E%3Crect x='-27' y='-11' width='60' height='28' rx='11' fill='%23000' opacity='.35'/%3E%3Crect x='-30' y='-14' width='60' height='28' rx='11' fill='%23ed0033'/%3E%3Crect x='4' y='-17' width='5' height='4' rx='1.5' fill='%23111'/%3E%3Crect x='4' y='13' width='5' height='4' rx='1.5' fill='%23111'/%3E%3Cpath d='M6 -11 Q15 -10 17 -6 L17 6 Q15 10 6 11 Z' fill='%23111'/%3E%3Cpath d='M-22 -10 L-15 -9 L-15 9 L-22 10 Q-24 0 -22 -10 Z' fill='%23111'/%3E%3Crect x='-13' y='-10' width='17' height='20' rx='4' fill='%23111'/%3E%3Crect x='-11' y='-8' width='13' height='16' rx='3' fill='%23ed0033'/%3E%3Cellipse cx='28' cy='-8' rx='2' ry='3' fill='%23fff7c2'/%3E%3Cellipse cx='28' cy='8' rx='2' ry='3' fill='%23fff7c2'/%3E%3Crect x='-30.5' y='-11' width='3' height='5' rx='1.2' fill='%23ff2a2a'/%3E%3Crect x='-30.5' y='6' width='3' height='5' rx='1.2' fill='%23ff2a2a'/%3E%3C/g%3E%3C/svg%3E"),
    /* Heft 4 – orange */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-84 -18 118 36'%3E%3Cdefs%3E%3ClinearGradient id='b'%3E%3Cstop offset='0' stop-color='%23fff6b0' stop-opacity='.6'/%3E%3Cstop offset='1' stop-color='%23fff6b0' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='scale%28-1 1%29'%3E%3Cpath d='M29 -10 L82 -18 L82 4 L29 -6 Z' fill='url%28%23b%29'/%3E%3Cpath d='M29 10 L82 18 L82 -4 L29 6 Z' fill='url%28%23b%29'/%3E%3Crect x='-27' y='-11' width='60' height='28' rx='11' fill='%23000' opacity='.35'/%3E%3Crect x='-30' y='-14' width='60' height='28' rx='11' fill='%23ff9821'/%3E%3Crect x='4' y='-17' width='5' height='4' rx='1.5' fill='%23111'/%3E%3Crect x='4' y='13' width='5' height='4' rx='1.5' fill='%23111'/%3E%3Cpath d='M6 -11 Q15 -10 17 -6 L17 6 Q15 10 6 11 Z' fill='%23111'/%3E%3Cpath d='M-22 -10 L-15 -9 L-15 9 L-22 10 Q-24 0 -22 -10 Z' fill='%23111'/%3E%3Crect x='-13' y='-10' width='17' height='20' rx='4' fill='%23111'/%3E%3Crect x='-11' y='-8' width='13' height='16' rx='3' fill='%23ff9821'/%3E%3Cellipse cx='28' cy='-8' rx='2' ry='3' fill='%23fff7c2'/%3E%3Cellipse cx='28' cy='8' rx='2' ry='3' fill='%23fff7c2'/%3E%3Crect x='-30.5' y='-11' width='3' height='5' rx='1.2' fill='%23ff2a2a'/%3E%3Crect x='-30.5' y='6' width='3' height='5' rx='1.2' fill='%23ff2a2a'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 0 0, 210px 0, 760px 0;
  transform: translateX(24px);
  animation-name: ld-footer-cars;
}

@keyframes ld-footer-cars {
  0%   { transform: translateX(calc(100vw + 19px)); }
  85%  { transform: translateX(-890px); }
  100% { transform: translateX(-890px); }
}

/* Grün – fährt zuerst normal, beschleunigt dann, holt das rote Auto ein und bremst ab */
footer.site-footer::after {
  width: 111px;
  background-image:
    /* Heft 3 – grün */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-84 -18 118 36'%3E%3Cdefs%3E%3ClinearGradient id='b'%3E%3Cstop offset='0' stop-color='%23fff6b0' stop-opacity='.6'/%3E%3Cstop offset='1' stop-color='%23fff6b0' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='scale%28-1 1%29'%3E%3Cpath d='M29 -10 L82 -18 L82 4 L29 -6 Z' fill='url%28%23b%29'/%3E%3Cpath d='M29 10 L82 18 L82 -4 L29 6 Z' fill='url%28%23b%29'/%3E%3Crect x='-27' y='-11' width='60' height='28' rx='11' fill='%23000' opacity='.35'/%3E%3Crect x='-30' y='-14' width='60' height='28' rx='11' fill='%2300703d'/%3E%3Crect x='4' y='-17' width='5' height='4' rx='1.5' fill='%23111'/%3E%3Crect x='4' y='13' width='5' height='4' rx='1.5' fill='%23111'/%3E%3Cpath d='M6 -11 Q15 -10 17 -6 L17 6 Q15 10 6 11 Z' fill='%23111'/%3E%3Cpath d='M-22 -10 L-15 -9 L-15 9 L-22 10 Q-24 0 -22 -10 Z' fill='%23111'/%3E%3Crect x='-13' y='-10' width='17' height='20' rx='4' fill='%23111'/%3E%3Crect x='-11' y='-8' width='13' height='16' rx='3' fill='%2300703d'/%3E%3Cellipse cx='28' cy='-8' rx='2' ry='3' fill='%23fff7c2'/%3E%3Cellipse cx='28' cy='8' rx='2' ry='3' fill='%23fff7c2'/%3E%3Crect x='-30.5' y='-11' width='3' height='5' rx='1.2' fill='%23ff2a2a'/%3E%3Crect x='-30.5' y='6' width='3' height='5' rx='1.2' fill='%23ff2a2a'/%3E%3C/g%3E%3C/svg%3E");
  background-position: 0 0;
  transform: translateX(504px);
  animation-name: ld-footer-car-green;
}

@keyframes ld-footer-car-green {
  0% { transform: translateX(calc(100.00vw + 489.0px)); }
  22% { transform: translateX(calc(74.12vw + 253.7px)); }
  24% { transform: translateX(calc(71.76vw + 220.5px)); }
  26% { transform: translateX(calc(69.41vw + 187.5px)); }
  28% { transform: translateX(calc(67.06vw + 154.3px)); }
  30% { transform: translateX(calc(64.71vw + 121.1px)); }
  32% { transform: translateX(calc(62.35vw + 88.0px)); }
  34% { transform: translateX(calc(60.00vw + 54.8px)); }
  36% { transform: translateX(calc(57.65vw + 21.6px)); }
  38% { transform: translateX(calc(55.29vw - 11.5px)); }
  40% { transform: translateX(calc(52.94vw - 44.7px)); }
  42% { transform: translateX(calc(50.59vw - 77.8px)); }
  44% { transform: translateX(calc(48.24vw - 108.9px)); }
  46% { transform: translateX(calc(45.88vw - 137.3px)); }
  48% { transform: translateX(calc(43.53vw - 162.9px)); }
  50% { transform: translateX(calc(41.18vw - 185.7px)); }
  85%  { transform: translateX(-560px); }
  100% { transform: translateX(-560px); }
}