) without changing its rendered size.
NOTE on height: deliberately NOT height:100% by default. Several of the
wrapped images sit directly inside a CSS Grid item (article.service-card,
the "Städte" article cards, the services icon cards) whose grid row uses
the default align-items:stretch. A stretched grid item has a *definite*
height for percentage resolution even without its own `height` property —
so a naive height:100% on a direct child there resolves against the whole
stretched card, not the image, and the wrapper balloons to fill the card,
pushing/clipping the heading and text below it via the card's
overflow:hidden. width:100% has no such trap (block width always resolves
against the containing block), so it stays on the shared base rule. */
.ai-img-wrap {
display: block;
position: relative;
width: 100%;
}
/* The one place a definite height *is* needed: .service-media crops photos
to a fixed 16:10 box via aspect-ratio, and its ![]()
is height:100% to
fill that box. Without a definite height on this wrapper, the img's
height:100% would resolve against "auto" (percentage-of-auto-height
parent = auto) and fall back to the image's native aspect ratio, breaking
the crop. Scoping height:100% to this one parent — rather than putting it
on the shared .ai-img-wrap rule — keeps every other placement (grid cards,
hero images) safely on auto and immune to the grid-stretch trap above. */
.service-media > .ai-img-wrap {
height: 100%;
}
/* Same reasoning, different container: event.html's hero photo (.hero-img)
uses Tailwind's h-full (height:100%) on the ![]()
itself instead of an
aspect-ratio box, deriving its actual height from being a stretched CSS
Grid item (section.grid.items-stretch, matched to the text column's
height). See .hero-img-col below for why .hero-img itself is no longer
the direct grid item on this page, and why it still resolves to the same
height regardless. */
.hero-img > .ai-img-wrap {
height: 100%;
}
/* event.html only: the AI-disclosure caption sits below the hero photo, in
its own grid cell, not overlaid on it. A plain sibling after
.hero-img would auto-place into the wrong grid cell (row 2 under the
text column, since the grid is only 2 columns wide) instead of under the
photo. This wrapper takes over .hero-img's former role as the direct
grid item (so it still receives the stretched height from
items-stretch), and lays its two children out as a column: the photo
flexing to fill the available height, the caption keeping its own
natural height below it — the same split .service-card already uses
elsewhere for .service-media / .service-body, applied to this one hero. */
.hero-img-col {
display: flex;
flex-direction: column;
}
.hero-img-col > .hero-img {
flex: 1 1 auto;
min-height: 0;
}
/* Plain in-flow text, not an overlay: read by screen readers like any other
paragraph (no aria-hidden). Matches the muted, small-print voice
.ticket-seats-note already uses elsewhere on this same page. */
.ai-caption {
margin: .6rem 0 0;
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
font-size: 12px;
line-height: 1.5;
color: rgba(15, 23, 42, .56);
text-align: center;
}
@media (max-width: 640px) {
.ai-caption {
font-size: 11px;
}
}
/* No rectangular plate — a soft radial pool of shadow sits under the text
itself (an ellipse fading to fully transparent), so there is no visible
edge or box on any photo, however busy. padding:6px 14px is NOT
decorative spacing — it is the runway the gradient needs to fade to 0%
before the box edge; shrinking it reintroduces a visible hard edge. */
.ai-badge {
position: absolute;
right: 4px;
bottom: 4px;
z-index: 5;
max-width: calc(100% - 8px);
padding: 6px 14px;
background: radial-gradient(
ellipse at center,
rgba(0, 0, 0, .55) 0%,
rgba(0, 0, 0, .38) 45%,
rgba(0, 0, 0, .12) 72%,
rgba(0, 0, 0, 0) 100%
);
border-radius: 0;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
color: rgba(255, 255, 255, .92);
font-family: "Cormorant SC", serif;
font-size: 10px;
font-weight: 500;
line-height: 1.3;
letter-spacing: .06em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
/* Grids of 3+ photos side by side: same radial pool, only the text opacity
drops slightly. The pool itself is not softened further here —
readability wins over quiet. */
.ai-badge--subtle {
color: rgba(255, 255, 255, .85);
}
@media (max-width: 640px) {
.ai-badge {
right: 2px;
bottom: 2px;
padding: 5px 11px;
font-size: 9px;
}
}
/* --------------------------------------------------------------------------
Special case: homepage full-bleed hero (.vh-hero-img).
That image is position:absolute;inset:0 filling .vh-hero-media, with a
tablet-width transform:scale(.96) override — wrapping it would break the
full-bleed fill. Instead the badge is placed as a plain sibling inside
section.vh-hero (already position:relative), *not* inside .vh-hero-media
or the /![]()
— so the tablet scale(.96) never applies to it,
at any width. z-index is pinned below .vh-hero-inner (2) so it never
sits on top of the headline/CTA, but above the scrim (1). The radial
pool needs no separate handling here — it is symmetric, so it reads the
same in the top-right corner (mobile) as the bottom-right (desktop).
Below 768px hero-home.css switches .vh-hero-text to a full-width stacked
column with no max-width, and .vh-hero-cta becomes a full-width button
pinned to the bottom of the section via an auto-margin push — exactly
where a bottom-right badge would land. (This 768px cutoff is
hero-home.css's own mobile breakpoint, not the 640px used for the
badge's own font-size step above — using 640px here would leave a
collision in the 641-767px gap, where the stacked/full-width mobile
layout is already active.) Moved to the top-right corner instead, in the
hero's darker upper scrim band, clear of the logo/text column and the
CTA at any width from 0-767px.
-------------------------------------------------------------------------- */
.vh-hero > .ai-badge {
z-index: 1;
}
@media (max-width: 767px) {
.vh-hero > .ai-badge {
top: 10px;
right: 10px;
bottom: auto;
}
}
@media (max-width: 640px) {
.vh-hero > .ai-badge {
top: 8px;
right: 8px;
}
}