/* =============================================================================
   mitte-schloss24.de — the shared design LANGUAGE (every page links it unedited)
   Style: kino-landmark — a cinematic dark photo hero, a floating navy feature band, a dark photo
   gallery, generous rounded frames — re-themed for Schlüsseldienst Mitte (Berlin):
   STEEL NAVY #1b3a5c brand · near-black cinema grounds · the favicon's SIGNAL-MAGENTA #ff4dff.

   THE ONE RULE: --cta (#ff4dff) is the PHONE FILL and nothing else. As text it is 2.71:1 on white —
   it never carries a word or an icon on a light ground. The label ON the fill is --on-cta
   (#141008, 7.01:1), never white (2.71:1), never dimmed. Magenta WORDS/ICONS on dark grounds are
   --cta-light (#ff9cff, ≥ 4.86:1 on every dark/navy ground); the only magenta on a light ground is
   --cta-ink (#a1129f) as a tiny accent (the eyebrow dot, the glyph beside the big number).
   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, NAVY, 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,#f2f4f8);
  --tint:var(--wp--preset--color--tint,#e7ecf4);
  --brand-soft:var(--wp--preset--color--brand-soft,#e3eaf4);
  --danger-tint:var(--wp--preset--color--danger-tint,#fcebea);
  /* brand navy + the tonal shift (navy → lighter navy; never violet) */
  --brand:var(--wp--preset--color--brand,#1b3a5c);
  --brand-deep:var(--wp--preset--color--brand-deep,#10243d);
  --brand-grad-b:var(--wp--preset--color--brand-grad-b,#264b77);
  --grad:linear-gradient(120deg,var(--brand-deep) 0%,var(--brand) 55%,var(--brand-grad-b) 100%);
  /* cinema grounds */
  --dark:var(--wp--preset--color--dark,#0b1019);
  --dark-2:var(--wp--preset--color--dark-2,#151c29);
  --dark-deep:var(--wp--preset--color--dark-deep,#06080d);
  /* ink */
  --head:var(--wp--preset--color--head,#0e1726);
  --text:var(--wp--preset--color--text,#1f2a3c);
  --muted:var(--wp--preset--color--muted,#4e5a70);
  --dark-text:var(--wp--preset--color--dark-text,#d5dce8);
  --dark-muted:var(--wp--preset--color--dark-muted,#a3aec2);
  --brand-muted:var(--wp--preset--color--brand-muted,#c9d5e8);
  /* structure */
  --line:var(--wp--preset--color--line,#d8dfea);
  --line-strong:var(--wp--preset--color--line-strong,#6a778d);
  --line-dark:var(--wp--preset--color--line-dark,#27314a);
  --line-strong-dark:var(--wp--preset--color--line-strong-dark,#6b7894);
  /* the phone */
  --cta:var(--wp--preset--color--cta,#ff4dff);
  --cta-hover:var(--wp--preset--color--cta-hover,#e83fe8);
  --on-cta:var(--wp--preset--color--on-cta,#141008);
  --cta-light:var(--wp--preset--color--cta-light,#ff9cff);
  --cta-ink:var(--wp--preset--color--cta-ink,#a1129f);
  /* state */
  --danger:var(--wp--preset--color--danger,#b3261e);
  --success:var(--wp--preset--color--success,#1b6b45);
  --focus:var(--wp--preset--color--focus,#0e1726);
  /* the hero scrim colour as an RGB triplet (#070a10) — alpha ≥ .70 wherever text can sit */
  --scrim:7,10,16;
  /* the marquee bulbs (static, decorative) */
  --bulb:rgba(255,240,214,.62);
  /* geometry — the reference's family */
  --r-sm:10px; --r:14px; --r-lg:22px; --r-xl:30px; --pill:999px;
  /* ONE restrained shadow scale */
  --sh-sm:0 1px 2px rgba(12,20,36,.08),0 2px 8px rgba(12,20,36,.05);
  --sh:0 14px 34px rgba(12,20,36,.14);
  --sh-lg:0 26px 60px rgba(8,14,28,.28);
  /* 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:72px; --overlap:64px;
  /* motion — calm, one ease */
  --ease:cubic-bezier(.22,.61,.36,1);
  --t-fast:.16s var(--ease); --t:.3s var(--ease);
  /* type */
  --f:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --f-code:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;
}

/* ── 2 · ink contexts ───────────────────────────────────────────────────── */
/* LIGHT — the default, and every primitive with a LIGHT fill of its own. */
:root,.ctx-light,.section--surface,.section--soft,.section--tint,
.hero--on-surface,.hero--on-soft,.hero--on-tint,.hero__panel,.notice--danger{
  --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-eb-bg:var(--brand-soft); --c-eb-line:#cdd8e8;
  --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-orn:rgba(27,58,92,.05);
  --c-ring-in:#fff; --c-ring-out:var(--focus);
  color:var(--c-text);
}
/* DARK — every near-black ground: bands, cinema/marquee/warn heroes, the phone card, the reel,
   the header, its dropdowns and drawer, the call bar, the gallery cards. */
.ctx-dark,.section--dark,.section--deep,.hero--on-dark,.hero--on-deep,.phoneblock,
.site-header,.nav__drop,.drawer,.callbar,.pcard,.reel,.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);
  /* the pill is NEUTRAL on dark (a magenta-tinted fill reads as purple — banlist); only its dot is magenta */
  --c-eb-ink:#fff; --c-eb-bg:rgba(255,255,255,.07); --c-eb-line:rgba(255,255,255,.24);
  --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-orn:rgba(255,255,255,.045);
  --c-ring-in:var(--dark); --c-ring-out:var(--cta-light);
  color:var(--c-text);
}
/* NAVY — the tonal gradient objects and the navy grounds (footer, topbar, brand band, emphasised
   compare side). Secondary text here is --brand-muted: --dark-muted fails the gradient's light end. */
.section--brand,.featurecard,.callrow,.site-footer,.topbar,.compare__side--b{
  --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-eb-bg:rgba(255,255,255,.1); --c-eb-line:rgba(255,255,255,.28);
  --c-rule:rgba(255,255,255,.16); --c-rule-strong:var(--brand-muted);
  --c-badge-bg:rgba(255,255,255,.1); --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-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)}

/* ── 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.6 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-weight:800;line-height:1.14;letter-spacing:-.018em;overflow-wrap:break-word}
h1{font-size:clamp(2.125rem,1.3rem + 3.4vw,3.625rem);line-height:1.06;letter-spacing:-.026em}
h2{font-size:clamp(1.75rem,1.2rem + 2vw,2.5rem)}
h3{font-size:clamp(1.1875rem,1rem + .55vw,1.375rem);line-height:1.25}
h4{font-size:1.0625rem;line-height:1.35}
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 navy glow in the corner (never magenta) */
.section--closing{overflow:hidden}
.section--closing::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(90% 120% at 82% 0%,rgba(38,75,119,.55),transparent 58%)}
.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.
   ms_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, featurecard). */
.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 key 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(44vw,500px);height:auto;aspect-ratio:1;color:var(--c-orn);transform:translateY(-50%)}
.orn--right .orn__key{right:-9%}
.orn--left .orn__key{left:-9%}
@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 kino eyebrow: a pill with a dot. The dot is the one magenta accent a light ground gets. */
.eyebrow{display:inline-flex;align-items:center;gap:.6rem;max-width:100%;margin:0 0 var(--sp-3);padding:.42rem .95rem;
  border:1px solid var(--c-eb-line);border-radius:var(--pill);background:var(--c-eb-bg);color:var(--c-eb-ink);
  font-size:.78rem;font-weight:800;line-height:1.35;letter-spacing:.12em;text-transform:uppercase;hyphens:manual}
.eyebrow::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--c-dot)}
@media (max-width:420px){.eyebrow{letter-spacing:.08em}}

.stitle{font-size:clamp(1.75rem,1.2rem + 2vw,2.5rem);font-weight:800;line-height:1.12;letter-spacing:-.022em;
  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-size:clamp(2.125rem,1.3rem + 3.4vw,3.625rem);font-weight:800;line-height:1.06;letter-spacing:-.028em;
  margin:0 0 var(--sp-3);max-width:18ch;color:var(--c-head);hyphens:manual;-webkit-hyphens:manual}
.display--long{font-size:clamp(1.9rem,1.2rem + 2.8vw,3.125rem);max-width:22ch}
.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:.25rem}
.shead--center{text-align:center}
.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;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 .6rem;max-width:100%;
  min-height:var(--tap);padding:.8rem 1.4rem;border:2px solid var(--btn-line);border-radius:var(--pill);
  background:var(--btn-bg);color:var(--btn-ink);font:inherit;font-size:1rem;font-weight:800;line-height:1.2;
  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:.95rem 1.65rem;font-size:1.0625rem}
.btn--block{width:100%}
/* THE call capsule: pill, magenta FILL, ink label 7.01:1 (5.70 pressed). NO motion — no lift, no
   pulse, no transition of position; only the fill deepens on hover. */
.btn--call{--btn-bg:var(--cta);--btn-ink:var(--on-cta);box-shadow:var(--sh-sm)}
.btn--call:hover{--btn-bg:var(--cta-hover);translate:none}
.btn--xl{gap:.55rem;padding:.9rem 1.9rem;font-size:clamp(1.35rem,1rem + 1.4vw,1.85rem);letter-spacing:-.01em}
.btn--xl .btn__ic{width:1.05em;height:1.05em}
.btn__ic{width:1.2em;height:1.2em}
.btn__g{display:inline-flex;align-items:center;gap:.6rem;min-width:0;max-width:100%}
.btn__l{min-width:0}
.btn__num{font-variant-numeric:tabular-nums;letter-spacing:.01em;white-space:nowrap}
.btn--md .btn__g+.btn__num,.btn--lg .btn__g+.btn__num{padding-left:.6rem;border-left:1.5px solid rgba(20,16,8,.35)}
/* on a phone the capsule may wrap label over number: no divider 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-size:clamp(1.9rem,1.2rem + 2.8vw,3.25rem);font-weight:800;line-height:1.05;letter-spacing:-.02em;
  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:.72em;height:.72em;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, tags ─────────────────────────────────────── */
.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)}}
.card{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:1.6rem 1.5rem;
  background:var(--c-card-bg);border:1px solid var(--c-card-line);border-radius:var(--r-lg);
  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}
.card--dark{background:var(--dark-2);border-color:var(--line-dark)}
.cards--center .card{align-items:center;text-align:center}
.card__t{font-size:clamp(1.125rem,1rem + .45vw,1.28rem);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.5rem .25rem;border-radius:0}
.card--media>.ibadge{margin-top:-2rem;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)}
.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-size:.95rem;font-weight:800;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 circular icon badge (kino) */
.ibadge{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;
  background:var(--c-badge-bg);color:var(--c-badge-ink)}
.ibadge svg{width:23px;height:23px}
.ibadge--lg{width:58px;height:58px}
.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:#e0efe6;color:var(--success)}

.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .7rem;border-radius:var(--pill);
  background:var(--c-badge-bg);color:var(--c-eb-ink);font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}

.chips{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:0;padding:0}
.chips li{margin:0}
/* a chip has no underline, so its edge carries ≥3:1 on its own: 1.5px --c-rule-strong */
.chip{display:inline-flex;align-items:center;gap:.45rem;min-height:var(--tap);padding:.45rem 1.1rem;
  border:1.5px solid var(--c-rule-strong);border-radius:var(--pill);background:var(--c-chip-bg);color:var(--c-head);
  font-size:.95rem;font-weight:700;line-height:1.2;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,.reel .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:.875rem}
.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 floating tag chip on a photo — near-opaque ink, never a place claim */
.tagchip{position:absolute;left:1rem;bottom:1rem;z-index:2;display:inline-flex;align-items:center;gap:.5rem;
  max-width:calc(100% - 2rem);padding:.55rem 1rem;border-radius:var(--pill);background:rgba(11,16,25,.9);
  color:#fff;font-size:.9rem;font-weight:700;line-height:1.3;hyphens:manual}   /* solid, no blur (banlist: glassmorphism) */
.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:16/10}
.media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media--1610{aspect-ratio:16/10}.media--169{aspect-ratio:16/9}.media--45{aspect-ratio:4/5}
.media--43{aspect-ratio:4/3}.media--11{aspect-ratio:1}.media--21{aspect-ratio:2/1}
.media--frame{box-shadow:var(--sh)}
.fig{margin:0}
.figcap{margin:.65rem 0 0;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 ms_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 + fact cards beside a tall portrait */
.intro{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(2rem,4vw,3.5rem);align-items:center}
.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:31rem;margin-inline:auto}
/* flex, not grid: an odd last fact card stretches to the full row instead of standing orphaned */
.facts{display:flex;flex-wrap:wrap;gap:.85rem;margin:var(--sp-4) 0 0;padding:0;list-style:none}
.fact{flex:1 1 10rem;display:flex;flex-direction:column;gap:.2rem;margin:0;padding:1rem 1.15rem;border-radius:var(--r);background:var(--c-soft-bg);border:1px solid var(--c-card-line)}
.section--soft .fact,.section--tint .fact{background:var(--surface)}
.fact__ic{display:grid;place-items:center;width:34px;height:34px;margin-bottom:.35rem;border-radius:50%;background:var(--c-badge-bg);color:var(--c-badge-ink)}
.fact__ic svg{width:18px;height:18px}
.fact__t{font-size:1.02rem;font-weight:800;line-height:1.3;color:var(--c-head)}
.fact__p{font-size:.92rem;line-height:1.45;color:var(--c-muted)}
@media (max-width:900px){.intro{grid-template-columns:minmax(0,1fr)}.intro--media-left .intro__pic{order:0}}

/* ── 10 · the kino signature objects ────────────────────────────────────── */
/* FEATURE BAND — the floating gradient card over the hero's lower edge. The wrapper paints the
   next band's ground below the overlap line, so the card 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))}
.featurecard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin:0;padding:2rem 1.75rem;list-style:none;
  border-radius:var(--r-xl);background:var(--grad);box-shadow:var(--sh-lg)}
.featurecard--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.featurecard--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.feat{display:flex;flex-direction:column;align-items:center;gap:.8rem;margin:0;padding:.35rem .5rem;text-align:center}
.feat__badge{display:grid;place-items:center;flex:none;width:66px;height:66px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);color:var(--cta-light)}
.feat__badge svg{width:30px;height:30px}
.feat__txt{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.feat__t{font-size:1.04rem;font-weight:800;line-height:1.25;letter-spacing:-.01em;color:#fff;hyphens:manual}
.feat__p{font-size:.92rem;line-height:1.45;color:var(--brand-muted)}
@media (max-width:980px){.featurecard,.featurecard--3{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.5rem}
  .featurecard--3>.feat:last-child{grid-column:1 / -1}}
@media (max-width:620px){
  :root{--overlap:40px}
  .featurecard,.featurecard--2,.featurecard--3{grid-template-columns:minmax(0,1fr);gap:.4rem;padding:1.1rem 1.1rem;border-radius:var(--r-lg)}
  .featurecard--3>.feat:last-child{grid-column:auto}
  .feat{flex-direction:row;align-items:center;gap:1rem;padding:.55rem .25rem;text-align:left}
  .feat+.feat{border-top:1px solid rgba(255,255,255,.14)}
  .feat__badge{width:50px;height:50px}.feat__badge svg{width:24px;height:24px}
}

/* CALL ROW — the tonal gradient strip with the big number pill */
.callrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-4) var(--sp-5);
  padding:clamp(1.5rem,3vw,2.25rem) clamp(1.35rem,3.4vw,2.75rem);border-radius:var(--r-xl);background:var(--grad);box-shadow:var(--sh)}
.callrow__copy{flex:1 1 24rem;min-width:0}
.callrow__t{margin:0;font-size:clamp(1.3rem,1rem + 1.2vw,1.75rem);font-weight:800;line-height:1.2;letter-spacing:-.015em;color:#fff}
.callrow__sub{margin:.45rem 0 0;color:var(--brand-muted);max-width:52ch}
.callrow__call{flex:0 1 auto;min-width:0}
@media (max-width:640px){.callrow__call,.callrow__call .btn{width:100%}}

/* GALLERY — the dark services section: photo cards, whole card = one link */
.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>li.pcard--wide{grid-column:span 3}
.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 -6px;box-shadow:0 22px 46px rgba(0,0,0,.45);border-color:var(--cta)}
.pcard__ph{aspect-ratio:16/10;overflow:hidden;background:var(--line-dark)}
.pcard--wide .pcard__ph{aspect-ratio:2/1}
.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__bd{display:flex;flex-direction:column;flex:1;padding:1.35rem 1.5rem 1.5rem}
.pcard__t{display:flex;align-items:flex-start;gap:.6rem;margin:0 0 .5rem;font-size:clamp(1.15rem,1rem + .4vw,1.3rem);color:#fff}
.pcard__t svg{width:22px;height:22px;margin-top:.12em;color:var(--cta-light)}
.pcard__link{color:#fff;text-decoration:none}
.pcard__link::after{content:"";position:absolute;inset:0;z-index:1}
.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__more{display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;padding-top:1rem;color:var(--cta-light);font-size:.95rem;font-weight:800}
.pcard__more svg{width:1em;height:1em;transition:translate var(--t-fast)}
.pcard:hover .pcard__more svg{translate:4px 0}
@media (max-width:980px){
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gallery>li,.gallery>li.pcard--wide{grid-column:auto}
  .gallery--n3>li:first-child,.gallery--n5>li:first-child{grid-column:1 / -1}
  .gallery--n3>li:first-child .pcard__ph,.gallery--n5>li:first-child .pcard__ph{aspect-ratio:2/1}
  .pcard--wide .pcard__ph{aspect-ratio:16/10}
}
@media (max-width:640px){
  .gallery{grid-template-columns:minmax(0,1fr)}
  .gallery--n3>li:first-child .pcard__ph,.gallery--n5>li:first-child .pcard__ph{aspect-ratio:16/10}
}

/* PAIR — two frames with overlaid pill labels; an optional round join on the seam */
.pair{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);max-width:64rem;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--r1610 .pair__frame{aspect-ratio:16/10}
.pair--r45 .pair__frame{aspect-ratio:4/5}
.pair__frame>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pair__label{position:absolute;left:14px;top:14px;z-index:1;display:inline-flex;align-items:center;max-width:calc(100% - 28px);
  padding:.42rem .95rem;border-radius:var(--pill);background:rgba(11,16,25,.9);color:#fff;
  font-size:.8rem;font-weight:800;line-height:1.25;letter-spacing:.07em;text-transform:uppercase;hyphens:manual}
.pair__side--b .pair__label{background:rgba(255,255,255,.94);color:var(--head)}
.pair__cap{padding:1rem .2rem 0}
.pair__t{margin:0 0 .35rem;font-size:clamp(1.125rem,1rem + .45vw,1.28rem)}
.pair__cap p,.pair__frame--text p{font-size:1rem;color:var(--c-muted)}
.pair__frame--text{aspect-ratio:auto;flex:1;padding:4.1rem 1.6rem 1.6rem;background:var(--c-card-bg);border:1px solid var(--c-card-line)}
.pair__side--b .pair__frame--text{background:var(--c-soft-bg)}
.pair__side--a .pair__frame--text .pair__label{background:var(--brand);color:#fff}
.pair__side--b .pair__frame--text .pair__label{background:var(--surface);color:var(--head);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.pair__list{list-style:none;margin:.75rem 0 0;padding:0}
.pair__list li{position:relative;padding-left:1.1rem;font-size:1rem;color:var(--c-text)}
.pair__list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--c-accent)}
.pair__join{position:absolute;left:50%;top:50%;z-index:3;display:grid;place-items:center;width:58px;height:58px;
  transform:translate(-50%,-50%);border-radius:50%;background:var(--brand);color:#fff;box-shadow:0 0 0 5px var(--surface),var(--sh);
  font-size:.82rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;hyphens:manual}
.section--soft .pair__join{box-shadow:0 0 0 5px var(--soft),var(--sh)}
.section--tint .pair__join{box-shadow:0 0 0 5px var(--tint),var(--sh)}
.section--dark .pair__join,.section--deep .pair__join{background:var(--surface);color:var(--head);box-shadow:0 0 0 5px var(--dark),var(--sh)}
/* 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--r1610 .pair__join{top:calc((100cqw - var(--sp-4)) / 2 * 10 / 32)}
.pair--photo.pair--r45 .pair__join{top:calc((100cqw - var(--sp-4)) / 2 * 5 / 8)}
@media (max-width:700px){
  .pair{grid-template-columns:minmax(0,1fr)}
  .pair__join,.pair--photo .pair__join{position:relative;left:auto;top:auto;justify-self:center;transform:none;margin:-2.4rem 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:-.6rem 0}
}

/* TÜRWELTEN — the signature film strip. Perforations are a tiny inline SVG (data: — allowed by
   the CSP img-src), frame numbers are the reel's edge code. Static: no scroller, no motion. */
.reel{--perf:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='12'%3E%3Crect x='6' y='0' width='14' height='12' rx='3' fill='%23ffffff' fill-opacity='.2'/%3E%3C/svg%3E");
  --perf-v:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='26'%3E%3Crect x='0' y='6' width='12' height='14' rx='3' fill='%23ffffff' fill-opacity='.2'/%3E%3C/svg%3E");
  position:relative}
.reel__strip{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0;padding:44px 14px;list-style:none;
  background:var(--dark-deep);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--line-dark),var(--sh-lg)}
.reel--2 .reel__strip{grid-template-columns:repeat(2,minmax(0,1fr))}
.reel--4 .reel__strip{grid-template-columns:repeat(4,minmax(0,1fr))}
/* `space` = whole holes only, evenly spread — never a half-cut hole at the strip's end */
.reel__strip::before,.reel__strip::after{content:"";position:absolute;left:14px;right:14px;height:12px;pointer-events:none;
  background:var(--perf) left center/26px 12px space no-repeat}
.reel__strip::before{top:16px}
.reel__strip::after{bottom:16px}
.reel__frame{position:relative;display:flex;flex-direction:column;min-width:0;margin:0;padding:1.35rem 1.35rem 1.4rem;
  background:var(--dark-2);border-radius:8px;box-shadow:inset 0 0 0 1px var(--line-dark)}
.reel__top{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1rem}
.reel__no{font:700 .8rem/1 var(--f-code);letter-spacing:.16em;color:var(--dark-muted)}
.reel__no::before{content:"▸ "}
.reel__tag{display:inline-flex;align-items:center;min-height:30px;padding:.3rem .8rem;border-radius:var(--pill);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.26);color:#fff;
  font-size:.74rem;font-weight:800;line-height:1.2;letter-spacing:.09em;text-transform:uppercase;text-align:right;hyphens:manual}
.reel__ph{margin:0 0 1rem;aspect-ratio:16/10;overflow:hidden;border-radius:6px;background:var(--line-dark)}
.reel__ph img{width:100%;height:100%;object-fit:cover}
.reel__t{margin:0 0 .75rem;font-size:clamp(1.15rem,1rem + .45vw,1.3rem);color:#fff}
.reel__where{display:flex;align-items:flex-start;gap:.5rem;margin:0 0 .85rem;font-size:.95rem;color:var(--dark-text)}
.reel__where>svg,.reel__wl svg{width:1.1em;height:1.1em;margin-top:.15em;color:var(--cta-light)}
.reel__where:not(.reel__where--text){flex-direction:column;gap:.5rem}
.reel__wl{display:inline-flex;align-items:center;gap:.4rem;margin:0;font-weight:800;color:#fff}
.reel__door p{margin:0 0 .6rem;font-size:1rem;color:var(--dark-text)}
.reel__say{display:flex;flex-direction:column;gap:.3rem;margin:auto 0 0;padding-top:1rem;border-top:1px dashed var(--line-strong-dark);font-size:1rem;color:#fff}
.reel__door+.reel__say{margin-top:auto}
.reel__sl{display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--cta-light)}
.reel__sl svg{width:1.05em;height:1.05em}
.reel__say q{font-style:italic}
@media (max-width:1100px){.reel--4 .reel__strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  .reel__strip,.reel--2 .reel__strip,.reel--4 .reel__strip{grid-template-columns:minmax(0,1fr);padding:14px 42px}
  .reel__strip::before,.reel__strip::after{top:14px;bottom:14px;left:15px;right:auto;width:12px;height:auto;background:var(--perf-v) center top/12px 26px no-repeat space}
  .reel__strip::after{left:auto;right:15px}
}
@media (max-width:420px){
  .reel__strip{padding:10px 30px}
  .reel__strip::before{left:9px}.reel__strip::after{right:9px}
  .reel__frame{padding:1.15rem 1rem 1.2rem}
}

/* ── 11 · steps, notice, icon list, compare, trust, ledger, rows, FAQ ───── */
/* steps (kino): circular gradient numerals in cards; an odd last row is centred, never orphaned */
.steps{list-style:none;margin:0;padding:0}
.steps--cards{--gap:var(--sp-4);display:flex;flex-wrap:wrap;justify-content:center;gap: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;padding:1.75rem 1.4rem 1.6rem;text-align:center;
  background:var(--c-card-bg);border:1px solid var(--c-card-line);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.step__n{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 1rem;border-radius:50%;
  background:linear-gradient(140deg,var(--brand-grad-b),var(--brand));color:#fff;font-size:1.2rem;font-weight:800;
  font-variant-numeric:tabular-nums;box-shadow:0 6px 16px rgba(16,36,61,.3)}
.step__t{font-size:1.1rem;margin:0 0 .4rem}
.step p{margin:0;font-size:.98rem;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}.steps--cards>.step{flex-basis:100%;display:grid;grid-template-columns:auto minmax(0,1fr);gap:1rem;align-items:start;padding:1.25rem;text-align:left}
  .steps--cards .step__n{margin:0;width:48px;height:48px}.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);text-align:left;
  background:none;border:0;border-radius:0;box-shadow:none}
.steps--timeline>.step:last-child{padding-bottom:0}
.steps--timeline>.step::before{content:"";position:absolute;left:26px;top:58px;bottom:6px;width:2px;background:var(--c-rule)}
.steps--timeline>.step:last-child::before{content:none}
.steps--timeline .step__n{margin:0}
.steps--timeline .step__c{padding-top:.75rem;min-width:0}

/* notice */
.notice{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;padding:1.35rem 1.5rem;
  background:var(--c-card-bg);border:1px solid var(--c-card-line);border-left:5px 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-size:2.35rem;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
.notice__num span{margin-top:.3rem;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;text-align:center}
.notice__tag{display:flex;align-items:center;gap:.45rem;margin:0 0 .4rem;font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--c-accent)}
.notice__tag svg{width:1.25em;height:1.25em}
.notice__h{font-size:1.2rem;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(--line-strong-dark)}
@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.1rem;margin:.55rem 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.15rem 1.25rem;border-radius:var(--r);background:var(--c-card-bg);border:1px solid var(--c-card-line)}
.section--surface .iclist--boxed>li{background:var(--soft);border-color:transparent}
@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 navy one */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4)}
.compare__side{min-width:0;padding:1.75rem 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-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--c-accent)}
.compare__tag svg{width:1.2em;height:1.2em}
.compare__h{font-size:1.25rem;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:50%;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-radius:var(--r-lg);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;box-shadow:none}
.trust--dark{background:var(--dark-2);border-color:var(--line-dark)}
.trust__i{display:flex;align-items:flex-start;gap:.9rem;min-width:0;margin:0;padding:1.4rem 1.4rem}
.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.06rem}
.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-size:1rem;font-weight:800;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,.section--tint .ledger__k,.hero__panel .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:.85rem 1.1rem .85rem .85rem;border:1px solid var(--c-card-line);border-radius:var(--r-lg);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);translate:0 -2px;color:inherit}
.rowlink__t{min-width:0}
.rowlink__h{display:block;margin:0 0 .15rem;font-size:clamp(1.1rem,1rem + .4vw,1.25rem);color:var(--c-head)}
.rowlink__p{display:block;font-size:.98rem;color:var(--c-muted)}
.rowlink__thumb{display:block;width:128px;height:80px;overflow:hidden;border-radius:var(--r);background:var(--c-soft-bg)}
.rowlink__thumb img{width:100%;height:100%;object-fit:cover}
.rowlink__n{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--c-badge-bg);
  color:var(--c-badge-ink);font-size:1.05rem;font-weight:800;font-variant-numeric:tabular-nums}
.rowlink__go{display:inline-flex;align-items:center;gap:.45rem;font-size:.95rem;font-weight:800;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:72px;height:56px}
  .rowlink__go{grid-column:2;font-size:.9rem}
}

/* FAQ — <details>, works without JS */
.faq{display:grid;gap:.75rem;max-width:52rem}
.faq--center{margin-inline:auto}
.faq__i{background:var(--c-card-bg);border:1px solid var(--c-card-line);border-radius:var(--r);overflow:hidden;
  transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.faq__i[open]{border-color:var(--c-rule-strong);box-shadow:var(--sh-sm)}
.section--soft .faq__i,.section--tint .faq__i{background:var(--surface)}
.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-size:1.06rem;font-weight:700;line-height:1.4;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:50%;background:var(--c-badge-bg);transition:transform var(--t),background-color var(--t-fast)}
.faq__ic::before,.faq__ic::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:2px;border-radius:2px;background:var(--c-badge-ink);transform:translate(-50%,-50%)}
.faq__ic::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq__i[open] .faq__ic{transform:rotate(45deg)}
.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:ms-faq-in .32s var(--ease)}
@keyframes ms-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(38,75,119,.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:1px solid var(--c-rule)}
.phoneblock__label{margin:0 0 .2rem;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--c-muted)}
.phoneblock .telbig{font-size:clamp(1.3rem,9.2cqw,2.75rem)}
.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:1px solid var(--c-rule)}
}
@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:1px solid var(--c-rule)}
/* the number sizes itself by ITS column, never by the viewport — it can never overflow */
.phoneband .telbig{font-size:clamp(1.5rem,11cqw,3rem)}
@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:1px solid var(--c-rule)}
}

.ctaband{max-width:48rem;margin-inline:auto;text-align:center}
.ctaband__t{max-width:22ch;margin-inline:auto;font-size:clamp(1.9rem,1.3rem + 2.2vw,2.75rem)}
.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)}
.ctaband--split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--sp-6);align-items:center;max-width:none;text-align:left}
.ctaband--split .ctaband__t,.ctaband--split .ctaband__lead{margin-inline:0}
.ctaband--split .ctaband__lead{margin-bottom:0}
.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);gap:var(--sp-4)}}

/* ── 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}}

/* cinema — full-bleed photo under a heavy scrim; text only where the scrim is ≥ .70 */
.hero--cinema,.hero--cinema-slim{display:flex;align-items:center}
.hero--cinema{min-height:clamp(560px,82vh,760px)}
.hero--cinema-slim{min-height:clamp(440px,62vh,580px)}
.hero--cinema>.hero__wrap,.hero--cinema-slim>.hero__wrap{padding-block:clamp(3rem,7vh,5rem)}
.hero--cinema.hero--overlap>.hero__wrap,.hero--cinema-slim.hero--overlap>.hero__wrap{padding-bottom:calc(var(--overlap) + clamp(2.5rem,6vh,4rem))}
.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--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}
.hero--cinema::after{background:
  linear-gradient(90deg,rgba(var(--scrim),.9) 0%,rgba(var(--scrim),.84) 40%,rgba(var(--scrim),.7) 66%,rgba(var(--scrim),.42) 100%),
  linear-gradient(180deg,rgba(var(--scrim),.3) 0%,rgba(var(--scrim),0) 32%,rgba(var(--scrim),.55) 100%)}
.hero--cinema .hero__inner{max-width:43rem}
.hero--cinema .display{font-size:clamp(2.25rem,1.3rem + 3.6vw,3.75rem);text-shadow:0 2px 24px rgba(0,0,0,.35)}
/* slim: a solid dark copy field, the photo offset to the right */
.hero--cinema-slim .hero__bg{left:36%}
.hero--cinema-slim::after{background:linear-gradient(90deg,rgb(var(--scrim)) 0%,rgb(var(--scrim)) 36%,rgba(var(--scrim),.74) 52%,rgba(var(--scrim),.28) 100%)}
.hero--cinema-slim .hero__inner{max-width:34rem}
.hero--cinema-slim .display{max-width:16ch}
/* below 1100px the text spans the photo: one uniform, heavier scrim (≥ .72 everywhere) */
@media (max-width:1100px){
  .hero--cinema-slim .hero__bg{left:0}
  .hero--cinema::after,.hero--cinema-slim::after{background:linear-gradient(180deg,rgba(var(--scrim),.72) 0%,rgba(var(--scrim),.78) 55%,rgba(var(--scrim),.9) 100%)}
  .hero--cinema .hero__inner,.hero--cinema-slim .hero__inner{max-width:40rem}
}
@media (max-width:760px){
  .hero--cinema,.hero--cinema-slim{min-height:0}
  .hero--cinema>.hero__wrap,.hero--cinema-slim>.hero__wrap{padding-block:2.5rem 3rem}
  .hero--cinema.hero--overlap>.hero__wrap,.hero--cinema-slim.hero--overlap>.hero__wrap{padding-bottom:calc(var(--overlap) + 2.25rem)}
}

/* marquee — Notdienst: the darkest hero, the number on a static bulb-framed board */
.hero--marquee{padding-block:var(--sp-6) var(--sp-7)}
.hero--marquee.has-bg::after{background:rgba(6,8,13,.86)}
.hero--marquee::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(70% 60% at 50% 38%,rgba(38,75,119,.34),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 .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}
.marquee{position:relative;width:100%;max-width:52rem;margin:var(--sp-4) auto 0;padding:2.1rem clamp(1.1rem,4vw,2.75rem) 2rem;
  border-radius:var(--r-xl);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)}
.marquee::before{content:"";position:absolute;inset:11px;border:5px dotted var(--bulb);border-radius:calc(var(--r-xl) - 9px);pointer-events:none}
.marquee__top,.marquee__sub{position:relative;margin:0;font-size:.8rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--dark-muted);hyphens:manual}
.marquee__top{color:var(--cta-light)}
.marquee__num{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.3em;max-width:100%;min-height:var(--tap);margin:.55rem 0 .7rem;
  font-size:clamp(1.8rem,.55rem + 5.6vw,4.5rem);font-weight:800;line-height:1.05;letter-spacing:-.015em;
  font-variant-numeric:tabular-nums;color:#fff;text-decoration:none;white-space:nowrap;hyphens:manual}
.marquee__num:hover{color:#fff;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.12em}
.marquee__ic{width:.5em;height:.5em;color:var(--cta-light)}
@media (max-width:480px){.marquee__ic{display:none}.marquee{padding-inline:1.1rem}.marquee__top,.marquee__sub{letter-spacing:.12em}}

/* warn — the danger band first, then the dark hero */
.hero--warn>.hero__wrap{padding-block:var(--sp-6) var(--sp-7)}
.warnbar{position:relative;z-index:2}
.warnbar__in{display:flex;align-items:center;gap:.9rem;padding-block:.95rem}
.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-size:1.9rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
@media (max-width:560px){.warnbar__num{display:none}}

/* panel — calm: a light solid panel, 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-xl);background:var(--surface);
  border:1px solid var(--line);box-shadow:var(--sh)}
.hero--on-surface .hero__panel{background:var(--soft);box-shadow:none;border-color:transparent}
.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 rounded frame */
.hero--split,.hero--local{padding-block:var(--sp-6) var(--sp-7)}
.hero__media{box-shadow:var(--sh-lg)}
.localine{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.35rem .75rem;max-width:100%;margin:0 0 var(--sp-3);padding:.4rem 1.1rem .4rem .4rem;
  border-radius:var(--pill);background:var(--c-card-bg);border:1px solid var(--c-card-line);box-shadow:var(--sh-sm);
  font-size:.95rem;font-weight:700;line-height:1.3;color:var(--c-head);hyphens:manual}
.hero--on-surface .localine{background:var(--soft);box-shadow:none}
.localine__pin{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff}
.localine__pin svg{width:18px;height:18px}
.localine__it{display:inline-flex;align-items:center;gap:.75rem;min-width:0;max-width:100%}
.localine__sep{flex:none;width:5px;height:5px;border-radius:50%;background:var(--c-accent)}

/* 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:.9rem;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 .35rem;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)}
/* on a photo scrim the muted ink is --brand-muted (5.13:1 at the lightest scrim point) */
.hero--cinema,.hero--cinema-slim,.hero--marquee.has-bg{--c-muted:var(--brand-muted)}

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

/* topbar: Berlin-Mitte + the trade + the number (no availability claim) */
.topbar{background:var(--brand-deep);font-size:.9rem}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:.25rem 1.5rem;min-height:var(--tap)}
.topbar p{display:flex;align-items:center;gap:.5rem;margin:0;color:var(--brand-muted)}
.topbar p svg{width:1.05em;height:1.05em;color:var(--cta-light)}
.topbar__areas b{color:#fff;font-weight:700}
.topbar a{display:inline-flex;align-items:center;min-height:var(--tap);color:#fff;font-weight:800;text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums}
.topbar a:hover{color:#fff;text-decoration:underline}
@media (max-width:1100px){.topbar__areas .topbar__more{display:none}}
@media (max-width:760px){.topbar{display:none}}

.site-header{position:sticky;top:0;z-index:60;background:rgba(11,16,25,.97);border-bottom:1px solid rgba(255,255,255,.08);transition:box-shadow var(--t)}
@supports (backdrop-filter:blur(8px)){.site-header{background:rgba(11,16,25,.93);backdrop-filter:saturate(1.2) blur(8px)}}
.site-header.is-stuck{box-shadow:0 12px 30px rgba(0,0,0,.3)}
.hdr{display:flex;align-items:center;gap:1rem;min-height:var(--hdr-h);transition:min-height var(--t)}
.site-header.is-stuck .hdr{min-height:62px}
.brand{display:inline-flex;align-items:center;gap:.75rem;flex:0 1 auto;min-width:var(--tap);min-height:var(--tap);color:#fff;text-decoration:none;line-height:1.1}
.brand:hover{color:#fff}
.brand__mark{flex:none;width:44px;height:44px;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.brand__t{display:flex;flex-direction:column;min-width:0}
.brand__t b{font-size:1.14rem;font-weight:800;letter-spacing:-.015em;white-space:nowrap;color:inherit}
.brand__t span{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dark-muted)}
.mark{display:block;width:100%;height:100%}
.mark__tile{fill:var(--cta)}
.mark__key{stroke:var(--on-cta)}
.mark--outline .mark__key,.mark--bare .mark__key{stroke:currentColor}

.mainnav{margin-left:auto}
.nav{display:flex;align-items:center;gap:.15rem;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 .8rem;border-radius:10px;
  color:var(--dark-text);font-size:1rem;font-weight:600;text-decoration:none;white-space:nowrap;hyphens:manual;
  transition:background-color var(--t-fast),color var(--t-fast)}
.nav__l:hover{background:rgba(255,255,255,.08);color:#fff}
.nav__l[aria-current="page"],.nav__item.is-active>.nav__l{color:#fff;box-shadow:inset 0 -2px 0 #fff}
.nav__tog{display:inline-grid;place-items:center;width:32px;min-height:var(--tap);margin-left:-.45rem;padding:0;border:0;border-radius:8px;
  background:none;color:var(--dark-text);cursor:pointer}
.nav__tog:hover{background:rgba(255,255,255,.08);color:#fff}
.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% + .5rem);left:-.5rem;z-index:70;min-width:17.5rem;padding:.5rem;
  background:var(--dark-2);border:1px solid var(--line-dark);border-radius:var(--r);box-shadow:var(--sh-lg);
  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:-.75rem;height:.75rem}   /* 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:9px;
  color:var(--dark-text);font-size:1rem;font-weight:600;line-height:1.3;text-decoration:none}
.nav__drop a:hover{background:rgba(255,255,255,.07);color:#fff}
.nav__drop a[aria-current="page"]{color:#fff;font-weight:800;box-shadow:inset 3px 0 0 var(--cta-light)}
.nav__hub{margin-bottom:.35rem;padding-bottom:.35rem;border-bottom:1px solid var(--line-dark)}
.nav__hub a{color:#fff;font-weight:800}

.navcall{flex:none;margin-left:.5rem}
.navcall .btn{padding:.7rem 1.2rem}
.burger{display:none;flex:none;align-items:center;justify-content:center;width:var(--tap);height:var(--tap);padding:0;
  border:1.5px solid rgba(255,255,255,.34);border-radius:12px;background:none;color:#fff;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(--dark-2);border-top:1px solid var(--line-dark);
  box-shadow:0 24px 40px rgba(0,0,0,.45);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-dark)}
/* scoped to the NAV: a bare `.drawer a` (0,1,1) would out-rank .btn and strip the call capsule */
.drawer__nav a,.drawer__nav summary{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:50px;padding:.55rem 0;
  color:#fff;font-size:1.08rem;font-weight:700;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:2px solid var(--line-strong-dark)}
.drawer__nav .drawer__sub li{border-bottom:0}
.drawer__nav .drawer__sub a{min-height:44px;padding:.35rem 0;color:var(--dark-text);font-size:1rem;font-weight:600}
.drawer__nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--cta-light);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){
  .hdr{gap:.6rem}
  .brand__mark{width:40px;height:40px;border-radius:11px}
  .brand__t b{font-size:1rem}
  .brand__t span{font-size:.66rem}
  .navcall .btn{padding:.6rem .85rem;font-size:.95rem;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}

/* footer — brand-deep ground; the closing call line is the shared furniture, rendered ONCE here */
.site-footer{background:var(--brand-deep)}
.foot__call{border-bottom:1px solid rgba(255,255,255,.12)}
/* ONE loud call at the end of a page: when <main> ends with the closing band (ms_ctaband — every
   content page), the footer's pill 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 pill 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-size:clamp(1.2rem,1rem + .8vw,1.55rem);font-weight:800;line-height:1.3;letter-spacing:-.01em}
.foot__lead span{display:block;margin-top:.3rem;font-size:1rem;font-weight:400;letter-spacing:0;color:var(--brand-muted)}
.foot{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:var(--sp-5);padding-block:var(--sp-6) var(--sp-5)}
.foot .brand__t span{color:var(--brand-muted)}
.foot__blurb{max-width:26rem;margin:1rem 0 0;font-size:.98rem;color:var(--brand-muted)}
.foot__mail{margin:.25rem 0 0;font-size:.98rem}
.foot__mail a{display:inline-flex;align-items:center;min-height:var(--tap);color:#fff}
.foot__phone{margin:1.1rem 0 0}
.foot__phone .telnote{margin:0;font-size:.9rem;color:var(--brand-muted)}
.telbig--foot{font-size:clamp(1.45rem,1.2rem + .8vw,1.75rem)}
.foot__h{margin:0 0 .6rem;color:#fff;font-size:.95rem;font-weight:800;letter-spacing:.02em}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:0}
.foot nav a{display:inline-flex;align-items:center;min-height:38px;line-height:1.35;color:var(--brand-muted);font-size:.98rem;text-decoration:none}
.foot nav a:hover{color:#fff;text-decoration:underline}
.foot nav a[aria-current="page"]{color:#fff;text-decoration:underline;text-decoration-color:var(--cta-light);text-underline-offset:.25em}
@media (pointer:coarse){.foot nav a{min-height:var(--tap)}}
.foot__group+.foot__group{margin-top:var(--sp-4)}
.foot__legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1.5rem;
  padding-block:var(--sp-3) var(--sp-4);border-top:1px solid rgba(255,255,255,.12);font-size:.92rem;color:var(--brand-muted)}
.foot__legal p{margin:0}
.foot__legal a{color:#fff;font-variant-numeric:tabular-nums}
@media (max-width:1000px){.foot{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.foot{grid-template-columns:minmax(0,1fr)}.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:rgba(11,16,25,.97);border-top:1px solid rgba(255,255,255,.1);box-shadow:0 -8px 24px rgba(0,0,0,.25)}
.callbar .btn{width:100%;min-height:52px;font-size:1.08rem}
/* its height is reserved INSIDE the footer (navy), not on <body> — no white strip under the footer */
@media (max-width:760px){.callbar{display:block}.site-footer{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:50px;height:50px;padding:0;border:0;border-radius:50%;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/bulb 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,.topbar,.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}
}