/* kaufmich-com.de — near-white page, cold carmine, wide grotesk, square corners.
 *
 * The palette is `carmine-light`, and the value exists because of the GROUND rather than
 * the hue. The network already wears two reds: citymuse's `red-dark` is a near-black page
 * under a bright scarlet, erotikmarkt's `wine` a dark page under a muted claret. Both put
 * a warm red on a dark field and let the photographs carry the colour. This one inverts
 * that — paper-white, black text, and a cold blue-side carmine spent only where something
 * is clickable or countable. Across a room those are opposite decisions about what the
 * page is made of, not one decision spelled three times.
 *
 * Blue-side is also what separates it from `terracotta`, which pulls red toward clay and
 * orange. Carmine pulls toward magenta — printer's ink rather than earth — so the two sit
 * on opposite sides of pure red, which is as far apart as two reds get while both still
 * reading as red.
 *
 * A light page is the harder choice for a directory of photographs and it is taken on
 * purpose: the site is named after an ADDRESS, its pages are classified ads, and a
 * classified page has always been ink on paper. The cost is that photographs no longer
 * float on a dark field, so every one of them gets a hairline frame instead.
 *
 * The face is a WIDE grotesk (Verdana, DejaVu Sans), and it replaced a serif that read as
 * a masthead: a serif wordmark over a subtitle over a heavy rule is how a newspaper sets
 * its front page, and three safe decisions together made one that was not. `condensed`
 * was the obvious free value and is the same mistake in another weight — a narrow face is
 * dense editorial setting. Wide is the opposite instruction to the reader, and it is a
 * class no neighbour uses: every other site of the network leads its stack with a system
 * interface face, which is drawn tighter.
 *
 * Dropping the serif also handed `serif` back to stadtdame, which had held it first.
 *
 * Class names are `camelCase` (`runItem`, `ledeHead`, `factsList`), which is the axis this
 * site declares and which `Handwriting` now measures — the vocabulary was exhausted at
 * twelve values when this file was first written, and the axis gained two by register
 * rather than by inventing a thirteenth shape.
 *
 * The overlap it protects is near zero either way: none of these nouns (`run`, `lede`,
 * `facts`, `thumbs`, `leaving`, `index`) is a word any other site of the network styles on.
 */

:root {
    --paper: #faf8f8;
    --card: #ffffff;
    --ink: #141114;
    --ink-soft: #5a5157;
    /* Darkened from #8a8085, which gave 3.60:1 on the near-white ground — under the 4.5:1
       a normal-size text has to clear, and it carries the listing counts, the age line and
       the footer on every page. #767074 reads 4.57:1 against the same paper. */
    --ink-faint: #767074;
    --rule: #e2dcde;
    --rule-firm: #c9c0c4;
    --accent: #c8103c;
    --accent-deep: #99062c;
    --accent-wash: #fdeef1;
}

* { box-sizing: border-box; }

body {
    /* A column at least as tall as the window. The site's own sheet sits inside it and
       takes the slack, so the footer at the sheet's end lands on the bottom of a short
       page — the age check, the terms, a 404 — instead of leaving a band of bare ground
       under it. The padding stays on the sheet, where it was: it is the sheet's own
       breathing room, not a gap. */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    /* A GEOMETRIC grotesk: Avenir and Futura are drawn on the circle, so `o`, `c` and `a`
       are near-round and the whole page reads as open rather than clipped. Not a system UI
       face — every neighbour's sans opens with `system-ui`, `-apple-system`, `Segoe UI`,
       `Roboto` or `Helvetica Neue`, which are tighter drawings made for interface chrome.

       Two faces stood here before, and both are worth recording because each was rejected
       for its shape rather than its size. Georgia set the page as a NEWSPAPER masthead —
       serif at 17px under a subtitle and a heavy rule — and the site sells classified ads,
       so it should be set like a listings page. Trebuchet replaced it and went too far the
       other way: it is cut with squared bowls and clipped terminals, which reads as hard
       beside a mark built from two arcs. Round letters are what sit with a round mark.

       `condensed` was the free-looking value throughout and would have been the same
       mistake in a third weight: a condensed face is a tight editorial setting, which is
       the register this site is being kept out of.

       ⚠️ This replaced Georgia, and the reason is worth keeping. Serif at 17px, with a
       subtitle under the wordmark and a heavy rule beneath it, is the set of a NEWSPAPER
       masthead — the operator read the page as a publication rather than a directory, and
       the type was the largest part of that. The site sells classified ads, so it should
       be set like a listings page. `condensed` was the free-looking alternative and would
       have been the same mistake in a different weight: a condensed face is a tight
       editorial setting, which is the register being left behind. */
    font: 16px/1.6 Avenir, "Avenir Next", Futura, "Century Gothic", "URW Gothic", "DejaVu Sans", sans-serif;
    -webkit-text-size-adjust: 100%;
}

a { color: var(--accent-deep); }
a:hover { color: var(--accent); }

/* The browser's default focus ring is drawn for a white page and survives here, but it is
   thin against a serif face — thickened rather than replaced. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

img { max-width: 100%; }

/* A stamped photograph is dimmed slightly rather than hidden: more than half the gallery
   carries a donor's mark, and filtering them would empty the page. The `Mehr Fotos` button
   on the card is what answers the stamp. */
img[data-marked] { opacity: 0.94; }

.sheet {
    max-width: 68rem;
    margin: 0 auto;
    padding: 0 1rem 3rem;
}

/* Masthead. The name is written as an ADDRESS — `kaufmich.com` — with a dot where the
   domain carries a hyphen. Nothing is done to the letters themselves: no tracking, no
   case change, no rule under them, no shape inside them, no second word beside them. The
   `.com` takes the accent as colour only, which is styling rather than a treatment of
   letters — the string a scraper reads is `kaufmich.com` either way.

   That is `dotted-address`, and it is the one wordmark in this network that comes from a
   measurement: the demand behind this domain is people typing somebody else's address
   into a search box, so the brand is spelled the way an address is. */
/* A hairline in the page's own grey, not a heavy black bar across the full width. The
   thick dark rule under a name is the other half of the newspaper set the operator
   rejected: it is what a masthead does, and a directory has no need of it. It stays only
   to separate the header from the listing below. */
.masthead {
    border-bottom: 1px solid var(--rule);
    padding: 1.4rem 0 1rem;
    margin-bottom: 1.6rem;
}

.mastheadName {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
}

/* The name itself. It carries no treatment — the wordmark axis here is `dotted-address`,
   which is about the SPELLING (`kaufmich.com`, a dot where the domain has a hyphen) and
   not about anything done to the letters. The rule exists so the span is a styling hook
   rather than a bare element, and so the accent on `.com` has something to sit inside. */
.mastheadWord { display: inline; }

/* The monogram, sized off the type rather than in pixels so it follows the name when the
   page is zoomed. `flex: none` because a flex item shrinks below its content otherwise,
   and a squeezed square stops reading as a badge. */
.mastheadMark {
    flex: none;
    width: 1.28em;
    height: 1.28em;
    margin-right: 0.42em;
}

/* Colour only, no second badge. The domain was set in a filled tag while the masthead had
   no mark, and once the monogram took the square beside it the line carried two accent
   blocks arguing with each other. One badge to a lockup. */
.mastheadNameTld { color: var(--accent); }

/* Page opening. */
.lede { margin: 0 0 1.6rem; }

.ledeTitles { margin: 0; }

.ledeHead {
    margin: 0;
    font-size: 1.75rem;
    line-height: 1.25;
    font-weight: 700;
}

.ledeSub,
.ledeText {
    margin: 0.5rem 0 0;
    color: var(--ink-soft);
}

.runHead,
.factsHead,
.placeHead {
    margin: 2rem 0 0.8rem;
    font-size: 1.15rem;
    font-weight: 700;
    border-bottom: 1px solid var(--rule-firm);
    padding-bottom: 0.35rem;
}

/* The run of entries. The repeating unit is an `<hgroup>` inside the link: the person is
   the heading, the rate its subheading, the photograph subordinate to the pair. That
   inverts what `figure-grid` and `picture-grid` do, where the picture is the element and
   the text hangs off it as a caption.

   `<hgroup>` appears in no other template of this network, so the tag sequence
   `a hgroup h3 p img` cannot be produced by any neighbour without it abandoning its own
   value — which is what a similarity check compares.

   ⚠️ The floor of the column is 150px, not 200px. A 390px phone less 32px of padding
   leaves 358px, and two 200px columns need 416 — the grid collapses to one and each card
   fills the screen. Measured, not guessed; the network has paid for this one. */
.run {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
    gap: 1.1rem;
}

.runItem { min-width: 0; }

.runLink {
    display: block;
    color: inherit;
    text-decoration: none;
    background: var(--card);
    border: 1px solid var(--rule);
    padding: 0.6rem;
}

.runLink:hover { border-color: var(--accent); }

/* The text sits ABOVE the photograph, which is the other half of what this markup value
   means: the entry is a heading with a subheading, and the picture illustrates it. */
.runTitles { margin: 0 0 0.5rem; }

.runName {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    /* A long name must not push the layout wider than its column. Names are DATA — sizing
       the tile to the longest one is not an option. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.runSub {
    margin: 0.1rem 0 0;
    font-size: 0.85rem;
    color: var(--accent-deep);
}

/* Which entries carry a recording, said in the entry's own subheading rather than on the
   picture: the text of this card stands ABOVE the photograph, so a mark on the picture
   would be below the fact it belongs to and read as part of the next card.

   A word rather than a bare triangle — on its own a triangle is a typographic arrow and
   names nothing. Outlined, not filled: the rate beside it is already set in the deep
   accent, and two filled patches in one line would compete. */
.runReel {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0 0.3rem;
    border: 1px solid var(--accent);
    border-radius: 2px;
    background: var(--accent-wash);
    color: var(--accent-deep);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    vertical-align: 1px;
}

.runPhoto {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border: 1px solid var(--rule);
}

/* The city index. Names and counts, nothing else. */
.index {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
    gap: 0.2rem 1.2rem;
}

.indexItem { min-width: 0; }

.indexLink {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--rule);
    color: inherit;
    text-decoration: none;
}

.indexLink:hover { border-bottom-color: var(--accent); }

/* Without this the count is pushed off the tile by a long town name — a flex item does not
   shrink below its content. */
.indexName {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.indexCount {
    flex: none;
    font-size: 0.85rem;
    color: var(--ink-faint);
}

/* A full row of pages, not the lone "Weiter" this held before — the operator's
   review (2026-09-29) found the pair too faint to say how far a place's listing
   goes. 40px of top margin keeps the row clear of the last tile row (the grid's own
   `gap` is 1.1rem = 17.6px, well short of the 32px floor), and `flex-wrap` is what
   lets it fold on a phone instead of pushing the page wide. Left-aligned: `.run` is
   `auto-fill`, so an unfinished last row can leave empty track width the tiles
   themselves don't reach, and centring against that box would drift the pager off
   the tiles' own edge. */
.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 2.5rem 0 0;
}

.pagerStep {
    border: 1px solid var(--rule-firm);
    padding: 0.45rem 1rem;
    text-decoration: none;
    font-size: 0.95rem;
}

.pagerStep:hover { border-color: var(--accent); }

.pagerNums {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* Square, not the rounded pill berlindame.de and stadtdame.de each draw for this
   same row — this site's own tiles (`.runLink`, `.pagerStep`) already carry no
   radius, so a number keeps that rather than borrowing a shape from a neighbour.
   Sized in `rem` off the type, like `.mastheadMark`, so the tile grows with it
   rather than clipping a zoomed digit. */
.pagerNum,
.pagerGap {
    min-width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.pagerNum {
    border: 1px solid var(--rule-firm);
    text-decoration: none;
    color: var(--ink);
}

.pagerNum:hover { border-color: var(--accent); color: var(--accent-deep); }

/* The open page, filled rather than outlined — the same move `.runReel` makes for
   "Videoclip", a solid accent block rather than a second border colour, so the one
   tile that is not a link reads as such at a glance. */
.pagerCurrent {
    border: 1px solid var(--accent);
    background: var(--accent);
    color: var(--paper);
    font-weight: 700;
}

.pagerGap { color: var(--ink-faint); }

.more { margin: 1.4rem 0; }

.place p { color: var(--ink-soft); }

/* The gallery is a scroll-snap strip: the photographs sit in one scrollable row and the
   browser pages between them. Swipe on a phone, drag or shift-wheel on a desktop, arrow
   keys once the strip has focus — every bit of that is native, which is why this site
   ships no gallery script at all.




/* Photograph left, figures right. The picture is sized against the window's height, so it
   comes out about half this column wide and on its own leaves the other half blank down
   its whole length — while the prices and the buttons, which are short, wait below the
   fold for no reason.

   Two tracks, ONE child in each. An earlier attempt put the sections straight into the
   grid: they took a row apiece and opened a hole beside the picture. `auto` on the first
   track lets it be exactly as wide as the photograph turned out to be, rather than a share
   guessed ahead of time.

   The breakpoint is where the two tracks stop fitting side by side; below it they stack,
   photograph first, which is the order they are written in. */
.cardtop {
    display: grid;
    grid-template-columns: auto minmax(16rem, 1fr);
    gap: 1.6rem;
    align-items: start;
    margin: 0 0 1.4rem;
}

/* Neither track may be pushed wider than its share by something inside it — a long word in
   a table, a wide row of thumbnails. */
.cardshot, .cardfacts { min-width: 0; }

.cardfacts > :first-child { margin-top: 0; }

@media (max-width: 52rem) {
    .cardtop { grid-template-columns: 1fr; gap: 0.6rem; }
}

/* The photograph is capped by the WINDOW's height, not by the column's width. A 3:4
   picture given this column stands taller than the screen showing it, and the reader then
   meets a wall of photograph and scrolls to find out there is a page beneath. Height
   first; the width follows from the ratio, and `--shot` carries it to the row below. */
.stage {
    --shot: min(30rem, 82vw);
    margin: 0 0 0.5rem;
    padding: 0;
}

.stageImage {
    display: block;
    width: var(--shot);
    max-width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border: 1px solid var(--rule-firm);
}

/* Thumbnails are anchors into the strip, not labels around a hidden radio: an anchor
   carries no state of its own, so the two controls cannot disagree about which photograph
   is showing. */
.thumbs {
    list-style: none;
    margin: 0 0 1.6rem;
    padding: 0;
    display: flex;
    gap: 0.4rem;
    /* Exactly as wide as the photograph above and no wider: the same expression through a
       variable, so the two edges line up whichever term of the `min()` wins. Left to
       itself the row ran past the picture and across the page. */
    max-width: min(30rem, 82vw);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
}

.thumbsItem { flex: none; }

.thumbsLink { display: block; }

/* The one showing. Opacity rather than a border: a border would move the row by two
   pixels every time the reader picks a different photograph. */
.thumbsImage { opacity: 0.62; transition: opacity 0.12s ease; }
.thumbsLink:hover .thumbsImage,
.thumbsLink:focus-visible .thumbsImage,
.thumbsLink[aria-current] .thumbsImage { opacity: 1; }

.thumbsImage {
    display: block;
    width: 72px;
    height: 96px;
    object-fit: cover;
    border: 1px solid var(--rule);
}

.thumbsLink:hover .thumbsImage,
.thumbsLink:focus-visible .thumbsImage { border-color: var(--accent); }


/* Prices, attributes, services, reviews. */
.facts { margin: 0 0 1.4rem; }

.factsList {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1.2rem;
}

.factsList dt { color: var(--ink-soft); }
.factsList dd { margin: 0; }

.factsTags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.factsTags li {
    border: 1px solid var(--rule-firm);
    padding: 0.15rem 0.6rem;
    font-size: 0.9rem;
}

.review {
    margin: 0 0 0.8rem;
    padding: 0.6rem 0 0.6rem 1rem;
    border-left: 3px solid var(--accent-wash);
    color: var(--ink-soft);
}

.bio { color: var(--ink-soft); }

.contact { margin: 1.6rem 0; }

.contactTeaser {
    margin: 0 0 0.6rem;
    font-size: 1.05rem;
}

.contactActions {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

/* Square, like everything else here: `radius: sharp`. */
.button {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    text-decoration: none;
    padding: 0.55rem 1.2rem;
    font-weight: 700;
}

.button:hover { background: var(--accent-deep); color: #fff; }

/* The crossing page. Photograph beside the words, not under them. */
.leaving {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
    flex-wrap: wrap;
    margin: 1.6rem 0;
}

.leavingPhoto {
    flex: none;
    width: 150px;
    height: 200px;
    object-fit: cover;
    border: 1px solid var(--rule-firm);
}

.leavingBody { min-width: 0; flex: 1 1 16rem; }

.leavingTitles { margin: 0 0 0.6rem; }

.leavingHead {
    margin: 0;
    font-size: 1.5rem;
}

.leavingSub {
    margin: 0.15rem 0 0;
    color: var(--ink-soft);
}

.leavingWhat { margin: 0 0 0.6rem; }

.leavingWarn {
    margin: 0 0 1rem;
    color: var(--ink-soft);
    font-size: 0.95rem;
}

.leavingGo { margin: 0 0 0.6rem; }

.leavingAge {
    margin: 0;
    font-size: 0.9rem;
    color: var(--ink-faint);
}

.footer {
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule-firm);
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 0.9rem;
}

.footerLink { color: var(--accent-deep); }

.footerNote { color: var(--ink-faint); }

/* Four neighbouring cards at the foot of the page. A row rather than a grid: four is few
   enough to sit on one line at any width worth designing for, and wrapping is all the
   handling the narrow case needs. */
.alsoRow {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin: 0 0 1.6rem;
    padding: 0;
}

.alsoItem { flex: 0 1 8rem; min-width: 0; }

.alsoLink {
    display: block;
    text-decoration: none;
    color: inherit;
}

.alsoShot {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border: 1px solid var(--rule-firm);
}

/* The name is data, so it is trimmed rather than allowed to widen its neighbour. */
.alsoWho {
    display: block;
    margin-top: 0.3rem;
    font-size: 0.85rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alsoLink:hover .alsoWho { text-decoration: underline; }

/* Im Block „Weitere Inserate“ steht das Schild unter dem Namen, nicht dahinter: `.alsoWho`
   beschneidet die Zeile auf 8rem mit Auslassungspunkten, und dort verschwand es bei jedem
   Namen (gemessen am 17.09.2026). Eigene Zeile, also kein linker Abstand. */
.alsoLink .runReel { margin-left: 0; margin-top: 0.25rem; }

/* The photograph while the next one is on its way. It comes through PHP from object
   storage — over a second on a cold file, measured — and the one being replaced stays
   put the whole time, so a click with no sign of life reads as a click that missed.
   The picture goes pale and the cursor says wait; nothing is added to the page, so
   nothing moves and no layout shifts. */
.stageImage[aria-busy] { opacity: 0.38; cursor: wait; transition: opacity 0.1s ease; }

/* Takes the slack under the footer it holds. */
.sheet { flex: 1 0 auto; display: flex; flex-direction: column; }
.sheet > main { flex: 1 0 auto; }

/* Der Rahmen tritt an die Stelle des Fotos: dieselbe Breite, dasselbe Verhältnis, damit
   die Seite beim Wechsel nicht springt — er ist ein Standbild, kein Abspieler, also darf
   er wie ein Foto beschnitten werden. Das eigene Seitenverhältnis bekommt der Film erst
   im `#filmStage`-Player, der über der Seite öffnet. */
.stageFilm {
    position: relative;
    display: block;
    width: var(--shot);
    max-width: 100%;
    aspect-ratio: 3 / 4;
    border: 1px solid var(--rule-firm);
    background: #17151a;
}

.stageFilmPoster {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.stageFilmPoster[hidden] { display: none; }

/* Ersatzfläche ohne Standbild — in den Farben der Seite, kein leeres Grau. */
.stageFilmBlank {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #2a2530, #17151a);
}

.stageFilmBlank[hidden] { display: none; }

/* Großes Zeichen aus Rändern, mittig über dem Rahmen — kein Schriftzeichen, das sieht
   je nach System anders aus. Die Plakette bleibt eckig: `radius: sharp` gilt für die
   ganze Seite, kein Kreis irgendwo (`.thumbsFilm`, `.pagerNum`, `.button`), und ein
   rundes Abzeichen hier wäre die einzige Ausnahme davon. */
.stageFilmSign {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3.6rem;
    height: 3.6rem;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.stageFilmSign::after {
    content: "";
    margin-left: 0.3rem;
    border-style: solid;
    border-width: 0.8rem 0 0.8rem 1.3rem;
    border-color: transparent transparent transparent #fff;
}

.stageFilm:hover .stageFilmSign,
.stageFilm:focus-visible .stageFilmSign { background: rgba(0, 0, 0, 0.78); }

/* `display` schlägt das Attribut `hidden`; ohne diese Zeile stünde der leere Rahmen
   immer im Bild, unter dem Foto. */
.stageFilm[hidden] { display: none; }
.stageImage[hidden] { display: none; }

/* ---- der Film-Player über der Seite ---- */

.filmStage {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
}

.filmStage[hidden] { display: none; }

.filmStageBackdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgba(10, 8, 9, 0.9);
    cursor: pointer;
}

.filmStageBox {
    position: relative;
    z-index: 1;
    display: flex;
    max-width: 92vw;
    max-height: 88vh;
}

.filmStagePlayer {
    display: block;
    max-width: 92vw;
    max-height: 88vh;
    background: #000;
}

.filmStageShut {
    position: absolute;
    top: -2.6rem;
    right: 0;
    width: 2.2rem;
    height: 2.2rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.filmStageShut:hover { background: rgba(0, 0, 0, 0.85); }

/* Die Filmminiatur: dieselbe Kachel wie beim Foto, mit Zeichen darauf. Die Maße stehen
   auf dem LINK, weil ein Film ohne Standbild kein Bild hat und die Kachel sonst auf null
   zusammenfiele — also gerade dort, wo das Zeichen das Einzige ist, was sie erklärt. */
.thumbsFilm {
    position: relative;
    width: 72px;
    height: 96px;
    border: 1px solid var(--rule);
    background: #17151a;
}

/* Ein Dreieck aus Rändern, kein Schriftzeichen: das sieht je nach System anders aus, auf
   einem davon ist es ein leeres Kästchen. */
.thumbsFilm::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-42%, -50%);
    border-style: solid;
    border-width: 7px 0 7px 12px;
    border-color: transparent transparent transparent #fff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
    pointer-events: none;
}