/* Block «hero» — loaded only when a hero block is on the page. Eleven types:
   hero--centered, hero--panel (dark), hero--split, hero--backdrop (image as
   background), hero--angled, hero--flush (image to the edge), hero--cover (dark
   full-bleed image), hero--inset (text card on a rounded image), hero--band (one
   big line, panorama underneath), hero--stage (full-bleed image, title left,
   the rest right), hero--slim (a slim dark band without an image). All through
   fixed classes — no inline style (CSP).

   The one block stylesheet that asks the VIEWPORT: neither `columns` nor
   `section` admits a hero, so it always spans the page and `@media` is the
   right question. The day a container admits it, its breakpoints become
   `@container` rules like every other block's (columns.css).

   ⚠️ A dark type's palette is a REMAPPING of the semantic tokens (--ink /
   --muted / --border) in one place below, never a rule per child element —
   the same pattern `.sec--dark` uses in section.css. */

/* -- Basis (alle Typen) -------------------------------------------------- */
/* This block has no own colour token any more. It used to carry --hero-accent,
 * for a reason that turned out to be general rather than the hero's: --accent
 * must not be remapped on a dark ground because .btn-primary reads it as a
 * FILL, while an icon, a checkmark or a hairline needs it light. That split is
 * --accent-fg in site.css now, so `.sec--dark` can do the same for the
 * arbitrary blocks it wraps instead of every dark variant inventing its own
 * name for one idea. */
.block-hero {
    position: relative; overflow: hidden; padding: var(--size-9) var(--size-6);
}
.block-hero :is(h1, h2) { font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.08;
    letter-spacing: -0.02em; margin: 0 0 var(--size-4); }
.hero-text { font-size: 1.15rem; line-height: 1.6; color: var(--muted);
    margin: 0 0 var(--size-6); max-width: 60ch; }
.hero-text:last-child { margin-bottom: 0; }

/* Announcement line: a square blueprint chip with a hairline. */
.hero-kicker { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .45rem;
    margin: 0 0 var(--size-6); padding: .3rem .9rem; font-size: .9rem;
    color: var(--muted); border: 1px solid var(--border); }
.hero-kicker a { color: var(--accent-fg); font-weight: var(--font-weight-6); text-decoration: none; }
.hero-kicker a:hover, .hero-kicker a:focus-visible { text-decoration: underline; }

/* Bullet points: a checkmark list between text and buttons. */
.hero-bullets { list-style: none; margin: 0 0 var(--size-6); padding: 0;
    display: grid; gap: var(--size-2); }
.hero-bullets li { display: flex; align-items: flex-start; gap: .55rem; line-height: 1.5; }
.hero-bullet-icon { flex: none; color: var(--accent-fg); margin-top: .2em; }
.hero--centered .hero-bullets { justify-content: center; justify-items: start; width: fit-content; margin-inline: auto; }

/* Actions: a filled primary button plus a plain secondary link. */
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--size-5); }
.hero-link { color: var(--ink); font-weight: var(--font-weight-6); text-decoration: none; }
.hero-link:hover, .hero-link:focus-visible { text-decoration: underline; }

/* Bild-Spalte (Typ 2/3/5) */
.hero-media { min-width: 0; }
.hero-media img { display: block; width: 100%; height: auto; }

/* -- Typ 1: Zentriert ---------------------------------------------------- */
.hero--centered { text-align: center; }
.hero--centered .hero-content { max-width: 48rem; margin-inline: auto; }
.hero--centered .hero-text { margin-inline: auto; }
.hero--centered .hero-actions { justify-content: center; }

/* -- Zweispaltige Typen (2/3/5): Inhalt links, Bild rechts --------------- */
@media (min-width: 800px) {
    .hero--panel .hero-inner, .hero--split .hero-inner, .hero--angled .hero-inner {
        display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: var(--size-8); align-items: center; }
}
@media (max-width: 799px) {
    .hero--panel .hero-media, .hero--split .hero-media, .hero--angled .hero-media {
        margin-top: var(--size-7); }
}

/* -- Dunkle Typen (2/4/7/10/11): helle Schrift auf dunklem Grund ---------- */
/* The palette stands ONCE and every rule below it — a new one included — reads
 * it through --ink / --muted / --border without naming its children.
 *
 * ⚠️ Naming the children WAS the previous state, and it broke exactly there:
 * `cover` had three rules (contact line, checkmark, lighter kicker) that
 * `panel` and `backdrop` never got. On --gray-12 the contact line stood at
 * 2.50:1 instead of 4.5:1, and the checkmark under the «Graphit» accent at
 * 1.32:1 — both render, they are only too dark to read.
 *
 * Measured against --gray-12: --gray-5 = 9.84:1, white = 20.42:1. The hairline
 * is deliberately not a step of the grey scale; --gray-9 comes to 1.32:1 — an
 * edge that is in the markup and not on the screen. `.sec--dark` used to use it
 * for exactly that and now shares this value.
 *
 * ⚠️ --surface is remapped although no dark hero type reads it TODAY. That is
 * the point: it is the token a variant leaves out because its own children do
 * not happen to use one, and the day a card, an input or a panel appears here
 * it would be --gray-2 under a white --ink — 1.19:1. Held by
 * `SectionDarkPaletteTest`, which counts the palette rather than the uses. */
.hero--panel, .hero--backdrop, .hero--cover, .hero--stage, .hero--slim {
    background: var(--gray-12);
    color: var(--ink);
    --ink: #fff;
    --muted: var(--gray-5);
    --border: rgba(255, 255, 255, .55);
    --surface: var(--gray-11);
    --accent-fg: #fff;
    --err-fg: var(--red-1);
}

/* -- Typ 2: Dunkel, Bild rechts ------------------------------------------ */
/* ⚠️ The one per-child colour rule left on a dark ground, and it is the
 * exception the convention allows: this hairline sits against the PHOTO, not
 * against the block's background. The remapped --border — translucent white —
 * would disappear into a bright image and glow against the dark ground around
 * it, which is a halo rather than a frame. Non-text, so 1.4.11 does not ask a
 * ratio of it. */
.hero--panel .hero-media img { border: 1px solid var(--gray-9); box-shadow: var(--shadow-4); }

/* -- Typ 3: Hell, Bild rechts -------------------------------------------- */
.hero--split .hero-media img { border: 1px solid var(--border); }

/* -- Typ 4: Bild als Hintergrund ----------------------------------------- */
.hero--backdrop { padding-top: var(--size-11); padding-bottom: var(--size-11); text-align: center; }
.hero--backdrop .hero-content { position: relative; z-index: 1; max-width: 48rem; margin-inline: auto; }
.hero--backdrop .hero-text { margin-inline: auto; }
.hero--backdrop .hero-actions { justify-content: center; }
.hero-backdrop { position: absolute; inset: 0; }
.hero-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: var(--focal-x, 50%) var(--focal-y, 50%); }
/* The shade text stands on where it stands on a photo — this type's overlay,
 * and the shade type 10's content carries along below. ONE value, measured over
 * a white photo, the brightest one there is (DarkVariantContrastTest). */
.block-hero { --hero-shade: rgba(13, 18, 28, .82); }
.hero-backdrop::after { content: ""; position: absolute; inset: 0; background: var(--hero-shade); }

/* -- Type 5: image on the right, cut at an angle -------------------------- */
.hero--angled { padding: 0; }
.hero--angled .hero-inner { gap: 0; }
.hero--angled .hero-content { padding: var(--size-9) var(--size-6); }
.hero--angled .hero-media { align-self: stretch; }
.hero--angled .hero-media img { height: 100%; object-fit: cover; object-position: var(--focal-x, 50%) var(--focal-y, 50%); }
@media (min-width: 800px) {
    .hero--angled .hero-media { clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
}

/* -- Gemeinsames der Typen 6–9 -------------------------------------------- */
/* Zwei gleichwertige Buttons statt Button plus Textlink. Der zweite ist der
 * umrandete: `color` steht in Grund- UND Hover-Regel, sonst erbt der Hover die
 * Farbe des Grundes und der Kontrast fällt unbemerkt (ButtonHoverContrastTest). */
.hero-cta2 { background: transparent; color: var(--ink); border-color: var(--border); }
.hero-cta2:hover, .hero-cta2:focus-visible { color: var(--ink); border-color: var(--ink); }
/* Kontaktzeile unter den Buttons — Nummer und Öffnungszeiten in einem Satz. */
.hero-contact { margin: var(--size-5) 0 0; font-size: .95rem; color: var(--muted); }
.hero-contact:first-child { margin-top: 0; }

/* -- Typ 6: Bild randlos rechts ------------------------------------------- */
/* Der Inhalt behält seine Ränder, das Bild läuft bis an die Kante und über die
 * volle Höhe — deshalb sitzt das Innenmass am Inhalt statt am Block. */
.hero--flush { padding: 0; }
.hero--flush .hero-content { padding: var(--size-9) var(--size-6); }
.hero--flush .hero-media { align-self: stretch; }
.hero--flush .hero-media img { height: 100%; object-fit: cover; object-position: var(--focal-x, 50%) var(--focal-y, 50%); }
/* Die Ankündigung ist hier eine Zeile, kein Chip: Versalien in der Akzentfarbe. */
.hero--flush .hero-kicker {
    border: 0; padding: 0; color: var(--accent-fg);
    font-weight: var(--font-weight-7); font-size: .8rem;
    letter-spacing: .12em; text-transform: uppercase;
}
@media (min-width: 800px) {
    .hero--flush .hero-inner {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 0; align-items: stretch; }
    .hero--flush .hero-content { align-self: center; padding-block: var(--size-10); }
}

/* -- Typ 7: Dunkles Vollbild mit Badge ------------------------------------ */
/* The dark palette sits with types 2 and 4 above; what stays here is what only
 * this type is: the larger inset, the narrower text column and the kicker as an
 * all-caps badge. Its being lighter than the body text is deliberate — hence
 * --ink and not --muted. */
.hero--cover { padding-block: var(--size-11); }
.hero--cover .hero-content { position: relative; z-index: 1; max-width: 46rem; }
.hero--cover .hero-kicker, .hero--slim .hero-kicker {
    color: var(--ink);
    font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
}

/* -- Typ 8: Textkarte auf gerundetem Bild --------------------------------- */
/* Das Bild ist die Fläche, der Text steht auf einer Karte darüber. Auf schmalen
 * Schirmen fällt die Überlagerung weg: Bild oben, Text darunter — sonst müsste
 * die Karte den Text über dem Bild lesbar halten, und genau das geht bei 375px
 * nicht mehr auf. */
.hero--inset { padding: var(--size-6); }
.hero--inset .hero-backdrop { position: absolute; inset: var(--size-6); border-radius: var(--radius-3); overflow: hidden; }
.hero--inset .hero-backdrop::after { background: rgba(20, 30, 24, .12); }
.hero--inset .hero-content {
    position: relative; z-index: 1; max-width: 46rem;
    background: var(--surface); border-radius: var(--radius-3);
    padding: var(--size-8);
}
/* Runde Buttons — die Form gehört zum Typ, nicht zum Design-Kit. */
.hero--inset .hero-actions .btn { border-radius: 999px; }
@media (min-width: 800px) {
    .hero--inset { padding: var(--size-9) var(--size-8); }
    .hero--inset .hero-backdrop { inset: var(--size-6); }
    .hero--inset .hero-content { margin: var(--size-8) 0 var(--size-8) var(--size-6); }
}
@media (max-width: 799px) {
    /* Kein Übereinander mehr: das Bild bekommt eine eigene Höhe, die Karte
     * schliesst unten an.
     *
     * ⚠️ `relative`, nicht `static`. Das Overlay des Bildes ist ein
     * `::after` mit `inset: 0` — ohne positionierten Bezug greift es auf den
     * nächsten positionierten Vorfahren durch, und das ist `.block-hero`. Der
     * Schleier lag dann über dem GANZEN Block statt über dem Bild: sichtbar als
     * grauer Kasten hinter Text und Buttons, ohne dass eine Regel danach
     * aussieht. */
    .hero--inset { padding: 0; }
    .hero--inset .hero-backdrop { position: relative; inset: auto; block-size: 15rem; margin: var(--size-4) var(--size-4) 0; }
    .hero--inset .hero-backdrop img { block-size: 100%; }
    .hero--inset .hero-content { background: none; padding: var(--size-6) var(--size-4) var(--size-8); }
}

/* -- Typ 9: Grosse Zeile, Bildband unten ---------------------------------- */
/* Die Überschrift nimmt die ganze Breite, darunter stehen Text und Buttons
 * nebeneinander, und das Bild schliesst als breites Band ab. */
.hero--band { padding: var(--size-9) 0 0; }
.hero--band .hero-content { padding-inline: var(--size-6); }
.hero--band :is(h1, h2) { font-size: clamp(2.4rem, 7vw, 4.6rem); }
.hero--band .hero-media { margin-top: var(--size-8); }
.hero--band .hero-media img { aspect-ratio: 16 / 4; object-fit: cover; object-position: var(--focal-x, 50%) var(--focal-y, 50%); }
@media (min-width: 800px) {
    /* Kicker and heading run across both columns; text and bullets stand on the
     * left, the buttons beside both, on the line of the last one.
     *
     * Named areas, not auto-placement: the bullets follow the text in the
     * markup (the reading order), so placed in turn they took a row of their
     * own and pushed the buttons into the next one. A piece left empty leaves
     * its row at zero height — there is no row gap. The buttons' column takes
     * at most 40 %: on a narrow grid they wrap rather than squeeze the text. */
    .hero--band .hero-content {
        display: grid; grid-template-columns: minmax(0, 1fr) fit-content(40%);
        grid-template-areas: "kicker kicker" "heading heading" "text actions" "bullets actions" "contact contact" "proof proof";
        column-gap: var(--size-8); }
    .hero--band .hero-kicker { grid-area: kicker; }
    .hero--band :is(h1, h2) { grid-area: heading; }
    .hero--band .hero-text { grid-area: text; margin-bottom: 0; }
    .hero--band .hero-bullets { grid-area: bullets; margin-bottom: 0; }
    .hero--band .hero-text + .hero-bullets { margin-top: var(--size-5); }
    .hero--band .hero-actions { grid-area: actions; align-self: end; justify-content: flex-end; }
    .hero--band .hero-contact { grid-area: contact; }
    .hero--band .hero-proof { grid-area: proof; }
    /* A grid item stretches over its track; the kicker stays the pill it is in
     * every other type instead of a frame across the whole width. */
    .hero--band .hero-kicker { justify-self: start; }
}
@media (max-width: 799px) {
    .hero--band .hero-media { margin-top: var(--size-7); }
    .hero--band .hero-media img { aspect-ratio: 4 / 3; }
}

/* -- Typ 10: Vollbild, Titel links ----------------------------------------- */
/* The image fills the band, the title stands at the bottom left and text,
 * buttons and proof line to its right; below 800px they stack. The shade runs
 * from the bottom, where the text is, towards the top, where the picture may
 * show — at the text it is the palette's ground, near --gray-12. */
.hero--stage { display: flex; align-items: flex-end; min-height: clamp(28rem, 72vh, 40rem);
    padding-block: var(--size-10) var(--size-8); }
.hero--stage .hero-inner { position: relative; z-index: 1; width: 100%; }
.hero--stage .hero-backdrop::after {
    background: linear-gradient(to top, rgba(13, 18, 28, .9) 0%, rgba(13, 18, 28, .78) 50%, rgba(13, 18, 28, .4) 100%); }
/* The text's own shade. The gradient above lets the photo show towards the
 * top, but the content grows upwards with every line an editor adds, and a line
 * that reaches the bright part of a photo is unreadable — the kicker measured
 * 1.2:1 on a white façade. So the content carries `--hero-shade` along: faded
 * in just above its first line, full from there down and leftwards to the
 * band's edges (the block clips it), fading out to the right only past the
 * content's own edge. What stands beside or above the content keeps the photo. */
.hero--stage .hero-content { position: relative; isolation: isolate; }
.hero--stage .hero-content::before {
    content: ""; position: absolute; z-index: -1; pointer-events: none;
    inset: calc(-1 * var(--size-8)) calc(-1 * var(--size-11)) -100vh -100vw;
    background: linear-gradient(to bottom, transparent, var(--hero-shade) var(--size-8));
    mask-image: linear-gradient(to left, transparent, #000 var(--size-11)); }
.hero--stage .hero-lead > :last-child { margin-bottom: 0; }
.hero--stage .hero-aside .hero-text { color: var(--ink); max-width: 40rem; }
@media (min-width: 800px) {
    .hero--stage .hero-content {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: var(--size-8); align-items: end; }
    .hero--stage .hero-lead :is(h1, h2) { font-size: clamp(2.4rem, 5vw, 3.8rem); }
}
@media (max-width: 799px) {
    .hero--stage .hero-aside { margin-top: var(--size-5); }
}

/* -- Typ 11: Schmales Band ohne Bild --------------------------------------- */
/* Galleries and legal pages: the kicker and the title on a dark band, no
 * image. The palette is the dark types' above. */
.hero--slim { padding-block: var(--size-8); }
.hero--slim .hero-content { max-width: 48rem; }
.hero--slim :is(h1, h2) { font-size: clamp(1.9rem, 4vw, 2.9rem); margin-bottom: var(--size-2); }
.hero--slim .hero-content > :last-child { margin-bottom: 0; }

/* -- Belegzeile (alle Typen) ----------------------------------------------- */
/* Company · «seit» founding year, then the Google rating (part «rating»). The
 * figures come from the contact info; nothing maintained → no line. */
.hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: var(--size-2) var(--size-5);
    margin: var(--size-5) 0 0; font-size: .9rem; color: var(--muted); }
.hero-proof:first-child { margin-top: 0; }
.hero--centered .hero-proof, .hero--backdrop .hero-proof { justify-content: center; }
.hero-proof .rating { color: var(--ink); }

/* -- Schmale Schirme: die Buttons der Typen 6–11 tragen die Zeile ---------- */
@media (max-width: 599px) {
    .hero--flush .hero-actions,
    .hero--cover .hero-actions,
    .hero--inset .hero-actions,
    .hero--band .hero-actions,
    .hero--stage .hero-actions,
    .hero--slim .hero-actions { display: grid; gap: var(--size-3); }
    .hero--flush .hero-actions .btn,
    .hero--cover .hero-actions .btn,
    .hero--inset .hero-actions .btn,
    .hero--band .hero-actions .btn,
    .hero--stage .hero-actions .btn,
    .hero--slim .hero-actions .btn { inline-size: 100%; padding-block: var(--size-3); }
}