/* FH Wedel - Karten (design-system/components/core/Card.jsx):
   weisse Flaeche, flacher blaugetoenter Schatten, Radius 8 px.
   Eine Karte ist eine helle Insel: In dunkelblauen Sektionen setzt sie die
   Variablen von .flaeche-dunkel (base.css) zurueck -- Sekundaertext, Links,
   Buttons, Chips --, dazu Schrift, Ueberschriften und Dachzeile.
   .flaeche-weiss aus base.css setzt Buttons, Chips und die Schrift nicht
   zurueck (Rueckmeldung Nr. 25); "initial" laesst die Fallbacks der
   Bausteine greifen. */

.fhw-karte {
    --text-leise: var(--text-muted);
    --link: var(--text-link);
    --link-hover: var(--text-link-hover);
    --btn-primaer-bg: initial;
    --btn-primaer-fg: initial;
    --btn-primaer-hover: initial;
    --btn-outline-fg: initial;
    --btn-outline-hover: initial;
    --chip-pressed-border: initial;
    --chip-count-on: initial;
    background: var(--surface-card);
    border-radius: var(--radius-m);
    box-shadow: var(--shadow-card);
    color: var(--text-body);
}

.fhw-dunkel .fhw-karte :is(h2, h3, h4, h5, h6) {
    color: var(--text-heading);
}

/* .flaeche-dunkel nimmt Links im Hover die Unterstreichung; in der Karte
   gilt wieder die Regel fuer helle Flaechen */
.fhw-dunkel .fhw-karte a:not(.fhw-button, .fhw-karte__link):hover {
    text-decoration: underline;
}

.fhw-dunkel .fhw-karte .fhw-dachzeile {
    color: var(--text-dachzeile);
}

/* ---------- Verlinkte Karte (.fhw-karte--link) ----------
   Genau ein Link, im Titel (.fhw-karte__link); sein ::after deckt die
   ganze Karte ab, damit sie ueberall klickbar ist, ohne verschachtelte
   Links und ohne dass der Screenreader den ganzen Kartentext als Linknamen
   vorliest. Hover nach Card.jsx: staerkerer Schatten, 2 px angehoben.
   Fokus-Ring an der Karte statt am Titel. */
.fhw-karte--link {
    position: relative;
    transition:
        box-shadow var(--dur-med) var(--ease-out),
        transform var(--dur-med) var(--ease-out);
}

.fhw-karte--link:hover {
    box-shadow: var(--shadow-raised);
    transform: translateY(-2px);
}

.fhw-karte .fhw-karte__link,
.fhw-karte .fhw-karte__link:hover {
    color: inherit;
    text-decoration: none;
}

.fhw-karte__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

.fhw-karte .fhw-karte__link:focus-visible {
    outline: none;
}

.fhw-karte--link:has(.fhw-karte__link:focus-visible) {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

@media (prefers-reduced-motion: reduce) {
    .fhw-karte--link:hover {
        transform: none;
    }
}

/* ---------- Inhaltskarte (Komponente fhw:karte) ----------
   Masse aus Card.jsx: Innenabstand 24 px, Dachzeile 4 px, Titel H4-Groesse
   mit 8 px Abstand, Text 14 px. Bild 3:2 statt fester 160 px Hoehe
   (Abweichung 10). Gleich hohe Karten, Zusatzzeile und Linktext stehen
   unten. Erweiterungen aus den Seitenentwuerfen (TASK-47): Tag, Vorteile,
   Zusatzzeile, siehe unten. */
.fhw-inhaltskarte {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

.fhw-inhaltskarte__bild {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.fhw-inhaltskarte__inhalt {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: var(--space-5);
}

.fhw-inhaltskarte__dachzeile {
    margin-bottom: var(--space-1);
}

.fhw-inhaltskarte__titel {
    margin: 0 0 var(--space-2);
    font-size: var(--text-h4);
    line-height: var(--leading-subhead);
}

.fhw-inhaltskarte__text {
    margin: 0;
    font-size: var(--text-body-s);
    line-height: var(--leading-body);
}

.fhw-inhaltskarte__mehr {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: auto 0 0;
    padding-top: var(--space-4);
    color: var(--text-link);
    font-size: var(--text-body-s);
    font-weight: var(--weight-semibold);
}

.fhw-inhaltskarte__mehr::after {
    content: "";
    width: 1em;
    height: 1em;
    background: currentColor;
    -webkit-mask: url('../Icons/lucide/arrow-right.svg') center / contain no-repeat;
    mask: url('../Icons/lucide/arrow-right.svg') center / contain no-repeat;
    transition: transform var(--dur-fast) var(--ease-out);
}

.fhw-karte--link:hover .fhw-inhaltskarte__mehr {
    color: var(--text-link-hover);
}

.fhw-karte--link:hover .fhw-inhaltskarte__mehr::after {
    transform: translateX(2px);
}

/* ---------- Kartenart Tag (Study Bootcamps, Startseite v8 .camp .tag) ----------
   Der Titel steht statt des Bildes in einem Feld mit 6 px Kante links,
   Flaeche und Kante in der Modulfarbe des Fachbereichs (Teaser\Fachbereich,
   tokens/colors.css); ohne Fachbereich hellblau getoent mit dunkelblauer
   Kante. Die Dachzeile folgt klein und fett darunter (.camp .dach). */
.fhw-inhaltskarte__tag {
    --fhw-tag-flaeche: color-mix(in srgb, var(--fh-blau) 6%, var(--fh-weiss));
    --fhw-tag-kante: var(--fh-blau);
    display: flex;
    align-items: center;
    min-height: 3.25rem;
    margin: 0 0 var(--space-2);
    padding: var(--space-2) var(--space-5) var(--space-2) var(--space-4);
    border-left: 6px solid var(--fhw-tag-kante);
    border-radius: var(--radius-m);
    background: var(--fhw-tag-flaeche);
    color: var(--fh-blau);
    font-size: var(--text-h3);
    line-height: var(--leading-subhead);
}

.fhw-dunkel .fhw-karte .fhw-inhaltskarte__tag {
    color: var(--fh-blau);
}

.fhw-tag--cyan { --fhw-tag-flaeche: var(--modul-cyan-hell); --fhw-tag-kante: var(--modul-cyan); }
.fhw-tag--gruen { --fhw-tag-flaeche: var(--modul-gruen-hell); --fhw-tag-kante: var(--modul-gruen); }
.fhw-tag--rot { --fhw-tag-flaeche: var(--modul-rot-hell); --fhw-tag-kante: var(--modul-rot); }
.fhw-tag--gelb { --fhw-tag-flaeche: var(--modul-gelb-hell); --fhw-tag-kante: var(--modul-gelb); }
.fhw-tag--blau { --fhw-tag-flaeche: var(--modul-blau-hell); --fhw-tag-kante: var(--modul-blau); }
.fhw-tag--petrol { --fhw-tag-flaeche: var(--modul-petrol-hell); --fhw-tag-kante: var(--modul-petrol); }
.fhw-tag--magenta { --fhw-tag-flaeche: var(--modul-magenta-hell); --fhw-tag-kante: var(--modul-magenta); }

.fhw-inhaltskarte__fach {
    margin: 0 0 var(--space-2);
    color: var(--grau-700);
    font-size: var(--text-body-s);
    font-weight: var(--weight-bold);
}

/* ---------- Vorteile-Liste (Studienwahl & Beratung v1 .fkarte) ----------
   Ueberschrift "Vorteile" klein in Dunkelblau, je Zeile ein gruenes Plus
   (Lucide plus) vor dem Text. */
.fhw-inhaltskarte .fhw-inhaltskarte__vorteile-titel {
    margin: var(--space-2) 0 var(--space-2);
    color: var(--fh-blau);
    font-family: var(--font-body);
    font-size: var(--text-body-s);
    font-weight: var(--weight-bold);
    line-height: var(--leading-subhead);
}

.fhw-inhaltskarte__vorteile {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-body-m);
    line-height: var(--leading-tight);
}

.fhw-inhaltskarte__vorteile li {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    margin: 0;
}

.fhw-inhaltskarte__vorteile li::before {
    content: "";
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.1875rem;
    background: var(--fh-gruen);
    -webkit-mask: url('../Icons/lucide/plus.svg') center / contain no-repeat;
    mask: url('../Icons/lucide/plus.svg') center / contain no-repeat;
}

/* ---------- Zusatzzeile mit Icon (Infos & Events v1 .karte .datum) ----------
   Unten in der Karte, 14 px halbfett in Dunkelblau mit Icon 16 px davor;
   steht sie vor dem Linktext, haengt dieser direkt darunter. */
.fhw-inhaltskarte__zusatz {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin: auto 0 0;
    padding-top: var(--space-4);
    color: var(--fh-blau);
    font-size: var(--text-body-s);
    font-weight: var(--weight-semibold);
}

.fhw-inhaltskarte__zusatz::before {
    content: "";
    flex: none;
    width: 1rem;
    height: 1rem;
    background: currentColor;
    -webkit-mask: url('../Icons/lucide/calendar.svg') center / contain no-repeat;
    mask: url('../Icons/lucide/calendar.svg') center / contain no-repeat;
}

.fhw-inhaltskarte__zusatz--clock::before {
    -webkit-mask-image: url('../Icons/lucide/clock.svg');
    mask-image: url('../Icons/lucide/clock.svg');
}

.fhw-inhaltskarte__zusatz--map-pin::before {
    -webkit-mask-image: url('../Icons/lucide/map-pin.svg');
    mask-image: url('../Icons/lucide/map-pin.svg');
}

.fhw-inhaltskarte__zusatz--users::before {
    -webkit-mask-image: url('../Icons/lucide/users.svg');
    mask-image: url('../Icons/lucide/users.svg');
}

.fhw-inhaltskarte__zusatz + .fhw-inhaltskarte__mehr {
    margin-top: 0;
    padding-top: var(--space-3);
}