/* ==========================================================================
   LUFTFEIN — Designsystem
   --------------------------------------------------------------------------
   Grundlage: die sechs vom Auftraggeber gelieferten Bilder (2026-09-12).
   Aus ihnen abgeleitet: warme Neutrale als Flaeche, tiefes Blau als Struktur,
   gebranntes Terrakotta als einziger Akzent (die Farbe der Strahlenbahnen,
   die in vier der sechs Bilder vorkommt).

   Diese Datei ist die einzige Stelle, an der Farben, Schriften, Groessen und
   Abstaende definiert werden. Sektionen benutzen ausschliesslich die Variablen
   und die Komponentenklassen hier — keine eigenen Farbwerte.

   Wird nach base.css geladen, damit die Tokens gewinnen.
   ========================================================================== */

:root {
  /* --- Farbe: Flaechen ------------------------------------------------- */
  --lf-weiss: #ffffff;
  --lf-warmweiss: #fbfaf8; /* Seitengrund, waermer als reines Weiss */
  --lf-creme: #f3eee7; /* Karten, ruhige Bloecke */
  --lf-sand: #e7ded2; /* Kraeftigere Flaechen, Bildrahmen */
  --lf-sand-tief: #d8ccbc;

  /* --- Farbe: Struktur ------------------------------------------------- */
  --lf-tinte: #12202e; /* Text und Kopfzeile, aus der Navy-Produktfarbe */
  --lf-tinte-70: rgba(18, 32, 46, 0.7);
  --lf-tinte-45: rgba(18, 32, 46, 0.45);
  --lf-linie: rgba(18, 32, 46, 0.12);

  /* --- Farbe: Akzent --------------------------------------------------- */
  /* Genau der Ton der Strahlenbahnen in den gelieferten Bildern.
     Fuer Text und Knopfflaechen gibt es einen dunkleren Ton, weil #C4552A
     auf Weiss nur 4,49:1 erreicht und WCAG AA 4,5:1 verlangt. Geprueft mit
     _kontrast.js am 12.09.2026. */
  --lf-akzent: #c4552a; /* nur fuer Grafik und grosse Titel */
  --lf-akzent-text: #9e3f1c; /* 5,72:1 auf Creme, 6,33:1 auf Warmweiss */
  --lf-akzent-knopf: #ad451f; /* 5,76:1 mit weisser Schrift */
  --lf-akzent-knopf-hover: #9e3f1c;
  --lf-akzent-dunkel: #a4431f;
  --lf-akzent-hell: #f7ece6;

  /* --- Farbe: Funktion (Messwerte, Hinweise) --------------------------- */
  --lf-mess-blau: #1d6b96; /* 5,24:1 auf eigener Flaeche */
  --lf-mess-blau-hell: #eaf4fb;
  --lf-ok: #2f6b4f;

  /* --- Schrift --------------------------------------------------------- */
  --lf-schrift-text: var(--font-body--family, system-ui, -apple-system, "Segoe UI", sans-serif);
  --lf-schrift-titel: var(--font-heading--family, var(--lf-schrift-text));

  /* Groessen — bewusst groesser als der Theme-Standard, das traegt den
     Premium-Eindruck. clamp() haelt die Mobilansicht ruhig. */
  --lf-display: clamp(2.1rem, 1.35rem + 3.4vw, 4rem);
  --lf-h1: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem);
  --lf-h2: clamp(1.5rem, 1.15rem + 1.5vw, 2.2rem);
  --lf-h3: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  --lf-text: 1.0625rem; /* 17px — einen Schritt groesser als Standard */
  --lf-text-klein: 0.9375rem;
  --lf-eyebrow: 0.8125rem;

  --lf-hoehe-display: 1.08;
  --lf-hoehe-titel: 1.2;
  --lf-hoehe-text: 1.65;

  /* --- Abstand: 8er-Raster --------------------------------------------- */
  --lf-1: 0.5rem;
  --lf-2: 1rem;
  --lf-3: 1.5rem;
  --lf-4: 2rem;
  --lf-5: 3rem;
  --lf-6: 4rem;
  --lf-7: 6rem;
  --lf-8: 8rem;

  /* Sektionsabstand: grosszuegig, das ist der halbe Premium-Eindruck. */
  --lf-sektion: clamp(3.5rem, 2rem + 6vw, 7rem);
  --lf-sektion-eng: clamp(2.5rem, 1.5rem + 3vw, 4rem);

  /* --- Form ------------------------------------------------------------ */
  --lf-radius: 14px;
  --lf-radius-klein: 8px;
  --lf-radius-gross: 22px;
  --lf-schatten: 0 1px 2px rgba(18, 32, 46, 0.04), 0 8px 28px rgba(18, 32, 46, 0.06);
  --lf-schatten-hoch: 0 2px 4px rgba(18, 32, 46, 0.05), 0 18px 48px rgba(18, 32, 46, 0.1);

  /* --- Breite ---------------------------------------------------------- */
  --lf-breite-text: 68ch; /* Lesetext */
  --lf-breite-schmal: 46ch; /* Intro-Absaetze */
}

/* ==========================================================================
   Grundtypografie
   ========================================================================== */

.lf-sektion {
  padding-block: var(--lf-sektion);
}

.lf-sektion--eng {
  padding-block: var(--lf-sektion-eng);
}

.lf-sektion--creme {
  background-color: var(--lf-creme);
}

.lf-sektion--sand {
  background-color: var(--lf-sand);
}

.lf-sektion--tinte {
  background-color: var(--lf-tinte);
  color: var(--lf-warmweiss);
}

.lf-inhalt {
  width: min(100% - 2.5rem, 78rem);
  margin-inline: auto;
}

.lf-inhalt--schmal {
  width: min(100% - 2.5rem, 58rem);
  margin-inline: auto;
}

/* Augenzeile -------------------------------------------------------------- */

.lf-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--lf-1);
  font-size: var(--lf-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lf-akzent-text);
  margin: 0 0 var(--lf-2);
}

.lf-eyebrow::before {
  content: "";
  inline-size: 1.75rem;
  block-size: 2px;
  background-color: var(--lf-akzent);
  flex: none;
}

.lf-sektion--tinte .lf-eyebrow {
  color: var(--lf-akzent-hell);
}

/* Titel ------------------------------------------------------------------- */

.lf-display {
  font-family: var(--lf-schrift-titel);
  font-size: var(--lf-display);
  line-height: var(--lf-hoehe-display);
  letter-spacing: -0.02em;
  font-weight: 700;
  margin: 0 0 var(--lf-2);
  text-wrap: balance;
}

.lf-h2 {
  font-family: var(--lf-schrift-titel);
  font-size: var(--lf-h2);
  line-height: var(--lf-hoehe-titel);
  letter-spacing: -0.015em;
  font-weight: 700;
  margin: 0 0 var(--lf-2);
  text-wrap: balance;
}

.lf-h3 {
  font-family: var(--lf-schrift-titel);
  font-size: var(--lf-h3);
  line-height: 1.3;
  font-weight: 650;
  margin: 0 0 var(--lf-1);
}

.lf-intro {
  font-size: 1.15rem;
  line-height: var(--lf-hoehe-text);
  color: var(--lf-tinte-70);
  max-inline-size: var(--lf-breite-schmal);
  margin: 0;
}

.lf-absatz {
  font-size: var(--lf-text);
  line-height: var(--lf-hoehe-text);
  max-inline-size: var(--lf-breite-text);
  margin: 0 0 var(--lf-2);
}

.lf-klein {
  font-size: var(--lf-text-klein);
  color: var(--lf-tinte-70);
}

/* ==========================================================================
   Knopf
   ========================================================================== */

.lf-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lf-1);
  min-block-size: 3rem;
  padding-inline: var(--lf-3);
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.lf-knopf--voll {
  background-color: var(--lf-akzent-knopf);
  color: #fff;
}

.lf-knopf--voll:hover {
  background-color: var(--lf-akzent-knopf-hover);
  color: #fff;
}

.lf-knopf--rand {
  border-color: var(--lf-tinte);
  color: var(--lf-tinte);
  background: transparent;
}

.lf-knopf--rand:hover {
  background-color: var(--lf-tinte);
  color: var(--lf-warmweiss);
}

.lf-knopf--hell {
  background-color: var(--lf-warmweiss);
  color: var(--lf-tinte);
}

.lf-knopf--hell:hover {
  background-color: var(--lf-sand);
  color: var(--lf-tinte);
}

/* ==========================================================================
   Karte
   ========================================================================== */

.lf-karte {
  background-color: var(--lf-weiss);
  border: 1px solid var(--lf-linie);
  border-radius: var(--lf-radius);
  overflow: hidden;
  block-size: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.lf-karte:hover {
  box-shadow: var(--lf-schatten-hoch);
  transform: translateY(-2px);
}

.lf-karte__bild {
  aspect-ratio: 4 / 3;
  background-color: var(--lf-sand);
  overflow: hidden;
}

.lf-karte__bild img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
}

.lf-karte__koerper {
  padding: var(--lf-3);
  display: flex;
  flex-direction: column;
  gap: var(--lf-1);
  flex: 1;
}

.lf-karte__titel {
  font-family: var(--lf-schrift-titel);
  font-size: var(--lf-h3);
  font-weight: 650;
  line-height: 1.3;
  margin: 0;
}

.lf-karte__titel a {
  color: inherit;
  text-decoration: none;
}

.lf-karte__text {
  font-size: var(--lf-text-klein);
  line-height: 1.55;
  color: var(--lf-tinte-70);
  margin: 0;
  flex: 1;
}

.lf-karte__fuss {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--lf-2);
  margin-block-start: var(--lf-2);
  padding-block-start: var(--lf-2);
  border-block-start: 1px solid var(--lf-linie);
}

.lf-preis {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--lf-tinte);
}

/* ==========================================================================
   Raster
   ========================================================================== */

.lf-raster {
  display: grid;
  gap: var(--lf-4);
}

.lf-raster--3 {
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.lf-raster--2 {
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

/* ==========================================================================
   Hinweis auf fehlende Angaben
   --------------------------------------------------------------------------
   Platzhalter werden sichtbar markiert, damit sie vor dem Livegang auffallen
   und nicht als Kundentext durchgehen.
   ========================================================================== */

.lf-platzhalter {
  display: inline-block;
  background-color: var(--lf-akzent-hell);
  border: 1px dashed var(--lf-akzent);
  border-radius: var(--lf-radius-klein);
  padding: 0.05em 0.4em;
  font-size: 0.9em;
  font-weight: 600;
  color: var(--lf-akzent-text);
  white-space: nowrap;
}

/* ==========================================================================
   Messwert
   ========================================================================== */

.lf-messwert {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35rem;
  background-color: var(--lf-mess-blau-hell);
  border-radius: var(--lf-radius-klein);
  padding: 0.15em 0.5em;
  font-weight: 650;
  color: var(--lf-mess-blau);
}

.lf-messwert__einheit {
  font-weight: 400;
  font-size: 0.9em;
  opacity: 0.85;
}

/* ==========================================================================
   Abschnittskopf
   ========================================================================== */

.lf-kopf {
  max-inline-size: 46rem;
  margin-block-end: var(--lf-5);
}

.lf-kopf--mitte {
  margin-inline: auto;
  text-align: center;
}

.lf-kopf--mitte .lf-intro {
  margin-inline: auto;
}

/* Fliesstext im Theme auf Lesebreite begrenzen ---------------------------- */

/* Nur Absaetze des Themes. Produktkarten und die eigenen Komponenten sind
   ausgenommen, sonst erben die Karten die Textbreite. */
.content-for-layout :where(p, li, .rte):not(product-card *) {
  max-inline-size: var(--lf-breite-text);
}

/* Raster der Kollektions- und Suchergebnisseiten ------------------------- */

/*
  Wichtig: Das Theme hat bereits ein eigenes Raster (ul.product-grid mit
  li.product-grid__item). Ein zweites Raster auf .collection-wrapper zu legen
  erzeugt leere Spalten und weisse Flaechen — genau das passierte am
  12.09.2026 auf Mobil. Deshalb wird hier nur das Theme-Raster umgestellt,
  nicht ersetzt.
*/

.collection-wrapper {
  /* Das Theme-Raster uebernimmt die Spalten; hier nur der Aussenabstand. */
  display: block;
}

.results-list .product-grid,
ul.product-grid {
  --product-grid-gap: var(--lf-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--lf-4) var(--lf-3);
  align-items: start;
}

/* Auf schmalen Bildschirmen eine Spalte, damit die Karte gross genug bleibt. */
@media screen and (max-width: 560px) {
  .results-list .product-grid,
  ul.product-grid {
    grid-template-columns: 1fr;
  }
}

/* Die Zelle des Themes traegt einen Rahmen. Der wird zum Kartenrahmen
   umgebaut, statt doppelt zu erscheinen. */
.product-grid__item {
  --product-card-border-width: 0px;
  border: 0;
}

/* Text innerhalb der Karten bleibt schmal, auch wenn die Karte breiter wird. */
product-card.product-card .product-card__content > * {
  max-inline-size: none;
}

/* Produktkarte ------------------------------------------------------------ */

product-card.product-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

product-card.product-card .card-gallery,
product-card.product-card .product-media-container {
  border-radius: var(--lf-radius);
  overflow: hidden;
  background-color: var(--lf-creme);
}

/* Ein Bildverhaeltnis fuer alle Karten — das ruhigste Mittel gegen Unruhe. */
product-card.product-card .product-media-container {
  aspect-ratio: 4 / 5;
}

product-card.product-card .product-media-container img {
  object-fit: cover;
  inline-size: 100%;
  block-size: 100%;
}

/* Titel: Groesse und Gewicht aus dem System, Abstand nach unten knapp. */
product-card.product-card h3,
product-card.product-card .card_title,
product-card.product-card [class*='card_title'] {
  font-family: var(--lf-schrift-titel);
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.005em;
  margin-block: var(--lf-2) 0.25rem;
  color: var(--lf-tinte);
}

/* Preis: deutlich, in Tinte, nicht in Akzentfarbe. */
product-card.product-card .price,
product-card.product-card [class*='price'] {
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--lf-tinte);
}

/* Kein Streichpreis-Dekor, keine Rabatt-Aufkleber. */
product-card.product-card [class*='badge']:not([class*='sold']) {
  border-radius: var(--lf-radius-klein);
}

/* Sanftes Anheben beim Zeigen — eine Bewegung, nicht drei. */
product-card.product-card .card-gallery {
  transition: transform 0.25s ease;
}

@media (hover: hover) {
  product-card.product-card:hover .card-gallery {
    transform: translateY(-3px);
  }
}

/* Seitentitel auf Kollektions- und Inhaltsseiten ------------------------- */

.content-for-layout > .shopify-section:first-child h1,
.collection-hero h1,
main h1:not(.lf-display) {
  font-family: var(--lf-schrift-titel);
  font-size: var(--lf-h1);
  line-height: var(--lf-hoehe-titel);
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}

/* Fliesstext auf Inhaltsseiten etwas grosszuegiger ---------------------- */

.content-for-layout p {
  line-height: var(--lf-hoehe-text);
}

/* Abschnittsabstaende der Theme-Sektionen an den Systemtakt angleichen --- */

.content-for-layout > .shopify-section {
  scroll-margin-block-start: 6rem;
}

/* ==========================================================================
   Produktseite: Kaufbereich
   --------------------------------------------------------------------------
   Der Kaufknopf des Themes traegt eine eigene Farbe. Der Shop fuehrt genau
   EINEN Akzent, deshalb uebernimmt der Kaufknopf ihn. Das ist die Stelle, an
   der die Farbe des Systems am meisten bewirkt.
   ========================================================================== */

/* Kaufen / In den Warenkorb ------------------------------------------------ */

button[name='add'],
.product-form__submit,
[class*='add-to-cart'] button,
[class*='buy-buttons'] button:not([class*='shopify-payment-button']):not([class*='paypal']),
sticky-add-to-cart button {
  background-color: var(--lf-akzent-knopf);
  color: #fff;
  border-color: transparent;
  font-weight: 650;
  min-block-size: 3.25rem;
  border-radius: var(--lf-radius-klein);
  transition: background-color 0.18s ease;
}

button[name='add']:hover,
.product-form__submit:hover,
[class*='add-to-cart'] button:hover,
[class*='buy-buttons'] button:not([class*='shopify-payment-button']):not([class*='paypal']):hover,
sticky-add-to-cart button:hover {
  background-color: var(--lf-akzent-knopf-hover);
  color: #fff;
}

/* Die Sticky-Leiste des Themes: ruhige Flaeche, gleiche Kante wie die Karten. */
.sticky-add-to-cart__bar {
  background-color: var(--lf-warmweiss);
  border-block-start: 1px solid var(--lf-linie);
}

/* Die Leiste liegt unter dem Einwilligungsfenster (z-index 7). Solange die
   Einwilligung offen ist, darf sie nicht stoeren — deshalb bleibt sie dann
   unsichtbar. Das Einwilligungswerkzeug setzt eine eigene hohe Ebene; hier
   wird nur verhindert, dass die Leiste darunter hervorlugt. */
body:has(iframe[id*='consent'], iframe[src*='consent']) .sticky-add-to-cart__bar {
  visibility: hidden;
}

/* Dynamische Kasse (Shopify Payments) neutral halten, damit nicht zwei
   konkurrierende Farben nebeneinander stehen. */
.shopify-payment-button__button--unbranded {
  background-color: var(--lf-tinte) !important;
  color: var(--lf-warmweiss) !important;
  border-radius: var(--lf-radius-klein) !important;
  font-weight: 600 !important;
  min-block-size: 3.25rem;
}

/* Interne Verweise auf der Produktseite ---------------------------------- */

.product-info a,
.product-details a,
[class*='product-info'] a {
  color: var(--lf-akzent-text);
  text-underline-offset: 3px;
}

/* ==========================================================================
   Trust-Zeile unter dem Kaufbereich
   --------------------------------------------------------------------------
   Befund aus dem Benchmark: Vertrauen wirkt als Rahmen, nicht als Block.
   Wenige Zeilen, sachlich, ohne Symboldichte.
   ========================================================================== */

/* Die Leiste des Themes unter dem Kaufbereich: ruhig und ohne Dekor. */
[class*='product-info'] > :where(div, ul):not(:first-child) {
  color: var(--lf-tinte-70);
}

/* Garantie, Retoure und Pruefbericht als Textzeile statt als Aufkleber. */
[class*='product-info'] :where(p, li, span):not(:has(*)) {
  font-size: var(--lf-text-klein);
}

/* Abschnittsueberschriften auf der Produktseite -------------------------- */

.product-details h2,
[class*='product-details'] h2,
main section h2:not(.lf-h2) {
  font-family: var(--lf-schrift-titel);
  letter-spacing: -0.01em;
}

/* Technische Daten und Messprotokoll: Tabellenzeilen ruhiger stellen. */
main table th,
main table td {
  padding-block: 0.6rem;
  border-color: var(--lf-linie);
}

main table th {
  font-weight: 600;
  color: var(--lf-tinte);
  text-align: start;
  vertical-align: top;
}

/* ==========================================================================
   Kopfzeile
   --------------------------------------------------------------------------
   Aufbau, Reihenfolge und Verhalten kommen vom Theme (Logo links, Menue
   mittig, Suche/Konto/Warenkorb rechts, Sticky beim Hochscrollen). Hier wird
   nur die Typografie auf das System gelegt: eine Schriftfamilie, Titel in
   Sperrung und Gewicht wie in luftfein.css festgelegt.
   ========================================================================== */

/* Markenname: das einzige Element in der Kopfzeile, das Gewicht bekommt. */
.header__row--top a[aria-label*='Home' i],
.header__row--top .header__logo-text,
.header a[href='/']:not([class*='icon']) {
  font-family: var(--lf-schrift-titel);
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Menuepunkte: ruhiger als der Markenname, klar lesbar. */
.header__menu a,
.header__row--top nav a {
  font-family: var(--lf-schrift-text);
  font-weight: 500;
  letter-spacing: 0.005em;
}

.header__menu a:hover,
.header__row--top nav a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1.5px;
}

/* Die Ankuendigungsleiste: kein zweiter Akzent, ruhige Schrift. */
.announcement-bar {
  font-family: var(--lf-schrift-text);
  font-size: 0.875rem;
  letter-spacing: 0.01em;
}

/* ==========================================================================
   Fusszeile
   ========================================================================== */

footer {
  font-family: var(--lf-schrift-text);
}

/* Spaltenueberschriften: kleiner als der Fliesstext, gesperrt, Versalien —
   das ist die uebliche Form und trennt Kopf von Liste. */
footer h2,
footer h3,
footer .footer-content h2,
footer [class*='menu'] > :is(h2, h3, p, span):first-child {
  font-family: var(--lf-schrift-titel);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  line-height: 1.4;
  margin-block: 0 var(--lf-2);
}

/* Verweise: Farbe erben, damit sie auf dunklem Grund hell und auf hellem
   Grund dunkel bleiben. Kein Blau, kein Unterstrich im Ruhezustand. */
footer a {
  color: inherit;
  text-decoration: none;
  font-size: var(--lf-text-klein);
}

footer a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Der Newsletter-Knopf des Themes: Akzentfarbe wie der Kaufknopf. */
footer button[type='submit'],
footer .newsletter button,
footer [class*='newsletter'] button {
  background-color: var(--lf-akzent-knopf);
  color: #fff;
  border-color: transparent;
  font-weight: 650;
  border-radius: var(--lf-radius-klein);
  min-block-size: 2.875rem;
}

footer button[type='submit']:hover,
footer .newsletter button:hover,
footer [class*='newsletter'] button:hover {
  background-color: var(--lf-akzent-knopf-hover);
  color: #fff;
}

/* Eingabefeld im Newsletter: ruhiger Rahmen, sichtbarer Fokus. */
footer input[type='email'] {
  border-radius: var(--lf-radius-klein);
  border: 1px solid var(--lf-linie);
  font-family: var(--lf-schrift-text);
}

footer input[type='email']:focus-visible {
  outline: 2px solid var(--lf-akzent-knopf);
  outline-offset: 1px;
}

/* Die Service-Zeile ueber der Fusszeile: Text zuruecknehmen, Symbole klein. */
.service-leiste,
[class*='service'] :where(p, span) {
  font-size: var(--lf-text-klein);
  line-height: 1.5;
}

/* Der Copyright-Block: leiser als alles andere in der Fusszeile. */
footer [class*='utilities'],
footer [class*='copyright'] {
  font-size: 0.8125rem;
}


/* --------------------------------------------------------------------------
   Ratgeber-Titelbilder ausgeblendet, Stand 12.09.2026.
   Alle sieben Artikel tragen dieselbe Platzhalterkachel. Vier identische
   Kacheln nebeneinander sind unuebersichtlicher als gar kein Bild — die Karte
   traegt Titel, Datum und Anriss, das genuegt.
   Sobald echte Titelbilder vorliegen: diesen Block ersatzlos loeschen.
   Die Bilder selbst bleiben an den Artikeln, es wird nichts geloescht.
   -------------------------------------------------------------------------- */
.resource-image.featured-blog-posts-card__image,
.featured-blog-posts-card__image { display: none !important; }


/* --- Produktkarten nach dem Muster josephjoseph.com (gemessen 12.09.2026) ---
   Dort steht jedes Produkt freigestellt auf einer hellen Flaeche, ohne Rahmen,
   mit viel Luft ringsum. Das Raster traegt die Seite, nicht der Text darunter.
   -------------------------------------------------------------------------- */
.product-grid .product-card__image,
.product-grid .card-gallery,
.product-grid .product-media-container {
  background: #F4F2EF;
  border-radius: 6px;
  overflow: hidden;
}
.product-grid .product-media-container img,
.product-grid .card-gallery img {
  object-fit: contain;
  padding: 8%;
  mix-blend-mode: multiply;   /* freigestellte Aufnahmen auf Weiss verschmelzen */
}
.product-grid .product-title,
.product-grid .product-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 0.85rem;
}