/* Karten-Raster und alle Kartenarten (Merkmal, Befund, Kennzahl, Person).
   Farben, Schatten und Etiketten nur über Stil-Tokens (STIL.md): helle Karten nutzen die
   Fläche-Tokens, die Befund-Karte als Instrument die Bühne-Tokens. */
.fk-karten { display: grid; gap: var(--s-4); margin-block: var(--s-6); }
.fk-karten--1 { grid-template-columns: minmax(0, 1fr); }
.fk-karten--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fk-karten--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.fk-karten > :nth-child(2) { --i: 1; } .fk-karten > :nth-child(3) { --i: 2; } .fk-karten > :nth-child(4) { --i: 3; }
.fk-karten > :nth-child(5) { --i: 4; } .fk-karten > :nth-child(6) { --i: 5; } .fk-karten > :nth-child(n+7) { --i: 6; }
.fk-karte--breit { grid-column: 1 / -1; }
@media (max-width: 64rem) { .fk-karten--3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 52rem) { .fk-karten--2 { grid-template-columns: minmax(0, 1fr); } }

.fk-karte { position: relative; margin: 0; }
.fk-karte__titel { margin: 0 0 var(--s-2); font-size: 1.1rem; line-height: 1.25; }
.fk-karte__text > :last-child { margin-bottom: 0; }
.fk-karte__text :where(p, li) { font-size: .97rem; line-height: 1.55; }

/* Merkmal: helle Karte mit Strich-Symbol, das sich beim Einblenden zeichnet */
.fk-karte--merkmal { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius-l); box-shadow: var(--schatten-karte); padding: var(--s-5); transition: border-color .3s, transform .4s var(--bewegung); }
.fk-karte--merkmal:hover { border-color: var(--linie-stark); transform: translateY(-2px); }
.fk-karte--merkmal .fk-karte__text :where(p, li) { color: var(--text-leise); }
.fk-symbol { width: 2.6rem; height: 2.6rem; margin-bottom: var(--s-3); display: block; }
/* Das Symbol steht immer auf einer hellen Karte – auch im dunklen Abschnitt – daher --akzent */
.fk-symbol :is(path, circle, line, polyline) { fill: none; stroke: var(--akzent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fk-js .fk-karte--merkmal.ist-sichtbar .fk-symbol * { stroke-dasharray: 120; stroke-dashoffset: 120; animation: fk-zeichnen 1.4s var(--bewegung) forwards; animation-delay: calc(var(--i, 0) * 90ms + .2s); }
@keyframes fk-zeichnen { to { stroke-dashoffset: 0; } }

/* Befund: Studienkarte als Instrument (Bühne; im Stil „Klinisch“ weiße Karte mit Haarlinie) */
.fk-karte--befund { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); }
.fk-karte--befund .fk-karte__marke { font-family: var(--etikett-schrift); font-size: calc(.68rem * var(--etikett-mass)); letter-spacing: calc(.12em * var(--sperrung)); text-transform: var(--versalien); color: var(--buehne-akzent); }
.fk-karte--befund .fk-karte__titel { color: var(--buehne-titel); font-size: 1.25rem; margin: 0; }
.fk-karte--befund .fk-karte__text :where(p, li) { color: var(--buehne-text); font-size: .98rem; }
.fk-karte--befund .fk-karte__text p { margin: 0 0 var(--s-3); }
.fk-karte__quelle { margin: auto 0 0; padding-top: var(--s-4); border-top: 1px solid var(--buehne-linie); font-family: var(--etikett-schrift); font-size: calc(.7rem * var(--etikett-mass)); color: var(--buehne-leise); }
.fk-karte__quelle a { color: var(--buehne-akzent); }
/* Befund mit Link (seit 1.14.0): die ganze Karte ist anklickbar (Fläche des Links über der Karte), oben das Vorschaubild
   in 16:9 bis an den Rand, darauf ein Abspielzeichen. Das Bild liegt auf dem eigenen Server (Mediathek). */
.fk-karte--verlinkt { position: relative; transition: transform .3s var(--bewegung), box-shadow .3s; }
.fk-karte--verlinkt:hover { transform: translateY(-3px); }
.fk-karte__ganz::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.fk-karte__ganz:focus-visible { outline: none; }
.fk-karte--verlinkt:has(.fk-karte__ganz:focus-visible) { outline: 2px solid var(--buehne-akzent); outline-offset: 3px; }
.fk-karte__vorschau { position: relative; margin: calc(-1 * var(--s-6)) calc(-1 * var(--s-6)) var(--s-2); aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-l) var(--radius-l) 0 0; background: var(--buehne); }
.fk-karte__vorschaubild { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--bewegung); }
.fk-karte--verlinkt:hover .fk-karte__vorschaubild { transform: scale(1.03); }
.fk-karte__abspielen { position: absolute; left: 50%; top: 50%; width: 3.5rem; height: 3.5rem; margin: -1.75rem 0 0 -1.75rem; border-radius: 50%;
  background: color-mix(in srgb, #000 55%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, #fff 70%, transparent); transition: background .3s; }
.fk-karte__abspielen::after { content: ''; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: .6rem 0 .6rem 1rem; border-color: transparent transparent transparent #fff; }
.fk-karte--verlinkt:hover .fk-karte__abspielen { background: var(--akzent); }
@media (prefers-reduced-motion: reduce) { .fk-karte--verlinkt, .fk-karte__vorschaubild { transition: none; } .fk-karte--verlinkt:hover, .fk-karte--verlinkt:hover .fk-karte__vorschaubild { transform: none; } }

/* Kennzahl: helle Karte mit großem Kürzel (das Kürzel ist ein Datenwert und bleibt in der Datenschrift) */
.fk-karte--kennzahl { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius-l); box-shadow: var(--schatten-karte); padding: var(--s-6); }
.fk-karte__kuerzel { display: inline-block; font-family: var(--schrift-daten); font-weight: 600; font-size: 1.6rem; color: var(--akzent); margin-bottom: var(--s-3); letter-spacing: .02em; }
.fk-karte--kennzahl .fk-karte__titel { font-size: 1.2rem; }
.fk-karte--kennzahl .fk-karte__text :where(p, li) { color: var(--text-leise); font-size: 1rem; }
.fk-karte__hinweis { font-family: var(--etikett-schrift); font-size: calc(.72rem * var(--etikett-mass)); color: var(--hinweis); margin: var(--s-3) 0 0; }

/* Person */
.fk-karte--person { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s-5); align-items: start; padding: var(--s-5); background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius-l); box-shadow: var(--schatten-karte); }
.fk-karte__bild { width: 7.5rem; height: 9rem; object-fit: cover; border-radius: var(--radius-m); filter: grayscale(.25); display: block; }
.fk-karte__bild--leer { display: grid; place-items: center; background: var(--flaeche-tief); }
/* Name ohne Abstand nach oben: Oberkante des Namens = Oberkante des Fotos (Felix, 09.11.2026 – der Abstand der
   allgemeinen Überschriften schob den Namen sonst 40 px unter das Foto). Die Zeilenhöhe 1.2 legt die Großbuchstaben
   bündig an die Bildkante statt einen halben Zeilenabstand tiefer. */
.fk-karte--person .fk-karte__titel { font-size: 1.25rem; line-height: 1.2; margin-top: 0; margin-bottom: .2rem; }
.fk-karte--person .fk-karte__titel:first-child { margin-top: -.1em; }
.fk-karte__rolle { font-family: var(--etikett-schrift); font-size: calc(.72rem * var(--etikett-mass)); letter-spacing: calc(.06em * var(--sperrung)); color: var(--akzent); text-transform: var(--versalien); margin: 0 0 var(--s-3); }
.fk-karte--person .fk-karte__text :where(p, li) { color: var(--text-leise); font-size: .95rem; }
/* Ohne Foto steht der Text vorn (sonst rutscht er in die schmale Bildspalte) */
.fk-karte--person > div:first-child { grid-column: 1 / -1; }
/* Profilseite (z. B. KIT) und Wissenschaftsprofile: eine ruhige Zeile unter dem Text, bricht bei Bedarf um */
.fk-karte__profil { margin: var(--s-3) 0 0; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; }
@media (max-width: 52rem) {
	.fk-karte--person { grid-template-columns: 5.5rem minmax(0, 1fr); }
	.fk-karte__bild { width: 5.5rem; height: 6.8rem; }
}
/* Handy kompakter (Felix, 09.11.2026: „Text and links under picture and title and overall the whole box width“):
   Foto klein links, Name und Rolle daneben; Text und Links darunter über die ganze Kartenbreite. Der Inhaltsblock
   wird dafür mit display: contents aufgelöst, seine Teile stehen selbst im Raster der Karte. */
@media (max-width: 40rem) {
	.fk-karte--person { padding: var(--s-4); }
	.fk-karte--person:has(> .fk-karte__bild) { grid-template-columns: 4.25rem minmax(0, 1fr); column-gap: var(--s-4); row-gap: 0; align-items: start; }
	.fk-karte--person:has(> .fk-karte__bild) > .fk-karte__bild { grid-column: 1; grid-row: 1 / span 2; width: 4.25rem; height: 5.25rem; }
	.fk-karte--person:has(> .fk-karte__bild) > div { display: contents; }
	.fk-karte--person:has(> .fk-karte__bild) > div > .fk-karte__titel { grid-column: 2; grid-row: 1; align-self: end; margin: 0; }
	.fk-karte--person:has(> .fk-karte__bild) > div > .fk-karte__rolle { grid-column: 2; grid-row: 2; align-self: start; margin: .3rem 0 0; }
	.fk-karte--person:has(> .fk-karte__bild) > div > :not(.fk-karte__titel, .fk-karte__rolle) { grid-column: 1 / -1; }
	.fk-karte--person:has(> .fk-karte__bild) > div > .fk-karte__text { margin-top: var(--s-4); }
}

/* Auf dunklem Abschnitt (Bühne): helle Karten bleiben helle Karten, Befunde bleiben Instrument-Karten */
.fk-sektion--dunkel .fk-karte--merkmal .fk-karte__titel,
.fk-sektion--dunkel .fk-karte--kennzahl .fk-karte__titel,
.fk-sektion--dunkel .fk-karte--person .fk-karte__titel { color: var(--titel); }

@media (prefers-reduced-motion: reduce) {
	.fk-js .fk-karte--merkmal.ist-sichtbar .fk-symbol * { animation: none; stroke-dasharray: none; }
}