/* =============================================================================
   pankow-schloss-bernhardt.de — the shared design LANGUAGE (every page links it unedited)
   Style: kino-landmark (a cinematic dark photo hero, a floating tonal feature band, a dark photo
   gallery, generous frames) — re-themed for Schlüsseldienst Pankow (Berlin):
   BOTTLE GREEN #1c4430 brand (Bürgerpark, Panke — sober, trustworthy) · green-black cinema grounds ·
   warm paper #f6f3ec + pale sage #e8efea light grounds · the favicon's Messing, brightened to a
   brass-gold #ddb64c, as the PHONE FILL and nothing else · DIN-style signage type (Bahnschrift) for
   headings, numbers and labels · the recurring motif is the CINEMA TICKET: notched ends, dashed
   perforations, tear-off stubs (feature ticket, call ticket, Bauzeiten, the Kasse, the call button).

   THE BRASS RULE: --cta (#ddb64c) is the phone FILL. As text it is 1.93:1 on white — it never
   carries a word or an icon on a light ground. The label ON the fill is --on-cta (#141008,
   9.82:1; 7.87 pressed), never white, never dimmed. Brass WORDS/ICONS on dark or green grounds
   are --cta-light (#e8ce86, ≥ 4.87:1); the only brass on a light ground is --cta-ink (#7a5e14,
   bronze, ≥ 4.95:1) as a tiny accent. Measured with tools/wcag.php — see DESIGN-LANGUAGE.md.

   INK IS CONTEXTUAL. Components never name a text/rule/ring colour; they use the --c-* context
   tokens. Every ground that paints itself sets the whole --c-* set (+ color) in ONE of the lists
   in §2: LIGHT, DARK, GREEN, DANGER. A new primitive with its own fill joins exactly one list.
   Per-page <style> is LAYOUT ONLY: never a new colour, font, radius, shadow or motion value.
   ========================================================================== */

/* ── 1 · tokens ─────────────────────────────────────────────────────────── */
:root{
  /* light grounds — theme.json presets are the source, the literal is only a fallback */
  --surface:var(--wp--preset--color--surface,#ffffff);
  --soft:var(--wp--preset--color--soft,#f6f3ec);           /* warm paper (+ the ticket paper) */
  --tint:var(--wp--preset--color--tint,#e8efea);           /* pale sage */
  --brand-soft:var(--wp--preset--color--brand-soft,#dfeae3);
  --danger-tint:var(--wp--preset--color--danger-tint,#fcebea);
  /* bottle green + its tonal shift (deep → brand → lighter green; never teal, never to brass) */
  --brand:var(--wp--preset--color--brand,#1c4430);
  --brand-deep:var(--wp--preset--color--brand-deep,#10291d);
  --brand-grad-b:var(--wp--preset--color--brand-grad-b,#2c5e45);
  --grad:linear-gradient(115deg,var(--brand-deep) 0%,var(--brand) 52%,var(--brand-grad-b) 100%);
  /* cinema grounds — near-black with a faint green cast */
  --dark:var(--wp--preset--color--dark,#0d1512);
  --dark-2:var(--wp--preset--color--dark-2,#16211c);
  --dark-deep:var(--wp--preset--color--dark-deep,#070c0a);
  /* ink */
  --head:var(--wp--preset--color--head,#0f1e17);
  --text:var(--wp--preset--color--text,#1f2c26);
  --muted:var(--wp--preset--color--muted,#4c5a53);
  --dark-text:var(--wp--preset--color--dark-text,#d5ded9);
  --dark-muted:var(--wp--preset--color--dark-muted,#a3b2aa);
  --brand-muted:var(--wp--preset--color--brand-muted,#c8dacf);
  /* structure */
  --line:var(--wp--preset--color--line,#dce3de);
  --line-strong:var(--wp--preset--color--line-strong,#6b7a72);
  --line-dark:var(--wp--preset--color--line-dark,#26352e);
  --line-strong-dark:var(--wp--preset--color--line-strong-dark,#6e8178);
  /* the phone */
  --cta:var(--wp--preset--color--cta,#ddb64c);
  --cta-hover:var(--wp--preset--color--cta-hover,#c9a23c);
  --on-cta:var(--wp--preset--color--on-cta,#141008);
  --cta-light:var(--wp--preset--color--cta-light,#e8ce86);
  --cta-ink:var(--wp--preset--color--cta-ink,#7a5e14);
  /* state */
  --danger:var(--wp--preset--color--danger,#b3261e);
  --success:var(--wp--preset--color--success,#1b6b45);
  --focus:var(--wp--preset--color--focus,#0f1e17);
  /* the hero grade as an RGB triplet (#050c09) — alpha ≥ .70 wherever cinema text can sit */
  --scrim:5,12,9;
  /* geometry — ONE family: squarer frames than the reference, tickets notched */
  --r-xs:6px; --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px; --pill:999px;
  --notch:12px;
  /* ONE restrained shadow scale (green-black, never coloured, never a glow) */
  --sh-sm:0 1px 2px rgba(10,26,19,.08),0 3px 10px rgba(10,26,19,.05);
  --sh:0 12px 30px rgba(10,26,19,.14);
  --sh-lg:0 24px 56px rgba(4,12,8,.3);
  --drop:drop-shadow(0 16px 26px rgba(4,12,8,.3)) drop-shadow(0 2px 3px rgba(4,12,8,.2));
  --drop-light:drop-shadow(0 1px 1px rgba(10,26,19,.16)) drop-shadow(0 10px 22px rgba(10,26,19,.1));
  /* measure + space */
  --wrap:73.75rem; --wrap-wide:86rem; --prose:42rem;
  --gut:clamp(1rem,4vw,1.5rem);
  --sp-1:.5rem; --sp-2:.75rem; --sp-3:1rem; --sp-4:1.5rem; --sp-5:2.25rem;
  --sp-6:clamp(2.5rem,1.9rem + 2.6vw,4rem); --sp-7:clamp(3.5rem,2.6rem + 3.4vw,5.5rem);
  --tap:44px; --hdr-h:76px; --overlap:64px;
  /* motion — calm, one ease */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:.16s var(--ease); --t:.3s var(--ease);
  /* type: body = system UI sans; display = DIN-style signage (Windows Bahnschrift, iOS DIN,
     Android Roboto Condensed) for headings, numbers, labels and buttons — no font files */
  --f:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --f-disp:Bahnschrift,"DIN Alternate","DIN Next","Roboto Condensed","Arial Narrow",sans-serif;
}

/* ── 2 · ink contexts ───────────────────────────────────────────────────── */
/* LIGHT — the default, every light band, and every primitive with a LIGHT fill of its own
   (the header, its dropdowns and drawer, the footer, the paper tickets, the hero panel). */
:root,.ctx-light,.section--surface,.section--soft,.section--tint,
.hero--on-surface,.hero--on-soft,.hero--on-tint,.hero__panel,.notice--danger,
.site-header,.nav__drop,.drawer,.site-footer,.bz__body{
  --c-head:var(--head); --c-text:var(--text); --c-muted:var(--muted);
  --c-link:var(--brand); --c-link-hover:var(--head);
  --c-accent:var(--brand); --c-dot:var(--cta-ink); --c-tel-ic:var(--cta-ink);
  --c-eb-ink:var(--brand);
  --c-rule:var(--line); --c-rule-strong:var(--line-strong);
  --c-badge-bg:var(--brand-soft); --c-badge-ink:var(--brand);
  --c-card-bg:var(--surface); --c-card-line:var(--line); --c-soft-bg:var(--soft);
  --c-chip-bg:var(--surface); --c-flood:var(--soft);
  --c-top:var(--brand); --c-perf:rgba(15,30,23,.34);
  --c-num-bg:var(--brand); --c-num-ink:#fff;
  --c-orn:rgba(28,68,48,.055);
  --c-ring-in:#fff; --c-ring-out:var(--focus);
  color:var(--c-text);
}
/* DARK — every green-black ground: bands, cinema/marquee/warn heroes, the placard, the phone
   card, the gallery cards. */
.ctx-dark,.section--dark,.section--deep,.hero--on-dark,.hero--on-deep,.hero__placard,.phoneblock,
.pcard,.card--dark,.notice--dark{
  --c-head:#fff; --c-text:var(--dark-text); --c-muted:var(--dark-muted);
  --c-link:#fff; --c-link-hover:var(--cta-light);
  --c-accent:var(--cta-light); --c-dot:var(--cta-light); --c-tel-ic:var(--cta-light);
  --c-eb-ink:#fff;
  --c-rule:var(--line-dark); --c-rule-strong:var(--line-strong-dark);
  --c-badge-bg:rgba(255,255,255,.07); --c-badge-ink:var(--cta-light);
  --c-card-bg:var(--dark-2); --c-card-line:var(--line-dark); --c-soft-bg:var(--dark-2);
  --c-chip-bg:transparent; --c-flood:rgba(255,255,255,.06);
  --c-top:var(--brand-grad-b); --c-perf:rgba(255,255,255,.26);
  --c-num-bg:var(--brand); --c-num-ink:#fff;
  --c-orn:rgba(255,255,255,.04);
  --c-ring-in:var(--dark); --c-ring-out:var(--cta-light);
  color:var(--c-text);
}
/* GREEN — the tonal gradient objects and the green grounds (brand band, feature ticket, call
   ticket, the emphasised compare side, the footer call line + legal strip, the call bar, the
   Bauzeiten stubs, the street-sign line). Secondary text here is --brand-muted. */
.section--brand,.featurecard,.callrow,.compare__side--b,.foot__call,.foot__legal,.callbar,.bz__stub,.localine{
  --c-head:#fff; --c-text:#fff; --c-muted:var(--brand-muted);
  --c-link:#fff; --c-link-hover:var(--cta-light);
  --c-accent:var(--cta-light); --c-dot:var(--cta-light); --c-tel-ic:var(--cta-light);
  --c-eb-ink:#fff;
  --c-rule:rgba(255,255,255,.18); --c-rule-strong:var(--brand-muted);
  --c-badge-bg:rgba(0,0,0,.22); --c-badge-ink:var(--cta-light);
  --c-card-bg:rgba(255,255,255,.07); --c-card-line:rgba(255,255,255,.16); --c-soft-bg:rgba(255,255,255,.07);
  --c-chip-bg:transparent; --c-flood:rgba(255,255,255,.08);
  --c-top:var(--cta-light); --c-perf:rgba(255,255,255,.34);
  --c-num-bg:rgba(0,0,0,.22); --c-num-ink:var(--cta-light);
  --c-orn:rgba(255,255,255,.05);
  --c-ring-in:var(--brand-deep); --c-ring-out:var(--cta-light);
  color:var(--c-text);
}
/* DANGER fill (the warn band): white on --danger is 6.54:1. */
.warnbar{
  --c-head:#fff; --c-text:#fff; --c-muted:#fff; --c-link:#fff; --c-link-hover:#fff; --c-accent:#fff;
  --c-ring-in:var(--danger); --c-ring-out:#fff;
  background:var(--danger); color:#fff;
}
/* the danger notice keeps light ink but speaks in --danger */
.notice--danger{--c-head:var(--danger); --c-accent:var(--danger); --c-badge-bg:#f7d4d1; --c-badge-ink:var(--danger)}
/* the ground colour itself, for rings that "cut" a rail (step numerals, the pair join, rail dots) */
:root,.section--surface,.hero--on-surface{--c-ground:var(--surface)}
.section--soft,.hero--on-soft{--c-ground:var(--soft)}
.section--tint,.hero--on-tint{--c-ground:var(--tint)}
.section--dark,.hero--on-dark{--c-ground:var(--dark)}
.section--deep,.hero--on-deep{--c-ground:var(--dark-deep)}
.section--brand{--c-ground:var(--brand)}

/* ── 3 · base ───────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 1rem)}
body{
  margin:0;background:var(--surface);color:var(--c-text);
  font:400 1.125rem/1.62 var(--f);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-wrap:break-word;
  hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:10 4 4;
}
.wp-site-blocks{overflow-x:clip}
.wp-site-blocks>*{margin-block:0}
.site-main{display:block}
.site-main>*{margin-block:0}
img,video{max-width:100%;height:auto;display:block}
/* the icon net: an unsized inline SVG would swell to its container */
svg{width:1.25em;height:1.25em;flex:none}
svg.i{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.18em}
h1,h2,h3,h4{margin:0 0 .5em;color:var(--c-head);font-family:var(--f-disp);font-weight:700;line-height:1.1;letter-spacing:-.005em;overflow-wrap:break-word}
h1{font-size:clamp(2.4rem,1.4rem + 4vw,4.25rem);line-height:1.02}
h2{font-size:clamp(1.95rem,1.3rem + 2.4vw,2.9rem)}
h3{font-size:clamp(1.25rem,1.05rem + .6vw,1.45rem);line-height:1.2}
h4{font-size:1.15rem;line-height:1.3}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.25em}
li{margin:0 0 .35em}
:where(p,ul,ol,li):last-child{margin-bottom:0}
strong,b{font-weight:700;color:var(--c-head)}
a strong,a b{color:inherit}
small{font-size:.9375rem}
q{quotes:"„" "“" "‚" "‘"}
a{color:var(--c-link);text-decoration:underline;text-underline-offset:.16em;text-decoration-thickness:1px;
  transition:color var(--t-fast),text-decoration-color var(--t-fast)}
/* :where() keeps this at (0,0,1): a bare `a:hover` (0,1,1) would out-rank every .btn label */
a:where(:hover){color:var(--c-link-hover);text-decoration-thickness:2px}
hr{border:0;border-top:1px solid var(--c-rule);margin:var(--sp-5) 0}
::selection{background:var(--brand);color:#fff}

/* the dual focus ring: inner = the ground's own core, outer = its opposite — visible everywhere */
:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid transparent;outline-offset:2px;
  box-shadow:0 0 0 3px var(--c-ring-in),0 0 0 6px var(--c-ring-out);
}
.skip{position:absolute;left:.75rem;top:.5rem;z-index:300;padding:.75rem 1.2rem;background:var(--cta);
  color:var(--on-cta);font-weight:800;text-decoration:none;border-radius:var(--r-sm);
  clip-path:inset(50%);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.skip:focus{clip-path:none;width:auto;height:auto;overflow:visible;color:var(--on-cta)}

/* ── 4 · wrap, bands, seams, ornament ───────────────────────────────────── */
.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--gut));margin-inline:auto;padding-inline:var(--gut)}
.wrap--wide{max-width:calc(var(--wrap-wide) + 2 * var(--gut))}
.wrap--narrow{max-width:calc(52rem + 2 * var(--gut))}

.section{position:relative;padding-block:var(--sp-7)}
.section--surface{background:var(--surface)}
.section--soft{background:var(--soft)}
.section--tint{background:var(--tint)}
.section--dark{background:var(--dark)}
.section--deep{background:var(--dark-deep)}
.section--brand{background:linear-gradient(160deg,var(--brand-deep) 0%,var(--brand) 100%)}
.section--tight{padding-block:var(--sp-6)}
.section--flush{padding-block:0}
.section>.wrap>:last-child{margin-bottom:0}

/* the closing band: a tonal green glow in the corner (never brass) */
.section--closing{overflow:hidden}
.section--closing::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(70% 130% at 88% 0%,rgba(44,94,69,.5),transparent 62%)}
.section--closing>.wrap{position:relative;z-index:1}

/* seams: .seam-up on the FIRST child of a band pulls that object up across the edge above.
   pk_section detects it (.section--seamed: no top padding + flow-root, so the negative margin
   cannot collapse through and drag the colour edge along). Only objects with their OWN fill
   may cross (callrow, phoneblock, trust, notice). */
.section--seamed{padding-top:0;display:flow-root}
.section--seamed>.wrap{display:flow-root}
.seam-up{position:relative;z-index:3;margin-top:calc(-1 * var(--seam,56px));margin-bottom:var(--sp-6)}
.seam-up--lg{--seam:88px}
@media (max-width:700px){.seam-up{--seam:32px}}

/* the ornament: the favicon's keyhole as a large, low-contrast outline, clipped to its band */
.has-orn>.wrap{position:relative;z-index:1}
.orn{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.orn .orn__key{position:absolute;top:50%;width:min(38vw,440px);height:auto;aspect-ratio:1;color:var(--c-orn);transform:translateY(-50%)}
.orn--right .orn__key{right:-6%}
.orn--left .orn__key{left:-6%}
@media (max-width:1499px){.orn--left .orn__key{display:none}}   /* never under left-aligned copy */
@media (max-width:760px){.orn{display:none}}   /* on a phone every band is one column of copy: no ornament under text */

/* ── 5 · heads ──────────────────────────────────────────────────────────── */
/* the eyebrow: a signage label — a short bronze rule (light brass on dark), then DIN caps.
   The rule is the one brass accent a light ground gets. */
.eyebrow{display:flex;align-items:center;gap:.7rem;max-width:100%;margin:0 0 var(--sp-3);
  color:var(--c-eb-ink);font:700 .82rem/1.35 var(--f-disp);letter-spacing:.16em;text-transform:uppercase;hyphens:manual}
.eyebrow::before{content:"";flex:none;width:26px;height:3px;border-radius:2px;background:var(--c-dot)}
@media (max-width:420px){.eyebrow{letter-spacing:.1em}}

.stitle{font-family:var(--f-disp);font-size:clamp(1.95rem,1.3rem + 2.4vw,2.9rem);font-weight:700;line-height:1.06;letter-spacing:-.005em;
  color:var(--c-head);margin:0 0 var(--sp-3);max-width:24ch}
.stitle--wide{max-width:34ch}
.stitle--narrow{max-width:16ch}
.display{font-family:var(--f-disp);font-size:clamp(2.4rem,1.4rem + 4vw,4.25rem);font-weight:700;line-height:1.02;letter-spacing:-.01em;
  margin:0 0 var(--sp-3);max-width:17ch;color:var(--c-head);hyphens:manual;-webkit-hyphens:manual}
.display--long{font-size:clamp(2.1rem,1.3rem + 3.2vw,3.5rem);max-width:21ch}
.lead{font-size:clamp(1.125rem,1rem + .4vw,1.25rem);line-height:1.6;color:var(--c-muted);max-width:58ch}
.prose{max-width:var(--prose)}
.prose--narrow{max-width:36rem}
.prose>p{color:var(--c-text)}
.muted{color:var(--c-muted)}

.shead{margin-bottom:var(--sp-5)}
.shead>:last-child,.shead__t>:last-child{margin-bottom:0}
.shead__lead{margin-top:.35rem}
.shead--center{text-align:center}
.shead--center .eyebrow{justify-content:center}
.shead--center .eyebrow::after{content:"";flex:none;width:26px;height:3px;border-radius:2px;background:var(--c-dot)}
.shead--center .stitle,.shead--center .lead{margin-inline:auto}
.shead--aside{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:end;column-gap:var(--sp-6);row-gap:var(--sp-3)}
.shead__aside{margin:0;max-width:38ch;padding-left:1.1rem;border-left:3px solid var(--c-top);color:var(--c-muted);font-size:1rem}
@media (max-width:820px){.shead--aside{grid-template-columns:minmax(0,1fr)}}

/* ── 6 · buttons and the call treatments ────────────────────────────────── */
.btn{
  --btn-bg:var(--brand);--btn-ink:#fff;--btn-line:transparent;
  display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.2rem .7rem;max-width:100%;
  min-height:var(--tap);padding:.78rem 1.3rem;border:2px solid var(--btn-line);border-radius:var(--r-sm);
  background:var(--btn-bg);color:var(--btn-ink);font-family:var(--f-disp);font-size:1.08rem;font-weight:700;line-height:1.2;letter-spacing:.01em;
  text-align:center;text-decoration:none;cursor:pointer;hyphens:manual;-webkit-hyphens:manual;
  transition:background-color var(--t-fast),border-color var(--t-fast),color var(--t-fast),translate var(--t-fast);
}
.btn:hover{color:var(--btn-ink);translate:0 -2px}
.btn--ghost{--btn-bg:transparent;--btn-ink:var(--c-head);--btn-line:var(--c-rule-strong)}
.btn--ghost:hover{--btn-bg:var(--c-flood)}
.btn--lg{padding:.92rem 1.5rem;font-size:1.15rem}
.btn--block{width:100%}
/* THE call button: brass FILL, ink label 9.82:1 (7.87 pressed), a 1px bronze edge so the shape
   holds on paper, label and number parted by a dashed PERFORATION (the ticket motif). NO motion —
   no lift, no pulse; only the fill deepens on hover. */
.btn--call{--btn-bg:var(--cta);--btn-ink:var(--on-cta);box-shadow:inset 0 0 0 1px rgba(122,94,20,.5),var(--sh-sm)}
.btn--call:hover{--btn-bg:var(--cta-hover);translate:none}
.btn--xl{gap:.6rem;padding:.8rem 1.7rem .85rem;border-radius:var(--r);font-size:clamp(1.55rem,1.1rem + 1.6vw,2.2rem);letter-spacing:.005em}
.btn--xl .btn__ic{width:.95em;height:.95em}
.btn__ic{width:1.15em;height:1.15em}
.btn__g{display:inline-flex;align-items:center;gap:.55rem;min-width:0;max-width:100%}
.btn__l{min-width:0}
.btn__num{font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}
.btn--md .btn__g+.btn__num,.btn--lg .btn__g+.btn__num{padding-left:.7rem;border-left:2px dashed rgba(20,16,8,.42)}
/* on a phone the button may wrap label over number: no perforation then, and the hero call spans the column */
@media (max-width:480px){.btn__g+.btn__num{padding-left:0!important;border-left:0!important}
  .hero__cta .btn--call{width:100%}}

/* the phone number as display type */
.telbig{display:inline-flex;align-items:center;gap:.45rem;min-height:var(--tap);padding-block:.1rem;
  font-family:var(--f-disp);font-size:clamp(2rem,1.25rem + 3vw,3.5rem);font-weight:700;line-height:1.05;letter-spacing:0;
  font-variant-numeric:tabular-nums;color:var(--c-head);text-decoration:none;white-space:nowrap;hyphens:manual}
.telbig:hover{color:var(--c-head);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.12em}
.telbig__ic{width:.7em;height:.7em;color:var(--c-tel-ic)}
.telnote{display:block;margin:.35rem 0 0;font-size:.9375rem;color:var(--c-muted);max-width:40rem}

/* ── 7 · cards, badges, chips, plates ───────────────────────────────────── */
.cards{display:grid;gap:var(--sp-4)}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){.cards--3,.cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.cards--2,.cards--3,.cards--4{grid-template-columns:minmax(0,1fr)}}
/* a squarer frame with a hairline and a 3px green top rule */
.card{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:1.45rem 1.4rem 1.4rem;
  background:var(--c-card-bg);border:1px solid var(--c-card-line);border-top:3px solid var(--c-top);border-radius:var(--r);
  transition:translate var(--t),box-shadow var(--t),border-color var(--t)}
.card--card{box-shadow:var(--sh-sm)}
.card--soft{background:var(--c-soft-bg);border-color:transparent;border-top-color:var(--c-top)}
.section--soft .card--soft{background:var(--surface)}
.card--dark{background:var(--dark-2);border-color:var(--line-dark);border-top-color:var(--brand-grad-b)}
.cards--center .card{align-items:center;text-align:center}
.card__t{font-size:clamp(1.2rem,1.05rem + .45vw,1.38rem);margin:1rem 0 .4rem}
.card>.card__t:first-child{margin-top:0}
.card p{font-size:1rem;color:var(--c-muted);margin-bottom:.6rem}
.card>p:last-child{margin-bottom:0}
.card--media{padding-top:0;overflow:hidden}
.card .card__media{align-self:stretch;margin:0 -1.4rem .25rem;border-radius:0}
.card--media>.ibadge{margin-top:-1.9rem;position:relative;z-index:1;box-shadow:0 0 0 4px var(--c-card-bg)}
.card__badge{margin:.75rem 0 0}
.card--link{cursor:pointer}
.card--link:hover{translate:0 -4px;box-shadow:var(--sh);border-color:var(--c-rule-strong);border-top-color:var(--c-top)}
.card--link .cardlink{color:var(--c-head);text-decoration:none}
.card--link .cardlink::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.card--link:hover .cardlink{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em}
.card--link p a{position:relative;z-index:2}
.card--link .cardlink:focus-visible{box-shadow:none}
.card--link:has(.cardlink:focus-visible){box-shadow:0 0 0 3px var(--c-ring-in),0 0 0 6px var(--c-ring-out)}
.card__foot{display:inline-flex;align-items:center;gap:.4rem;margin:auto 0 0;padding-top:.9rem;font:700 1rem/1.3 var(--f-disp);letter-spacing:.01em;color:var(--c-accent)}
.card__foot svg{width:1em;height:1em;transition:translate var(--t-fast)}
.card--link:hover .card__foot svg{translate:4px 0}

/* the icon badge: a square tile (the reference's circles are the sibling's — ours are tiles) */
.ibadge{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:var(--r-sm);
  background:var(--c-badge-bg);color:var(--c-badge-ink)}
.ibadge svg{width:23px;height:23px}
.ibadge--lg{width:56px;height:56px;border-radius:var(--r)}
.ibadge--lg svg{width:27px;height:27px}
.ibadge--brand{background:var(--brand);color:#fff}
.ibadge--danger{background:var(--danger-tint);color:var(--danger)}
.ibadge--ok{background:#dcebe2;color:var(--success)}

.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.28rem .7rem;border-radius:var(--r-xs);
  background:var(--c-badge-bg);color:var(--c-eb-ink);font:700 .8rem/1.2 var(--f-disp);letter-spacing:.1em;text-transform:uppercase}

.chips{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0;padding:0}
.chips li{margin:0}
/* a chip is a small sign plate; it has no underline, so its edge carries ≥ 3:1: 1.5px --c-rule-strong */
.chip{display:inline-flex;align-items:center;gap:.45rem;min-height:var(--tap);padding:.45rem 1.05rem;
  border:1.5px solid var(--c-rule-strong);border-radius:var(--r-sm);background:var(--c-chip-bg);color:var(--c-head);
  font:600 1rem/1.2 var(--f-disp);letter-spacing:.01em;text-decoration:none;hyphens:manual;
  transition:background-color var(--t-fast),color var(--t-fast),border-color var(--t-fast)}
.chip svg{width:1.05em;height:1.05em;color:var(--c-accent)}
.chip:hover{background:var(--c-head);border-color:var(--c-head);color:var(--c-card-bg)}
.chip:hover svg{color:inherit}
.section--dark .chip:hover,.section--deep .chip:hover,.section--brand .chip:hover{color:var(--dark)}
.chips--sm{gap:.4rem}
.chips--sm .chip{padding:.3rem .8rem;font-size:.92rem}
.chips__note{margin:var(--sp-3) 0 0;max-width:46rem;font-size:.95rem;color:var(--c-muted)}
.chips--center{justify-content:center}
.chips--center+.chips__note{margin-inline:auto;text-align:center}

/* the caption PLATE on a photo — solid bottle green, docked to the frame's lower-left corner,
   never a place claim (the class keeps its old name, tagchip) */
.tagchip{position:absolute;left:0;bottom:0;z-index:2;display:inline-flex;align-items:center;gap:.55rem;
  max-width:calc(100% - 2.5rem);padding:.65rem 1.1rem .65rem 1rem;border-radius:0 var(--r-sm) 0 0;background:var(--brand-deep);
  color:#fff;font:600 .95rem/1.3 var(--f-disp);letter-spacing:.01em;hyphens:manual}
.tagchip svg{color:var(--cta-light);width:1.1em;height:1.1em}

/* ── 8 · media ──────────────────────────────────────────────────────────── */
.media{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--c-soft-bg);aspect-ratio:4/3}
.media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media--43{aspect-ratio:4/3}.media--21{aspect-ratio:2/1}.media--34{aspect-ratio:3/4}.media--11{aspect-ratio:1}
.media--frame{box-shadow:var(--sh)}
.fig{margin:0}
.figcap{margin:.65rem 0 0;padding-left:.8rem;border-left:3px solid var(--c-top);font-size:.9rem;line-height:1.5;color:var(--c-muted)}

/* ── 9 · layout vocabulary ──────────────────────────────────────────────── */
.duo{display:grid;gap:var(--sp-6);grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.duo--wide{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.duo--narrow{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.duo--center{align-items:center}.duo--start{align-items:start}.duo--stretch{align-items:stretch}
.duo__a,.duo__b{min-width:0}
/* flip = the SECOND child is shown first on wide screens only; the DOM (and so the phone stack and
   the reading order) keeps copy first — used by pk_split( side => 'left' ) */
@media (min-width:901px){.duo--flip>.duo__b{order:-1}}
@media (max-width:900px){.duo,.duo--wide,.duo--narrow{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}}
.split__list{margin-top:var(--sp-4)}
.split__foot{margin-top:var(--sp-4)}
/* a list or grid after running text keeps a block of air — no spacer divs */
:is(.prose,.lead,.ledger,.shead + p)+:is(.iclist,.cards,.trust,.rows,.chips,.ledger,.faq,.compare,.steps,.notice,.phoneblock,.pair,.checks){margin-top:var(--sp-4)}
.ledger+.prose,.notice+.prose{margin-top:var(--sp-4)}
.stack>*+*{margin-top:var(--sp-3)}
.stack--lg>*+*{margin-top:var(--sp-5)}

/* the editorial intro: copy + a ruled row of facts beside a tall 3:4 portrait */
.intro{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.intro--media-left{grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
.intro--media-left .intro__pic{order:-1}
.intro--solo{grid-template-columns:minmax(0,1fr)}
.intro__copy,.intro__pic{min-width:0}
.intro__prose p+p{margin-top:.9rem}
.intro__pic .media{max-width:28rem;margin-inline:auto}
.facts{display:grid;grid-template-columns:repeat(var(--fn,3),minmax(0,1fr));gap:1.25rem;margin:var(--sp-5) 0 0;padding:0;list-style:none}
.facts--2{--fn:2}.facts--1{--fn:1}
.fact{display:flex;flex-direction:column;gap:.25rem;min-width:0;margin:0;padding-top:.85rem;border-top:3px solid var(--c-top)}
.fact__ic{color:var(--c-accent);margin-bottom:.15rem}
.fact__ic svg{width:24px;height:24px}
.fact__t{font:700 1.1rem/1.25 var(--f-disp);color:var(--c-head)}
.fact__p{font-size:.93rem;line-height:1.45;color:var(--c-muted)}
@media (max-width:900px){.intro,.intro--media-left{grid-template-columns:minmax(0,1fr)}.intro--media-left .intro__pic{order:0}.intro__pic .media{max-width:24rem}}
@media (max-width:560px){.facts{grid-template-columns:minmax(0,1fr);gap:1rem}}

/* ── 10 · the kino signature objects (the TICKET family) ────────────────── */
/* ticket notches are real holes: two half-width mask layers, each carrying one round cut-out.
   A parent's filter:drop-shadow() then follows the notched outline (box-shadow would be masked). */

/* FEATURE TICKET — the green admission ticket over the hero's lower edge, notched at both ends,
   its promises parted by perforations. The wrapper paints the next band's ground below the
   overlap line, so the ticket straddles two grounds cleanly. */
.featureband{position:relative;z-index:5;margin-top:calc(-1 * var(--overlap));padding-bottom:var(--sp-2);
  background:linear-gradient(to bottom,transparent var(--overlap),var(--fb-ground,var(--surface)) var(--overlap))}
.featureband--on-surface{--fb-ground:var(--surface)}
.featureband--on-soft{--fb-ground:var(--soft)}
.featureband--on-tint{--fb-ground:var(--tint)}
.featureband--on-dark{--fb-ground:var(--dark)}
.featureband--flat{margin-top:0;padding-top:var(--sp-5);background:var(--fb-ground,var(--surface))}
.featureband__wrap{filter:var(--drop)}
.featurecard{--notch:15px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:1.55rem clamp(1.6rem,3vw,2.6rem);list-style:none;
  border-radius:var(--r-lg);background:var(--grad);
  -webkit-mask:radial-gradient(circle var(--notch) at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--notch) at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle var(--notch) at 0 50%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--notch) at 100% 50%,#0000 97%,#000) right/51% 100% no-repeat}
.featurecard--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.featurecard--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.feat{display:flex;align-items:flex-start;gap:.95rem;min-width:0;margin:0;padding:.35rem 1.35rem}
.feat:first-child{padding-left:.4rem}
.feat:last-child{padding-right:.4rem}
.feat+.feat{border-left:2px dashed var(--c-perf)}
.feat__badge{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:var(--r-sm);
  background:var(--c-badge-bg);box-shadow:inset 0 0 0 1px rgba(232,206,134,.4);color:var(--cta-light)}
.feat__badge svg{width:24px;height:24px}
.feat__txt{display:flex;flex-direction:column;gap:.25rem;min-width:0;padding-top:.1rem}
.feat__t{font:700 1.12rem/1.2 var(--f-disp);letter-spacing:.005em;color:#fff;hyphens:manual}
.feat__p{font-size:.93rem;line-height:1.45;color:var(--brand-muted)}
@media (max-width:1000px){
  .featurecard,.featurecard--3{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.1rem}
  .feat,.feat:first-child,.feat:last-child{padding:.35rem 1.1rem}
  .featurecard>.feat:nth-child(odd){border-left:0;padding-left:.4rem}
  .featurecard>.feat:nth-child(n+3){border-top:2px dashed var(--c-perf);padding-top:1.1rem}
  .featurecard--3>.feat:last-child{grid-column:1 / -1}
}
@media (max-width:620px){
  :root{--overlap:40px}
  .featurecard,.featurecard--2,.featurecard--3{--notch:11px;grid-template-columns:minmax(0,1fr);row-gap:0;padding:.6rem 1.35rem}
  .featurecard--3>.feat:last-child{grid-column:auto}
  .featurecard>.feat,.featurecard>.feat:nth-child(odd){padding:.85rem .1rem;border-left:0}
  .featurecard>.feat+.feat{border-top:2px dashed var(--c-perf)}
  .feat__badge{width:42px;height:42px}.feat__badge svg{width:21px;height:21px}
}

/* CALL TICKET — copy on the green ticket, the big number on its own stub, torn along a
   perforation with notches top and bottom. On phones the stub drops below (notches at the sides). */
.callrow{display:flex;align-items:stretch;min-width:0;filter:var(--drop)}
.callrow__copy{flex:1 1 auto;min-width:0;padding:clamp(1.4rem,3vw,2.1rem) clamp(1.35rem,3vw,2.5rem);background:var(--grad);border-radius:var(--r-lg) 0 0 var(--r-lg);
  -webkit-mask:radial-gradient(circle var(--notch) at 100% 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--notch) at 100% 100%,#0000 97%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle var(--notch) at 100% 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--notch) at 100% 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
.callrow__t{margin:0;font:700 clamp(1.4rem,1.05rem + 1.3vw,1.95rem)/1.15 var(--f-disp);letter-spacing:-.005em;color:#fff}
.callrow__sub{margin:.5rem 0 0;color:var(--brand-muted);max-width:52ch}
.callrow__call{flex:0 0 auto;display:flex;align-items:center;justify-content:center;min-width:0;padding:1.3rem clamp(1.3rem,3vw,2.4rem);
  background:var(--brand-deep);border-left:2px dashed var(--c-perf);border-radius:0 var(--r-lg) var(--r-lg) 0;
  -webkit-mask:radial-gradient(circle var(--notch) at 0 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--notch) at 0 100%,#0000 97%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle var(--notch) at 0 0,#0000 97%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--notch) at 0 100%,#0000 97%,#000) bottom/100% 51% no-repeat}
@media (max-width:820px){
  .callrow{flex-direction:column}
  .callrow__copy{border-radius:var(--r-lg) var(--r-lg) 0 0;
    -webkit-mask:radial-gradient(circle var(--notch) at 0 100%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--notch) at 100% 100%,#0000 97%,#000) right/51% 100% no-repeat;
    mask:radial-gradient(circle var(--notch) at 0 100%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--notch) at 100% 100%,#0000 97%,#000) right/51% 100% no-repeat}
  .callrow__call{border-left:0;border-top:2px dashed var(--c-perf);border-radius:0 0 var(--r-lg) var(--r-lg);
    -webkit-mask:radial-gradient(circle var(--notch) at 0 0,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--notch) at 100% 0,#0000 97%,#000) right/51% 100% no-repeat;
    mask:radial-gradient(circle var(--notch) at 0 0,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--notch) at 100% 0,#0000 97%,#000) right/51% 100% no-repeat}
  .callrow__call .btn{width:100%}
}

/* GALLERY — the dark services programme: photo cards with a numbered code, the title on a green
   caption plate that overlaps the photo; whole card = one link. 5 = the feature programme. */
.gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--sp-4);margin:0;padding:0;list-style:none}
.gallery>li{grid-column:span 2}
.gallery--n2>li,.gallery--n4>li{grid-column:span 3}
.gallery--n5{grid-template-columns:repeat(4,minmax(0,1fr))}
.gallery--n5>li{grid-column:span 1}
.gallery--n5>li.pcard--feature{grid-column:1 / span 2;grid-row:1 / span 2}
.gallery--feature-right>li.pcard--feature{grid-column:3 / span 2}
.pcard{position:relative;display:flex;flex-direction:column;min-width:0;margin:0;overflow:hidden;
  background:var(--dark-2);border:1px solid var(--line-dark);border-radius:var(--r-lg);
  transition:translate var(--t),box-shadow var(--t),border-color var(--t)}
.pcard:hover{translate:0 -5px;box-shadow:0 22px 46px rgba(0,0,0,.5);border-color:rgba(255,255,255,.42)}
.pcard__ph{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--line-dark)}
.pcard__ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.pcard:hover .pcard__ph img{transform:scale(1.04)}
.pcard--feature .pcard__ph{flex:1 1 auto;aspect-ratio:auto;min-height:17rem}
.pcard--feature .pcard__ph img{position:absolute;inset:0}
.pcard__no{position:absolute;top:.75rem;right:.75rem;z-index:1;padding:.32rem .55rem;border-radius:var(--r-xs);background:rgba(7,12,10,.86);
  color:#fff;font:700 .82rem/1 var(--f-disp);letter-spacing:.14em;font-variant-numeric:tabular-nums}
.pcard__bd{position:relative;display:flex;flex-direction:column;flex:1 0 auto;padding:0 1.35rem 1.35rem}
.pcard--feature .pcard__bd{flex:0 0 auto}
/* the caption plate: flush with the card's left edge, pulled up over the photo */
.pcard__t{position:relative;z-index:2;display:flex;align-items:flex-start;gap:.6rem;align-self:flex-start;max-width:calc(100% + 1.35rem);
  margin:-1.55rem 0 .8rem -1.35rem;padding:.75rem 1.2rem .75rem 1.35rem;border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--brand);
  font-size:clamp(1.2rem,1.05rem + .4vw,1.36rem);line-height:1.2;color:#fff}
.pcard--feature .pcard__t{font-size:clamp(1.35rem,1.1rem + .8vw,1.7rem)}
.pcard--nophoto .pcard__t{margin-top:1.35rem}
.pcard__t svg{width:22px;height:22px;margin-top:.05em;color:var(--cta-light)}
.pcard__link{color:#fff;text-decoration:none}
.pcard__link::after{content:"";position:absolute;inset:0;z-index:3}
.pcard__link:hover{color:#fff}
.pcard__link:focus-visible{box-shadow:none}
.pcard:has(.pcard__link:focus-visible){box-shadow:0 0 0 3px var(--dark),0 0 0 6px var(--cta-light)}
.pcard p{margin:0;color:var(--dark-muted);font-size:1rem}
.pcard--feature p{font-size:1.06rem;color:var(--dark-text)}
.pcard__more{display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;padding-top:1rem;color:var(--cta-light);font:700 1rem/1.2 var(--f-disp);letter-spacing:.02em}
.pcard__more svg{width:1em;height:1em;transition:translate var(--t-fast)}
.pcard:hover .pcard__more svg{translate:4px 0}
@media (max-width:1100px){
  .gallery,.gallery--n5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery>li,.gallery--n2>li,.gallery--n4>li,.gallery--n5>li{grid-column:auto}
  .gallery--n5>li.pcard--feature,.gallery--feature-right>li.pcard--feature,.gallery--n3>li:first-child{grid-column:1 / -1;grid-row:auto}
  .gallery--n5>li.pcard--feature .pcard__ph,.gallery--n3>li:first-child .pcard__ph{flex:none;aspect-ratio:2/1;min-height:0}
  .gallery--n3>li:first-child .pcard__ph img{position:absolute;inset:0}
}
@media (max-width:640px){
  .gallery,.gallery--n5{grid-template-columns:minmax(0,1fr)}
  .gallery--n5>li.pcard--feature .pcard__ph,.gallery--n3>li:first-child .pcard__ph{aspect-ratio:4/3}
}

/* PAIR — two frames with docked label plates; an optional square join on the seam */
.pair{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);max-width:66rem;margin-inline:auto;container-type:inline-size}
.pair__side{display:flex;flex-direction:column;min-width:0;margin:0}
.pair__frame{position:relative;overflow:hidden;border-radius:var(--r-lg);aspect-ratio:4/3;background:var(--c-soft-bg)}
.pair--r34 .pair__frame{aspect-ratio:3/4}
.pair--r21 .pair__frame{aspect-ratio:2/1}
.pair__frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pair__label{position:absolute;left:0;top:0;z-index:1;display:inline-flex;align-items:center;max-width:calc(100% - 2rem);
  padding:.55rem 1.05rem;border-radius:0 0 var(--r-sm) 0;background:var(--brand-deep);color:#fff;
  font:700 .85rem/1.2 var(--f-disp);letter-spacing:.12em;text-transform:uppercase;hyphens:manual}
.pair__side--b .pair__label{background:var(--surface);color:var(--head)}
.pair__cap{padding:1rem .15rem 0}
.pair__t{margin:0 0 .35rem;font-size:clamp(1.2rem,1.05rem + .45vw,1.38rem)}
.pair__cap p,.pair__frame--text p{font-size:1rem;color:var(--c-muted)}
.pair__frame--text{aspect-ratio:auto;flex:1;padding:4rem 1.6rem 1.6rem;background:var(--c-card-bg);border:1px solid var(--c-card-line);border-top:3px solid var(--c-top)}
.pair__side--b .pair__frame--text{background:var(--c-soft-bg)}
.section--soft .pair__side--b .pair__frame--text{background:var(--tint)}
.pair__side--a .pair__frame--text .pair__label{background:var(--brand);color:#fff}
.pair__side--b .pair__frame--text .pair__label{background:var(--brand-deep);color:#fff}
.pair__list{list-style:none;margin:.75rem 0 0;padding:0}
.pair__list li{position:relative;padding-left:1.2rem;font-size:1rem;color:var(--c-text)}
.pair__list li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--c-accent)}
.pair__join{position:absolute;left:50%;top:50%;z-index:3;display:grid;place-items:center;min-width:64px;height:40px;padding:0 .8rem;
  transform:translate(-50%,-50%);border-radius:var(--r-sm);background:var(--brand);color:#fff;box-shadow:0 0 0 5px var(--c-ground,var(--surface)),var(--sh);
  font:700 .85rem/1 var(--f-disp);letter-spacing:.14em;text-transform:uppercase;hyphens:manual}
.section--dark .pair__join,.section--deep .pair__join{background:var(--surface);color:var(--head)}
/* two photos: centre the join on the FRAMES, not on frames + captions */
.pair--photo.pair--r43 .pair__join{top:calc((100cqw - var(--sp-4)) / 2 * 3 / 8)}
.pair--photo.pair--r34 .pair__join{top:calc((100cqw - var(--sp-4)) / 2 * 4 / 6)}
.pair--photo.pair--r21 .pair__join{top:calc((100cqw - var(--sp-4)) / 2 / 4)}
/* two TEXT panels: the join sits between the two label plates, never over running text */
.pair:not(.pair--photo) .pair__join{top:1.3rem;transform:translate(-50%,0)}
/* …and the column gap is wide enough that the join never covers side B's label plate */
@media (min-width:701px){.pair--joined:not(.pair--photo){column-gap:6rem}}
@media (max-width:700px){
  .pair{grid-template-columns:minmax(0,1fr)}
  .pair__join,.pair--photo .pair__join,.pair:not(.pair--photo) .pair__join{position:relative;left:auto;top:auto;justify-self:center;transform:none;margin:-2rem 0}
  /* photo pairs carry a caption under frame A: the join sits in the gap, never over B's label */
  .pair.pair--photo .pair__join{top:auto;margin:-.4rem 0}
}

/* BAUZEITEN — the signature: paper cinema tickets on a thin timeline rail. Each ticket = a green
   stub (running number + the era) torn off along a perforation with notched ends, then the paper
   body. Static: no scroller, no motion beyond the shared reveal rise. */
.bauzeiten{--bz-n:3;--notch:11px;--bz-rail:rgba(255,255,255,.26);--bz-dot:var(--cta-light);--bz-top:2.4rem;position:relative}
.bauzeiten--n2{--bz-n:2}.bauzeiten--n3{--bz-n:3}.bauzeiten--n4{--bz-n:4}.bauzeiten--n5{--bz-n:5}
.bauzeiten--light{--bz-rail:var(--line-strong);--bz-dot:var(--brand)}
.bz__row{position:relative;display:grid;grid-template-columns:repeat(var(--bz-n),minmax(0,1fr));gap:1.15rem;margin:0;padding:0;list-style:none}
.bauzeiten--rail .bz__row{padding-top:var(--bz-top)}
.bauzeiten--rail .bz__row::before{content:"";position:absolute;left:0;right:0;top:.75rem;height:2px;
  background:linear-gradient(90deg,transparent,var(--bz-rail) 5%,var(--bz-rail) 95%,transparent)}
.bz__tk{position:relative;display:flex;flex-direction:column;min-width:0;margin:0;filter:var(--drop)}
.bauzeiten--light .bz__tk{filter:var(--drop-light)}
.bz__dot{display:none}
.bauzeiten--rail .bz__dot{display:block;position:absolute;left:50%;top:calc(.75rem - 6px - var(--bz-top));width:14px;height:14px;margin-left:-7px;border-radius:50%;
  background:var(--c-ground,var(--dark));box-shadow:inset 0 0 0 3px var(--bz-dot),0 0 0 4px var(--c-ground,var(--dark))}
.bauzeiten--rail .bz__dot::after{content:"";position:absolute;left:6px;top:18px;width:2px;height:calc(var(--bz-top) - .75rem - 12px);background:var(--bz-rail)}
.bz__stub{position:relative;padding:1rem 1.2rem 1.1rem;background:var(--brand);border-radius:var(--r) var(--r) 0 0;
  -webkit-mask:radial-gradient(circle var(--notch) at 0 100%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--notch) at 100% 100%,#0000 97%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle var(--notch) at 0 100%,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--notch) at 100% 100%,#0000 97%,#000) right/51% 100% no-repeat}
.bz__no{display:block;font:700 .78rem/1 var(--f-disp);letter-spacing:.2em;text-transform:uppercase;color:var(--cta-light);font-variant-numeric:tabular-nums}
.bz__era{margin:.4rem 0 0;font-family:var(--f-disp);font-size:clamp(1.55rem,1.15rem + 1vw,2.05rem);font-weight:700;line-height:1.02;
  font-variation-settings:"wght" 700,"wdth" 80;letter-spacing:.02em;text-transform:uppercase;color:#fff;hyphens:manual;overflow-wrap:anywhere}
.bz__body{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-width:0;padding:1.3rem 1.2rem 1.2rem;background:var(--soft);border-radius:0 0 var(--r) var(--r);
  -webkit-mask:radial-gradient(circle var(--notch) at 0 0,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--notch) at 100% 0,#0000 97%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle var(--notch) at 0 0,#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--notch) at 100% 0,#0000 97%,#000) right/51% 100% no-repeat}
.bauzeiten--light .bz__body{background:var(--surface)}
/* the perforation along the tear line */
.bz__body::before{content:"";position:absolute;left:calc(var(--notch) + 5px);right:calc(var(--notch) + 5px);top:0;height:2px;
  background:repeating-linear-gradient(90deg,var(--c-perf) 0 7px,transparent 7px 12px)}
.bz__ph{margin:0 0 1rem;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-xs);background:var(--line)}
.bz__ph img{width:100%;height:100%;object-fit:cover}
.bz__t{margin:0 0 .6rem;font-size:clamp(1.2rem,1.05rem + .4vw,1.36rem);line-height:1.18}
.bz__where{display:flex;align-items:flex-start;gap:.45rem;margin:0 0 .75rem;font-size:.95rem;line-height:1.45;color:var(--c-text)}
.bz__where>svg{width:1.1em;height:1.1em;margin-top:.12em;color:var(--brand)}
.bz__wl{font-weight:700;color:var(--c-head)}
.bz__door p{margin:0 0 .6rem;font-size:.99rem;line-height:1.55;color:var(--c-text)}
.bz__say{display:flex;flex-direction:column;gap:.3rem;margin:auto 0 0;padding:.8rem .95rem .85rem;border:1.5px dashed var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface);font-size:1rem;line-height:1.45;color:var(--c-head)}
.bauzeiten--light .bz__say{background:var(--soft)}
.bz__door+.bz__say{margin-top:auto}
.bz__door{margin-bottom:.9rem}
.bz__sl{text-wrap:balance;display:inline-flex;align-items:center;gap:.45rem;font:700 .78rem/1.2 var(--f-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--cta-ink)}
.bz__sl svg{width:1.05em;height:1.05em}
.bz__say q{font-style:italic;font-weight:600}
/* five across: slimmer type so each ticket keeps a sensible measure (pass wrap => 'wide') */
.bauzeiten--n5 .bz__era{font-size:clamp(1.35rem,1rem + .8vw,1.7rem)}
.bauzeiten--n5 .bz__body{padding-inline:1rem}
.bauzeiten--n5 .bz__t{font-size:1.16rem}
.bauzeiten--n5 .bz__door p,.bauzeiten--n5 .bz__where{font-size:.94rem}
/* compact: no photos, tighter */
.bauzeiten--compact .bz__stub{padding:.8rem 1.05rem .9rem}
.bauzeiten--compact .bz__era{font-size:clamp(1.3rem,1.05rem + .7vw,1.6rem)}
.bauzeiten--compact .bz__body{padding:1.05rem 1.05rem 1rem}
.bauzeiten--compact .bz__door p{font-size:.95rem}
.bauzeiten--compact .bz__say{padding:.65rem .8rem}
/* tablets: n4 = 2×2, n5 = 3 + 2 (a 6-track grid, never an orphan); the rail only on ONE row */
@media (max-width:1199px){
  .bauzeiten--n4 .bz__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bauzeiten--n5 .bz__row{grid-template-columns:repeat(6,minmax(0,1fr))}
  .bauzeiten--n5 .bz__tk{grid-column:span 2}
  .bauzeiten--n5 .bz__tk:nth-child(n+4){grid-column:span 3}
  .bauzeiten--n4.bauzeiten--rail .bz__row,.bauzeiten--n5.bauzeiten--rail .bz__row{padding-top:0}
  .bauzeiten--n4 .bz__row::before,.bauzeiten--n5 .bz__row::before,.bauzeiten--n4 .bz__dot,.bauzeiten--n5 .bz__dot{display:none!important}
}
/* phones: a clean vertical stack, the rail runs down the left edge */
@media (max-width:760px){
  .bz__row,.bauzeiten--n4 .bz__row,.bauzeiten--n5 .bz__row{grid-template-columns:minmax(0,1fr);gap:1rem}
  .bauzeiten--n5 .bz__tk,.bauzeiten--n5 .bz__tk:nth-child(n+4){grid-column:auto}
  .bauzeiten--rail .bz__row,.bauzeiten--n4.bauzeiten--rail .bz__row,.bauzeiten--n5.bauzeiten--rail .bz__row{padding-top:0;padding-left:1.6rem}
  .bauzeiten--rail .bz__row::before,.bauzeiten--n4.bauzeiten--rail .bz__row::before,.bauzeiten--n5.bauzeiten--rail .bz__row::before{display:block!important;left:.4rem;right:auto;top:.5rem;bottom:.5rem;width:2px;height:auto;
    background:linear-gradient(180deg,transparent,var(--bz-rail) 3%,var(--bz-rail) 97%,transparent)}
  .bauzeiten--rail .bz__dot,.bauzeiten--n4.bauzeiten--rail .bz__dot,.bauzeiten--n5.bauzeiten--rail .bz__dot{display:block!important;left:calc(-1.6rem + .4rem + 1px);top:1.55rem;margin-left:-7px}
  .bauzeiten--rail .bz__dot::after{display:none}
  .bz__ph{aspect-ratio:2/1}
}

/* ── 11 · steps, notice, icon list, compare, trust, ledger, rows, FAQ ───── */
/* steps: a numbered RAIL — square green numerals on one line, open columns (no boxes) */
.steps{list-style:none;margin:0;padding:0}
.steps--cards{--gap:var(--sp-5);display:flex;flex-wrap:wrap;gap:var(--sp-5) var(--gap)}
.steps--cards>.step{flex:0 1 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));min-width:0}
.steps--2{--per:2}.steps--3{--per:3}.steps--4{--per:4}.steps--5{--per:5}
.step{position:relative;margin:0}
.steps--cards>.step::before{content:"";position:absolute;left:0;right:calc(-1 * var(--gap));top:22px;height:2px;background:var(--c-rule)}
.steps--cards>.step:last-child::before{right:0}
.step__n{position:relative;z-index:1;display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r-sm);
  background:var(--c-num-bg);color:var(--c-num-ink);font:700 1.15rem/1 var(--f-disp);letter-spacing:.04em;font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 6px var(--c-ground,var(--surface))}
.step__c{min-width:0}
.steps--cards .step__c{padding-top:1.1rem;padding-right:.4rem}
.step__t{font-size:1.24rem;margin:0 0 .4rem}
.step p{margin:0;font-size:1rem;color:var(--c-muted)}
@media (max-width:1100px){.steps--4,.steps--5{--per:2}.steps--5{--per:3}}
@media (max-width:760px){.steps--3,.steps--5{--per:1}.steps--4{--per:2}}
@media (max-width:600px){
  .steps--cards{--per:1;gap:0}
  .steps--cards>.step{flex-basis:100%;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start;padding-bottom:1.35rem}
  .steps--cards>.step::before{left:22px;right:auto;top:46px;bottom:0;width:2px;height:auto}
  .steps--cards>.step:last-child{padding-bottom:0}
  .steps--cards>.step:last-child::before{content:none}
  .steps--cards .step__c{padding-top:.55rem}
}
/* timeline variant: numerals on a vertical rule, open text */
.steps--timeline{display:grid;gap:0;max-width:46rem}
.steps--timeline>.step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem;padding:0 0 var(--sp-4)}
.steps--timeline>.step:last-child{padding-bottom:0}
.steps--timeline>.step::before{content:"";position:absolute;left:22px;top:52px;bottom:6px;width:2px;background:var(--c-rule)}
.steps--timeline>.step:last-child::before{content:none}
.steps--timeline .step__n{box-shadow:none}
.steps--timeline .step__c{padding-top:.6rem;min-width:0}

/* notice */
.notice{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;padding:1.3rem 1.45rem;
  background:var(--c-card-bg);border:1px solid var(--c-card-line);border-left:4px solid var(--brand);border-radius:var(--r)}
.notice--num{grid-template-columns:auto minmax(0,1fr);align-items:start}
.notice__body{min-width:0}
.notice__num{display:flex;flex-direction:column;align-items:center;min-width:5.75rem;margin:0;padding:.55rem .7rem;
  border:2px solid currentColor;border-radius:var(--r-sm);color:var(--c-head)}
.notice__num strong{color:inherit;font:700 2.5rem/1 var(--f-disp);font-variant-numeric:tabular-nums}
.notice__num span{margin-top:.3rem;font:700 .74rem/1.2 var(--f-disp);letter-spacing:.1em;text-transform:uppercase;text-align:center}
.notice__tag{display:flex;align-items:center;gap:.45rem;margin:0 0 .4rem;font:700 .8rem/1.2 var(--f-disp);letter-spacing:.12em;text-transform:uppercase;color:var(--c-accent)}
.notice__tag svg{width:1.25em;height:1.25em}
.notice__h{font-size:1.28rem;margin:0 0 .4rem}
.notice p{margin:0 0 .6rem;font-size:1.03rem}
.notice__list{margin:.2rem 0 0;padding-left:1.15em}
.notice__list li{font-size:1rem}
.notice__after{margin-top:.6rem}
.notice.notice--danger{background:var(--danger-tint);border-color:#ebb7b3;border-left-color:var(--danger)}
.notice.notice--danger strong{color:var(--danger)}
.notice.notice--dark{background:var(--dark-2);border-color:var(--line-dark);border-left-color:var(--brand-grad-b)}
@media (max-width:560px){.notice--num{grid-template-columns:minmax(0,1fr)}.notice__num{flex-direction:row;align-self:start;justify-self:start;gap:.6rem}}

/* icon rows */
.iclist{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-4) var(--sp-5)}
.iclist--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.iclist--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.iclist>li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start;margin:0}
.iclist__c{min-width:0}
.iclist__t{font-size:1.2rem;margin:.5rem 0 .25rem}
.iclist__c>p:first-child{margin-top:.6rem}
.iclist p{margin:0 0 .4rem;font-size:1rem;color:var(--c-muted)}
.iclist--ruled{gap:0 var(--sp-5)}
.iclist--ruled>li{padding-block:1.1rem;border-top:1px solid var(--c-rule)}
.iclist--boxed{gap:var(--sp-3)}
.iclist--boxed>li{padding:1.1rem 1.2rem;border-radius:var(--r);background:var(--c-card-bg);border:1px solid var(--c-card-line);border-left:3px solid var(--c-top)}
.section--surface .iclist--boxed>li{background:var(--soft);border-color:transparent;border-left-color:var(--c-top)}
@media (max-width:900px){.iclist--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.iclist--2,.iclist--3{grid-template-columns:minmax(0,1fr)}}
.checks{list-style:none;margin:var(--sp-3) 0 0;padding:0;display:grid;gap:.6rem}
.checks li{display:flex;align-items:flex-start;gap:.65rem;margin:0;font-size:1.03rem;font-weight:600;color:var(--c-text)}
.checks svg{width:1.3em;height:1.3em;margin-top:.1em;color:var(--c-accent);stroke-width:2.6}

/* compare: two panels, side B is the emphasised green one */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.compare__side{min-width:0;padding:1.7rem 1.6rem;border-radius:var(--r-lg);background:var(--c-card-bg);border:1px solid var(--c-card-line)}
.compare__side--a{background:var(--c-soft-bg)}
.section--soft .compare__side--a,.section--tint .compare__side--a{background:var(--surface)}
.compare__side--b{background:var(--grad);border-color:transparent;box-shadow:var(--sh)}
.compare__tag{display:inline-flex;align-items:center;gap:.4rem;margin:0 0 .7rem;font:700 .8rem/1.2 var(--f-disp);letter-spacing:.12em;text-transform:uppercase;color:var(--c-accent)}
.compare__tag svg{width:1.2em;height:1.2em}
.compare__h{font-size:1.4rem;margin:0 0 .6rem}
.compare__side>p{color:var(--c-muted)}
.compare__list{list-style:none;margin:.75rem 0 0;padding:0}
.compare__list li{display:flex;align-items:flex-start;gap:.6rem;margin-bottom:.55rem;font-size:1rem;color:var(--c-text)}
.compare__mk{width:1.2em;height:1.2em;margin-top:.15em;color:var(--c-accent);stroke-width:2.6}
.compare__dot{flex:none;width:8px;height:8px;margin-top:.6em;border-radius:2px;background:var(--c-accent)}
@media (max-width:760px){.compare{grid-template-columns:minmax(0,1fr)}}

/* trust row: flat, ruled, only confirmable promises */
.trust{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));margin:0;padding:0;list-style:none;
  border:1px solid var(--c-card-line);border-top:3px solid var(--c-top);border-radius:var(--r);background:var(--c-card-bg);box-shadow:var(--sh-sm);overflow:hidden}
.trust--2{--n:2}.trust--3{--n:3}.trust--4{--n:4}
.trust--soft{background:var(--soft);border-color:transparent;border-top-color:var(--c-top);box-shadow:none}
.trust--dark{background:var(--dark-2);border-color:var(--line-dark);border-top-color:var(--brand-grad-b)}
.trust__i{display:flex;align-items:flex-start;gap:.9rem;min-width:0;margin:0;padding:1.35rem 1.35rem}
.trust__i+.trust__i{border-left:1px solid var(--c-rule)}
.trust__c{min-width:0}
.trust__t{margin:.2rem 0 .25rem;font-size:1.15rem}
.trust__c p{margin:0;font-size:.96rem;color:var(--c-muted)}
@media (max-width:1000px){.trust--4{--n:2}.trust--4>.trust__i:nth-child(3){border-left:0}.trust--4>.trust__i:nth-child(n+3){border-top:1px solid var(--c-rule)}}
@media (max-width:760px){.trust,.trust--2,.trust--3,.trust--4{--n:1}.trust__i+.trust__i{border-left:0;border-top:1px solid var(--c-rule)}}

/* ledger: a facts table */
.ledger{border:1px solid var(--c-card-line);border-radius:var(--r);background:var(--c-card-bg);overflow:hidden}
/* the key column follows the ledger's own width (≤ 38 %, ≤ 16rem) — a narrow ledger keeps room for the values */
.ledger__row{display:grid;grid-template-columns:minmax(7.5rem,min(16rem,38%)) minmax(0,1fr);border-top:1px solid var(--c-rule)}
.ledger__row:first-child{border-top:0}
.ledger__k{min-width:0;padding:.95rem 1.2rem;background:var(--c-soft-bg);border-right:1px solid var(--c-rule);
  font:700 1.02rem/1.4 var(--f-disp);letter-spacing:.01em;color:var(--c-head);overflow-wrap:break-word}
.ledger__v{min-width:0;padding:.95rem 1.2rem;font-size:1rem;color:var(--c-text);overflow-wrap:break-word}
.ledger--dark{background:var(--dark-2);border-color:var(--line-dark)}
.ledger--dark .ledger__k{background:var(--dark)}
.section--soft .ledger__k,.hero__panel .ledger__k{background:var(--tint)}
.section--tint .ledger__k{background:var(--soft)}
@media (max-width:640px){.ledger__row{grid-template-columns:minmax(0,1fr)}.ledger__k{border-right:0;border-bottom:1px solid var(--c-rule)}}

/* row index (hubs) */
.rows{display:grid;gap:.6rem;list-style:none;margin:0;padding:0}
.rows>li{margin:0}
.rowlink{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1.1rem;
  padding:.8rem 1.15rem .8rem .8rem;border:1px solid var(--c-card-line);border-left:3px solid var(--c-top);border-radius:var(--r);background:var(--c-card-bg);
  color:inherit;text-decoration:none;transition:background-color var(--t-fast),border-color var(--t-fast),translate var(--t)}
.rowlink:hover{background:var(--c-flood);border-color:var(--c-rule-strong);border-left-color:var(--c-top);translate:0 -2px;color:inherit}
.rowlink__t{min-width:0}
.rowlink__h{display:block;margin:0 0 .15rem;font-size:clamp(1.15rem,1.05rem + .4vw,1.32rem);color:var(--c-head)}
.rowlink__p{display:block;font-size:.98rem;color:var(--c-muted)}
.rowlink__thumb{display:block;width:120px;height:90px;overflow:hidden;border-radius:var(--r-sm);background:var(--c-soft-bg)}
.rowlink__thumb img{width:100%;height:100%;object-fit:cover}
.rowlink__n{display:grid;place-items:center;width:50px;height:50px;border-radius:var(--r-sm);background:var(--c-num-bg);
  color:var(--c-num-ink);font:700 1.1rem/1 var(--f-disp);letter-spacing:.04em;font-variant-numeric:tabular-nums}
.rowlink__go{display:inline-flex;align-items:center;gap:.45rem;font:700 1rem/1.2 var(--f-disp);letter-spacing:.02em;color:var(--c-accent);white-space:nowrap}
.rowlink__go svg{width:1em;height:1em;transition:translate var(--t-fast)}
.rowlink:hover .rowlink__go svg{translate:4px 0}
@media (max-width:700px){
  .rowlink{grid-template-columns:auto minmax(0,1fr);row-gap:.35rem}
  .rowlink__thumb{width:76px;height:57px}
  .rowlink__go{grid-column:2;font-size:.95rem}
}

/* FAQ — ONE ruled panel of <details> (works without JS); the open item carries a green bar */
.faq{max-width:52rem;background:var(--c-card-bg);border:1px solid var(--c-card-line);border-top:3px solid var(--c-top);border-radius:var(--r);overflow:hidden}
.faq--center{margin-inline:auto}
.faq__i{position:relative;transition:background-color var(--t-fast)}
.faq__i+.faq__i{border-top:1px solid var(--c-rule)}
.faq__i[open]{background:var(--c-flood);box-shadow:inset 4px 0 0 var(--c-top)}
.section--soft .faq__i[open]{background:var(--tint)}
.faq__i>summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--tap);padding:1.05rem 1.35rem;
  cursor:pointer;list-style:none;font:600 1.14rem/1.35 var(--f-disp);letter-spacing:.005em;color:var(--c-head)}
.faq__i>summary::-webkit-details-marker{display:none}
.faq__i>summary:hover .faq__q{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.faq__q{min-width:0}
.faq__ic{position:relative;flex:none;width:32px;height:32px;border-radius:var(--r-sm);border:1.5px solid var(--c-rule-strong);transition:transform var(--t),background-color var(--t-fast)}
.faq__ic::before,.faq__ic::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;background:var(--c-head);transform:translate(-50%,-50%)}
.faq__ic::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform var(--t)}
.faq__i[open] .faq__ic{background:var(--c-num-bg);border-color:var(--c-num-bg)}
.faq__i[open] .faq__ic::before{background:var(--c-num-ink)}
.faq__i[open] .faq__ic::after{transform:translate(-50%,-50%) rotate(0deg);background:var(--c-num-ink)}
.faq__a{padding:0 1.35rem 1.25rem;max-width:46rem}
.faq__a p{font-size:1.03rem;color:var(--c-muted)}
.faq__i[open] .faq__a{animation:pk-faq-in .32s var(--ease)}
@keyframes pk-faq-in{from{translate:0 -6px}to{translate:0 0}}

/* ── 12 · phone block, phone band, closing band ─────────────────────────── */
.phoneblock{position:relative;overflow:hidden;container-type:inline-size;border-radius:var(--r-xl);background:var(--dark);
  padding:clamp(1.5rem,3.6vw,2.75rem);box-shadow:var(--sh-lg)}
.phoneblock::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 110% at 100% 0%,rgba(44,94,69,.5),transparent 60%)}
.phoneblock>.phoneblock__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
.phoneblock__copy>:last-child,.phoneblock__call>:last-child{margin-bottom:0}
/* The call column is its OWN size container: the number is sized against the column it sits in (stacked
   = the whole card, two-column = the .85fr track), so it can never overflow the card at tablet widths. */
.phoneblock__call{container-type:inline-size;min-width:0;padding-top:var(--sp-4);border-top:2px dashed var(--c-perf)}
.phoneblock__label{margin:0 0 .2rem;font:700 .8rem/1.2 var(--f-disp);letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted)}
.phoneblock .telbig{font-size:clamp(1.4rem,10cqw,3rem)}
.phoneblock__btn{margin-top:var(--sp-3)}
.phoneblock__mail{display:flex;align-items:flex-start;gap:.5rem;margin:var(--sp-3) 0 0;font-size:.95rem;color:var(--c-muted)}
.phoneblock__mail svg{margin-top:.2em;color:var(--c-accent)}
@container (min-width:680px){
  .phoneblock>.phoneblock__in{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:var(--sp-6)}
  .phoneblock__call{padding-top:0;border-top:0;padding-left:var(--sp-5);border-left:2px dashed var(--c-perf)}
}
@container (max-width:420px){.phoneblock__btn .btn{width:100%}}

.phoneband{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--sp-6);align-items:center}
.phoneband__call{min-width:0;container-type:inline-size;padding-left:var(--sp-6);border-left:2px dashed var(--c-perf)}
/* the number sizes itself by ITS column, never by the viewport — it can never overflow */
.phoneband .telbig{font-size:clamp(1.6rem,12cqw,3.4rem)}
@media (max-width:900px){
  .phoneband{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}
  .phoneband__call{padding-left:0;border-left:0;padding-top:var(--sp-5);border-top:2px dashed var(--c-perf)}
}

.ctaband{max-width:50rem;margin-inline:auto;text-align:center}
.ctaband .eyebrow{justify-content:center}
.ctaband__t{max-width:22ch;margin-inline:auto;font-size:clamp(2.1rem,1.4rem + 2.6vw,3.3rem)}
.ctaband__lead{margin:0 auto var(--sp-5)}
.ctaband__call{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.9rem}
.ctaband__note{margin:1.1rem auto 0;max-width:46ch;font-size:.95rem;color:var(--c-muted)}
/* split (default): copy left, the call on its own stub right, parted by a perforation */
.ctaband--split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:0;align-items:center;max-width:none;text-align:left}
.ctaband--split .eyebrow{justify-content:flex-start}
.ctaband__copy{min-width:0;padding-right:var(--sp-6)}
.ctaband--split .ctaband__t,.ctaband--split .ctaband__lead{margin-inline:0}
.ctaband--split .ctaband__lead{margin-bottom:0}
.ctaband__side{min-width:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center;padding-block:.5rem;padding-left:var(--sp-6);border-left:2px dashed var(--c-perf)}
.ctaband--split .ctaband__call{justify-content:flex-start}
.ctaband--split .ctaband__note{margin-inline:0}
@media (max-width:640px){.ctaband__call .btn--xl{width:100%}}
@media (max-width:900px){.ctaband--split{grid-template-columns:minmax(0,1fr)}
  .ctaband__copy{padding-right:0;padding-bottom:var(--sp-5)}
  .ctaband__side{padding-left:0;border-left:0;padding-top:var(--sp-5);border-top:2px dashed var(--c-perf)}}

/* ── 13 · the hero family (kino) ────────────────────────────────────────── */
.hero{position:relative;isolation:isolate;overflow:hidden}
.hero__wrap{position:relative;z-index:2}
.hero--on-surface{background:var(--surface)}.hero--on-soft{background:var(--soft)}.hero--on-tint{background:var(--tint)}
.hero--on-dark{background:var(--dark)}.hero--on-deep{background:var(--dark-deep)}
.hero .crumbs{margin:-.4rem 0 var(--sp-3)}
.hero .display{margin-bottom:var(--sp-3)}
.hero__lead{margin-bottom:.75rem}
.hero__more{max-width:58ch;color:var(--c-muted);margin-bottom:.75rem}
.hero__checks{margin:var(--sp-4) 0 0;max-width:46ch}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem;margin-top:var(--sp-4)}
.hero__cta--center{justify-content:center}
.hero__note{display:flex;align-items:flex-start;gap:.55rem;max-width:46ch;margin:1.05rem 0 0;font-size:.95rem;line-height:1.5;color:var(--c-muted)}
.hero__note svg{width:1.15em;height:1.15em;margin-top:.12em;color:var(--c-accent)}
.hero__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:var(--sp-6);align-items:center}
.hero__grid--flip>.hero__side{order:-1}
.hero__copy,.hero__side{min-width:0}
.hero__copy--solo{max-width:50rem}
.hero--overlap>.hero__wrap{padding-bottom:calc(var(--overlap) + var(--sp-5))}
@media (max-width:900px){.hero__grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}.hero__grid--flip>.hero__side{order:0}}
/* the photo layer + the green-black GRADE (a multiply wash that turns any photo toward the palette) */
.hero__bg{position:absolute;inset:0;z-index:0;background:var(--dark)}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero__bg::after{content:"";position:absolute;inset:0;background:rgba(28,68,48,.2);mix-blend-mode:multiply}
.hero--focus-left .hero__bg img{object-position:25% center}
.hero--focus-right .hero__bg img{object-position:75% center}
.hero--cinema::after,.hero--cinema-slim::after,.hero--marquee.has-bg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none}
/* on a photo grade the muted ink is --brand-muted (5.20:1 at the lightest graded point) */
.hero--cinema,.hero--cinema-slim,.hero--marquee.has-bg{--c-muted:var(--brand-muted)}

/* cinema — a 2:1 cinema-scope frame; the title set LOW like an opening card */
.hero--cinema{display:flex;align-items:flex-end;min-height:clamp(560px,50vw,800px)}
.hero--cinema>.hero__wrap{padding-block:clamp(3.5rem,8vh,6rem) clamp(3rem,6vh,4.5rem)}
.hero--cinema.hero--overlap>.hero__wrap{padding-bottom:calc(var(--overlap) + clamp(2.75rem,5vh,3.75rem))}
.hero--cinema::after{background:
  linear-gradient(90deg,rgba(var(--scrim),.93) 0%,rgba(var(--scrim),.86) 34%,rgba(var(--scrim),.66) 56%,rgba(var(--scrim),.2) 82%,rgba(var(--scrim),.08) 100%),
  linear-gradient(0deg,rgba(var(--scrim),.7) 0%,rgba(var(--scrim),0) 42%),
  linear-gradient(180deg,rgba(var(--scrim),.45) 0%,rgba(var(--scrim),0) 22%)}
.hero--cinema .hero__inner{max-width:44rem}
.hero--cinema .display{max-width:15ch;text-shadow:0 2px 26px rgba(0,0,0,.35)}
/* cinema-slim — a lighter grade, the copy on a solid dark PLACARD (a poster card, no blur) */
.hero--cinema-slim{display:flex;align-items:center;min-height:clamp(470px,40vw,610px)}
.hero--cinema-slim>.hero__wrap{padding-block:clamp(2.5rem,6vh,4rem)}
.hero--cinema-slim.hero--overlap>.hero__wrap{padding-bottom:calc(var(--overlap) + 2.5rem)}
.hero--cinema-slim::after{background:linear-gradient(90deg,rgba(var(--scrim),.62) 0%,rgba(var(--scrim),.35) 55%,rgba(var(--scrim),.12) 100%)}
.hero__placard{max-width:37rem;padding:clamp(1.5rem,3vw,2.35rem);background:rgba(13,21,18,.94);border-radius:var(--r-lg);
  border-top:4px solid var(--brand-grad-b);box-shadow:var(--sh-lg)}
.hero--cinema-slim .display{max-width:16ch;font-size:clamp(2.2rem,1.4rem + 3vw,3.6rem)}
.hero--cinema-slim .hero__checks{margin-top:var(--sp-3)}
@media (max-width:1100px){
  .hero--cinema::after{background:linear-gradient(180deg,rgba(var(--scrim),.62) 0%,rgba(var(--scrim),.7) 50%,rgba(var(--scrim),.9) 100%)}
  .hero--cinema .hero__inner{max-width:40rem}
}
@media (max-width:760px){
  .hero--cinema{min-height:0}
  .hero--cinema>.hero__wrap{padding-block:2.75rem 3rem}
  .hero--cinema.hero--overlap>.hero__wrap{padding-bottom:calc(var(--overlap) + 2.25rem)}
  /* slim on a phone: the photo becomes a 2:1 strip, the placard overlaps its lower edge */
  .hero--cinema-slim{display:block;min-height:0}
  .hero--cinema-slim::after{display:none}
  .hero--cinema-slim .hero__bg{position:relative;inset:auto;aspect-ratio:2/1}
  .hero--cinema-slim>.hero__wrap{margin-top:-2.75rem;padding-block:0 2rem}
  .hero--cinema-slim.hero--overlap>.hero__wrap{padding-bottom:calc(var(--overlap) + 2rem)}
  .hero__placard{max-width:none;padding:1.35rem 1.2rem 1.5rem}
}
/* cinema on a phone: a full-bleed photo under a whole column of text would be pure texture —
   show it as a 2:1 cinema strip on top that fades into the dark ground the copy sits on */
@media (max-width:640px){
  .hero--cinema{display:block;background:var(--dark)}
  .hero--cinema::after{display:none}
  .hero--cinema .hero__bg{position:relative;inset:auto;aspect-ratio:2/1}
  .hero--cinema .hero__bg::before{content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(var(--scrim),0) 45%,rgba(var(--scrim),.85) 92%,var(--dark) 100%)}
  .hero--cinema>.hero__wrap{position:relative;z-index:2;padding-block:1.25rem 2.5rem}
  .hero--cinema.hero--overlap>.hero__wrap{padding-bottom:calc(var(--overlap) + 2rem)}
}

/* marquee — Notdienst: the KASSE. A ticket-booth window with an arched top, a dashed inner
   line, a green sign plate and a counter ledge; the number is the film title. Static. */
.hero--marquee{padding-block:var(--sp-6) var(--sp-7)}
.hero--marquee.has-bg::after{background:rgba(7,12,10,.86)}
.hero--marquee::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 52%,rgba(44,94,69,.36),transparent 70%)}
.hero__center{display:flex;flex-direction:column;align-items:center;max-width:58rem;margin-inline:auto;text-align:center}
/* every child positioned → they paint in DOM order: the board's shadow never dims the call below it */
.hero__center>*{position:relative}
.hero--marquee .eyebrow{justify-content:center}
.hero--marquee .eyebrow::after{content:"";flex:none;width:26px;height:3px;border-radius:2px;background:var(--c-dot)}
.hero--marquee .display{max-width:20ch;margin-inline:auto}
.hero--marquee .hero__lead,.hero--marquee .hero__more{margin-inline:auto}
.hero--marquee .hero__note{justify-content:center;margin-inline:auto;text-align:center}
.hero--marquee .hero__checks{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.5rem;max-width:none}
.kasse{display:flex;flex-direction:column;align-items:center;width:100%;max-width:48rem;margin:var(--sp-4) auto var(--sp-2)}
.kasse__sign{position:relative;z-index:2;max-width:calc(100% - 2rem);margin:0;padding:.6rem 1.35rem;border-radius:var(--r-sm);background:var(--brand);
  box-shadow:0 10px 24px rgba(0,0,0,.4);font:700 .86rem/1.25 var(--f-disp);letter-spacing:.2em;text-transform:uppercase;color:var(--cta-light);hyphens:manual}
.kasse__win{position:relative;width:100%;margin-top:-1.15rem;padding:2.8rem clamp(1rem,4vw,3rem) 1.9rem;
  border-radius:50% 50% var(--r-sm) var(--r-sm) / 96px 96px var(--r-sm) var(--r-sm);background:linear-gradient(180deg,var(--dark-2),var(--dark));
  box-shadow:inset 0 0 0 1px var(--line-dark),0 30px 70px rgba(0,0,0,.55)}
.kasse__win::before{content:"";position:absolute;inset:10px;border:2px dashed rgba(255,255,255,.16);border-radius:50% 50% var(--r-xs) var(--r-xs) / 88px 88px var(--r-xs) var(--r-xs);pointer-events:none}
.kasse__num{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.3em;max-width:100%;min-height:var(--tap);margin:.3rem 0 .5rem;
  font:700 clamp(2.1rem,.7rem + 6vw,5.2rem)/1.02 var(--f-disp);letter-spacing:.01em;
  font-variant-numeric:tabular-nums;color:#fff;text-decoration:none;white-space:nowrap;hyphens:manual}
.kasse__num:hover{color:#fff;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.12em}
.kasse__ic{width:.5em;height:.5em;color:var(--cta-light)}
.kasse__sub{position:relative;margin:0;font:700 .84rem/1.35 var(--f-disp);letter-spacing:.18em;text-transform:uppercase;color:var(--dark-muted);hyphens:manual}
.kasse__ledge{display:block;width:calc(100% + 2.5rem);max-width:calc(100vw - 2 * var(--gut));height:14px;margin-top:-1px;border-radius:4px;background:var(--brand);box-shadow:0 12px 26px rgba(0,0,0,.5)}
@media (max-width:560px){.kasse__ic{display:none}.kasse__win{padding-inline:.9rem;border-radius:50% 50% var(--r-sm) var(--r-sm) / 56px 56px var(--r-sm) var(--r-sm)}
  .kasse__win::before{border-radius:50% 50% var(--r-xs) var(--r-xs) / 48px 48px var(--r-xs) var(--r-xs)}
  .kasse__sign,.kasse__sub{letter-spacing:.12em}.kasse__ledge{width:100%}}

/* warn — the danger band first, then the dark split hero */
.hero--warn>.hero__wrap{padding-block:var(--sp-6) var(--sp-7)}
.warnbar{position:relative;z-index:2}
.warnbar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;pointer-events:none;
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.55) 0 8px,transparent 8px 16px)}
.warnbar__in{display:flex;align-items:center;gap:.9rem;padding-block:1rem 1.2rem}
.warnbar__ic{width:1.75em;height:1.75em}
.warnbar p{margin:0;font-size:1.06rem;font-weight:700;line-height:1.4}
.warnbar strong{color:#fff}
.warnbar__num{flex:none;margin-left:auto;display:grid;place-items:center;min-width:4.4rem;padding:.3rem .8rem;border:2px solid #fff;border-radius:var(--r-sm);
  font:700 2rem/1 var(--f-disp);font-variant-numeric:tabular-nums}
@media (max-width:560px){.warnbar__num{display:none}}

/* panel — calm: a light solid panel with a green top rule, no photo */
.hero--panel{padding-block:var(--sp-6) var(--sp-7)}
.hero__panel{position:relative;padding:clamp(1.5rem,4vw,3.25rem);border-radius:var(--r-lg);background:var(--surface);
  border:1px solid var(--line);border-top:4px solid var(--brand);box-shadow:var(--sh-sm)}
.hero--on-surface .hero__panel{background:var(--soft);box-shadow:none;border-color:transparent;border-top-color:var(--brand)}
.hero__pgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--sp-6);align-items:start}
.hero__panel .hero__copy--solo{max-width:48rem}
@media (max-width:900px){.hero__pgrid{grid-template-columns:minmax(0,1fr);gap:var(--sp-5)}}

/* split / local — light, the photo in a frame with a caption plate */
.hero--split,.hero--local{padding-block:var(--sp-6) var(--sp-7)}
.hero__media{box-shadow:var(--sh-lg)}
/* local: the door reality as a green STREET SIGN above the H1 */
.localine{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.35rem .8rem;max-width:100%;margin:0 0 var(--sp-3);padding:.4rem 1.1rem .4rem .4rem;
  border-radius:var(--r-sm);background:var(--brand);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18),var(--sh-sm);
  font:600 1rem/1.3 var(--f-disp);letter-spacing:.02em;color:#fff;hyphens:manual}
.localine__pin{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:var(--r-xs);background:rgba(0,0,0,.25);color:var(--cta-light)}
.localine__pin svg{width:18px;height:18px}
.localine__it{display:inline-flex;align-items:center;gap:.8rem;min-width:0;max-width:100%}
.localine__sep{flex:none;width:6px;height:6px;border-radius:1px;background:var(--cta-light)}

/* breadcrumbs — every link a full 44px target */
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;list-style:none;margin:0;padding:0;font-size:.92rem;color:var(--c-muted)}
.crumbs li{display:flex;align-items:center;min-height:var(--tap);margin:0}
.crumbs li:not(:last-child)::after{content:"›";content:"›" / "";margin:0 .4rem;color:var(--c-muted)}
.crumbs a{display:inline-flex;align-items:center;min-height:var(--tap);padding-inline:.3rem;color:var(--c-muted);text-decoration-color:var(--c-rule-strong)}
.crumbs a:hover{color:var(--c-head)}
.crumbs li:first-child a{margin-left:-.3rem}
.crumbs [aria-current]{padding-inline:.3rem;font-weight:700;color:var(--c-head)}

/* ── 14 · chrome ────────────────────────────────────────────────────────── */
.part-header{display:contents}   /* the part wrapper must not become the sticky header's containing block */

/* the header: LIGHT paper-white, a green rule on top, the brass call button with the number */
.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.98);border-top:4px solid var(--brand);border-bottom:1px solid var(--line);transition:box-shadow var(--t)}
@supports (backdrop-filter:blur(8px)){.site-header{background:rgba(255,255,255,.96);backdrop-filter:saturate(1.1) blur(8px)}}
.site-header.is-stuck{box-shadow:0 10px 28px rgba(10,26,19,.13)}
.hdr{display:flex;align-items:center;gap:1.25rem;min-height:var(--hdr-h);transition:min-height var(--t)}
.site-header.is-stuck .hdr{min-height:64px}
.brand{display:inline-flex;align-items:center;gap:.8rem;flex:0 1 auto;min-width:var(--tap);min-height:var(--tap);color:var(--c-head);text-decoration:none;line-height:1.05}
.brand:hover{color:var(--c-head)}
.brand__mark{flex:none;width:46px;height:46px;border-radius:var(--r-sm);overflow:hidden;box-shadow:inset 0 0 0 1px rgba(122,94,20,.45)}
.brand__mark .mark{border-radius:inherit}
.brand__t{display:flex;flex-direction:column;min-width:0}
.brand__t b{font:700 1.32rem/1.05 var(--f-disp);letter-spacing:-.005em;white-space:nowrap;color:inherit}
.brand__t span{margin-top:.2rem;font:700 .72rem/1 var(--f-disp);letter-spacing:.26em;text-transform:uppercase;color:var(--c-muted)}
.mark{display:block;width:100%;height:100%}
.mark__tile{fill:var(--cta)}
.mark__hole{fill:var(--on-cta)}
.mark--outline .mark__hole{fill:none;stroke:currentColor}
.mark--bare .mark__hole{fill:currentColor}

.mainnav{margin-left:auto}
.nav{display:flex;align-items:center;gap:.2rem;list-style:none;margin:0;padding:0}
.nav__item{position:relative;display:flex;align-items:center;margin:0}
.nav__l{display:inline-flex;align-items:center;min-height:var(--tap);padding:.5rem .85rem;border-radius:var(--r-sm);
  color:var(--c-head);font:600 1.08rem/1.2 var(--f-disp);letter-spacing:.01em;text-decoration:none;white-space:nowrap;hyphens:manual;
  transition:background-color var(--t-fast),color var(--t-fast)}
.nav__l:hover{background:var(--soft);color:var(--c-head)}
.nav__l[aria-current="page"],.nav__item.is-active>.nav__l{color:var(--brand);box-shadow:inset 0 -3px 0 var(--brand)}
.nav__tog{display:inline-grid;place-items:center;width:32px;min-height:var(--tap);margin-left:-.45rem;padding:0;border:0;border-radius:var(--r-sm);
  background:none;color:var(--c-head);cursor:pointer}
.nav__tog:hover{background:var(--soft)}
.nav__tog svg{width:18px;height:18px;transition:transform var(--t-fast)}
.nav__tog[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav__drop{position:absolute;top:calc(100% + .55rem);left:-.5rem;z-index:70;min-width:17.5rem;padding:.45rem;
  background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--brand);border-radius:var(--r);box-shadow:var(--sh);
  visibility:hidden;opacity:0;transform:translateY(-4px);transition:opacity var(--t-fast),transform var(--t-fast)}
.nav__drop::before{content:"";position:absolute;left:0;right:0;top:-.85rem;height:.85rem}   /* pointer bridge */
.nav__item.is-open>.nav__drop{visibility:visible;opacity:1;transform:none}
@media (hover:hover){.nav__item:hover>.nav__drop{visibility:visible;opacity:1;transform:none}}
.no-js .nav__item:focus-within>.nav__drop{visibility:visible;opacity:1;transform:none}
.nav__drop ul{list-style:none;margin:0;padding:0}
.nav__drop li{margin:0}
.nav__drop a{display:flex;align-items:center;min-height:var(--tap);padding:.4rem .8rem;border-radius:var(--r-sm);
  color:var(--c-head);font-size:1rem;font-weight:600;line-height:1.3;text-decoration:none}
.nav__drop a:hover{background:var(--soft);color:var(--c-head)}
.nav__drop a[aria-current="page"]{color:var(--brand);font-weight:700;box-shadow:inset 3px 0 0 var(--brand)}

.navcall{flex:none;margin-left:.4rem}
.navcall .btn{padding:.68rem 1.15rem}
.burger{display:none;flex:none;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);padding:0;
  border:1.5px solid var(--line-strong);border-radius:var(--r-sm);background:none;color:var(--c-head);cursor:pointer}
.burger__bars{position:relative;display:block;width:20px;height:2px;border-radius:2px;background:currentColor}
.burger__bars::before,.burger__bars::after{content:"";position:absolute;left:0;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform var(--t-fast)}
.burger__bars::before{top:-6px}.burger__bars::after{top:6px}
.burger[aria-expanded="true"] .burger__bars{background:transparent}
.burger[aria-expanded="true"] .burger__bars::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] .burger__bars::after{top:0;transform:rotate(-45deg)}

/* the drawer: visibility:hidden while closed keeps its links out of the tab order */
.drawer{position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - var(--hdr-h) - 84px);max-height:calc(100dvh - var(--hdr-h) - 84px);
  overflow-y:auto;overscroll-behavior:contain;background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 24px 40px rgba(10,26,19,.22);visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity var(--t),transform var(--t)}
.drawer.is-open{visibility:visible;opacity:1;transform:none}
.drawer__nav{padding:.35rem var(--gut) 0}
.drawer__nav ul{list-style:none;margin:0;padding:0}
.drawer__nav li{margin:0;border-bottom:1px solid var(--line)}
/* scoped to the NAV: a bare `.drawer a` (0,1,1) would out-rank .btn and strip the call button */
.drawer__nav a,.drawer__nav summary{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:52px;padding:.55rem 0;
  color:var(--c-head);font:600 1.15rem/1.25 var(--f-disp);letter-spacing:.01em;text-decoration:none;cursor:pointer;list-style:none}
.drawer__nav summary::-webkit-details-marker{display:none}
.drawer__nav summary svg{width:20px;height:20px;transition:transform var(--t-fast)}
.drawer details[open]>summary svg{transform:rotate(180deg)}
.drawer__sub{margin:0 0 .6rem;padding:0 0 .25rem .95rem;border-left:3px solid var(--brand)}
.drawer__nav .drawer__sub li{border-bottom:0}
.drawer__nav .drawer__sub a{min-height:44px;padding:.35rem 0;color:var(--c-text);font:500 1.02rem/1.3 var(--f)}
.drawer__nav a[aria-current="page"]{color:var(--brand);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.3em}
.drawer__call{padding:var(--sp-3) var(--gut) var(--sp-4)}
.drawer__call .btn{width:100%}

/* the header never becomes the widest thing on the page: the label leaves the call button first,
   then the nav folds into the drawer, then the brand text yields — the NUMBER always stays */
@media (max-width:1180px){.navcall .btn__l{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .navcall .btn__num{padding-left:0;border-left:0}}
@media (max-width:1000px){.mainnav{display:none}.burger{display:inline-flex}.navcall{margin-left:auto}}
@media (max-width:560px){
  :root{--hdr-h:66px}
  .hdr{gap:.6rem}
  .brand__mark{width:40px;height:40px}
  .brand__t b{font-size:1.1rem}
  .brand__t span{font-size:.64rem}
  .navcall .btn{padding:.6rem .8rem;font-size:1rem;gap:.4rem}
}
@media (max-width:470px){.site-header .brand__t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}
@media (max-width:340px){.navcall .btn__ic{display:none}.site-header .wrap{padding-inline:.6rem}}
/* without JS the drawer is simply a static menu under the header */
.no-js .site-header{position:relative}
.no-js .drawer{position:static;visibility:visible;opacity:1;transform:none;max-height:none;box-shadow:none}
@media (min-width:1001px){.no-js .drawer{display:none}}
.no-js .burger{display:none!important}

/* the footer — LIGHT paper, a "programme" layout: brand + number on top, the link columns below,
   a green legal strip at the foot. The closing call line (green) is the shared furniture of the
   closing band, rendered ONCE here. */
.site-footer{background:var(--soft);border-top:1px solid var(--line)}
.foot__call{background:var(--grad)}
/* ONE loud call at the end of a page: when <main> ends with the closing band (pk_ctaband — every
   content page), the footer's call line steps back and the footer keeps the number as calm type
   (.telbig--foot). Pages without a closing band (empty main, legal pages) keep the call line. */
body:has(.site-main .section--closing) .foot__call{display:none}
.foot__callin{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;padding-block:var(--sp-5)}
.foot__lead{max-width:40rem;margin:0;color:#fff;font:700 clamp(1.35rem,1.1rem + .9vw,1.75rem)/1.2 var(--f-disp);letter-spacing:-.005em}
.foot__lead span{display:block;margin-top:.35rem;font:400 1rem/1.5 var(--f);letter-spacing:0;color:var(--brand-muted)}
.foot__top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:var(--sp-5) var(--sp-6);align-items:end;padding-block:var(--sp-6) var(--sp-5);border-bottom:1px solid var(--line)}
.foot__blurb{max-width:34rem;margin:1.1rem 0 0;font-size:1rem;color:var(--c-muted)}
.foot__card{position:relative;padding:1.2rem 1.4rem 1.25rem;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--r);box-shadow:var(--sh-sm)}
.foot__card .phoneblock__label{color:var(--c-muted)}
.telbig--foot{font-size:clamp(1.7rem,1.3rem + 1.2vw,2.3rem)}
.foot__card .telnote{margin:.1rem 0 0;font-size:.93rem}
.foot__mail{margin:.55rem 0 0;padding-top:.55rem;border-top:1px dashed var(--line-strong);font-size:.98rem}
.foot__mail a{display:inline-flex;align-items:center;gap:.45rem;min-height:var(--tap);color:var(--c-link)}
.foot__mail svg{color:var(--c-accent)}
.foot__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-5);padding-block:var(--sp-5) var(--sp-6)}
.foot__h{display:flex;align-items:center;gap:.6rem;margin:0 0 .7rem;color:var(--c-head);font:700 .84rem/1.2 var(--f-disp);letter-spacing:.16em;text-transform:uppercase}
.foot__h::before{content:"";flex:none;width:18px;height:3px;border-radius:2px;background:var(--cta-ink)}
.foot ul,.foot__cols ul{list-style:none;margin:0;padding:0}
.foot__cols li{margin:0}
.foot__cols nav a{display:inline-flex;align-items:center;min-height:38px;line-height:1.35;color:var(--c-text);font-size:1rem;text-decoration:none}
.foot__cols nav a:hover{color:var(--brand);text-decoration:underline}
.foot__cols nav a[aria-current="page"]{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:.25em}
@media (pointer:coarse){.foot__cols nav a{min-height:var(--tap)}}
.foot__legal{background:var(--brand-deep);font-size:.93rem}
.foot__legalin{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;padding-block:var(--sp-3)}
.foot__legal p{margin:0;color:var(--brand-muted)}
.foot__legal a{color:#fff;font-variant-numeric:tabular-nums}
@media (max-width:900px){.foot__top{grid-template-columns:minmax(0,1fr);align-items:start}}
@media (max-width:700px){.foot__cols{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}}
@media (max-width:600px){.foot__callin .btn{width:100%}}

/* the sticky mobile call bar — a plain tel: link, works with JS off; its height is reserved */
.callbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;padding:.6rem var(--gut) calc(.6rem + env(safe-area-inset-bottom,0px));
  background:var(--brand-deep);border-top:1px solid rgba(255,255,255,.14);box-shadow:0 -8px 24px rgba(4,12,8,.28)}
.callbar .btn{width:100%;min-height:52px;font-size:1.15rem}
/* its height is reserved INSIDE the footer's green strip, not on <body> — no white strip under the footer */
@media (max-width:760px){.callbar{display:block}.foot__legal{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}}

.totop{position:fixed;right:clamp(.75rem,3vw,1.5rem);bottom:clamp(.75rem,3vw,1.5rem);z-index:65;display:grid;place-items:center;
  width:48px;height:48px;padding:0;border:0;border-radius:var(--r);background:var(--brand);color:#fff;cursor:pointer;
  box-shadow:var(--sh);visibility:hidden;opacity:0;transform:translateY(10px);transition:opacity var(--t),transform var(--t),background-color var(--t-fast)}
.totop.is-on{visibility:visible;opacity:1;transform:none}
.totop:hover{background:var(--brand-deep)}
.totop svg{width:22px;height:22px;stroke-width:2.4}
.totop:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--focus)}
@media (max-width:760px){.totop{bottom:88px}}

/* ── 15 · utility ───────────────────────────────────────────────────────── */
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.flexrow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.center{text-align:center}
.nowrap{white-space:nowrap}
.tabnum{font-variant-numeric:tabular-nums}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
/* vertical rhythm between stacked bricks inside ONE band (layout only) */
.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}
.mt-6{margin-top:var(--sp-6)}.mt-7{margin-top:var(--sp-7)}

/* ── 16 · motion — the allowed effects; the banlist was written first ───── */
/* Allowed: the reveal RISE (22px, never a fade — an opacity:0 block is invisible text to crawlers,
   print and axe), card/row hover lifts, the header shrink, dropdowns, the drawer, the FAQ nudge,
   the to-top button. Banned: counters, parallax, carousels, marquee animation, autoplay,
   scroll-jacking — and ANY motion on the phone CTA (nothing that holds a tel: link reveals). */
.reveal{transform:translateY(22px);transition:transform .7s var(--ease)}
.reveal.in{transform:none}
.d1{transition-delay:.05s}.d2{transition-delay:.1s}.d3{transition-delay:.15s}.d4{transition-delay:.2s}
.no-js .reveal{transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .reveal{transform:none}
  .card:hover,.pcard:hover,.rowlink:hover,.btn:hover{translate:none}
  .pcard:hover .pcard__ph img{transform:none}
}

/* ── 17 · print ─────────────────────────────────────────────────────────── */
@media print{
  .site-header,.callbar,.totop,.drawer,.orn,.hero__bg,.featureband__wrap{filter:none}
  .site-header,.callbar,.totop,.drawer,.orn,.hero__bg{display:none!important}
  body{padding-bottom:0;background:#fff;font-size:11pt}
  .section,.hero,.site-footer{padding-block:1rem;background:#fff!important;color:#000}
  .hero::after,.hero::before{display:none}
  a[href^="tel:"]::after{content:" (" attr(href) ")";font-size:.85em}
}

/* small phones: long German compounds in display titles ("Schlüsselnotdienst") must fit the column
   at 320px — scale the display size with the viewport and allow a last-resort break */
@media (max-width:420px){
  .display,.display--long,.hero--cinema-slim .display{font-size:clamp(1.8rem,8.4vw,2.4rem);overflow-wrap:break-word;hyphens:auto}
}