/* ============================================================
   Komponente: inhalt-karte
   ------------------------------------------------------------
   Quelle: Figma „Screens: App und Web" → location item,
   node 13866:16148 und 13866:16155, ausgelesen am 04.09.2026.
   Farben am 04.09.2026 aus dem PNG-Export nachgemessen.

   Eine Karte mit Bild oben, Titel und Fließtext darunter, und
   optional einem Link am Fuß. Auf „Vor Ort" tragen zwei davon
   die Angebote des Standorts.

   SIE IST NICHT DIE CONTENT-KARTE AUS §9. Die hat den Text IM
   Bild, mit Verlauf darüber und Marken-Pill. Hier steht der Text
   UNTER dem Bild auf eigener Fläche — anderer Aufbau, andere
   Aufgabe: dort Auszeichnung von Inhalt, hier eine Mitteilung
   des Standorts.

   FLIESSTEXT IN text-primary, nicht in text-description. Aus dem
   Export gelesen: (252,252,252). Das ist auch die Regel —
   AGENTS.md §8: „Sätze und Meldungen stehen immer in
   text-primary".

   Setzt tokens.css, base.css und components/link-button.css
   voraus.

   VERWENDUNG
     <article class="inhalt-karte">
       <img class="inhalt-karte__bild" src="…" alt="…">
       <div class="inhalt-karte__texte">
         <h3 class="inhalt-karte__titel">Unser Friseursalon</h3>
         <p class="inhalt-karte__text">…</p>
       </div>
       <div class="inhalt-karte__fuss">
         <button class="link-button">…</button>
       </div>
     </article>

   ------------------------------------------------------------
   GEMESSENE MASSE OHNE TOKEN-GRUNDLAGE
     331 x 166,8   Bild. Verhältnis 1,985.
     16            Innenabstand der Textfläche.
   ============================================================ */

.inhalt-karte {
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;

  border-radius: var(--radius-md);
  background-color: var(--surface-card);
  /* Der Strich als innerer Schatten, nicht als border: er liegt
     in Figma INNEN und darf die automatische Höhe nicht
     vergrößern (AGENTS.md §8a). Nachgezogen am 04.09.2026. */
  box-shadow: inset 0 0 0 var(--outline-default) var(--label-outline);
  /* Das Bild sitzt an der Oberkante und muss vom Radius
     beschnitten werden. */
  overflow: hidden;
}

.inhalt-karte__bild {
  width: 100%;
  aspect-ratio: 331 / 166.8;               /* gemessen, siehe Kopf */
  object-fit: cover;
  background-color: var(--label-fill);
}

/* Padding 16 oben und seitlich, UNTEN NULL. So gemessen: die
   Textfläche ist in Figma genau so hoch wie ihr Inhalt plus die
   16 oben (Karte 1: 16 + 22 + 4 + 63 = 105). Den Abstand nach
   unten trägt der Fuß mit seinen eigenen 8; hat die Karte keinen
   Fuß, trägt ihn das Padding der Karte selbst über flex.
   Mit 16 unten wäre die Karte 16 px zu hoch. */
.inhalt-karte__texte {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);                   /* 4 */
  padding: var(--space-md) var(--space-md) 0;
  /* Wächst, damit der Fuß in einer Reihe von Karten unten steht,
     auch wenn eine Karte weniger Text hat. */
  flex: 1 0 auto;
}

.inhalt-karte__titel {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-medium-text);
  line-height: var(--line-height-medium-text);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
}

.inhalt-karte__text {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-small-text);
  line-height: var(--line-height-small-text);
  font-weight: var(--font-weight-regular);
  color: var(--text-primary);
}

/* Der Fuß trägt kein eigenes Padding oben: der Link Button ist
   45 hoch und bringt seinen Abstand selbst mit. Links wird das
   Padding des Buttons (8) vom Karten-Padding abgezogen, damit
   der Linktext mit Titel und Fließtext auf einer Achse fluchtet
   — dieselbe Rechnung wie bei .message__zeilen in message.css. */
.inhalt-karte__fuss {
  display: flex;
  padding-inline: calc(var(--space-md) - var(--space-xs));   /* 16 - 8 */
  padding-bottom: var(--space-xs);                            /* 8 */
  margin-top: auto;
}

/* Hat die Karte keinen Fuß, fehlt der Abstand nach unten — dann
   trägt ihn die Textfläche selbst. :has() ist hier das richtige
   Mittel: die Karte weiß sonst nicht, ob ein Fuß kommt. */
.inhalt-karte:not(:has(.inhalt-karte__fuss)) .inhalt-karte__texte {
  padding-bottom: var(--space-md);
}

/* ============================================================
   OFFEN
   ------------------------------------------------------------
   · Ob die ganze Karte klickbar ist oder nur der Link, sagt
     Figma nicht. Hier ist es nur der Link — eine Karte, die
     als Ganzes klickbar ist und zusätzlich einen Link enthält,
     hat zwei Ziele an einer Stelle.
   ============================================================ */