/* ============================================================
   RONCALLI EVENT — /events/  ·  ENTWURF 3
   Näher an roncalli.de: Beige-Welt, echte CI-Tokens,
   condensed Caps-Headlines, dynamische asymmetrische Sektionen
   (Editorial-Stil à la dein-speisesalon.de).
============================================================ */

:root {
  /* --- Live Roncalli Brand Tokens --- */
  --black:#000; --green:#3d5557;
  --red:#c02b3e; --red-dark:#9e1f30;
  --yellow:#ffd97c; --gold:#c4a65f; --ticket-yellow:#ffca4b;
  --beige:#faf1e0; --dark-beige:#e2c599;
  --blue:#02658e; --dark-blue:#00364e; --light-blue:#65c0db;
  --grey:#727272; --lightgrey:#f6f6f6;
  --footer-blue:#bdd4e2; --sky:#bdd4e2;
  --white:#fff; --off-white:#faf1e0; --off-white-alt:#fcfbfb; --bg-white:#f6f6f6;
  --text-black:#3c3c3c; --grey-ui:#7d7d7d;
  --blue-radial: radial-gradient(circle at 0.53% 0.53%, #69a9c5 0%, #096792 139%);
  --gold-radial: radial-gradient(circle at 0% 0%, #e0a927 0%, #6b4f0a 141%);
  --dark-blue-radial: radial-gradient(circle at 0% 0%, #006c9d 0%, #00324a 141%);

  --r-s:4px; --r-menu:12px; --r-m:16px; --r-l:24px; --r-xl:32px; --r-pill:999px;

  --sh-tiny:0 2px 6px rgba(0,0,0,.19);
  --sh-s:0 8px 26px rgba(0,54,78,.10);
  --sh-m:0 16px 44px rgba(0,54,78,.14);
  --sh-l:0 30px 80px rgba(0,54,78,.20);

  /* Proxima-Nova / Proxima-Condensed / Modesto → freie Näherungen */
  --font-body:"Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-display:"Barlow Semi Condensed", "Arial Narrow", sans-serif;

  --container:1216px;
  --gutter:clamp(20px,5vw,64px);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; font-family:var(--font-body); font-size:17px; line-height:1.7;
  color:var(--text-black); background:var(--beige);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden;
}
img,svg,video{ display:block; max-width:100%; }
button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; }
a{ color:var(--blue); text-decoration:none; }

h1,h2,h3,h4{
  font-family:var(--font-display); font-weight:700; line-height:.98;
  letter-spacing:-.005em; margin:0; text-wrap:balance;
}
p{ margin:0; text-wrap:pretty; }

.container{ width:100%; max-width:var(--container); margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter); }
.section{ padding:clamp(64px,9vw,128px) 0; position:relative; }
.section--tight{ padding:clamp(48px,6vw,84px) 0; }

/* Display headline helpers — condensed CAPS, mixed weight */
.display{ font-family:var(--font-display); text-transform:uppercase; line-height:1.1; letter-spacing:-.01em; }
.display .thin{ font-weight:500; }
.display .heavy{ font-weight:800; }
.display .red{ color:var(--red); }
.h-hero{ font-size:clamp(52px,9vw,128px); font-weight:800; }
.h-xl{ font-size:clamp(44px,6.4vw,92px); font-weight:800; }
.h-l{ font-size:clamp(34px,4.4vw,64px); font-weight:800; }
.h-m{ font-size:clamp(28px,3vw,46px); font-weight:700; }
.h-s{ font-size:clamp(22px,2.1vw,30px); font-weight:700; }

.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-display); font-weight:700; font-size:15px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--red); margin-bottom:22px;
}
.eyebrow::before{ content:""; width:34px; height:3px; background:var(--red); }
.eyebrow--light{ color:var(--ticket-yellow); }
.eyebrow--light::before{ background:var(--ticket-yellow); }

.lead{ font-size:clamp(17px,1.4vw,20px); color:#5a5247; line-height:1.75; max-width:58ch; }

/* Oversized faint section watermark */
.wm{ position:absolute; font-family:var(--font-display); font-weight:800; text-transform:uppercase;
  font-size:clamp(120px,22vw,320px); line-height:.8; color:rgba(0,54,78,.04);
  pointer-events:none; z-index:0; letter-spacing:-.03em; user-select:none; }

/* ============================================================
   BUTTONS
============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:15px 30px;
  font-family:var(--font-display); font-weight:700; font-size:18px; text-transform:uppercase; letter-spacing:.02em;
  border-radius:var(--r-pill); line-height:1; white-space:nowrap;
  transition:transform .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn .arrow{ transition:transform .18s ease; }
.btn:hover .arrow{ transform:translateX(4px); }
.btn--primary{ background:var(--red); color:var(--white); box-shadow:0 10px 26px rgba(192,43,62,.30); }
.btn--primary:hover{ background:var(--red-dark); transform:translateY(-2px); box-shadow:0 16px 34px rgba(192,43,62,.36); }
.btn--dark{ background:var(--dark-blue); color:var(--white); }
.btn--dark:hover{ background:#00263a; transform:translateY(-2px); }
.btn--ghost{ background:transparent; color:var(--dark-blue); border:2px solid rgba(0,54,78,.25); }
.btn--ghost:hover{ border-color:var(--dark-blue); background:var(--dark-blue); color:#fff; }
.btn--on-dark{ background:var(--white); color:var(--dark-blue); }
.btn--on-dark:hover{ background:var(--beige); transform:translateY(-2px); }
.btn--lg{ padding:18px 40px; font-size:20px; }

/* Ticket-style CTA (scalloped notches) */
.ticket{ position:relative; background:var(--red); color:#fff; font-family:var(--font-display); font-weight:700;
  text-transform:uppercase; letter-spacing:.04em; font-size:18px; padding:14px 30px; border-radius:var(--r-s);
  display:inline-flex; align-items:center; gap:10px; line-height:1; box-shadow:0 10px 26px rgba(192,43,62,.3);
  transition:background .18s ease, transform .18s ease; }
.ticket:hover{ background:var(--red-dark); transform:translateY(-2px); }
.ticket::before,.ticket::after{ content:""; position:absolute; top:50%; transform:translateY(-50%);
  width:14px; height:14px; border-radius:50%; background:var(--beige); }
.ticket::before{ left:-7px; } .ticket::after{ right:-7px; }
.ticket--ondark::before,.ticket--ondark::after{ background:var(--dark-blue); }

/* ============================================================
   HEADER — Roncalli-Stil (transparent, zentriertes Jubiläums-Logo)
============================================================ */
.r-header{ position:fixed; top:0; left:0; right:0; z-index:100; transition:background .3s ease, box-shadow .3s ease, padding .3s ease; padding:14px 0; }
.r-header.is-scrolled{ background:var(--beige); box-shadow:var(--sh-tiny); padding:8px 0; }
.r-nav{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px; }
.r-menu{ display:flex; align-items:center; gap:26px; list-style:none; margin:0; padding:0; }
.r-menu--right{ justify-content:flex-end; }
.r-menu a{ font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  font-size:16px; color:#fff; transition:color .2s ease; }
.is-scrolled .r-menu a{ color:var(--dark-blue); }
.r-menu a:hover{ color:var(--ticket-yellow); }
.is-scrolled .r-menu a:hover{ color:var(--red); }
.r-logo{ display:block; }
.r-logo img{ height:74px; width:auto; transition:height .3s ease; filter:drop-shadow(0 2px 8px rgba(0,0,0,.25)); }
.is-scrolled .r-logo img{ height:54px; filter:none; }
.r-logo-fallback{ font-family:var(--font-display); font-weight:800; font-size:26px; text-transform:uppercase; color:#fff; letter-spacing:.04em; text-align:center; line-height:.9; }
.is-scrolled .r-logo-fallback{ color:var(--dark-blue); }
.r-logo-fallback small{ display:block; font-size:13px; color:var(--ticket-yellow); letter-spacing:.3em; }
.r-actions{ display:flex; align-items:center; gap:18px; justify-content:flex-end; }
.r-phone{ display:inline-flex; align-items:center; gap:8px; color:#fff; font-family:var(--font-display); font-weight:600; font-size:16px; }
.is-scrolled .r-phone{ color:var(--dark-blue); }
.r-phone svg{ width:20px; height:20px; }
.r-burger{ display:none; width:46px; height:46px; align-items:center; justify-content:center; color:#fff; }
.is-scrolled .r-burger{ color:var(--dark-blue); }

@media (max-width:1080px){
  .r-menu--left, .r-menu--right{ display:none; }
  .r-nav{ grid-template-columns:auto 1fr auto; }
  .r-logo{ justify-self:start; }
  .r-burger{ display:flex; }
  .r-phone span{ display:none; }
}

/* Mobile slide-down menu */
.r-mobile{ position:fixed; inset:0; z-index:99; background:var(--dark-blue); color:#fff; padding:96px var(--gutter) 40px;
  transform:translateY(-100%); transition:transform .35s ease; overflow-y:auto; }
.r-mobile.open{ transform:translateY(0); }
.r-mobile ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.r-mobile a{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:32px; color:#fff; letter-spacing:.01em; padding:10px 0; display:block; border-bottom:1px solid rgba(255,255,255,.12); }
.r-mobile a:hover{ color:var(--ticket-yellow); }
.r-mobile .m-cta{ margin-top:28px; }

/* ============================================================
   HERO — clean full-bleed media
============================================================ */
.hero{ position:relative; height:100svh; min-height:600px; background:var(--dark-blue); overflow:hidden; }
.hero image-slot, .hero .hero-fallback{ position:absolute; inset:0; width:100%; height:100%; }
.hero .hero-fallback{
  background:
    radial-gradient(120% 100% at 78% 12%, rgba(101,192,219,.30) 0%, transparent 55%),
    radial-gradient(130% 110% at 12% 96%, rgba(192,43,62,.42) 0%, transparent 60%),
    linear-gradient(160deg,#014b6c 0%, #00293c 100%);
}
.hero-grad{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,38,56,.5) 0%, rgba(0,38,56,.05) 26%, transparent 55%, rgba(0,38,56,.55) 100%); }
.hero-tag{ position:absolute; bottom:84px; left:50%; transform:translateX(-50%); z-index:3; text-align:center;
  font-family:ui-monospace,Menlo,monospace; font-size:12px; letter-spacing:.04em; color:rgba(255,255,255,.7);
  background:rgba(0,0,0,.32); padding:7px 16px; border-radius:var(--r-pill); backdrop-filter:blur(6px); pointer-events:none; }
.hero-badge{ position:absolute; left:var(--gutter); bottom:96px; z-index:3; color:#fff; max-width:680px; }
.hero-badge .kick{ font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.22em; font-size:15px; color:var(--ticket-yellow); margin-bottom:14px; }
.hero-badge h1{ font-size:clamp(40px,6.4vw,92px); text-transform:uppercase; line-height:.9; }
.hero-badge h1 .thin{ font-weight:500; display:block; }
.hero-scroll{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,.85); font-family:var(--font-display); font-size:13px; letter-spacing:.22em; text-transform:uppercase; font-weight:600; }
.hero-scroll .mouse{ width:26px; height:42px; border:2px solid rgba(255,255,255,.6); border-radius:var(--r-pill); position:relative; }
.hero-scroll .mouse::after{ content:""; position:absolute; top:7px; left:50%; transform:translateX(-50%); width:3px; height:8px; border-radius:2px; background:var(--ticket-yellow); animation:scrollDot 1.6s ease-in-out infinite; }
@keyframes scrollDot{ 0%,100%{opacity:0; transform:translate(-50%,0)} 50%{opacity:1; transform:translate(-50%,9px)} }
@media (max-width:760px){ .hero-badge{ bottom:120px; } .hero-tag{ display:none; } }

/* ============================================================
   WELCOME — asymmetrisch, Bild bricht nach rechts aus
============================================================ */
.welcome{ background:var(--beige); position:relative; overflow:hidden; }
.welcome .container{ position:relative; z-index:1; }
.welcome-head{ max-width:640px; }
.welcome-head .display{ font-size:clamp(36px,4.4vw,60px); color:var(--dark-blue); margin-bottom:22px; }
/* Foto links, Text rechts; vertikal zentriert -> Bild sitzt nie „zu tief" */
.welcome-body{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; margin-top:8px; }
@media (min-width:980px){ .welcome-body{ grid-template-columns:minmax(0,460px) 1fr; gap:clamp(44px,5vw,76px); } }
.welcome-text .lead{ margin-bottom:30px; }
.welcome-meta{ display:flex; flex-direction:column; gap:18px; border-top:2px solid var(--dark-beige); padding-top:26px; }
.welcome-meta .wm-row{ display:flex; gap:16px; align-items:baseline; }
.welcome-meta .wm-k{ font-family:var(--font-display); font-weight:800; font-size:34px; color:var(--red); min-width:120px; line-height:1; }
.welcome-meta .wm-v{ color:#5a5247; font-size:15px; }
.welcome-figure{ position:relative; border-radius:var(--r-l); overflow:hidden; box-shadow:var(--sh-m); aspect-ratio:16/11; }
@media (min-width:980px){
  .welcome-figure{ aspect-ratio:4/5; }
}
.welcome-figure image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.welcome-figure .img-tag{ position:absolute; left:16px; bottom:14px; z-index:1; font-family:ui-monospace,Menlo,monospace; font-size:11px; color:rgba(255,255,255,.85); background:rgba(0,0,0,.35); padding:4px 10px; border-radius:var(--r-pill); }
.welcome-figure .float-badge{ position:absolute; left:22px; top:22px; z-index:1; background:var(--ticket-yellow); color:var(--dark-blue); font-family:var(--font-display); font-weight:800; text-transform:uppercase; padding:14px 18px; border-radius:var(--r-m); line-height:.95; box-shadow:var(--sh-s); }
.welcome-figure .float-badge b{ display:block; font-size:30px; } .welcome-figure .float-badge span{ font-size:12px; letter-spacing:.08em; }

/* ============================================================
   MARQUEE TEXT (dynamic divider)
============================================================ */
.text-marquee{ background:var(--dark-blue); color:var(--beige); padding:22px 0; overflow:hidden; }
.text-marquee .tm-row{ display:flex; gap:40px; width:max-content; animation:marquee 30s linear infinite; align-items:center; }
.text-marquee span{ font-family:var(--font-display); font-weight:800; text-transform:uppercase; font-size:clamp(26px,3vw,44px); letter-spacing:.01em; white-space:nowrap; }
.text-marquee .star{ color:var(--ticket-yellow); font-size:24px; }

/* ============================================================
   STATS band
============================================================ */
.stats{ background:var(--dark-blue); color:#fff; }
.stats-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:44px 28px; }
@media (min-width:800px){ .stats-grid{ grid-template-columns:repeat(4,1fr); gap:40px; } }
.stat .num{ font-family:var(--font-display); font-weight:800; font-size:clamp(46px,4.8vw,66px); line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ticket-yellow); display:block; margin-bottom:14px; min-height:clamp(46px,4.8vw,66px); }
.stat .num .u{ font-size:.62em; font-weight:700; margin-left:2px; }
.stat .lbl{ font-size:15px; color:rgba(255,255,255,.8); line-height:1.5; max-width:24ch; padding-top:16px; border-top:1px solid rgba(255,255,255,.16); }

/* ============================================================
   SERVICES — icon + headline only
============================================================ */
.services{ background:var(--beige); }
.services-head{ max-width:760px; margin-bottom:clamp(40px,5vw,64px); }
.services-head .display{ color:var(--dark-blue); }
.svc-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (min-width:720px){ .svc-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:1000px){ .svc-grid{ grid-template-columns:repeat(4,1fr); } }
/* Leistungen: schlichte Auflistung — nur Icon + Titel, feine Trennlinie, kein Kasten/kein Hover.
   (Reihen-Layout + Trennlinie kommen aus dem Block weiter unten in dieser Datei.) */
.svc{ display:flex; gap:16px; }
.svc:hover{ transform:none; box-shadow:none; background:transparent; color:inherit; }
.svc .ic{ width:44px; height:44px; color:var(--red); }
.svc:hover .ic{ color:var(--red); }
.svc h3{ font-size:22px; text-transform:uppercase; color:var(--dark-blue); line-height:.98; margin-top:auto; }
.svc:hover h3{ color:var(--dark-blue); }

/* ============================================================
   OCCASIONS — tall cards
============================================================ */
.occ{ background:var(--white); }
.occ-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:48px; }
.occ-head .display{ color:var(--dark-blue); max-width:18ch; }
.occ-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:700px){ .occ-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1040px){ .occ-grid{ grid-template-columns:repeat(3,1fr); } }
.occ-card{ position:relative; border-radius:var(--r-l); overflow:hidden; aspect-ratio:3/4; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; isolation:isolate; transition:transform .25s ease, box-shadow .25s ease; }
.occ-card:hover{ transform:translateY(-5px); box-shadow:var(--sh-l); }
.occ-card .bg{ position:absolute; inset:0; z-index:-2; transition:transform .5s ease; }
.occ-card:hover .bg{ transform:scale(1.06); }
.occ-card .bg.c1{ background:linear-gradient(160deg,#013a54,#c02b3e); }
.occ-card .bg.c2{ background:linear-gradient(160deg,#00364e,#02658e); }
.occ-card .bg.c3{ background:linear-gradient(160deg,#013a54,#65c0db); }
.occ-card .bg.c4{ background:linear-gradient(160deg,#5a3d12,#c4a65f); }
.occ-card .bg.c5{ background:linear-gradient(160deg,#2a2a2a,#3d5557); }
.occ-card::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, transparent 35%, rgba(0,20,30,.8) 100%); }
.occ-card .inner{ padding:28px; }
.occ-card .num-badge{ font-family:var(--font-display); font-weight:800; font-size:15px; color:var(--ticket-yellow); letter-spacing:.08em; margin-bottom:8px; }
.occ-card h3{ font-size:32px; text-transform:uppercase; line-height:.96; margin-bottom:8px; }
.occ-card .hook{ font-size:15px; color:rgba(255,255,255,.88); font-family:var(--font-body); }
.occ-card .go{ margin-top:16px; display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:15px; color:#fff; }
.occ-card .img-tag{ position:absolute; top:14px; left:16px; z-index:1; font-family:ui-monospace,Menlo,monospace; font-size:10px; color:rgba(255,255,255,.55); }
.occ-card--cta{ background:var(--dark-blue); aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; text-align:center; }
.occ-card--cta .inner{ padding:32px; }
.occ-card--cta h3{ color:#fff; margin-bottom:18px; }

/* ============================================================
   PROJECTS — bento + modal
============================================================ */
.projects{ background:#fff; } /* abgesetzt von Leistungen (beige) */
.projects-head{ max-width:820px; margin-bottom:52px; }
.projects-head .display{ color:var(--dark-blue); }
.bento{ display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:720px){ .bento{ grid-template-columns:repeat(6,1fr); grid-auto-flow:dense; } }
.proj{ position:relative; border-radius:var(--r-l); overflow:hidden; cursor:pointer; background:var(--dark-blue); color:#fff; isolation:isolate; min-height:240px; display:flex; flex-direction:column; justify-content:flex-end; text-align:left; transition:transform .25s ease, box-shadow .25s ease; }
.proj:hover{ transform:translateY(-5px); box-shadow:var(--sh-l); }
.proj:hover .proj-media{ transform:scale(1.06); }
.proj-media{ position:absolute; inset:0; z-index:-2; transition:transform .5s ease; }
.proj-media.m1{ background:linear-gradient(150deg,#013a54,#c02b3e); }
.proj-media.m2{ background:linear-gradient(150deg,#00364e,#02658e); }
.proj-media.m3{ background:linear-gradient(150deg,#3a2a0c,#c4a65f); }
.proj-media.m4{ background:linear-gradient(150deg,#013a54,#65c0db); }
.proj-media.m5{ background:linear-gradient(150deg,#2a2226,#9e1f30); }
.proj-media.m6{ background:linear-gradient(150deg,#012c40,#3d5557); }
.proj::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, transparent 40%, rgba(0,18,28,.84) 100%); }
.proj .p-inner{ padding:28px; }
.proj .p-meta{ font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--ticket-yellow); margin-bottom:10px; display:flex; gap:8px; flex-wrap:wrap; }
.proj .p-meta .dot{ color:rgba(255,255,255,.4); }
.proj h3{ font-size:clamp(26px,2.4vw,38px); text-transform:uppercase; line-height:.96; margin-bottom:8px; max-width:18ch; }
.proj .p-hook{ font-family:var(--font-body); font-size:15px; color:rgba(255,255,255,.85); max-width:42ch; }
.proj .play-pill{ position:absolute; top:20px; right:20px; z-index:1; width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,.16); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; color:#fff; border:1px solid rgba(255,255,255,.3); transition:background .2s ease, transform .2s ease; }
.proj:hover .play-pill{ background:var(--red); border-color:var(--red); transform:scale(1.08); }
.proj .img-tag{ position:absolute; top:16px; left:18px; z-index:1; font-family:ui-monospace,Menlo,monospace; font-size:10px; color:rgba(255,255,255,.5); }
@media (min-width:720px){
  .proj.big{ grid-column:span 4; min-height:460px; }
  .proj.tall{ grid-column:span 2; grid-row:span 2; min-height:460px; }
  .proj.wide{ grid-column:span 4; min-height:240px; }
  .proj.std{ grid-column:span 2; min-height:240px; }
}
.modal-backdrop{ position:fixed; inset:0; z-index:200; background:rgba(0,24,36,.62); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; }
.modal-backdrop.is-open{ opacity:1; visibility:visible; }
.modal{ background:var(--white); border-radius:var(--r-xl); overflow:hidden; width:100%; max-width:880px; max-height:90vh; overflow-y:auto; transform:translateY(24px) scale(.98); transition:transform .3s ease; box-shadow:var(--sh-l); }
.modal-backdrop.is-open .modal{ transform:translateY(0) scale(1); }
.modal-media{ aspect-ratio:16/9; position:relative; background:var(--dark-blue); }
.modal-media .play-pill{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:72px; height:72px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--red); display:flex; align-items:center; justify-content:center; border:none; }
.modal-media .play-pill:hover{ transform:translate(-50%,-50%) scale(1.06); }
.modal-close{ position:absolute; top:16px; right:16px; z-index:3; width:42px; height:42px; border-radius:50%; background:rgba(0,0,0,.4); color:#fff; backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; font-size:22px; }
.modal-close:hover{ background:var(--red); }
.modal-body{ padding:clamp(28px,4vw,48px); }
.modal-body .m-meta{ font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--red); margin-bottom:14px; display:flex; gap:10px; flex-wrap:wrap; }
.modal-body .m-meta .dot{ color:var(--dark-beige); }
.modal-body h3{ font-size:clamp(30px,3.4vw,46px); text-transform:uppercase; color:var(--dark-blue); line-height:.98; margin-bottom:20px; }
.modal-body .m-story{ font-size:18px; color:#5a5247; margin-bottom:28px; }
.modal-body .m-voc{ border-left:3px solid var(--red); padding:4px 0 4px 22px; font-size:19px; color:var(--dark-blue); font-style:italic; margin-bottom:10px; }
.modal-body .m-voc-attr{ padding-left:22px; font-size:14px; color:var(--grey); font-weight:600; margin-bottom:28px; }

/* ============================================================
   FEATURE ROWS — asymmetrische, alternierende Bild/Text-Blöcke
============================================================ */
.feature{ background:var(--white); overflow:hidden; }
.feature + .feature{ border-top:1px solid var(--dark-beige); }
.feature-row{ display:grid; grid-template-columns:1fr; gap:32px; align-items:center; }
@media (min-width:920px){ .feature-row{ grid-template-columns:1fr 1fr; gap:clamp(40px,5vw,80px); } }
.feature-media{ position:relative; border-radius:var(--r-l); overflow:hidden; min-height:360px; box-shadow:var(--sh-s); }
@media (min-width:920px){ .feature-media{ min-height:480px; } }
.feature-media image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.feature-media .img-tag{ position:absolute; left:16px; bottom:14px; z-index:1; font-family:ui-monospace,Menlo,monospace; font-size:11px; color:rgba(255,255,255,.85); background:rgba(0,0,0,.35); padding:4px 10px; border-radius:var(--r-pill); }
.feature-row.reverse .feature-media{ order:-1; }
@media (min-width:920px){ .feature-row.reverse .feature-text{ order:2; } .feature-row.reverse .feature-media{ order:1; } }
.feature-text .eyebrow{ margin-bottom:18px; }
.feature-text .display{ color:var(--dark-blue); margin-bottom:22px; }
.feature-text .lead{ margin-bottom:26px; }
.feature-list{ list-style:none; margin:0 0 28px; padding:0; display:grid; grid-template-columns:1fr; gap:0; }
@media (min-width:560px){ .feature-list{ grid-template-columns:1fr 1fr; } }
.feature-list li{ display:flex; gap:12px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--beige); font-size:16px; color:var(--text-black); }
.feature-list .gl{ width:20px; height:20px; color:var(--red); flex-shrink:0; margin-top:2px; }

/* ============================================================
   ASSETS (Moat) — dark editorial
============================================================ */
.assets{ background:var(--dark-blue); color:#fff; position:relative; overflow:hidden; }
.assets .wm{ color:rgba(255,255,255,.05); top:40px; right:-20px; }
.assets-head{ max-width:820px; margin-bottom:clamp(40px,5vw,64px); position:relative; z-index:1; }
.assets-head .display{ color:#fff; margin-bottom:18px; }
.assets-head .display em{ font-style:normal; color:var(--ticket-yellow); }
.assets-head .lead{ color:rgba(255,255,255,.8); }
.asset-grid{ display:grid; grid-template-columns:1fr; gap:16px; position:relative; z-index:1; }
@media (min-width:620px){ .asset-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:980px){ .asset-grid{ grid-template-columns:repeat(3,1fr); gap:18px; } }
.asset-card{ border-radius:var(--r-l); overflow:hidden; background:#012b3f; border:1px solid rgba(255,255,255,.08); transition:transform .2s ease, border-color .2s ease; }
.asset-card:hover{ transform:translateY(-5px); border-color:var(--ticket-yellow); }
.asset-card.feature-big{ grid-column:1 / -1; }
@media (min-width:980px){ .asset-card.feature-big{ grid-column:span 2; grid-row:span 2; } }
.asset-card .a-media{ aspect-ratio:4/3; position:relative; }
.asset-card.feature-big .a-media{ aspect-ratio:16/11; height:100%; }
.asset-card .a-media image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.asset-card .a-media .img-tag{ position:absolute; bottom:12px; left:14px; z-index:1; font-family:ui-monospace,Menlo,monospace; font-size:10px; color:rgba(255,255,255,.6); }
.asset-card .a-body{ padding:22px 24px 26px; }
.asset-card.feature-big .a-body{ padding:28px 30px 32px; }
.asset-card h3{ font-size:24px; text-transform:uppercase; margin-bottom:7px; }
.asset-card.feature-big h3{ font-size:clamp(28px,2.6vw,40px); }
.asset-card .a-cap{ font-family:var(--font-display); font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--ticket-yellow); font-weight:700; }

/* ============================================================
   TEAM
============================================================ */
.team{ background:var(--white); }
.team-head{ max-width:780px; margin-bottom:16px; }
.team-head .display{ color:var(--dark-blue); }
.lead-contact{ display:grid; grid-template-columns:1fr; background:var(--dark-blue); color:#fff; border-radius:var(--r-xl); overflow:hidden; margin:40px 0 56px; }
@media (min-width:760px){ .lead-contact{ grid-template-columns:320px 1fr; } }
.lead-contact .lc-photo{ position:relative; min-height:300px; }
.lead-contact .lc-photo image-slot{ position:absolute; inset:0; width:100%; height:100%; }
.lead-contact .lc-photo .ph-tag{ position:absolute; bottom:14px; left:16px; z-index:1; font-family:ui-monospace,Menlo,monospace; font-size:10px; color:rgba(255,255,255,.7); background:rgba(0,0,0,.35); padding:3px 9px; border-radius:var(--r-pill); }
.lead-contact .lc-body{ padding:clamp(28px,3.5vw,48px); display:flex; flex-direction:column; justify-content:center; }
.lead-contact .lc-eyebrow{ font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:var(--ticket-yellow); margin-bottom:14px; }
.lead-contact h3{ font-size:clamp(32px,3.4vw,52px); text-transform:uppercase; margin-bottom:6px; }
.lead-contact .lc-role{ color:var(--light-blue); font-weight:600; margin-bottom:22px; font-family:var(--font-body); white-space:pre-line; } /* the title may carry a line break (TCK-0054) */
.lead-contact .lc-quote{ font-size:19px; color:rgba(255,255,255,.92); font-style:italic; line-height:1.55; margin-bottom:26px; max-width:46ch; font-family:var(--font-body); }
.lead-contact .lc-contacts{ display:flex; flex-wrap:wrap; gap:12px; }
.lc-chip{ display:inline-flex; align-items:center; gap:9px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); color:#fff; padding:11px 18px; border-radius:var(--r-pill); font-weight:600; font-size:15px; transition:background .2s ease; }
.lc-chip:hover{ background:rgba(255,255,255,.2); }
.lc-chip svg{ width:17px; height:17px; }
.team-dept{ margin-top:48px; }
.team-dept-title{ display:flex; align-items:center; gap:16px; margin-bottom:26px; font-family:var(--font-display); font-weight:800; font-size:24px; color:var(--dark-blue); text-transform:uppercase; letter-spacing:.02em; }
.team-dept-title::after{ content:""; flex:1; height:2px; background:var(--beige); }
.team-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
@media (min-width:620px){ .team-grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:940px){ .team-grid{ grid-template-columns:repeat(4,1fr); } }
.member{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; padding:22px; border-radius:var(--r-m); background:var(--beige); transition:box-shadow .2s ease, transform .2s ease; }
.member:hover{ box-shadow:var(--sh-s); transform:translateY(-3px); }
.avatar{ width:58px; height:58px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:21px; color:#fff; flex-shrink:0; }
.member .m-name{ font-family:var(--font-display); font-weight:800; font-size:21px; text-transform:uppercase; color:var(--dark-blue); line-height:.98; }
.member .m-role{ font-size:13.5px; color:#5a5247; line-height:1.4; }

/* ============================================================
   REFS marquee
============================================================ */
.refs{ background:var(--bg-white); overflow:hidden; }
.refs .container{ text-align:center; }
.refs .eyebrow{ justify-content:center; }
.refs .display{ color:var(--dark-blue); margin-bottom:8px; }
.refs .sub{ color:#5a5247; margin-bottom:30px; }
.marquee{ position:relative; width:100vw; left:50%; transform:translateX(-50%); }
.marquee::before,.marquee::after{ content:""; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none; }
.marquee::before{ left:0; background:linear-gradient(90deg, var(--bg-white), transparent); }
.marquee::after{ right:0; background:linear-gradient(270deg, var(--bg-white), transparent); }
.marquee-row{ display:flex; gap:0; width:max-content; animation:marquee 90s linear infinite; }
.marquee-row.r2{ animation-duration:60s; animation-direction:reverse; }
.marquee:hover .marquee-row{ animation-play-state:paused; }
.logo-item{ flex:0 0 auto; width:210px; height:110px; display:flex; align-items:center; justify-content:center; }
.logo-item span{ font-family:var(--font-display); font-weight:700; font-size:28px; text-transform:uppercase; color:#3a3a3a; opacity:.42; transition:opacity .25s ease; }
.logo-item:hover span{ opacity:.9; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ============================================================
   FORM
============================================================ */
.form-sec{ background:#fff; } /* Anfrage abgesetzt von FAQ (beige) */
.form-wrap{ display:grid; grid-template-columns:1fr; gap:48px; }
@media (min-width:940px){ .form-wrap{ grid-template-columns:0.85fr 1.15fr; gap:72px; align-items:start; } }
.form-intro .display{ color:var(--dark-blue); margin-bottom:20px; }
.form-intro .promise{ font-size:19px; color:#5a5247; margin-bottom:32px; max-width:40ch; }
.promise-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:16px; }
.promise-list li{ display:flex; gap:14px; align-items:flex-start; font-size:16px; color:var(--text-black); }
.promise-list .ck{ width:26px; height:26px; border-radius:50%; background:rgba(192,43,62,.12); color:var(--red); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.promise-list .ck svg{ width:15px; height:15px; }
.form-card{ background:var(--white); border-radius:var(--r-xl); padding:clamp(26px,3.5vw,44px); box-shadow:var(--sh-s); }
.f-row{ display:grid; grid-template-columns:1fr; gap:18px; margin-bottom:18px; }
@media (min-width:620px){ .f-row.two{ grid-template-columns:1fr 1fr; } }
.field{ display:flex; flex-direction:column; gap:4px; }
.field label{ font-family:var(--font-display); font-weight:700; font-size:14px; line-height:1.15; margin:0; text-transform:uppercase; letter-spacing:.03em; color:var(--dark-blue); }
.field label .opt{ color:var(--grey); font-weight:500; text-transform:none; letter-spacing:0; }
.field input,.field textarea,.field select{ height:52px; border:1.5px solid var(--dark-beige); background:var(--white); border-radius:var(--r-s); padding:0 16px; font:inherit; font-size:16px; color:var(--text-black); transition:border-color .15s ease, box-shadow .15s ease; width:100%; }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2300364e' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:44px; }
.field textarea{ height:auto; min-height:120px; padding:14px 16px; resize:vertical; font-family:inherit; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--red); box-shadow:0 0 0 4px rgba(192,43,62,.1); }
.slider-field .label-row{ display:flex; justify-content:space-between; align-items:baseline; }
.slider-val{ font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--red); }
.slider-wrap input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:5px; border-radius:999px; background:var(--dark-beige); outline:none; margin-top:16px; }
.slider-wrap input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:var(--red); cursor:pointer; border:3px solid var(--white); box-shadow:0 2px 8px rgba(192,43,62,.4); }
.slider-wrap input[type=range]::-moz-range-thumb{ width:22px; height:22px; border-radius:50%; background:var(--red); cursor:pointer; border:3px solid var(--white); }
.upload{ border:2px dashed var(--dark-beige); border-radius:var(--r-m); padding:22px; text-align:center; color:#5a5247; background:var(--beige); cursor:pointer; transition:border-color .15s, background .15s; }
.upload:hover{ border-color:var(--red); background:rgba(192,43,62,.03); }
.upload .u-t{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; color:var(--dark-blue); margin-bottom:4px; font-size:15px; }
.upload .u-s{ font-size:13px; }
.upload.is-drag{ border-color:var(--red); background:rgba(192,43,62,.06); }
.upload.has-file{ border-style:solid; border-color:var(--dark-blue); }
.upload.has-file .u-t{ text-transform:none; overflow-wrap:anywhere; }
.upload.is-error{ border-color:var(--red); }
.upload.is-error .u-s{ color:var(--red); font-weight:600; }
.consent{ display:flex; gap:12px; align-items:flex-start; margin:22px 0; font-size:14px; color:#5a5247; }
.consent input{ margin-top:3px; width:18px; height:18px; accent-color:var(--red); flex-shrink:0; }
.form-card .btn{ width:100%; justify-content:center; }
@media (min-width:620px){ .form-card .btn{ width:auto; } }
.form-success{ margin-top:20px; padding:16px 20px; border-radius:var(--r-m); background:rgba(61,85,87,.1); border:1px solid var(--green); color:var(--green); font-weight:600; }

/* ============================================================
   DIRECT CONTACT — sky tone
============================================================ */
.direct{ background:var(--sky); }
.direct-card{ background:var(--white); border-radius:var(--r-xl); padding:clamp(32px,4vw,56px); max-width:860px; margin:0 auto; display:grid; grid-template-columns:1fr; gap:28px; box-shadow:var(--sh-s); }
@media (min-width:720px){ .direct-card{ grid-template-columns:1fr 1fr; } }
.direct-phone{ font-family:var(--font-display); font-weight:800; font-size:clamp(32px,3.6vw,48px); color:var(--red); display:inline-flex; align-items:center; gap:14px; }
.direct-mail{ display:inline-flex; align-items:center; gap:10px; font-size:18px; color:var(--dark-blue); font-weight:600; margin-top:14px; }
.direct-mail:hover{ color:var(--red); }
.direct-mail svg,.direct-phone svg{ color:var(--red); }
.direct-addr{ color:#5a5247; font-size:15px; margin-top:22px; line-height:1.6; }
.direct-priv{ border-left:3px solid var(--gold); padding-left:20px; }
.direct-priv h4{ font-size:22px; text-transform:uppercase; color:var(--dark-blue); margin-bottom:10px; }
.direct-priv p{ color:#5a5247; font-size:15px; }

/* ============================================================
   FAQ
============================================================ */
.faq{ background:var(--beige); }
.faq-wrap{ display:grid; grid-template-columns:1fr; gap:40px; }
@media (min-width:900px){ .faq-wrap{ grid-template-columns:0.8fr 1.2fr; gap:64px; align-items:start; } }
.faq-head .display{ color:var(--dark-blue); }
.faq-list{ display:flex; flex-direction:column; }
.faq-item{ border-top:1px solid var(--dark-beige); }
.faq-item:last-child{ border-bottom:1px solid var(--dark-beige); }
.faq-q{ width:100%; text-align:left; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:16px 0; font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:clamp(20px,1.8vw,25px); line-height:1.2; color:var(--dark-blue); } /* line-height: the reset's 1.7 spread the two-line questions apart */
.faq-q .pm{ flex-shrink:0; width:32px; height:32px; border-radius:50%; border:2px solid var(--dark-beige); display:flex; align-items:center; justify-content:center; color:var(--red); transition:transform .25s ease, background .2s, color .2s, border-color .2s; }
.faq-item.open .faq-q .pm{ background:var(--red); color:#fff; border-color:var(--red); transform:rotate(45deg); }
.faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
.faq-a .faq-a-inner{ padding:0 0 24px; color:#5a5247; font-size:16px; max-width:62ch; }
.faq-a .faq-a-inner p + p{ margin-block-start:1em; } /* the theme reset zeroes p margins; multi-paragraph answers need visible breaks */

/* ============================================================
   TAKEAWAY
============================================================ */
.takeaway{ background:var(--white); }
.takeaway .display{ color:var(--dark-blue); margin-bottom:44px; }
.take-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:760px){ .take-grid{ grid-template-columns:1fr 1fr; } }
.take-card{ border:1px solid var(--dark-beige); border-radius:var(--r-xl); padding:clamp(28px,3.5vw,44px); display:flex; gap:28px; align-items:center; background:var(--beige); }
.take-card .pdf{ flex-shrink:0; width:120px; aspect-ratio:3/4; border-radius:var(--r-s); background:linear-gradient(160deg,#013a54,#00263a); position:relative; box-shadow:var(--sh-m); overflow:hidden; }
.take-card .pdf .pt{ position:absolute; bottom:14px; left:14px; right:14px; font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:13px; color:var(--ticket-yellow); }
.take-card .pdf .py{ position:absolute; top:14px; left:14px; font-family:ui-monospace,Menlo,monospace; font-size:10px; color:rgba(255,255,255,.6); }
.take-card .li-badge{ flex-shrink:0; width:92px; height:92px; border-radius:var(--r-m); background:var(--dark-blue); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:40px; }
.take-card .t-body h3{ font-size:26px; text-transform:uppercase; color:var(--dark-blue); margin-bottom:8px; }
.take-card .t-body p{ color:#5a5247; font-size:15px; margin-bottom:18px; }

/* ============================================================
   JOBS
============================================================ */
.jobs{ background:var(--bg-white); }
.jobs-card{ background:var(--dark-blue); color:#fff; border-radius:var(--r-xl); padding:clamp(32px,5vw,64px); display:flex; flex-direction:column; gap:22px; align-items:flex-start; }
@media (min-width:760px){ .jobs-card{ flex-direction:row; align-items:center; justify-content:space-between; } }
.jobs-card .j-text{ max-width:52ch; }
.jobs-card h3{ font-size:clamp(28px,3vw,44px); text-transform:uppercase; margin-bottom:12px; }
.jobs-card h3 em{ font-style:normal; color:var(--ticket-yellow); }
.jobs-card p{ color:rgba(255,255,255,.82); }

/* ============================================================
   FOOTER — sky tone like live
============================================================ */
.site-footer{ background:var(--footer-blue); color:var(--dark-blue); padding:clamp(56px,7vw,88px) 0 36px; font-size:15px; }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:40px; margin-bottom:52px; }
/* Five columns only fit wide screens; on tablets the brand takes its own row above the four lists. */
@media (min-width:720px){ .footer-grid{ grid-template-columns:repeat(4,1fr); } .footer-grid > :first-child{ grid-column:1 / -1; } }
@media (min-width:1100px){ .footer-grid{ grid-template-columns:2fr repeat(4,1fr); } .footer-grid > :first-child{ grid-column:auto; } }
.footer-brand{ font-family:var(--font-display); font-weight:800; font-size:30px; text-transform:uppercase; color:var(--dark-blue); margin-bottom:14px; letter-spacing:.02em; }
.footer-brand .sub{ color:var(--red); }
.footer-tag{ max-width:36ch; line-height:1.6; color:#244a5e; }
.footer-col h4{ font-family:var(--font-display); font-size:15px; text-transform:uppercase; letter-spacing:.08em; color:var(--dark-blue); margin-bottom:16px; font-weight:700; }
.footer-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
.footer-col a{ color:#244a5e; }
.footer-col a:hover{ color:var(--red); }
.footer-bottom{ padding-top:28px; border-top:1px solid rgba(0,54,78,.18); display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:13px; color:#3a6076; }
.footer-bottom a{ color:#3a6076; }
.foerder{ margin-top:18px; font-size:11px; color:#3a6076; line-height:1.6; max-width:80ch; }

/* ============================================================
   STICKY MOBILE CTA
============================================================ */
.sticky-mob{ position:fixed; left:12px; right:12px; bottom:12px; z-index:120; background:var(--dark-blue); border-radius:var(--r-m); padding:10px; display:none; gap:8px; box-shadow:var(--sh-l); transform:translateY(140%); transition:transform .3s ease; }
.sticky-mob.show{ transform:translateY(0); }
.sticky-mob a{ flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px; border-radius:var(--r-s); font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:15px; color:#fff; }
.sticky-mob a.p{ background:var(--red); }
.sticky-mob a.s{ border:1px solid rgba(255,255,255,.3); }
.sticky-mob .x{ color:rgba(255,255,255,.6); padding:0 8px; }
@media (max-width:760px){ .sticky-mob{ display:flex; } }

/* ============================================================
   SCROLL REVEAL
============================================================ */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .marquee-row,.text-marquee .tm-row{ animation:none !important; }
  .hero-scroll .mouse::after{ animation:none !important; }
}

/* ============================================================
   WP-KOMPATIBILITÄT (Woogency) — Eventseite im WordPress-Kontext.
   Auf der Eventseite ist das Theme-Bundle main.css abgekoppelt;
   diese Regeln ersetzen die <image-slot>-Web-Component durch echte
   Medien und integrieren wiederverwendete parasol-Block-Markups.
============================================================ */

/* Echte Bilder/Videos in den Medien-Containern (statt <image-slot>) absolut füllen */
.hero > img, .hero > video, .hero-media > img, .hero-media > video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.welcome-figure img, .feature-media img, .asset-card .a-media img, .lead-contact .lc-photo img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}

/* WordPress Admin-Bar: fixed Header nicht überdecken */
.admin-bar .r-header{ top:32px; }
@media (max-width:782px){ .admin-bar .r-header{ top:46px; } }

/* Skip-Link */
.skip-link{ position:absolute; left:-9999px; top:0; z-index:1000; background:var(--dark-blue); color:#fff; padding:10px 16px; border-radius:0 0 8px 0; }
.skip-link:focus{ left:0; }

/* Rücklink zur Hauptseite betonen */
.r-back{ font-weight:700; color:var(--red); }
.r-back:hover{ color:var(--red-dark); }

/* Footer-Social (Roncalli_Social_Nav_Walker gibt <li><a><svg></a></li> aus) */
.footer-social{ list-style:none; display:flex; gap:12px; padding:0; margin:18px 0 0; }
.footer-social a{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:var(--r-pill); background:rgba(255,255,255,.12); color:#fff; transition:background .18s ease; }
.footer-social a:hover{ background:var(--red); }
/* Hover: roter Kreis + WEISSER Glyph (sonst faerbt .menu__social den Glyph rot -> rot auf rot = unsichtbar) */
.footer-social a:hover svg{ fill:#fff; }
.footer-social svg{ width:20px; height:20px; transition:fill .18s ease; }
.footer-legal ul{ list-style:none; display:flex; flex-wrap:wrap; gap:8px 24px; padding:0; margin:0; }

/* Gutenberg-Ausrichtung neutralisieren (Sektionen bringen eigene Breite mit) */
.roncalli-event-main > .alignfull,
.roncalli-event-main > .alignwide{ max-width:none; margin-left:auto; margin-right:auto; }

/* ---- parasol-island/psl-accordion-block als FAQ ---- */
.faq details{ border-bottom:1px solid rgba(0,54,78,.12); }
.faq details > summary{ list-style:none; cursor:pointer; padding:22px 0; font-family:var(--font-display); font-size:clamp(18px,2vw,22px); display:flex; justify-content:space-between; gap:16px; }
.faq details > summary::-webkit-details-marker{ display:none; }
.faq details[open] > summary{ color:var(--red); }
.faq details > div{ padding:0 0 22px; color:var(--grey-ui); }

/* ---- parasol-island/psl-contact-card-block im Event-Look ---- */
.roncalli-event .module__contactcard{ background:#fff; border-radius:var(--r-l); box-shadow:var(--sh-s); padding:24px; }
.roncalli-event .module__contactcard img{ border-radius:var(--r-m); width:100%; height:auto; }
.roncalli-event .module__contactcard h6{ font-family:var(--font-display); font-size:22px; margin:12px 0 4px; }

/* Team-Mitglied: Durchwahl-Zeile (woogency/event-team) */

/* ============================================================
   KUNDEN-ANPASSUNGEN 26.06. (Woogency)
============================================================ */

/* Mitlaufendes Kontakt-Icon an der Seite (Desktop) */
.side-contact{ position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:90; display:flex; flex-direction:column; gap:2px; align-items:flex-end; }
.side-contact a{ display:flex; align-items:center; justify-content:center; width:52px; overflow:hidden; background:var(--red); color:#fff; padding:14px; border-radius:14px 0 0 14px; box-shadow:var(--sh-m); transition:width .24s ease, background .18s ease; }
.side-contact:hover a{ width:190px; justify-content:flex-start; } /* Hover auf der Gruppe -> beide klappen gemeinsam aus */
.side-contact a:first-child{ border-radius:14px 0 0 0; }
.side-contact a:last-child{ border-radius:0 0 0 14px; background:var(--dark-blue); }
.side-contact a:hover{ background:var(--red-dark); }
.side-contact a:last-child:hover{ background:#00283a; }
.side-contact svg{ width:22px; height:22px; flex:0 0 auto; }
/* Label eingeklappt komplett aus (0 Breite, unsichtbar) -> Icon sauber zentriert */
.side-contact .sc-label{ white-space:nowrap; opacity:0; max-width:0; overflow:hidden; transition:opacity .16s ease, max-width .22s ease, margin .22s ease; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.04em; font-size:15px; }
.side-contact:hover .sc-label{ opacity:1; max-width:150px; margin-left:11px; }
@media (max-width:760px){ .side-contact{ display:none; } } /* mobil übernimmt .sticky-mob */

/* SEO block: one long text in one column, with a teaser — two columns would
   read in the wrong order once the text is clipped and opened. Only the text
   gets a reading measure; the headline keeps the content width so it does not
   split "Show-DNA". Body text uses --text-black: --grey-ui on beige misses the
   4.5:1 contrast. */
.seo .seo-text{ max-inline-size:72ch; margin-block-start:24px; color:var(--text-black); line-height:1.7; }
.seo .seo-text h3{ font-family:var(--font-display); font-weight:700; font-size:clamp(20px,2.4vw,26px); line-height:1.2; color:var(--dark-blue); margin-block:1.6em .5em; }
.seo .seo-text p, .seo .seo-text ul{ margin-block:0 1em; }
.seo .seo-text ul{ padding-inline-start:1.2em; }
.seo .seo-text a{ color:var(--red); text-decoration:underline; text-underline-offset:3px; }
/* Teaser: clipped only when event.js adds .is-collapsed — without JS the full
   text stays visible. */
.seo .seo-text.is-collapsed{ max-block-size:16em; overflow:hidden; position:relative; }
.seo .seo-text.is-collapsed::after{ content:""; position:absolute; inset:auto 0 0; block-size:7em; background:linear-gradient(to bottom, rgba(250,241,224,0), var(--beige)); pointer-events:none; }
.seo .seo-toggle{ margin-block-start:16px; }
.seo .seo-toggle[hidden]{ display:none; } /* .btn sets display and would override [hidden] */

/* Takeaway nur noch PDF (LinkedIn entfernt) -> einzelne Karte zentriert */
.take-grid--single{ grid-template-columns:minmax(0,560px); justify-content:center; }

/* Case-Modal: Video-Embed + Bildergalerie */
.modal-video{ position:absolute; inset:0; background:#000; }
.modal-video iframe, .modal-video video{ width:100%; height:100%; border:0; object-fit:cover; }

/* Team-Mitglied mit Foto (ACF) statt Initialen-Avatar */
.team-grid .member .avatar--photo{ background-size:cover; background-position:center; color:transparent; }

/* ---- woogency/event-downloads (Lead-Gate-Downloads) ---- */
.downloads .dl-intro{ max-width:640px; margin-top:12px; color:var(--grey-ui); }
.dl-note{ margin-top:14px; padding:10px 14px; border-radius:var(--r-m); font-size:14px; }
.dl-note--err{ background:#fdeaec; color:#9e1f30; }
.dl-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; margin-top:28px; }
.dl-card{ background:#fff; border-radius:var(--r-l); box-shadow:var(--sh-s); padding:24px; }
.dl-card:only-child{ max-width:560px; } /* one download per section (TCK-0104): no full-width empty card */
.dl-head{ display:flex; gap:16px; align-items:flex-start; }
.dl-badge{ flex:0 0 auto; width:54px; height:68px; border-radius:8px; background:var(--dark-blue); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:15px; letter-spacing:.04em; }
.dl-head h3{ font-family:var(--font-display); font-size:22px; }
.dl-head p{ color:var(--grey-ui); margin-top:4px; font-size:15px; }
.dl-gate{ margin-top:18px; }
.dl-gate > summary{ list-style:none; display:inline-flex; cursor:pointer; }
.dl-gate > summary::-webkit-details-marker{ display:none; }
.dl-form{ margin-top:16px; display:flex; flex-direction:column; gap:12px; }
.dl-form .f-row.two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dl-form .field{ display:flex; flex-direction:column; gap:5px; }
.dl-form input[type=text], .dl-form input[type=email]{ padding:11px 13px; border:1px solid rgba(0,54,78,.18); border-radius:var(--r-m); font:inherit; }
.dl-form .consent{ display:flex; gap:8px; font-size:13px; color:var(--grey-ui); align-items:flex-start; }
@media (max-width:560px){ .dl-form .f-row.two{ grid-template-columns:1fr; } }

/* Leistungs-Icon aus der Mediathek (maskiert -> übernimmt currentColor inkl. Hover) */
.svc .ic--img{ display:block; width:46px; height:46px; background:currentColor; -webkit-mask:var(--icon) center/contain no-repeat; mask:var(--icon) center/contain no-repeat; }

/* ============================================================
   KUNDEN-ANPASSUNGEN (Tobias) — Welcome / Leistungen / Referenzen
============================================================ */

/* --- Welcome: durchlaufende Fotos (Crossfade) --- */
.welcome-rotator img{ opacity:0; transition:opacity 1.1s ease; }
.welcome-rotator img.is-active{ opacity:1; }
.welcome-rotator img:only-child{ opacity:1; }

/* --- Leistungen: Subline + kompakter Listen-Look (keine "Klick"-Kästen) --- */
.services-sub{ font-size:clamp(16px,1.8vw,19px); color:#5a5247; max-width:620px; margin-top:14px; }
.svc-grid{ grid-template-columns:repeat(2,1fr) !important; gap:0 clamp(24px,4vw,56px) !important; }
@media (max-width:600px){ .svc-grid{ grid-template-columns:1fr !important; } }
.svc{ flex-direction:row !important; align-items:center; gap:14px; min-height:0 !important; padding:16px 2px !important; background:transparent !important; box-shadow:none !important; border-radius:0 !important; border:0 !important; border-bottom:1px solid rgba(0,54,78,.12) !important; }
.svc:hover{ transform:none !important; box-shadow:none !important; background:transparent !important; }
.svc .ic, .svc .ic--img{ width:30px !important; height:30px !important; flex:0 0 auto; }
.svc h3{ font-size:clamp(16px,1.7vw,19px) !important; margin-top:0 !important; letter-spacing:0; }

/* --- Referenzen: dunkelblauer Hintergrund + gleichmäßige Abstände --- */
.refs{ background:var(--dark-blue) !important; }
.refs .display{ color:#fff !important; }
.refs .eyebrow{ color:#fff; }
.refs .sub{ color:rgba(255,255,255,.7) !important; }
.refs .marquee::before{ background:linear-gradient(90deg, var(--dark-blue), transparent) !important; }
.refs .marquee::after{ background:linear-gradient(270deg, var(--dark-blue), transparent) !important; }
.refs .logo-item{ width:auto !important; padding:0 clamp(16px,1.8vw,30px); height:184px; }
.refs .logo-item + .logo-item{ border-left:0; } /* Trennstriche entfernt */
.refs .logo-item span{ color:#fff !important; opacity:.55 !important; white-space:nowrap; font-size:clamp(30px,3vw,46px); }
.refs .logo-item:hover span{ opacity:1 !important; }
.refs .logo-item img{ max-height:150px; max-width:280px; width:auto; filter:brightness(0) invert(1); opacity:.85; transition:opacity .2s ease; }
.refs .logo-item:hover img{ opacity:1; }
.refs .logo-item img[width]{ filter:none; max-inline-size:none; max-block-size:none; } /* TCK-0036: prepared white logos keep their own size */

/* ============================================================
   SEKTIONS-STYLES pro Block (Hintergrund + Abstand) — global wählbar
============================================================ */
.evt-bg--beige{ background:var(--beige); }
.evt-bg--white{ background:#fff; }
.evt-bg--light-blue{ background:var(--light-blue); }
.evt-bg--yellow{ background:var(--ticket-yellow); }
.evt-bg--dark-blue{ background:var(--dark-blue); }
.evt-bg--blue{ background:var(--blue); }
.evt-bg--red{ background:var(--red); }
.evt-bg--green{ background:var(--green); }
/* Text/Elemente auf dunklen Hintergründen lesbar machen */
.evt-bg--dark-blue, .evt-bg--blue, .evt-bg--red, .evt-bg--green{ color:#fff; }
.evt-bg--dark-blue .display, .evt-bg--blue .display, .evt-bg--red .display, .evt-bg--green .display,
.evt-bg--dark-blue h2, .evt-bg--blue h2, .evt-bg--red h2, .evt-bg--green h2,
.evt-bg--dark-blue h3, .evt-bg--blue h3, .evt-bg--red h3, .evt-bg--green h3{ color:#fff; }
.evt-bg--dark-blue .lead, .evt-bg--blue .lead, .evt-bg--red .lead, .evt-bg--green .lead,
.evt-bg--dark-blue .services-sub, .evt-bg--blue .services-sub{ color:rgba(255,255,255,.82); }

/* Abstands-Overrides (oben/unten) */
.evt-pt--0{ padding-top:0 !important; }       .evt-pb--0{ padding-bottom:0 !important; }
.evt-pt--s{ padding-top:clamp(28px,4vw,48px) !important; }   .evt-pb--s{ padding-bottom:clamp(28px,4vw,48px) !important; }
.evt-pt--m{ padding-top:clamp(48px,6vw,80px) !important; }   .evt-pb--m{ padding-bottom:clamp(48px,6vw,80px) !important; }
.evt-pt--l{ padding-top:clamp(72px,9vw,128px) !important; }  .evt-pb--l{ padding-bottom:clamp(72px,9vw,128px) !important; }
.evt-pt--xl{ padding-top:clamp(100px,12vw,180px) !important; } .evt-pb--xl{ padding-bottom:clamp(100px,12vw,180px) !important; }

/* ============================================================
   EVENT-HEADER (nutzt Standard-Header aus main.css) — Feintuning
============================================================ */
/* Telefonnummer immer einzeilig (Tobias: letzte 3 Ziffern brechen sonst um) */
.header .header__icon--phone span{ white-space:nowrap; }

/* Anfrage-Button im Header — bewusst KEIN Ticket-Look */
.header__anfrage{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 22px; border-radius:var(--r-pill);
  background:var(--red); color:var(--beige);
  font-family:var(--font-display); font-weight:700; text-transform:uppercase;
  letter-spacing:.02em; font-size:15px; line-height:1; white-space:nowrap;
  transition:background .18s ease;
}
.header__anfrage:hover{ background:var(--red-dark); color:var(--beige); }
/* Beige in every header state. main.css paints every sticky-header link except .header__button
   black on light sections (.header__sticky.bg__beige|white|yellow|marble a:not(.header__button),
   0-3-1) — so the same chain plus one class. */
.header .header__sticky a.header__anfrage:not(.header__button),
.header .header__sticky a.header__anfrage:not(.header__button):hover,
.header .header__sticky a.header__anfrage:not(.header__button):focus,
.header .header__sticky a.header__anfrage:not(.header__button):active,
.header .header__mobile a.header__anfrage{ color:var(--beige); } /* burger menu: main.css .header .header__mobile a is white */
.header__mobile .header__anfrage{ padding:14px 26px; font-size:16px; }

/* Anker-Sprünge (Menü-Pagejumps) nicht unter den fixen Header schieben */
html{ scroll-padding-top: clamp(88px, 10vw, 140px); }

/* Leistungen: Hover-Effekt entfernen (Icon bleibt rot, Text dunkelblau) */
.svc:hover .ic, .svc:hover .ic--img{ color:var(--red) !important; }
.svc:hover h3{ color:var(--dark-blue) !important; }

/* Transparenter Header über dem dunklen Hero: heller Text/Icons — NUR wenn transparent
   ALLEIN aktiv ist (über dem Hero). Sobald der Controller bg__beige/bg__midnight ergänzt,
   greifen die Theme-Farben (schwarz auf hell, weiß auf dunkel). */
.header__sticky.bg__transparent:not(.bg__beige):not(.bg__midnight):not(.bg__white):not(.bg__yellow),
.header__sticky.bg__transparent:not(.bg__beige):not(.bg__midnight):not(.bg__white):not(.bg__yellow) a:not(.header__anfrage),
.header__sticky.bg__transparent:not(.bg__beige):not(.bg__midnight):not(.bg__white):not(.bg__yellow) .header__menu li > a:not(.header__anfrage),
.header__sticky.bg__transparent:not(.bg__beige):not(.bg__midnight):not(.bg__white):not(.bg__yellow) .header__icon--phone,
.header__sticky.bg__transparent:not(.bg__beige):not(.bg__midnight):not(.bg__white):not(.bg__yellow) svg{ color:#fff; fill:#fff; }

/* ============================================================
   TEAM-KARTEN NEU (Tobias): Foto links, Details rechts, mit Telefon
============================================================ */
.team-grid{ grid-template-columns:repeat(2,1fr) !important; gap:18px !important; }
@media (max-width:640px){ .team-grid{ grid-template-columns:1fr !important; } }
.member{ flex-direction:row !important; align-items:flex-start; gap:18px; padding:20px !important; }
.member:hover{ box-shadow:var(--sh-s); transform:none !important; }
.m-media{ flex:0 0 auto; }
.m-photo{ width:92px; height:92px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:800; font-size:26px; color:#fff; overflow:hidden; }
.m-photo--img{ background-size:cover; background-position:center; color:transparent; }
.m-body{ min-width:0; }
.member .m-name{ font-size:20px; }
.member .m-quote{ margin-top:10px; font-size:14.5px; font-style:italic; line-height:1.45; color:var(--dark-blue); }

/* Case-Modal: Medienfläche als Cover (nicht kacheln/wiederholen) */

/* Projekt-Kachel & Modal: Cover als <img> (object-fit, kein Kacheln; YT-maxres/hq-Fallback) */
.proj-media .proj-thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.modal-cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:0; }
.modal-media .play-pill, .modal-media .modal-close, .modal-video{ z-index:2; }

/* Hero: YouTube-Titel-Video als Vollbild-Hintergrund (Cover) + Ton-Button */
.hero-yt{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:var(--dark-blue); }
.hero-yt iframe{ position:absolute; top:50%; left:50%; width:100vw; height:56.25vw; min-height:100%; min-width:177.78vh; transform:translate(-50%,-50%); border:0; }
.hero-ctrl{ position:absolute; inset-inline-end:var(--gutter); inset-block-end:96px; z-index:4; display:flex; gap:10px; }
.hero-sound, .hero-fs{ display:inline-flex; align-items:center; gap:10px; padding-block:12px; padding-inline:18px; border:0; border-radius:var(--r-pill); background:rgba(0,0,0,.45); color:#fff; font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:14px; cursor:pointer; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); transition:background .2s ease, transform .2s ease; }
.hero-sound:hover, .hero-fs:hover{ background:var(--red); transform:translateY(-1px); }
.hero-sound svg, .hero-fs svg{ inline-size:20px; block-size:20px; flex:0 0 auto; }
.hero-sound .hs-on{ display:none; }
.hero-sound.is-on .hs-off{ display:none; }
.hero-sound.is-on .hs-on{ display:inline; }
@media (max-width:760px){ .hero-ctrl{ inset-block-end:auto; inset-block-start:84px; inset-inline-end:14px; gap:8px; } .hero-sound, .hero-fs{ padding-block:10px; padding-inline:14px; font-size:12px; } }

/* Header „zum Circus": abgesetzter Outline-Chip (currentColor -> folgt der Header-Farbe beim Scrollen) */
.menu-item-static-circus{ display:flex; align-items:center; margin-left:4px; } /* TCK-0070: steht jetzt ganz rechts, der Abstand gehoert nach links */
.header__circus{ display:inline-flex; align-items:center; gap:6px; padding:7px 14px; border:1.5px solid currentColor; border-radius:999px; font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.05em; font-size:12.5px; line-height:1; color:inherit; opacity:.82; transition:opacity .18s ease, background-color .18s ease; white-space:nowrap; }
.header__circus:hover{ opacity:1; background-color:rgba(127,127,127,.16); }
.header__circus svg{ width:13px; height:13px; flex:0 0 auto; }
.header__circus--mobile{ margin:14px auto 0; }

/* Märkte: gleiche Kachel-Optik wie Projekte, aber beige (Abgrenzung von Team weiß / Referenzen dunkel) + Einleitungstext */
.markets{ background:var(--beige); }
.projects-head .lead{ max-width:62ch; margin-top:14px; }

/* Standard-Roncalli-Footer auf der Eventseite über die volle Breite ausgeben
   (event-.container begrenzt sonst auf 1216px -> Footer wirkte zu schmal). */
.roncalli-footer .container{ max-width:none; }

/* Event-Logo im Footer (statt Text „RONCALLI EVENT") */
.footer-brand--logo{ display:inline-block; line-height:0; }
.footer-brand--logo img{ width:auto; height:auto; max-height:150px; max-width:min(380px,100%); }

/* ===== Event-Header responsiv ===== */
/* Ab 1100px übernimmt der Burger: Nav-Menü, „zum Circus" und der Telefon-Text
   wandern in die Slide-in-Navigation; oben bleiben Burger | Logo | kompakte Aktionen. */
@media (max-width:1100px){
  .roncalli-event .header__sticky .header__menu--1{ display:none; }
  .roncalli-event .header__sticky .menu-item-static-circus{ display:none; }
  .roncalli-event .header__sticky .header__icon--phone span{ display:none; } /* Telefon nur als Icon */
}
@media (max-width:520px){
  .roncalli-event .header__sticky .menu-item-static-phone{ display:none; } /* ganz schmal: Anrufen via Sticky-CTA */
  .roncalli-event .header__anfrage{ padding:8px 14px; font-size:13px; }
}

/* ============================================================
   MEETING 17.07.2026 — Korrekturen
============================================================ */
/* Umlaute (Ä/Ö/Ü) wurden in den engen Display-Zeilen beschnitten -> Zeilenabstand leicht erhöhen */
h1,h2,h3,h4{ line-height:1.05; }
.display{ line-height:1.1; }
.hero-badge h1{ line-height:.97; }
.proj h3, .occ-card h3{ line-height:1.02; }
.svc h3{ line-height:1.05; }

/* Button-Schriftfarbe bei Interaktion absichern — sonst greift die generische a:hover-Farbe
   des Theme-Bundles und der Text wird auf dem roten Button unlesbar. */
.btn--primary:hover, .btn--primary:focus, .btn--primary:active{ background:var(--red-dark); color:var(--white); }
.btn--dark:hover, .btn--dark:focus, .btn--dark:active{ color:var(--white); }
.btn--on-dark:hover, .btn--on-dark:focus, .btn--on-dark:active{ color:var(--dark-blue); }
.btn--ghost:focus{ color:var(--dark-blue); } /* focus alone gets no fill (only :hover does): white text would vanish on light ground after a click */
.btn--ghost:hover, .btn--ghost:active{ color:#fff; }
.header__anfrage:hover, .header__anfrage:focus, .header__anfrage:active{ background:var(--red-dark); color:var(--beige); }
.sticky-mob a.p:hover, .sticky-mob a.p:focus{ color:#fff; }
.side-contact a:hover, .side-contact a:focus{ color:#fff; }


/* --- Märkte: Kachelgrößen wie bei den Projekten frei per „Kachelgröße" steuerbar
   (Bento). Titel dürfen weiterhin umbrechen statt abgeschnitten zu werden. --- */
.markets .proj h3{ max-width:none; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:anywhere; }

/* ============================================================
   HINTERGRUND-VARIANTEN (Meeting 17.07.2026)
   Kein Creme mehr. Alle Töne sind hellere Abstufungen BESTEHENDER
   Marken-Farben — keine neuen Farben erfunden:
     Sky-Familie   … abgeleitet aus --sky/--footer-blue  #bdd4e2
     Salbei-Familie… abgeleitet aus --green              #3d5557
   Vorschau per ?bg=sky | ?bg=salbei | ?bg=mix
============================================================ */
:root{
  /* Sky (Blau-Familie, aufgehellt) */
  --sky-50:#f2f7fa; --sky-100:#e6eef4; --sky-200:#d8e6ef;
  /* Salbei (Grün-Familie, aufgehellt) */
  --sage-50:#f1f4f4; --sage-100:#e4ebea; --sage-200:#d5dfde;
}

/* --- Variante A: Sky --- */
.evt-bg-sky .welcome,
.evt-bg-sky .faq        { background:var(--sky-50) !important; }
.evt-bg-sky .services,
.evt-bg-sky .markets    { background:var(--sky-100) !important; }
.evt-bg-sky .projects,
.evt-bg-sky .team,
.evt-bg-sky .form-sec   { background:var(--white) !important; }

/* --- Variante B: Salbei --- */
.evt-bg-salbei .welcome,
.evt-bg-salbei .faq      { background:var(--sage-50) !important; }
.evt-bg-salbei .services,
.evt-bg-salbei .markets  { background:var(--sage-100) !important; }
.evt-bg-salbei .projects,
.evt-bg-salbei .team,
.evt-bg-salbei .form-sec { background:var(--white) !important; }

/* --- Variante C: Sky + Salbei im Wechsel (stärkste Kapitel-Trennung) --- */
.evt-bg-mix .welcome     { background:var(--sky-50) !important; }
.evt-bg-mix .services    { background:var(--sage-100) !important; }
.evt-bg-mix .projects    { background:var(--white) !important; }
.evt-bg-mix .markets     { background:var(--sky-200) !important; }
.evt-bg-mix .team        { background:var(--white) !important; }
.evt-bg-mix .faq         { background:var(--sage-50) !important; }
.evt-bg-mix .form-sec    { background:var(--white) !important; }

/* Beige-Reste in allen Varianten neutralisieren (Sektions-Umschalter im Editor) */
.evt-bg-sky .evt-bg--beige   { background:var(--sky-100) !important; }
.evt-bg-salbei .evt-bg--beige{ background:var(--sage-100) !important; }
.evt-bg-mix .evt-bg--beige   { background:var(--sky-100) !important; }
/* Imagefilm-Abschnitt (event-video) — Fassade laedt YouTube erst beim Klick */
.video-sec .video-head{ text-align:center; max-width:760px; margin:0 auto 34px; }
.video-sec .video-head .lead{ margin-top:10px; }
/* Heller Text auf der dunklen Video-Sektion (bg__midnight liefert nur den Hintergrund) */
.video-sec{ color:#fff; }
.video-sec .display, .video-sec h2{ color:#fff; }
.video-sec .lead{ color:rgba(255,255,255,.82); }
.video-sec .video-head{ margin-left:auto; margin-right:auto; }
.video-frame{ position:relative; width:100%; max-width:1040px; margin:0 auto; aspect-ratio:16/9; border-radius:20px; overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.35); background:#000; }
.video-facade{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; cursor:pointer; background:#000; display:block; }
.video-thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .4s ease, filter .3s ease; }
.video-facade:hover .video-thumb{ transform:scale(1.03); filter:brightness(.9); }
.play-pill--lg{ position:absolute; top:50%; left:50%; right:auto; bottom:auto; transform:translate(-50%,-50%); width:84px; height:84px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--red); color:#fff; box-shadow:0 12px 34px rgba(0,0,0,.4); transition:transform .2s ease, background .2s ease; }
.video-facade:hover .play-pill--lg{ transform:translate(-50%,-50%) scale(1.08); background:var(--red-dark); }
.play-pill--lg svg{ margin-left:4px; }
.video-iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (max-width:760px){ .play-pill--lg{ width:64px; height:64px; } .video-sec .video-head{ margin-bottom:24px; } }

/* ══════════════════════════════════════════════════════════════════
   TCK-0039 · "zum Circus" rechtsbündig im Header (nur Desktop)
   Gemessen in main.css: .header__menu--2 traegt auf Top-Level
   justify-content:flex-start, und erst in
   @media screen and (max-width:1100px) steht dort flex-end. Mobil war
   der Button also immer rechts, auf Desktop nie — genau der Befund.
   Korrigiert wird deshalb ausschliesslich der Desktop-Fall ab 1101px;
   die abgenommene Mobile-Darstellung bleibt unberuehrt. Gescopet auf
   .roncalli-event, weil .header__menu--2 auch die alten Parasol-Seiten
   rendert. main.css ist eingefroren (CLAUDE.md Regel 1) — Override hier.
   ══════════════════════════════════════════════════════════════════ */
@media screen and (min-width:1101px){
  .roncalli-event .header__menu--2{ justify-content:flex-end; }
}

/* ══════════════════════════════════════════════════════════════════
   TCK-0072 · Subline unter "Ausgewählte Projekte" auf Desktop einzeilig
   Der Satz hat 101 Zeichen. Gedeckelt war er doppelt: .lead auf 62ch
   (:822) UND der Elternblock .projects-head auf 820px (:280). Nur den
   .lead anzuheben bleibt wirkungslos — 820px ist der echte Deckel.
   Deshalb beide, und nur ab 1280px: darunter ist eine Zeile bei
   clamp(17px,1.4vw,20px) physisch nicht erreichbar, ohne die Schrift
   zu verkleinern. Bewusst KEIN white-space:nowrap — das schoebe den
   Satz bei schmalerem Viewport aus dem Layout, statt umzubrechen.
   1120px liegt unter der Container-Breite (1216px), stoesst also nicht an.
   ══════════════════════════════════════════════════════════════════ */
@media screen and (min-width:1280px){
  .projects-head{ max-width:1120px; }
  .projects-head .lead{ max-width:none; }
}

/* ══════════════════════════════════════════════════════════════════
   TCK-0040 · Willkommens-Sektion: Umbruch der Headline + Querformat
   Gerendert wird <h2 class="display"><span class="heavy">…</span>
   <span class="thin">…</span></h2> — beide Spans inline, getrennt durch
   ein Literal-Leerzeichen. Der Umbruch entstand also rein aus dem
   Textfluss und sprang mit jeder Breite.
   Gescopet auf .welcome-head, weil `.display .thin` (:61) global gilt
   und sonst jede Ueberschrift der Seite mit umgebaut wuerde.
   `nowrap` erst ab 980px: darunter ist die Sektion einspaltig, die
   Schrift steht auf dem clamp-Boden von 36px und "MEHR ALS VIEL
   CIRCUS" passt auf schmalen Geraeten nicht garantiert in eine Zeile —
   dort waere nowrap ein Ueberlauf statt einer Verbesserung.
   ══════════════════════════════════════════════════════════════════ */
.welcome-head .display .heavy,
.welcome-head .display .thin{ display:block; }
@media screen and (min-width:980px){
  .welcome-head .display .heavy{ white-space:nowrap; }
}

/* Bild groesser und im Querformat — NUR Desktop. Tablet und Mobile sind
   vom Kunden ausdruecklich abgenommen ("finde ich die aktuelle Einstellung
   gut") und bleiben deshalb unberuehrt: die 980px-Regeln oben gelten
   weiter bis 1279px.
   Erst ab 1280px, weil das Verbreitern der Bildspalte die Textspalte
   verkleinert — bei 980px waere die Headline sonst in die Enge geraten. */
/* 2026-09-28: still too small, and its top edge should sit on the first
   headline line. The grid cannot give the photo more room: the nowrap
   headline ("MEHR ALS VIEL CIRCUS", 544px at 60px) fills the text column,
   so the photo column only gets the rest (472px at 1440). The photo grows
   into the free space LEFT of the container instead (max 160px, 24px kept
   to the viewport edge). The top offset is the eyebrow block (52px) plus the
   distance from the headline's line box to its cap height (.27 × font size);
   measured in Chrome at 1280/1440/1920, deviation 0px. */
@media screen and (min-width:1280px){
  .welcome-body{ grid-template-columns:minmax(0,560px) 1fr; align-items:start; }
  .welcome-figure{
    --welcome-bleed:min(160px, calc((100vw - var(--container)) / 2 + var(--gutter) - 24px));
    inline-size:calc(100% + var(--welcome-bleed));
    margin-inline-start:calc(-1 * var(--welcome-bleed));
    margin-block-start:calc(52px + .27 * clamp(36px,4.4vw,60px));
    aspect-ratio:3/2;
  }
}

/* ══════════════════════════════════════════════════════════════════
   TCK-0033 · Zwischenueberschriften in den Projekt-Popups
   Bis 16.09. war #modal-story ein <p>, das per textContent befuellt
   wurde — Zeilenumbrueche im Text fielen damit weg und "Zielsetzung"
   klebte am Fliesstext. Der Container ist jetzt ein <div> (ein <p>
   darf keine <p> enthalten), event.js baut Absaetze als DOM-Knoten.
   Die Maerkte-Texte tragen keine Zwischenueberschrift und laufen als
   einzelner Absatz durch — diese Regeln greifen dort schlicht nicht.
   ══════════════════════════════════════════════════════════════════ */
.modal-body .m-story p{ margin:0 0 18px; }
.modal-body .m-story p:last-child{ margin-bottom:0; }
.modal-body .m-story .story-label{ font-weight:700; color:var(--dark-blue); }

/* ══════════════════════════════════════════════════════════════════
   Projekt- und Marktkacheln: Text lesbar auf hellen Fotos
   (beide rendern .proj -- der Markt-Block nutzt dieselbe Klasse)
   Der vorhandene Verlauf (:294) startet erst bei 40 % und erreicht
   seine Deckkraft ganz unten. Auf hellen Motiven (Swarovski, AboutYou,
   FEDIL) liegt die Headline aber ueber dem noch transparenten Teil.
   Korrektur in drei Stufen statt einer: frueherer Einsatz, kraeftigere
   Mitte, plus ein sehr leichter Grundschleier ueber dem ganzen Bild.
   Zusaetzlich ein Textschatten als zweite Sicherung -- greift auch
   dort, wo das Motiv punktuell hell bleibt.
   ══════════════════════════════════════════════════════════════════ */
.proj::after{
  background:
    linear-gradient(180deg,
      rgba(0,18,28,0)    22%,
      rgba(0,18,28,.42)  52%,
      rgba(0,18,28,.78)  78%,
      rgba(0,18,28,.94) 100%),
    linear-gradient(180deg, rgba(0,18,28,.20), rgba(0,18,28,.20));
}
.proj h3{ text-shadow:0 2px 14px rgba(0,14,22,.55); }
.proj .p-hook{ text-shadow:0 1px 10px rgba(0,14,22,.5); }
.proj .p-meta{ text-shadow:0 1px 8px rgba(0,14,22,.6); }

/* ══════════════════════════════════════════════════════════════════
   TCK-0082 · Galerie im Projekt-Popup
   Die Thumbnails lagen bisher unter dem Fliesstext und wechselten nur
   das grosse Bild. Jetzt: Leiste links neben der Buehne, Pfeile auf der
   Buehne, Zaehler rechts unten. Das Video ist das erste Element der
   Liste, kein Sonderfall daneben.
   .modal-media verliert sein aspect-ratio an .mg-stage -- sonst wuerde
   die Leiste das Seitenverhaeltnis der Buehne verziehen.
   ══════════════════════════════════════════════════════════════════ */
.modal-media{
  aspect-ratio:auto;
  display:flex;
  gap:10px;
  padding:10px;
  align-items:stretch;
  background:var(--dark-blue);
}
.mg-stage{
  position:relative; flex:1 1 auto; min-width:0;
  aspect-ratio:16/9; border-radius:10px; overflow:hidden;
  background:#001420;
}

/* Thumbnail-Leiste */
.mg-rail{ flex:0 0 86px; display:flex; flex-direction:column; gap:8px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; }
.mg-rail .mg-thumb{
  flex:0 0 auto; width:86px; height:58px; border-radius:8px;
  background-size:cover; background-position:center; background-color:rgba(255,255,255,.08);
  border:2px solid transparent; cursor:pointer; opacity:.7;
  transition:border-color .15s ease, opacity .15s ease;
}
.mg-rail .mg-thumb:hover{ opacity:1; }
.mg-rail .mg-thumb.is-active{ border-color:var(--red); opacity:1; }
.mg-rail .mg-thumb:focus-visible{ outline:2px solid var(--ticket-yellow); outline-offset:2px; }
.mg-rail .mg-thumb--video{ position:relative; }
.mg-rail .mg-thumb--video::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  border-style:solid; border-width:7px 0 7px 12px;
  border-color:transparent transparent transparent #fff;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.7));
}

/* Pfeilnavigation auf der Buehne */
.mg-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%;
  background:rgba(0,0,0,.42); color:#fff; backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.22);
  display:flex; align-items:center; justify-content:center;
  transition:background .18s ease, border-color .18s ease, opacity .18s ease;
}
.mg-nav:hover:not(:disabled){ background:var(--red); border-color:var(--red); }
.mg-nav:disabled{ opacity:.25; cursor:default; }
.mg-nav--prev{ left:14px; }
.mg-nav--next{ right:14px; }

/* Zaehler */
.mg-count{
  position:absolute; right:14px; bottom:12px; z-index:3; margin:0;
  padding:4px 11px; border-radius:999px;
  background:rgba(0,0,0,.48); color:#fff; backdrop-filter:blur(6px);
  font-size:12px; letter-spacing:.04em;
}

/* Schmale Geraete: Leiste unter die Buehne, liegend */
@media screen and (max-width:640px){
  .modal-media{ flex-direction:column; padding:8px; gap:8px; }
  .mg-rail{ flex:0 0 auto; flex-direction:row; width:100%; overflow-x:auto; overflow-y:hidden; order:2; }
  .mg-stage{ order:1; }
  .mg-nav{ width:38px; height:38px; }
  .mg-nav--prev{ left:8px; }
  .mg-nav--next{ right:8px; }
}

/* ══════════════════════════════════════════════════════════════════
   TCK-0082 · Das hidden-Attribut sichtbar machen — Ursache eines Defekts
   main.css setzt `[hidden]{display:none}` OHNE !important. Die
   !important-Variante darin heisst `.tns-outer [hidden]` und ist auf den
   Slider gescopet, gilt hier also nicht.
   `[hidden]` hat damit die Spezifitaet (0,1,0) und verliert gegen jede
   Regel aus zwei Klassen — etwa `.modal-media .play-pill{display:flex}`
   (0,2,0). Folge: `element.hidden = true` im JavaScript blieb wirkungslos,
   der Play-Button stand auf Bildern UND ueber dem laufenden Video.
   Betrifft alles, was hier per hidden geschaltet wird und eine
   display-Regel traegt: Play-Button, Leiste, Pfeile.
   `!important` ist hier die richtige Wahl, nicht die bequeme: es geht um
   "unsichtbar heisst unsichtbar", unabhaengig davon, welche Layout-Regel
   spaeter dazukommt.
   ══════════════════════════════════════════════════════════════════ */
.modal-media .play-pill[hidden],
.modal-media .mg-rail[hidden],
.mg-stage .mg-nav[hidden],
.mg-stage .mg-count[hidden],
.mg-stage .modal-video[hidden]{ display:none !important; }

/* ══════════════════════════════════════════════════════════════════
   TCK-0082 · Die Leiste darf die Hoehe des Popups nicht bestimmen
   Im Flex-Fluss gibt der GROESSERE der beiden Partner die Hoehe vor. Bei
   15 Bildern ist die Leiste rund 980px hoch (15 x 58px + 14 x 8px) und
   das Modal waechst mit — genau der gemeldete Effekt.
   Eine feste max-height waere geraten: die Buehnenhoehe entsteht aus
   16/9 einer variablen Breite und ist nie dieselbe Zahl.
   Deshalb wird die Leiste aus dem Fluss genommen und oben wie unten an
   .modal-media verankert. Damit gibt die BUEHNE die Hoehe vor, die
   Leiste bekommt genau diese Hoehe und scrollt darin.
   Nur ab 641px — darunter liegt die Leiste liegend unter der Buehne und
   soll im Fluss bleiben.
   ══════════════════════════════════════════════════════════════════ */
@media screen and (min-width:641px){
  /* Ohne Leiste keine Spalte dafuer: sonst stuende die Buehne eingerueckt
     und links klaffte eine leere Flaeche. Die Klasse setzt das JS. */
  .modal-media{ display:block; position:relative; padding:10px; }
  .modal-media.has-rail{ padding-left:106px; }
  .mg-rail{ position:absolute; left:10px; top:10px; bottom:10px; width:86px; flex:none; margin:0; }
  .mg-stage{ width:100%; }
}

/* Die Leiste scrollt jetzt — das muss man auch sehen. macOS blendet die
   Bildlaufleiste aus, bis gescrollt wird; ohne Hinweis wirkt die Liste nach
   dem sechsten Thumb zu Ende. Deshalb eine dauerhaft sichtbare, schmale
   Leiste statt der ausgeblendeten. */
.mg-rail{ scrollbar-color:rgba(255,255,255,.34) transparent; }
.mg-rail::-webkit-scrollbar{ width:6px; }
.mg-rail::-webkit-scrollbar-track{ background:transparent; }
.mg-rail::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.34); border-radius:999px; }
.mg-rail::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.55); }

/* ══════════════════════════════════════════════════════════════════
   TCK-0082 · Drei Nachbesserungen aus dem Sichttest
   ══════════════════════════════════════════════════════════════════ */

/* 1) Radien harmonisieren. Das Popup rundet mit --r-xl (32px), die Buehne
      lag bei 10px — bei 10px Abstand wirken die Ecken dadurch nie konzentrisch.
      Die Regel dafuer lautet: innen = aussen minus Abstand. Als calc, damit es
      stimmig bleibt, wenn das Token sich aendert. */
.mg-stage{ border-radius:calc(var(--r-xl) - 10px); }
.mg-rail .mg-thumb{ border-radius:var(--r-menu); }

@media screen and (min-width:641px){
  /* 2) Kein waagerechter Bildlauf in der Leiste. Sobald overflow-y auf auto
        steht, rechnet der Browser overflow-x von visible auf auto hoch — und
        die 6px breite Bildlaufleiste liess die 86px breiten Thumbs
        ueberstehen. Deshalb x hart zu, und die Thumbs fuellen die Spalte,
        statt eine feste Breite zu behaupten. */
  .mg-rail{ overflow-x:hidden; }
  .mg-rail .mg-thumb{ width:auto; }
}

/* ══════════════════════════════════════════════════════════════════
   TCK-0100 · Märkte-Kachel: Links auf die Webseiten der Märkte im Popup
   ══════════════════════════════════════════════════════════════════ */

/* Drei Ziele nebeneinander, kleiner als der Haupt-Button darunter. Umbruch
   erlaubt: "Weihnachtspromenade Düsseldorf" ist in 18px Versalien breiter als
   das Popup auf einem 390px-Handy. [hidden] muss das display:flex schlagen. */
.modal-body .m-links{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px; }
.modal-body .m-links[hidden]{ display:none; }
.modal-body .m-links .btn{ font-size:14px; padding:11px 18px; white-space:normal; text-align:left; line-height:1.15; }

/* ══════════════════════════════════════════════════════════════════
   TCK-0117 · Downloads als Button: Broschüre unter den Projekten
   (#broschuere), Leitfaden links beim Formular (#briefing)
   ══════════════════════════════════════════════════════════════════ */

/* Zwei Klassen: main.css setzt Formular-Defaults mit gleicher Spezifität. */
.dl-inline .dl-gate{ margin-top:0; }
.dl-inline.dl-inline--projects{ margin-top:40px; text-align:center; }
.dl-inline.dl-inline--projects .dl-form{ max-width:560px; margin:20px auto 0; text-align:left; }
.dl-inline.dl-inline--form{ margin-top:32px; }
/* „Briefing-Leitfaden herunterladen“ ist auf 390px breiter als die Spalte: umbrechen statt überstehen. */
.dl-inline .dl-gate > summary.btn{ max-width:100%; white-space:normal; text-align:left; line-height:1.15; }

/* ══════════════════════════════════════════════════════════════════
   TCK-0116 · Satz zur Unternehmensgruppe unter den Teamkarten
   TCK-0121 · als eigene Gruppe mit Überschrift wie „Das Team“, volle Breite
   ══════════════════════════════════════════════════════════════════ */
.team .team-outro{ margin:0; font-size:19px; line-height:1.55; color:#5a5247; }

/* ══════════════════════════════════════════════════════════════════
   TCK-0122 · Briefing-Leitfaden beim Formular als Karte: Dokument-Cover
   mit Download-Zeichen, Titel, Kurztext, dunkler Button. Rot bleibt
   „Anfrage senden“ vorbehalten.
   ══════════════════════════════════════════════════════════════════ */
.dl-inline .dl-gate.dl-gate--card{ background:var(--white); border-radius:var(--r-l); box-shadow:var(--sh-s); padding:20px 24px 24px 20px; transition:box-shadow .18s ease; }
.dl-inline .dl-gate.dl-gate--card:hover{ box-shadow:var(--sh-m); }
.dl-gate--card > summary.dl-tile{ display:grid; grid-template-columns:auto 1fr; grid-template-areas:"cover body" "cover cta"; column-gap:22px; row-gap:14px; align-items:center; list-style:none; cursor:pointer; }
.dl-gate--card > summary.dl-tile::-webkit-details-marker{ display:none; }
.dl-gate--card .dl-cover{ grid-area:cover; position:relative; padding:14px 14px 0 0; }
.dl-gate--card .dl-cover-doc{ position:relative; display:block; width:84px; aspect-ratio:3/4; border-radius:var(--r-s); background:linear-gradient(160deg,#013a54,#00263a); box-shadow:var(--sh-m); }
.dl-gate--card .dl-cover-type{ position:absolute; top:9px; left:10px; font-family:ui-monospace,Menlo,monospace; font-size:10px; color:rgba(255,255,255,.6); }
.dl-gate--card .dl-cover-title{ position:absolute; left:10px; right:8px; bottom:10px; font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:12px; line-height:1.05; color:var(--ticket-yellow); }
.dl-gate--card .dl-cover-ico{ position:absolute; top:0; right:0; width:38px; height:38px; border-radius:50%; background:var(--ticket-yellow); color:var(--dark-blue); display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-tiny); }
.dl-gate--card .dl-cover-ico svg{ width:20px; height:20px; }
.dl-gate--card .dl-tile-body{ grid-area:body; align-self:end; display:flex; flex-direction:column; gap:6px; min-width:0; }
.dl-gate--card .dl-tile-title{ font-family:var(--font-display); font-weight:800; font-size:24px; line-height:1.05; text-transform:uppercase; color:var(--dark-blue); }
.dl-gate--card .dl-tile-text{ font-size:15px; line-height:1.45; color:#5a5247; }
.dl-gate--card .btn.dl-tile-cta{ grid-area:cta; justify-self:start; align-self:start; padding:11px 20px; font-size:16px; }
.dl-gate--card .dl-tile-cta svg{ width:17px; height:17px; flex:0 0 auto; }
.dl-gate--card > summary.dl-tile:focus-visible{ outline:3px solid var(--blue); outline-offset:6px; border-radius:var(--r-m); }
@media (max-width:560px){
  .dl-gate--card > summary.dl-tile{ grid-template-areas:"cover body" "cta cta"; column-gap:16px; }
  .dl-gate--card .dl-cover-doc{ width:64px; }
  .dl-gate--card .dl-cover-title{ left:8px; right:6px; bottom:8px; font-size:10px; }
  .dl-gate--card .dl-cover-type{ top:7px; left:8px; font-size:9px; }
  .dl-gate--card .dl-cover-ico{ width:32px; height:32px; }
  .dl-gate--card .dl-cover-ico svg{ width:17px; height:17px; }
  .dl-gate--card .dl-tile-title{ font-size:22px; }
  .dl-gate--card .btn.dl-tile-cta{ justify-self:stretch; justify-content:center; }
}

/* ══════════════════════════════════════════════════════════════════
   Absenden in der Download-Abfrage (Broschüre + Leitfaden) wie
   „Anfrage senden“: am Handy volle Breite, ab 620 px textbreit —
   die Flex-Spalte von .dl-form zog den Button sonst über die ganze Breite.
   ══════════════════════════════════════════════════════════════════ */
.dl-form .btn{ align-self:stretch; justify-content:center; }
@media (min-width:620px){ .dl-form .btn{ align-self:flex-start; } }