fix(sbb-flip-card): fix card summary image position

src/elements/flip-card/flip-card-details/flip-card-details.scss

@@ -19,18 +19,16 @@
 }
 
 .sbb-flip-card-details--wrapper {
-  display: grid;
-  grid-template-rows: 0fr;
+  position: absolute;
   pointer-events: none;
   color: var(--sbb-color-milk);
   opacity: var(--sbb-flip-card-details-opacity);
   transform: translateY(var(--sbb-flip-card-details-translate-y));
-  transition-property: grid-template-rows, transform, opacity;
+  transition-property: transform, opacity;
   transition-duration: var(--sbb-flip-card-details-transition-duration);
 
   :host([data-flipped]) & {
-    grid-template-rows: 1fr;
-    transition-delay: 0s, var(--sbb-flip-card-details-transition-delay),
+    transition-delay: var(--sbb-flip-card-details-transition-delay),
       var(--sbb-flip-card-details-transition-delay);
   }
 }

src/elements/flip-card/flip-card-summary/flip-card-summary.scss

@@ -12,7 +12,7 @@
 
 .sbb-flip-card-summary {
   display: grid;
-  position: absolute;
+  min-height: var(--sbb-flip-card-min-height);
   pointer-events: var(--sbb-flip-card-summary-pointer-events);
   opacity: var(--sbb-flip-card-summary-opacity);
   border-radius: var(--sbb-flip-card-border-radius);
@@ -61,7 +61,6 @@
 }
 
 .sbb-flip-card-summary--image-wrapper {
-  max-height: var(--sbb-flip-card-min-height);
   grid-area: 2 / 1 / 3 / 2;
 
   :host([image-alignment='after']) & {

src/elements/flip-card/flip-card/flip-card.scss

@@ -75,10 +75,16 @@
   min-height: var(--sbb-flip-card-min-height);
   background-color: var(--sbb-flip-card-background-color);
   border-radius: var(--sbb-flip-card-border-radius);
-  transition: var(--sbb-flip-card-summary-transition-duration) ease-out;
+  transition:
+    all var(--sbb-flip-card-summary-transition-duration) ease-out,
+    min-height var(--sbb-flip-card-details-transition-duration);
   transition-delay: var(--sbb-flip-card-summary-transition-delay);
   cursor: pointer;
 
+  :host([data-flipped]) & {
+    min-height: max(var(--sbb-flip-card-min-height), var(--sbb-flip-card-details-height));
+  }
+
   @include sbb.if-forced-colors {
     &::after {
       content: '';

src/elements/flip-card/flip-card/flip-card.ts

@@ -1,3 +1,4 @@
+import { ResizeController } from '@lit-labs/observers/resize-controller.js';
 import { type CSSResultGroup, html, isServer, LitElement, type TemplateResult } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { until } from 'lit/directives/until.js';
@@ -52,6 +53,11 @@
     return this.querySelector?.('sbb-flip-card-details');
   }
 
+  /** Returns the card details content element wrapper. */
+  private get _detailsContentElement(): HTMLElement | null {
+    return this.details!.shadowRoot!.firstElementChild as HTMLElement;
+  }
+
   /** Whether the flip card is flipped. */
   public get isFlipped(): boolean {
     return this._flipped;
@@ -62,6 +68,11 @@
 
   private _abort = new SbbConnectedAbortController(this);
   private _language = new SbbLanguageController(this);
+  private _cardDetailsResizeObserver = new ResizeController(this, {
+    target: null,
+    skipInitial: true,
+    callback: () => this._setCardDetailsHeight(),
+  });
 
   public override connectedCallback(): void {
     super.connectedCallback();
@@ -79,16 +90,32 @@
     );
   }
 
+  public override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._cardDetailsResizeObserver.unobserve(this._detailsContentElement!);
+  }
+
   /** Toggles the state of the sbb-flip-card. */
   public toggle(): void {
     this._flipped = !this._flipped;
+    if (this._flipped) {
+      this._setCardDetailsHeight();
+      this._cardDetailsResizeObserver.observe(this._detailsContentElement!);
+    } else {
+      this._cardDetailsResizeObserver.unobserve(this._detailsContentElement!);
+    }
     this.toggleAttribute('data-flipped', this._flipped);
     this.details!.toggleAttribute('data-flipped', this._flipped);
     this.summary!.inert = this._flipped;
     this.details!.inert = !this._flipped;
     this.flip.emit();
   }
 
+  private _setCardDetailsHeight(): any {
+    const contentHeight = Math.floor(this._detailsContentElement!.offsetHeight);
+    this.style?.setProperty('--sbb-flip-card-details-height', `${contentHeight}px`);
+  }
+
   private async _accessibilityLabel(): Promise<string> {
     if (isServer) {
       return '';