/* ==========================================================================
   OMNISON — Alexander Matthäi
   work.css — Portfolio-Übersicht (Work-Grid)
   Kachel-Layout, Intro-Choreografie, Projekt-Overlay (Karte über Karte)
   ========================================================================== */

:root {
  --grid-max: 1800px;
  --grid-pad: 84px;
  --grid-gap: 16px;
  /* Schriftgröße der Kachel-Beschriftung. Als Variable, weil sie außer in
     font-size auch in die Hover-Endposition eingeht: Der sichtbare Abstand
     des Textes zur Kachelunterkante hängt an der Unterlängen-Höhe der
     Zeilenbox, die mit der Schriftgröße wächst. Handy und Tablet setzen
     font-size in ihren Media Queries direkt und bleiben unberührt. */
  --label-font: clamp(21.01px, 2vw, 33.01px);
}

/* scrollbar-gutter:stable sitzt jetzt global in css/style.css (gilt auf
   jeder Seite, nicht nur hier) — siehe dort für die Begründung. */

.work-grid {
  max-width: var(--grid-max);
  width: 100%;
  margin: 0 auto;
  /* 15px näher ans Logo als zuvor (grid-gap + 45px) */
  padding: calc(var(--grid-gap) + 30px) var(--grid-pad) 90px;
}

/* --------------------------------------------------------------------------
   Kachel
   -------------------------------------------------------------------------- */
.tile {
  position: relative;
  display: block;
  overflow: hidden;
  min-width: 0;
  /* dunkler Terrakotta-Ton statt des cremefarbenen Altwerts (#d9d4c8):
     altes Safari lässt an Cover-Bildern Subpixel-Säume frei — auf hellem
     Grund leuchteten die als weiße Outline um dunkle Thumbs auf. */
  background: #a46d63;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   Intro-Choreografie: maskierter Kachel-Sweep von links nach rechts,
   danach Typo-Fade (Labels). Läuft einmal beim Laden der Übersicht.
   -------------------------------------------------------------------------- */
@keyframes tileWipe {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}
.tile {
  clip-path: inset(0 100% 0 0);
  animation: tileWipe .576s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  will-change: clip-path;
}
/* Ruhigere Staffelung entlang der Leserichtung — 20% schneller als der
   letzte (langsamere) Stand, insgesamt aber immer noch spürbar ruhiger als
   ursprünglich. */
.tile.is-a { animation-delay: .048s; }
.tile.is-b { animation-delay: .12s; }
.tile.is-c { animation-delay: .204s; }
.tile.is-d { animation-delay: .276s; }
.tile.is-e { animation-delay: .36s; }
.tile.is-f { animation-delay: .432s; }
.tile.is-g { animation-delay: .504s; }

@keyframes labelIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tile__label {
  opacity: 0;
  animation: labelIn .44s cubic-bezier(0.22, 1, 0.36, 1) .8s forwards;
}

/* --------------------------------------------------------------------------
   ZURZEIT INAKTIV: js/work.js setzt body.grid-leaving nicht mehr. Die
   Übersicht bleibt beim Verlassen stehen, statt zusammenzufahren — Karten
   fahren darüber. Die Regeln bleiben als Reserve erhalten.

   Ausfahr-Choreografie: bei Klick auf Über / Kontakt / Impressum /
   Datenschutz / Profil fahren ALLE Kacheln gleichzeitig zusammen (Maske
   schließt sich zurück nach links) — die Umkehrung des Aufbaus (tileWipe).

   Bewusst OHNE Stagger: die Basis-Regel .tile deklariert statisch
   clip-path: inset(0 100% 0 0) (= unsichtbar, Startzustand des Aufbaus).
   Hätte tileWipeOut ein animation-delay, würde die Kachel während des
   Delays auf genau diesen unsichtbaren Basiszustand zurückspringen und
   blitzartig verschwinden, bevor ihre Animation überhaupt startet — genau
   das erzeugte das "Blitzen". Ohne Delay startet jede Kachel sofort aus
   ihrem offenen Zustand und alle fahren harmonisch gleichzeitig ein.

   Explizites "from": beim Wechsel von tileWipe auf tileWipeOut verwirft
   der Browser die forwards-Füllung der alten Animation; das feste from
   sorgt dafür, dass die Ausfahrt garantiert vom offenen Zustand startet.

   Tempo: 20% langsamer als zuvor (.36s -> .432s) — Dauer ist an LEAVE_MS in
   js/work.js gekoppelt, beide zusammen anpassen. -------------------------------------------------------------------------- */
@keyframes tileWipeOut {
  from { clip-path: inset(0 0% 0 0); }
  to   { clip-path: inset(0 100% 0 0); }
}
@keyframes labelOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(6px); }
}
body.grid-leaving .tile {
  animation: tileWipeOut .432s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
body.grid-leaving .tile__label {
  animation: labelOut .216s ease forwards;
}

/* --------------------------------------------------------------------------
   Karte-über-Karte: Projekt-Overlay
   Die Übersicht bleibt permanent im DOM und durchgehend sichtbar.
   Projektseiten werden im Idle vorgeladen (iframes) und fahren als
   Karte von unten über die stehende Übersicht; beim Schließen fahren
   sie nach unten weg — die Übersicht war nie verschwunden.
   -------------------------------------------------------------------------- */
#project-overlay {
  position: fixed; inset: 0; z-index: 900;
  /* iOS: inset:0 spannt gegen den KLEINEN Viewport (Adressleiste
     eingeblendet). Ist sie beim Antippen einer Kachel ausgeblendet, ist der
     sichtbare Bereich höher als das Overlay — oben blieb dann ein Spalt, in
     dem die Übersicht durchschien. 100lvh = large viewport height deckt
     immer den größtmöglichen Bereich ab, unabhängig vom Leistenzustand. */
  height: 100lvh;
  transform: translate3d(0, 100%, 0);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  pointer-events: none;
}
#project-overlay.open { transform: translate3d(0, 0, 0); pointer-events: auto; }
/* Rückfahrt: kürzer und mit sofortigem Abgang. Vorher lief hier ein reines
   Ease-in (cubic-bezier(.7,0,.84,0)) über .55s — die Karte stand nach dem
   Tippen die ersten ~200ms praktisch still und "klebte" oben fest, bevor sie
   wegschoss. Jetzt zieht sie direkt beim Klick an und läuft weich aus. */
#project-overlay.closing { transition: transform .42s cubic-bezier(0.4, 0, 0.2, 1); }
#project-overlay iframe {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: none; background: transparent;
}
#project-overlay iframe.active { display: block; }
body.overlay-open { overflow: hidden; } /* Übersicht friert unter der Karte ein */

/* --------------------------------------------------------------------------
   Medien-Ebenen der Kachel
   -------------------------------------------------------------------------- */
/* Bild/Verlauf (immer sichtbar) — bei Hover: Pan/Zoom-Teaser */
.tile__media {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1) translate(0, 0);
  transition: transform 1s cubic-bezier(.22, .61, .36, 1);
}
/* Der Hover-Zustand selbst sitzt gesammelt in der Desktop-Media-Query unten. */

/* Video-Teaser (optional, Ebene über dem Bild) — startet unsichtbar/pausiert,
   wird per JS bei Hover 2 Sek. abgespielt und dann angehalten (js/work.js).
   Ohne zugewiesene Quelle bleibt diese Ebene unsichtbar. */
.tile__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.tile__video.is-playing { opacity: 1; }

/* Bild-Layer (Foto über dem Verlauf) */
.tile__image {
  /* 1px Überstand an allen Kanten: deckt die Subpixel-Säume ab, die altes
     Safari bei cover-Bildern in krumm breiten Flex-Kacheln offen lässt
     (sichtbar als feine helle Outline, v.a. Hopium-Reihe). Der Container
     clippt per overflow:hidden — optisch kostet das nichts. */
  position: absolute; inset: -1px;
  background-size: cover; background-position: center;
  opacity: 1;
  transform: scale(1) translate(0, 0);
  transition: transform 1s cubic-bezier(.22, .61, .36, 1);
}

/* Scrim: unten dunkler, damit Titel unten lesbar bleibt */
.tile__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,0) 46%,
    rgba(0,0,0,.34) 100%);
}
/* Hover: Bild zusätzlich um 10% abdunkeln */
.tile__scrim::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,.1);
  opacity: 0;
  transition: opacity .4s ease;
}

/* Titel unten links */
.tile__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 38.05px 26px 38.05px;
}
.tile__title {
  display: block;
  font-family: var(--font-serif);
  font-weight: 500;   /* Medium statt Semibold */
  font-size: var(--label-font);
  line-height: 1;
  letter-spacing: 0.048em;
  text-transform: uppercase;
  text-shadow: 0 1px 16px rgba(0,0,0,.22);
  transform: translateY(12px);
}

/* Subtext: Grundzustand = sichtbar (Touch-Geräte, kein echtes Hover).
   Immer einzeilig: der Subtitle bleibt vor Hover unsichtbar, aber im
   Textfluss ÜBER dem Titel — bricht er auf schmalen Kacheln (Bartec,
   Sinupret) zweizeilig um, wird dadurch der sichtbare Titel je nach
   Textlänge unterschiedlich weit nach oben geschoben. white-space:nowrap
   hält seine (unsichtbare) Höhe für alle Kacheln identisch, damit der
   Titel überall an derselben Position sitzt. */
.tile__sub {
  display: block;
  font-weight: 500;
  font-size: var(--label-font);
  line-height: 1.162;
  letter-spacing: 0.064em;
  text-transform: uppercase;
  text-shadow: 0 1px 12px rgba(0,0,0,.26);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transform: translateY(12px);
}

/* SÄMTLICHE Hover-Effekte der Kacheln — nur in der Desktop-Ansicht:
   (hover:hover) und (pointer:fine) schließen Touch-Geräte aus (verhindert den
   "Doppel-Tap-Bug" auf Tablet/Handy), min-width:980px zusätzlich die Tablet-
   und Handy-Breiten am Desktop, wenn das Browserfenster zusammengeschoben
   wird. Unterhalb 980px zeigen die Kacheln durchgehend ihren Ruhezustand. */
@media (hover:hover) and (pointer:fine) and (min-width: 980px) {
  /* Bild/Verlauf: leichter Pan/Zoom */
  .tile:hover .tile__media,
  .tile:hover .tile__image {
    transform: scale(1.03) translate(-0.6%, -0.4%);
  }
  /* Bild zusätzlich um 10% abdunkeln */
  .tile:hover .tile__scrim::after {
    opacity: 1;
  }
  .tile__title {
    transform: translateY(32px); /* 20px Reveal-Hub + 12px permanenter Versatz — Grundstand tiefer */
    transition: transform .9s cubic-bezier(.22, 1, .3, 1);
  }
  /* Hover-Endstand: Der sichtbare Abstand zur Kachelunterkante soll immer
     dem seitlichen (--label-pad) entsprechen. Er setzt sich zusammen aus dem
     festen padding-bottom (26px), dem hier gesetzten Versatz und dem
     ungenutzten Unterlängen-Raum der Zeilenbox, der proportional zur
     Schriftgröße wächst (Faktor aus den zuvor von Hand getunten Werten bei
     33.01px Schrift abgeleitet). Nach Auflösen der Gleichung bleibt:
     Versatz = 26px + Unterlängen-Anteil - seitlicher Abstand.
     Bisher stand hier ein fester Wert, der nur bei voller Fensterbreite
     stimmte — darunter wurde der untere Abstand zu groß. */
  .tile:hover .tile__title {
    transform: translateY(calc(26px + var(--label-font) * 0.262647 - var(--label-gap)));
  }
  .tile__sub {
    opacity: 0;
    transform: translateY(32px); /* 20px Reveal-Hub + 12px permanenter Versatz — Grundstand tiefer */
    /* Ausblenden (Hover-Ende): schnell und ohne Verzögerung → ein Tick früher weg */
    transition: opacity .3s ease, transform .9s cubic-bezier(.22, 1, .3, 1);
  }
  .tile:hover .tile__sub {
    opacity: 1;
    /* Wie beim Titel, nur mit dem Unterlängen-Anteil der größeren
       Zeilenhöhe (1.162 statt 1) — der Subtext ist das unterste Element. */
    transform: translateY(calc(26px + var(--label-font) * 0.218873 - var(--label-gap)));
    /* Einblenden (Hover-Start): schnell, aber mit kleinem Delay → ein Tick später */
    transition: opacity .3s ease .12s, transform .9s cubic-bezier(.22, 1, .3, 1);
  }
}

/* ==========================================================================
   DESKTOP (>= 980px)
   ========================================================================== */
@media (min-width: 980px) {
  :root {
    --grid-pad: 84px;
    /* Seitlicher Abstand der Beschriftung: der feste Wert 38.05px passt erst
       ab 1450px (dort bleibt er unverändert) — darunter schrumpft die Kachel
       schneller als das Padding mitzieht, der linke Rand wirkt dann zu breit.
       Zwischen 980px und 1450px interpoliert er linear von 26px auf 38.05px.
       Geht auch in die Hover-Endposition ein, damit der Abstand nach unten
       dem seitlichen folgt. */
    --label-pad: clamp(26px, calc(26px + (100vw - 980px) * 0.025638298), 38.05px);
    /* Sichtbarer Abstand des Textes zur Unterkante im Hover-Endstand.
       Ab 1720px exakt der seitliche Abstand — dort war die Optik von Hand
       getunt und stimmt. Darunter siehe Media Query direkt im Anschluss. */
    --label-gap: var(--label-pad);
  }
  .work-grid { display: flex; flex-direction: column; gap: var(--grid-gap); }
  .work-row  { display: flex; gap: var(--grid-gap); }

  /* Kachelhöhe bewusst NICHT über aspect-ratio: Safari rechnet das
     Seitenverhältnis von Flex-Items mit prozentualer flex-basis beim
     Verbreitern des Fensters nicht neu — die Kacheln behalten dann die Höhe
     der vorherigen, schmaleren Breite und werden flach gezogen. Betrifft nur
     den Desktop, weil nur hier Flexbox mit prozentualer Basis im Spiel ist;
     Tablet und Handy rechnen ihre Höhe ohnehin per calc bzw. im Grid.
     Prozentuales padding-top löst immer gegen die aktuelle Breite der
     Flex-Zeile auf und wird daher bei jeder Größenänderung frisch bestimmt.
     Wert = dieselbe flex-basis mal Kehrwert des Seitenverhältnisses. */
  .tile { height: 0; }

  /* Row A — std + super-wide (echte mvsm-Ratios), bündig */
  .row--pair .is-a {    /* std 16:9 */
    flex: 0 0 calc((100% - 16px) * 0.437190);
    padding-top: calc((100% - 16px) * 0.437190 * 0.5625);
  }
  .row--pair .is-b {    /* super-wide 2.289 */
    flex: 0 0 calc((100% - 16px) * 0.562810);
    padding-top: calc((100% - 16px) * 0.562810 * 0.43687);
  }

  /* Row B — narrow + std + narrow, bündig */
  .row--triple .is-c,   /* Bartec — narrow 1.144 */
  .row--triple .is-e {  /* Sinupret — narrow 1.144 */
    flex: 0 0 calc((100% - 32px) * 0.281375);
    padding-top: calc((100% - 32px) * 0.281375 * 0.87413);
  }
  .row--triple .is-d {  /* Red Bull — std 16:9, die breiteste */
    flex: 0 0 calc((100% - 32px) * 0.437250);
    padding-top: calc((100% - 32px) * 0.437250 * 0.5625);
  }

  /* Row C — BMW = Māchina-Breite, Audi = Membrane-Breite (gleiche Zeilenhöhe) */
  .row--full .is-f {    /* BMW — wie Māchina */
    flex: 0 0 calc((100% - 16px) * 0.562810);
    padding-top: calc((100% - 16px) * 0.562810 * 0.43687);
  }
  .row--full .is-g {    /* Audi — wie Membrane */
    flex: 0 0 calc((100% - 16px) * 0.437190);
    padding-top: calc((100% - 16px) * 0.437190 * 0.5625);
  }

  .tile__label {
    padding-left: var(--label-pad);
    padding-right: var(--label-pad);
  }
}

/* Unterhalb 1720px fuhr der Text im Hover-Endstand zu weit nach oben: Dort
   liegt der untere Abstand 15% unter dem seitlichen, statt ihm exakt zu
   entsprechen. Ab 1720px bleibt es beim von Hand getunten Verhältnis 1:1. */
@media (min-width: 980px) and (max-width: 1720px) {
  :root { --label-gap: calc(var(--label-pad) * 0.85); }
}

/* Der frühere aspect-ratio-Fallback für den Desktop entfällt: Die Höhen
   entstehen dort jetzt über prozentuales padding-top, das jeder Browser
   beherrscht — ein Ersatzweg für fehlendes aspect-ratio ist damit hinfällig.
   (Für Handy/Tablet steht der Fallback weiterhin weiter unten.) */

/* ==========================================================================
   TABLET (768 – 979px) — 1-2-1-Muster
   ========================================================================== */
@media (min-width: 768px) and (max-width: 979px) {
  :root { --grid-pad: 48.6px; }
  .work-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); }
  .work-row  { display: contents; }

  /* Einheitliche Zeilenhöhe: Maßstab ist die Red-Bull-Höhe (volle Breite,
     Ratio 100/43.6893) — gilt für ALLE Kacheln, damit jede Reihe bündig ist. */
  .tile {
    height: calc((100vw - (var(--grid-pad) * 2)) * 0.436893);
  }
  .is-a { grid-column: span 2; }   /* Hopium Membrane — voll */
  .is-b { grid-column: span 1; }   /* Māchina */
  .is-c { grid-column: span 1; }   /* Bartec */
  .is-d { grid-column: span 2; }   /* Red Bull — voll */
  .is-e { grid-column: span 1; }   /* Sinupret */
  .is-f { grid-column: span 1; }   /* BMW */
  .is-g { grid-column: span 1; }   /* Audi */

  /* Kachel-Beschriftung proportional zur Kachelbreite — gleiche Systematik
     wie auf dem Handy, nur ist der Maßstab hier nicht der Viewport, sondern
     die schmale (halbe) Kachel: Sie entspricht der Handy-Kachel, und die
     breiten Kacheln (Membrane, Red Bull) tragen dieselbe Schriftgröße, damit
     die Übersicht ruhig bleibt — so hält es auch die Desktop-Ansicht.
     Verhältnisse aus dem iPhone-11-Layout (Kachel 390px breit): seitlich
     23.12px = 5.928%, unten 14.71px = 3.772% der Kachelbreite. Die Schrift
     steht auf dem Tablet bewusst 19% über dem Handy-Verhältnis
     (6.041% * 1.19 = 7.188%). */
  .work-grid {
    --tile-w: calc((100vw - (var(--grid-pad) * 2) - var(--grid-gap)) / 2);
  }
  .tile__label {
    padding: 0 calc(var(--tile-w) * 0.05928) calc(var(--tile-w) * 0.03772);
  }
  .tile__title,
  .tile__sub {
    font-size: calc(var(--tile-w) * 0.07188);
    /* Wie auf dem Handy: der 12px-Versatz gehört zur Desktop-Choreografie. */
    transform: none;
  }
}

/* ==========================================================================
   MOBILE (<= 767px) — 1-spaltig
   ========================================================================== */
@media (max-width: 767px) {
  :root { --grid-pad: 12px; --grid-gap: 12px; }
  /* padding-bottom 108px = 90px + 20%: mehr Luft zum Footer als am Desktop. */
  .work-grid { display: grid; grid-template-columns: 1fr; gap: var(--grid-gap); padding-bottom: 108px; }
  .work-row  { display: contents; }
  .tile { grid-column: 1 / -1; aspect-ratio: 16/9; }

  /* Nur auf dem Handy: Māchina vor Membrane, danach Bartec/Red Bull/… wie
     gehabt — reine Anzeigereihenfolge im Grid (order), die Quellreihenfolge
     im HTML bleibt unverändert, damit Tablet/Desktop unberührt sind.
     Negative Werte, weil alle anderen Kacheln beim Default order:0 stehen —
     sonst würde Bartec (0) vor Māchina/Membrane einsortiert. */
  .is-a { order: -1; } /* Membrane */
  .is-b { order: -2; } /* Māchina */

  /* Die Wipe-Reihenfolge muss der sichtbaren Reihenfolge folgen, nicht der
     Quellreihenfolge: Māchina steht hier oben, bekommt also den früheren
     Delay, Membrane den späteren — auf Tablet/Desktop bleibt es andersrum. */
  .tile.is-a { animation-delay: .12s; }  /* Membrane — jetzt unten */
  .tile.is-b { animation-delay: .048s; } /* Māchina — jetzt oben */

  /* Kachel-Beschriftung: Maße aus dem iPhone-11-Layout, proportional in vw
     umgerechnet — dadurch wirkt die Kachel auf jeder Handybreite identisch.
     Bezug: 591px-Screenshot = 414px CSS-Viewport (Faktor 0.7005). Seitlich
     33px Screenshot (25 + 4 + 4) = 23.12px CSS = 5.584vw, unten 21px
     (25 - 4) = 14.71px CSS = 3.553vw. Schrift: 17.41px + 20% = 20.89px, plus 2pt
     (2.67px) = 23.56px = 5.691vw.
     min() deckelt beim 430px-Wert (breitestes Phone), damit die Werte im
     Bereich 430–767px (Foldables, schmale Fenster) nicht ins Absurde laufen.
     Schrift auf dem Handy -10%, dann nochmal +5% (5.122vw/22.02px ->
     5.378vw/23.12px), Padding bleibt unverändert. */
  .tile__label { padding: 0 min(5.584vw, 24.01px) min(3.553vw, 15.28px); }
  .tile__title,
  .tile__sub {
    font-size: min(5.378vw, 23.12px);
    /* Der permanente 12px-Versatz gehört zur Desktop-Reveal-Choreografie —
       auf dem Handy verfälscht er nur den Abstand zur Kachelunterkante. */
    transform: none;
  }
}

@supports not (aspect-ratio: 1 / 1) {
  @media (max-width: 767px) {
    .tile { height: calc((100vw - (var(--grid-pad) * 2)) * 0.5625); }
  }
}

/* ==========================================================================
   Platzhalter (Basis-Ebene aller Kacheln), bevor das Bild geladen ist:
   dieselbe Farbe wie der Seiten-Hintergrund, nur 10% dunkler (--tile-placeholder-bg,
   style.css) — bleibt automatisch synchron, wenn nur --color-bg geändert wird.
   ========================================================================== */
/* Feste Farbe zuerst als Fallback: altes Safari kennt color-mix() nicht und
   verwirft die Variable — die Ebene wäre dort sonst durchsichtig. */
.tile__media { background: #a46d63; background: var(--tile-placeholder-bg); }

/* Thumbnails: echte Bilder über dem Platzhalter-Verlauf (assets/bilder/…) */
.is-a .tile__image {
  background-image: url('../assets/bilder/hopium/membrane/thumb-uebersicht.jpg');
  background-position: 38% 50%;
}
.is-b .tile__image {
  background-image: url('../assets/bilder/hopium/machina/thumb-uebersicht.jpg');
}
.is-c .tile__image {
  background-image: url('../assets/bilder/bartec/thumb-uebersicht.jpg');
  background-position: 12% 50%;
}
.is-d .tile__image {
  background-image: url('../assets/bilder/redbull/thumb-uebersicht.jpg');
  background-position: 38% 50%;
}
.is-e .tile__image {
  background-image: url('../assets/bilder/sinupret/thumb-uebersicht.jpg');
  background-position: 50% 42%;
}
.is-f .tile__image {
  background-image: url('../assets/bilder/bmw/thumb-uebersicht2.jpg');
}
.is-g .tile__image {
  background-image: url('../assets/bilder/audi/audi_thumb.jpg');
  background-position: 0% 50%;
}