/* ==========================================================================
   Demo site cards (beispiel_karte() and beispiel_karten() in includes/beispiele.php), used on
   /projekte and written so the homepage demo section can use them too. Load it with
   'beispiel-karten' in $seite['styles']. Über mich loads it for the address bar and the 16:9 image
   box around demo 1 in the side column of the story.

   Card, image head and text column come from main.css (.karte, .karte--bild, .karte__inhalt).
   Everything here uses role tokens only (--karte, --rand, --rand-chip, --tx, --tx3, --link), so a
   card works on light and dark surfaces and in the dark and high-contrast themes.
   ========================================================================== */

/* Browser frame: a bar with three dots and the address, then the screenshot (16:9) */
.beispielkarte__fenster { border-bottom: var(--rand-breite) solid var(--rand); }
.beispielkarte__leiste {
    display: flex;
    align-items: center;
    gap: var(--a-3);
    padding: var(--a-2) var(--a-3);
    border-bottom: var(--rand-breite) solid var(--rand);
}
.beispielkarte__punkte { display: flex; gap: var(--a-1); flex: none; }
.beispielkarte__punkte > span { width: var(--a-2); height: var(--a-2); border-radius: 50%; background: var(--rand-chip); }
.beispielkarte__adresse {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding: 0 var(--a-2);
    border: var(--rand-breite) solid var(--rand);
    border-radius: var(--r-rund);
    font-family: var(--schrift-mono);
    font-size: var(--gr-label);
    line-height: 1.6;
    color: var(--tx3);
    white-space: nowrap;
    text-overflow: ellipsis;
}
.beispielkarte__bild { aspect-ratio: 16 / 9; background: var(--rand); }
.beispielkarte__bild img { width: 100%; height: 100%; object-fit: cover; object-position: left top; }

/* Package and link sit at the bottom, on one line across the cards of a row */
.beispielkarte__fuss {
    display: grid;
    gap: var(--a-3);
    justify-items: start;
    margin-top: auto;
    padding-top: var(--a-2);
}
.beispielkarte__paket { font-size: var(--gr-klein); color: var(--tx); }

/* The whole card opens the demo: the link's ::before covers the card (its ::after is the arrow).
   Only the link takes the focus, so the card stays one tab stop with one accessible name. */
.beispielkarte__link::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: var(--r-3);
}
.beispielkarte:hover .beispielkarte__link { text-decoration-thickness: 2px; }

/* Tablet width: two columns, so the third card would stand alone beside an empty cell. It spans
   both columns (main.css, .raster--3) and puts the screenshot beside the text instead. Both halves
   stretch to the card height: the frame grows its screenshot from 16:9 downwards (cropped from the
   left top), so no strip stays empty under it and the divider runs to the bottom edge; the package
   and link sit at the bottom of the text half. */
@media (min-width: 640px) and (max-width: 959px) {
    .beispielkarten > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .beispielkarten > :last-child:nth-child(odd) .beispielkarte__fenster {
        display: flex;
        flex-direction: column;
        border-bottom: 0;
        border-right: var(--rand-breite) solid var(--rand);
    }
    .beispielkarten > :last-child:nth-child(odd) .beispielkarte__bild { flex: 1 0 auto; }
}