/* omega3-test.net — Bildwelt: Karten-Illustrationen, Linien-Icons, Hero-Bild (21.10.2026)
   Ergänzt style.css, überschreibt keine bestehende Regel ohne eigene Zusatzklasse.
   Einbinden NACH style.css:
   <link rel="stylesheet" href="/css/bildwelt.css?v=20261021">
*/

/* ---------- 1) Karten-Illustration statt Emoji ----------
   <div class="card-img card-img--illu"><img src="/assets/img/cards/dosierung.svg" alt="" width="600" height="340" loading="lazy"></div>
   Kein Inline-Gradient mehr am .card-img nötig. */
.card-img.card-img--illu {
    height: auto;
    aspect-ratio: 600 / 340;
    padding: 0;
    font-size: 0;
    line-height: 0;
    background: var(--primary, #1E3A5F); /* Platzhalter, bis das SVG geladen ist */
    overflow: hidden;
}
.card-img.card-img--illu.card-img--light { background: var(--bg-warm, #F5F7FA); }
.card-img--illu img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}
.card:hover .card-img--illu img { transform: scale(1.03); }

/* Variante mit fester Höhe wie bisher (180 px), z. B. wenn Emoji- und Illustrationskarten
   gemischt in einem Raster stehen. Das SVG wird dann mittig beschnitten (Motiv bleibt sichtbar). */
.card-img.card-img--illu.card-img--fix { aspect-ratio: auto; height: 180px; }

/* Icon-Variante für Artikelkarten in Hub-Rastern (statt Emoji, ohne eigenes Bild je Artikel)
   <div class="card-img card-img--icon"><svg class="o3-icon" aria-hidden="true" focusable="false"><use href="/assets/icons/icons.svg#i-herz-puls"/></svg></div>
   Farbvarianten: is-teal, is-gold (nur für Werkzeuge/Check), is-light. */
.card-img.card-img--icon {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0) 55%),
        linear-gradient(135deg, var(--primary, #1E3A5F) 0%, #1A4A6E 60%, var(--secondary, #2E8B8B) 130%);
}
.card-img.card-img--icon::before {
    content: "";
    position: absolute;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.28);
}
.card-img.card-img--icon::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 22px;
    height: 12px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12'%3E%3Cpath d='M0 6q30-6 60 0t60 0' fill='none' stroke='%23fff' stroke-opacity='.14' stroke-width='2'/%3E%3C/svg%3E") repeat-x;
}
.card-img--icon .o3-icon { position: relative; width: 60px; height: 60px; color: #fff; vertical-align: 0; --o3-stroke: 2.2; }
.card-img.card-img--icon.is-teal {
    background:
        radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.16) 0, rgba(255, 255, 255, 0) 55%),
        linear-gradient(135deg, var(--secondary, #2E8B8B) 0%, var(--primary, #1E3A5F) 100%);
}
.card-img.card-img--icon.is-gold {
    background:
        radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.35) 0, rgba(255, 255, 255, 0) 55%),
        linear-gradient(135deg, var(--accent-light, #E8C94A) 0%, var(--accent, #D4AF37) 100%);
}
.card-img.card-img--icon.is-light {
    background:
        radial-gradient(circle at 50% 48%, #fff 0, rgba(255, 255, 255, 0) 55%),
        linear-gradient(135deg, var(--bg-warm, #F5F7FA) 0%, #D9E6EF 100%);
}
.card-img--icon.is-gold .o3-icon, .card-img--icon.is-light .o3-icon { color: var(--primary, #1E3A5F); }
.card-img.card-img--icon.is-gold::before, .card-img.card-img--icon.is-light::before { background: rgba(255, 255, 255, 0.45); border-color: rgba(30, 58, 95, 0.18); }
.card-img.card-img--icon.is-gold::after, .card-img.card-img--icon.is-light::after { opacity: 0.6; filter: invert(1); }

/* ---------- 2) Linien-Icons (Sprite) ----------
   <svg class="o3-icon" aria-hidden="true" focusable="false"><use href="/assets/icons/icons.svg#i-fisch"/></svg>
   Farbe über color, Größe über font-size bzw. Modifier, Linienstärke über --o3-stroke (Standard 2 im 48er-Raster). */
.o3-icon {
    display: inline-block;
    width: 1.5em;
    height: 1.5em;
    vertical-align: -0.4em;
    flex-shrink: 0;
    color: inherit;
    overflow: visible;
}
.o3-icon--sm { width: 1.15em; height: 1.15em; vertical-align: -0.2em; --o3-stroke: 2.6; }
.o3-icon--lg { width: 2.5rem; height: 2.5rem; }
.o3-icon--xl { width: 3.5rem; height: 3.5rem; }
.o3-icon--primary { color: var(--primary, #1E3A5F); }
.o3-icon--teal { color: var(--secondary, #2E8B8B); }
.o3-icon--gold { color: var(--accent, #D4AF37); }
.o3-icon--white { color: #fff; }

/* Icon im bestehenden 56-px-Quadrat der .icon-card (ersetzt das Emoji) */
.icon-card-icon .o3-icon { width: 32px; height: 32px; color: var(--white, #fff); vertical-align: 0; --o3-stroke: 2.5; }

/* Runder Icon-Badge für Listen, Schritte, Trust-Zeilen */
.o3-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(46, 139, 139, 0.1);
    color: var(--secondary, #2E8B8B);
    flex-shrink: 0;
}
.o3-icon-badge .o3-icon { width: 28px; height: 28px; vertical-align: 0; --o3-stroke: 2.4; }
.o3-icon-badge--gold { background: rgba(212, 175, 55, 0.16); color: #8A6D12; }
.o3-icon-badge--dark { background: rgba(255, 255, 255, 0.1); color: var(--accent, #D4AF37); }

/* ---------- 3) Hero-Illustration ---------- */

/* Variante A: als Bild in einer zweispaltigen Hero (Testseite, Status-Check, Hub-Seiten)
   <figure class="o3-hero-figure"><img src="/assets/img/hero-omega3.svg" alt="" width="1200" height="800" fetchpriority="high"></figure> */
.o3-hero-figure {
    margin: 0;
    border-radius: var(--radius-lg, 20px);
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: #0F2844;
    box-shadow: 0 20px 60px rgba(6, 18, 31, 0.35);
}
.o3-hero-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 75% 50%; /* Motiv (Tropfen, Kette, Testkarte) liegt rechts */
}
@media (max-width: 900px) {
    .o3-hero-figure { max-width: 560px; margin: 2rem auto 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 480px) {
    .o3-hero-figure { aspect-ratio: 4 / 3; border-radius: var(--radius, 12px); }
}

/* Variante B: Illustration rechts in der .article-hero (nur Hub-Seiten mit kurzem H1, ab 1200 px)
   <div class="article-hero article-hero--illu"> … </div> — weicher Übergang per Maske, Text bleibt unberührt. */
.article-hero.article-hero--illu { position: relative; overflow: hidden; }
.article-hero.article-hero--illu > .section-inner { position: relative; z-index: 1; }
.article-hero.article-hero--illu::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(42%, 620px);
    background: url('/assets/img/hero-omega3.svg') 85% center / cover no-repeat;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 45%);
    mask-image: linear-gradient(to right, transparent 0%, #000 45%);
    pointer-events: none;
    z-index: 0;
}
@media (max-width: 1199px) {
    .article-hero.article-hero--illu::after { display: none; }
}

/* Sicherheitsnetz Startseite: falls /assets/hero-fjord.jpg fehlt (liegt nicht im Repo),
   bleibt die Hero dunkelblau statt grau. Ändert nichts, solange das Foto lädt. */
.hero-bg { background-color: #0F2844; }

/* Bildunterschrift / Kennzeichnung (Illustration, Beispielwerte, KI-Bild) */
.o3-figcaption {
    font-size: 0.8rem;
    color: var(--text-muted, #718096);
    margin-top: 0.5rem;
    line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
    .card-img--illu img { transition: none; }
    .card:hover .card-img--illu img { transform: none; }
}