/* ============================================================
   Global Youth Leadership Forum — Stylesheet
   Brandamazed · Rev. 2 (August 2026)
   Changes in this revision:
   - Brand colour green -> institutional blue #6DC6DE
   - Typeface Be Vietnam Pro -> Optima (system) with fallbacks
   - Full responsive layer added (was missing entirely)
   - New: event bar, current edition block, video section (light),
          Instagram grid (max 3 rows), speakers grid, page headers
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box;}

/* Versteckte Sektionen bleiben versteckt, auch wenn eine Klasse
   später ein display setzt. Ohne !important gewinnt jedes
   .klasse{display:grid} gegen das hidden-Attribut. */
[hidden]{display:none !important;}

:root{
  /* ── Brand ── */
  --blue:#6DC6DE;          /* institutional brand colour */
  --blue-deep:#1F7F9B;     /* readable blue on white (contrast) */
  --blue-soft:rgba(109,198,222,.12);
  --blue-line:rgba(109,198,222,.22);

  --dark:#0A2333;          /* deep navy — base dark tone */
  --mid:#14405A;
  --darker:#061621;

  --gold:#C8A96E;
  --light:#EDF7FA;
  --grey:#3D4E5C;
  --white:#fff;

  /* ── Type ──
     Optima ships with macOS/iOS, so the client sees the real thing.
     Candara covers Windows, Marcellus/Alegreya Sans are the web fallback. */
  --font:Optima,'Optima nova','URW Classico',Candara,'Gill Sans','Gill Sans MT','Alegreya Sans','Lucida Grande',sans-serif;
  --font-head:Optima,'Optima nova','URW Classico',Candara,'Gill Sans MT','Marcellus','Palatino Linotype',serif;

  --wrap:1200px;
}

body{font-family:var(--font);color:var(--dark);background:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased;}
img{max-width:100%;}
h1,h2,h3,h4,h5{font-family:var(--font-head);}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 5vw;}
.skip{position:absolute;left:-9999px;}
.skip:focus{left:12px;top:12px;z-index:999;background:var(--white);color:var(--dark);padding:10px 16px;border-radius:6px;}

/* ── SHARED TYPE ── */
.label{font-size:11.5px;font-weight:700;color:var(--blue-deep);text-transform:uppercase;letter-spacing:3px;margin-bottom:10px;display:block;}
.label.light{color:var(--blue);}
h2.title{font-size:clamp(2rem,3.5vw,3rem);font-weight:700;line-height:1.15;margin-bottom:14px;letter-spacing:-.01em;}
h2.title.white{color:var(--white);}
h3.sub{font-size:clamp(1.3rem,2.2vw,1.7rem);font-weight:700;line-height:1.25;margin-bottom:12px;}
p.lead{font-size:17px;font-weight:400;line-height:1.75;color:var(--grey);max-width:520px;margin-bottom:32px;}
p.lead.light{color:rgba(255,255,255,.62);}
.center{text-align:center;margin-left:auto;margin-right:auto;}

.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font);font-weight:700;font-size:14.5px;padding:14px 30px;border-radius:6px;border:none;cursor:pointer;text-decoration:none;transition:all .2s;letter-spacing:.3px;}
.btn-teal{background:var(--blue);color:var(--dark);}
.btn-teal:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(109,198,222,.4);}
.btn-white{background:var(--white);color:var(--dark);}
.btn-white:hover{background:var(--light);}
.btn-ghost{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.4);}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);}
.btn-ghost-dark{background:transparent;color:var(--dark);border:1.5px solid rgba(10,35,51,.25);}
.btn-ghost-dark:hover{border-color:var(--blue-deep);color:var(--blue-deep);}
.btn-dark{background:var(--dark);color:var(--white);}
/* the nav button while applications are closed — present, but not shouting */
.btn-ghost-nav{background:transparent;color:var(--white);border:1.5px solid rgba(255,255,255,.45);}
.btn-ghost-nav:hover{border-color:var(--blue);color:var(--blue);}
nav.scrolled .btn-ghost-nav{color:var(--mid);border-color:rgba(10,35,51,.28);}
nav.scrolled .btn-ghost-nav:hover{color:var(--blue-deep);border-color:var(--blue);}
/* a closed apply button reads as a note, not as a dead end */
.btn.closed{font-weight:600;}
/* Over the hero video the dark ghost button disappears — there it needs
   the light variant. Applies to the closed-applications button. */
.hero .btn-ghost-dark{color:var(--white);border-color:rgba(255,255,255,.45);}
.hero .btn-ghost-dark:hover{border-color:var(--blue);color:var(--blue);}
.btn-dark:hover{background:var(--mid);}
.btn-group{display:flex;gap:12px;flex-wrap:wrap;align-items:center;}

/* ── NAV ──
   Two states: transparent over the hero video, frosted glass once scrolled. */
nav{
  position:fixed;top:0;width:100%;z-index:100;
  background:linear-gradient(to bottom,rgba(6,22,33,.55),rgba(6,22,33,0));
  border-bottom:1px solid transparent;
  transition:background .35s ease,box-shadow .35s ease,border-color .35s ease,backdrop-filter .35s ease;
}
nav.scrolled{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border-bottom-color:rgba(10,35,51,.09);
  box-shadow:0 6px 28px rgba(10,35,51,.07);
}
body.sub nav{background:rgba(255,255,255,.82);backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);border-bottom-color:rgba(10,35,51,.09);}
nav.scrolled .nav-name{color:var(--navy,#0A2333);}
nav.scrolled .nav-links > a,nav.scrolled .nav-drop > a{color:var(--mid);}
nav.scrolled .nav-links > a:hover,nav.scrolled .nav-drop > a:hover,
nav.scrolled .nav-links a.active{color:var(--blue-deep);}
nav.scrolled .lang{color:var(--grey);border-color:rgba(10,35,51,.18);}
nav.scrolled .burger{border-color:rgba(10,35,51,.22);}
nav.scrolled .burger span{background:var(--dark);}
.nav-inner{max-width:var(--wrap);margin:0 auto;padding:0 5vw;height:66px;display:flex;align-items:center;justify-content:space-between;}
.nav-logo{display:flex;align-items:center;gap:10px;text-decoration:none;}
/* Oben am Seitenanfang gross, beim Scrollen schrumpft es mit der
   Leiste — Wunsch der Kundin vom 08.09. */
.nav-mark{width:64px;height:64px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:width .28s ease,height .28s ease;}
nav.scrolled .nav-mark{width:42px;height:42px;}
.nav-mark img{width:100%;height:100%;object-fit:contain;display:block;}
.nav-name{color:var(--white);font-weight:700;font-size:19px;line-height:1.22;transition:font-size .28s ease;}
nav.scrolled .nav-name{font-size:14.5px;}
.nav-name span{color:var(--blue);}
.nav-links{display:flex;gap:19px;align-items:center;}
.nav-links a{color:rgba(255,255,255,.78);font-size:14.5px;font-weight:500;text-decoration:none;transition:color .2s;white-space:nowrap;}
.nav-links a:hover,.nav-links a.active{color:var(--blue);}
.nav-right{display:flex;align-items:center;gap:12px;}
.lang{display:inline-flex;align-items:center;gap:6px;color:rgba(255,255,255,.62);font-size:12.5px;font-weight:500;border:1px solid rgba(255,255,255,.18);padding:4px 9px;border-radius:4px;background:transparent;cursor:pointer;text-decoration:none;transition:border-color .2s,color .2s;}
.lang:hover{color:#fff;border-color:rgba(255,255,255,.42);}
/* die Fahne bekommt eine hauchdünne Kante, sonst verschwimmt
   das Weiss im Union Jack mit der hellen Leiste */
.lang svg{display:block;border-radius:2px;box-shadow:0 0 0 1px rgba(0,0,0,.14);}
nav.scrolled .lang:hover{color:var(--dark);border-color:rgba(10,35,51,.38);}

/* the social block belongs to the mobile menu only */
.nav-social{display:none;}
@media(max-width:1080px){.nav-social{display:block;}}

/* dropdown */
.nav-drop{position:relative;}
.nav-drop > a{cursor:pointer;}
.nav-menu{position:absolute;top:100%;left:-16px;margin-top:14px;background:var(--dark);border:1px solid var(--blue-line);border-radius:8px;padding:8px;min-width:210px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:all .2s;box-shadow:0 18px 40px rgba(0,0,0,.35);}
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{opacity:1;visibility:visible;transform:translateY(0);}
.nav-menu a{display:block;padding:10px 13px;border-radius:5px;font-size:14px;color:rgba(255,255,255,.72);}
.nav-menu a:hover{background:var(--blue-soft);color:var(--blue);}

/* burger */
.burger{display:none;background:none;border:1px solid rgba(255,255,255,.2);border-radius:6px;width:38px;height:34px;cursor:pointer;padding:0;position:relative;}
.burger span{display:block;width:16px;height:1.5px;background:#fff;margin:3.5px auto;transition:.25s;}
body.menu-open{overflow:hidden;}

/* ── PAGE HEADER (subpages) — light, per client feedback ── */
.page-head{padding:150px 0 70px;background:linear-gradient(135deg,#E3F3F8 0%,#F6FBFD 60%,#FFFFFF 100%);position:relative;overflow:hidden;border-bottom:1px solid rgba(109,198,222,.28);}
.page-head::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 82% 12%,rgba(109,198,222,.32),transparent 58%);}
.page-head .wrap{position:relative;}
.page-head h1{font-size:clamp(2.2rem,4.5vw,3.4rem);font-weight:700;color:var(--dark);line-height:1.1;max-width:760px;margin-bottom:16px;}
.page-head p{font-size:17px;color:var(--grey);line-height:1.75;max-width:620px;}
.crumb{font-size:11.5px;font-weight:700;color:var(--blue-deep);text-transform:uppercase;letter-spacing:2.5px;margin-bottom:16px;display:block;}

/* ── HERO ──
   Background video (YouTube) with a still image underneath as the fallback.
   The scrim is only as strong as the headline needs — client asked for bright. */
.hero{
  position:relative;min-height:100vh;
  background:url(../img/gylf-group-palacio.webp) center/cover no-repeat;
  display:flex;align-items:center;padding-top:66px;overflow:hidden;
}
.hero-video{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
/* The source is 720p — every extra percent of zoom is visible as softness.
   We used to scale to 138% just to push YouTube's own logo out of frame; now
   we zoom only slightly and mask the two corners instead (.hero-mask below). */
.hero-video iframe{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(1.06);
  width:100vw;height:56.25vw;min-height:100vh;min-width:177.78vh;
  border:0;pointer-events:none;
  /* a touch of contrast reads as sharper on upscaled footage */
  filter:brightness(1.2) saturate(1.08) contrast(1.06);
  image-rendering:auto;
}
/* covers YouTube's title bar and its logo, in the colour of the scrim */
.hero-mask{position:absolute;pointer-events:none;z-index:1;}
.hero-mask.top{top:0;left:0;right:0;height:92px;
  background:linear-gradient(to bottom,rgba(6,22,33,.92),rgba(6,22,33,0));}
.hero-mask.br{right:0;bottom:0;width:230px;height:80px;
  background:radial-gradient(ellipse at bottom right,rgba(6,22,33,.9) 30%,rgba(6,22,33,0) 72%);}
/* Readability scrim. Concentrated on the left column where the text sits, so
   the right two thirds of the footage stay bright and open. */
.hero::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(95deg,rgba(6,22,33,.8) 0%,rgba(6,22,33,.66) 26%,rgba(6,22,33,.34) 48%,rgba(6,22,33,.08) 68%,rgba(6,22,33,0) 84%),
    linear-gradient(to bottom,rgba(6,22,33,.38) 0%,rgba(6,22,33,0) 20%),
    linear-gradient(to top,rgba(6,22,33,.42) 0%,rgba(6,22,33,0) 26%);
}
.hero-inner{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:80px 5vw;width:100%;}
/* sound toggle for the background video */
.hero-sound{
  position:absolute;right:5vw;bottom:32px;z-index:3;
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.16);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.34);color:#fff;
  font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  padding:9px 16px;border-radius:50px;cursor:pointer;transition:background .2s;
}
.hero-sound:hover{background:rgba(255,255,255,.28);}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(109,198,222,.16);border:1px solid rgba(109,198,222,.45);color:var(--blue);font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;padding:6px 14px;border-radius:4px;margin-bottom:22px;}
.hero-eyebrow::before{content:'';width:5px;height:5px;background:var(--blue);border-radius:50%;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
.hero h1{font-size:clamp(2.6rem,5.5vw,4.4rem);font-weight:700;color:var(--white);line-height:1.08;max-width:700px;margin-bottom:20px;text-shadow:0 2px 30px rgba(6,22,33,.5);}
.hero h1 span{color:var(--blue);}
/* Die Edition stand vorher als kleines Band ueber der Ueberschrift.
   Die Kundin wollte sie darunter, deutlich sichtbar. */
.hero-edition{display:block;font-family:inherit;font-size:20px;font-weight:700;color:#8FD9EE;
  letter-spacing:.5px;margin-bottom:14px;text-shadow:0 1px 3px rgba(6,22,33,.9),0 2px 20px rgba(6,22,33,.8);}
@media(max-width:700px){.hero-edition{font-size:17px;}}

.hero-sub{font-size:17.5px;color:#fff;font-weight:400;max-width:520px;line-height:1.75;margin-bottom:32px;text-shadow:0 1px 3px rgba(6,22,33,.85),0 2px 22px rgba(6,22,33,.7);}
/* Grid rather than flex: with the larger type five items no longer fit on one
   flex line and the last one dropped to a row of its own. */
.hero-stats{display:grid;grid-template-columns:repeat(5,1fr);margin-top:52px;
  background:rgba(6,22,33,.46);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.14);border-radius:14px;overflow:hidden;}
.hstat{padding:24px 22px;border-right:1px solid rgba(255,255,255,.14);min-width:0;}
.hstat:last-child{border-right:none;}
.hstat:last-child{border-right:none;}
/* --blue verschwand vor dem hellen Video; heller und mit kraeftigerem
   Schatten bleibt die Zahl auf jedem Einzelbild lesbar. */
.hstat-num{font-size:2.05rem;font-weight:700;color:#8FD9EE;line-height:1;
  text-shadow:0 2px 4px rgba(6,22,33,.95),0 2px 18px rgba(6,22,33,.85);}
.hstat-lbl{font-size:11px;font-weight:600;color:rgba(255,255,255,.88);text-transform:uppercase;letter-spacing:1.5px;margin-top:4px;text-shadow:0 1px 8px rgba(6,22,33,.9);}

/* ── CURRENT EDITION — first thing after the hero (client request) ── */
.now-bar{background:var(--blue);color:var(--dark);}
.now-inner{max-width:var(--wrap);margin:0 auto;padding:15px 5vw;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;font-size:14px;font-weight:700;letter-spacing:.4px;text-align:center;}
.now-inner .dot{width:6px;height:6px;border-radius:50%;background:var(--dark);opacity:.45;}

/* ── Zweite Sektion: Bild neben dem Text, Eckdaten als Band ──
   Von zwei Entwürfen hat die Kundin am 08.09.2026 diesen gewählt.
   Der Text behält seinen Platz links, das Foto der Halbinsel nimmt
   die rechte Hälfte, Termin und Eckdaten laufen als Band darunter. */
.current{background:var(--white);padding:78px 0 0;}
.current-inner{max-width:var(--wrap);margin:0 auto;padding:0 5vw;
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.current-foto{border-radius:16px;overflow:hidden;box-shadow:0 22px 54px rgba(10,35,51,.22);}
.current-foto img{width:100%;height:clamp(300px,32vw,430px);object-fit:cover;display:block;}

.current-band{background:linear-gradient(135deg,#1B5B7A 0%,#2C82A4 100%);color:var(--white);
  margin-top:64px;padding:26px 0 24px;}
.current-band-inner{max-width:1180px;margin:0 auto;padding:0 5vw;
  display:grid;grid-template-columns:auto 1fr;gap:38px;align-items:center;}
.current-cd{display:flex;gap:12px;}
.current-cd .cd-box{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  border-radius:10px;padding:11px 16px;text-align:center;min-width:78px;flex:0 0 auto;}
.current-cd .cd-num{font-size:1.6rem;font-weight:700;line-height:1;}
.current-cd .cd-lbl{font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:rgba(255,255,255,.8);margin-top:6px;}
.current-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.current-meta .cm-lbl{font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:#CDEEF7;margin-bottom:5px;}
.current-meta .cm-val{font-size:14.5px;font-weight:700;line-height:1.35;}
/* Ein Datum darf nicht mitten im Zeitraum umbrechen */
.current-meta > div:first-child .cm-val{white-space:nowrap;}
@media(max-width:900px){
  .current-inner{grid-template-columns:1fr;gap:34px;}
  .current-band-inner{grid-template-columns:1fr;gap:26px;}
  .current-meta{grid-template-columns:1fr 1fr;}
}
@media(max-width:520px){ .current-cd{flex-wrap:wrap;} .current-cd .cd-box{flex:1;min-width:0;} }

@media(max-width:700px){
  .current{background-position:46% 24%;background-size:230%;padding:70px 0 74px;}
  .current::after{background:linear-gradient(180deg,rgba(6,22,33,.82) 0%,rgba(6,22,33,.9) 100%);}
}
.cm-lbl{font-size:10.5px;font-weight:700;color:rgba(255,255,255,.75);text-transform:uppercase;letter-spacing:1.8px;margin-bottom:5px;}
.cm-val{font-size:15.5px;font-weight:700;color:var(--white);line-height:1.4;}
.cd-box{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);border-radius:8px;padding:12px 4px;text-align:center;flex:1;}
.cd-num{font-size:1.75rem;font-weight:700;color:#fff;line-height:1;}
.cd-lbl{font-size:10px;font-weight:600;color:rgba(255,255,255,.78);text-transform:uppercase;letter-spacing:1.4px;margin-top:5px;}

/* ── LOGO STRIP ── */
.logo-strip{background:var(--light);border-bottom:1px solid var(--blue-line);padding:20px 0;overflow:hidden;}
.logo-strip-label{text-align:center;font-size:10.5px;font-weight:700;color:var(--grey);text-transform:uppercase;letter-spacing:2.5px;margin-bottom:14px;}
.logo-track{display:flex;gap:48px;animation:scroll 32s linear infinite;width:max-content;padding:0 24px;}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.litem{font-size:12.5px;font-weight:700;color:#8A9AA6;text-transform:uppercase;letter-spacing:1.5px;white-space:nowrap;}
.litem.hi{color:var(--mid);}

/* ── SPLIT ROWS ── */
.split{padding:100px 0;}
.split-inner{max-width:var(--wrap);margin:0 auto;padding:0 5vw;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.split-inner.rev{direction:rtl;}
.split-inner.rev > *{direction:ltr;}
.split-img{border-radius:14px;overflow:hidden;aspect-ratio:4/3;}
.split-img img{width:100%;height:100%;object-fit:cover;display:block;}
.split-text p.lead{max-width:100%;}
.split-stat{display:flex;gap:28px;margin-top:28px;padding-top:28px;border-top:1px solid rgba(10,35,51,.08);flex-wrap:wrap;}
.split-stat-item .num{font-size:1.8rem;font-weight:700;color:var(--blue-deep);line-height:1;}
.split-stat-item .lbl{font-size:11.5px;font-weight:600;color:var(--grey);text-transform:uppercase;letter-spacing:1px;margin-top:3px;}

/* ── BENEFIT CARDS — light since rev. 3 (client: too dark) ── */
.benefits-section{background:var(--light);padding:100px 0;}
.cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:var(--wrap);margin:0 auto;padding:0 5vw;}
.feat-card{background:var(--white);border:1px solid rgba(10,35,51,.08);border-radius:10px;padding:28px 22px;position:relative;overflow:hidden;transition:box-shadow .25s,transform .25s;}
.feat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .3s;}
.feat-card:hover{box-shadow:0 14px 34px rgba(10,35,51,.1);transform:translateY(-3px);}
.feat-card:hover::before{transform:scaleX(1);}
.feat-icon{font-size:24px;margin-bottom:14px;}
.feat-card h3{font-size:17px;font-weight:700;color:var(--dark);margin-bottom:8px;}
.feat-card p{font-size:14.5px;font-weight:400;color:var(--grey);line-height:1.65;}

/* ── WHO ATTENDS ── */
.who-section{background:var(--light);padding:0 0 100px;}
.who-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:var(--wrap);margin:0 auto;padding:0 5vw;}
.who-card{background:var(--white);border:1px solid rgba(10,35,51,.08);border-radius:10px;padding:24px 20px;transition:box-shadow .25s,transform .25s;}
.who-card:hover{box-shadow:0 14px 34px rgba(10,35,51,.1);transform:translateY(-3px);}
.who-tag{display:inline-block;background:var(--blue-soft);color:var(--blue-deep);font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px;}
.who-card h3{font-size:17px;font-weight:700;color:var(--dark);margin-bottom:8px;}
.who-card p{font-size:14.5px;font-weight:400;color:var(--grey);line-height:1.6;}

/* ── VIDEO SECTION (light, per client feedback) ── */
.video-section{background:var(--light);padding:100px 0;}
.video-head{max-width:var(--wrap);margin:0 auto 44px;padding:0 5vw;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap;}
.video-main{max-width:var(--wrap);margin:0 auto;padding:0 5vw;}
.video-frame{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/9;background:var(--dark);box-shadow:0 24px 60px rgba(10,35,51,.18);}
.video-frame iframe{width:100%;height:100%;border:0;display:block;}
.video-grid{max-width:var(--wrap);margin:20px auto 0;padding:0 5vw;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.vid{background:var(--white);border:1px solid rgba(10,35,51,.08);border-radius:12px;overflow:hidden;cursor:pointer;text-align:left;padding:0;font-family:var(--font);transition:transform .2s,box-shadow .2s;display:block;width:100%;}
.vid:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(10,35,51,.12);}
.vid-thumb{position:relative;aspect-ratio:16/9;background:var(--mid);overflow:hidden;}
.vid-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.vid-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(10,35,51,.28);transition:background .2s;}
.vid:hover .vid-play{background:rgba(10,35,51,.1);}
.vid-play span{width:44px;height:44px;border-radius:50%;background:var(--blue);color:var(--dark);display:flex;align-items:center;justify-content:center;font-size:14px;padding-left:3px;}
.vid-title{padding:15px 17px 17px;font-size:14.5px;font-weight:600;line-height:1.45;color:var(--dark);}

/* ── TESTIMONIALS ── */
.testi-section{background:var(--white);padding:100px 0;}
.testi-layout{max-width:var(--wrap);margin:48px auto 0;padding:0 5vw;display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start;}
.testi-photo{border-radius:14px;overflow:hidden;position:sticky;top:90px;aspect-ratio:3/4;}
.testi-photo img{width:100%;height:100%;object-fit:cover;display:block;}
.testi-stack{display:flex;flex-direction:column;gap:18px;}
.testi-card{background:var(--light);border-radius:12px;padding:26px 28px;position:relative;}
.testi-quote{font-size:3rem;line-height:.8;color:rgba(109,198,222,.45);font-weight:700;position:absolute;top:16px;left:24px;}
.testi-text{font-size:15.5px;font-style:italic;color:var(--dark);line-height:1.7;margin-top:26px;margin-bottom:18px;}
.testi-author{border-top:1px solid var(--blue-line);padding-top:14px;}
.testi-name{font-size:14.5px;font-weight:700;}
.testi-meta{font-size:13px;color:var(--grey);font-weight:400;margin-top:2px;}

/* ── EVENT TIMELINE — light since rev. 3 ── */
.timeline-section{background:var(--white);padding:100px 0;}
.timeline-wrap{max-width:var(--wrap);margin:0 auto;padding:0 5vw;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;}
.timeline-img{border-radius:14px;overflow:hidden;aspect-ratio:3/4;position:sticky;top:90px;}
.timeline-img img{width:100%;height:100%;object-fit:cover;display:block;}
.timeline-list{padding-top:4px;}
.tl-item{display:flex;gap:20px;padding-bottom:40px;position:relative;}
.tl-item:last-child{padding-bottom:0;}
.tl-item:last-child .tl-line{display:none;}
.tl-dot-wrap{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:16px;}
.tl-dot{width:16px;height:16px;border-radius:50%;background:var(--blue);border:3px solid var(--white);box-shadow:0 0 0 2px var(--blue);flex-shrink:0;}
.tl-line{flex:1;width:1px;background:rgba(109,198,222,.5);margin-top:4px;}
.tl-time{font-size:11.5px;font-weight:700;color:var(--blue-deep);text-transform:uppercase;letter-spacing:2px;margin-bottom:4px;}
.tl-title{font-size:17px;font-weight:700;color:var(--dark);margin-bottom:6px;}
.tl-desc{font-size:14.5px;font-weight:400;color:var(--grey);line-height:1.6;}
.tl-ctas{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap;}

/* ── EDITIONS ── */
.editions-section{background:var(--white);padding:100px 0;overflow:hidden;}
.editions-scroll{display:flex;gap:14px;overflow-x:auto;padding-bottom:16px;margin-left:max(5vw,calc((100vw - var(--wrap))/2 + 5vw));padding-right:5vw;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:var(--blue) var(--light);}
.editions-scroll::after{content:'';flex:0 0 max(5vw,calc((100vw - var(--wrap))/2 + 5vw));}
.editions-scroll::-webkit-scrollbar{height:3px;}
.editions-scroll::-webkit-scrollbar-thumb{background:var(--blue);}
.ed-card{flex:0 0 250px;scroll-snap-align:start;background:var(--light);border-radius:10px;padding:22px 18px;border:1px solid rgba(10,35,51,.08);border-top:3px solid var(--blue);transition:box-shadow .2s,transform .2s;}
.ed-card:hover{box-shadow:0 12px 28px rgba(10,35,51,.1);transform:translateY(-3px);}
.ed-num{font-size:1.6rem;font-weight:700;color:rgba(31,127,155,.4);line-height:1;margin-bottom:3px;}
.ed-year{font-size:11px;font-weight:700;color:var(--blue-deep);text-transform:uppercase;letter-spacing:2px;margin-bottom:9px;}
.ed-theme{font-size:14px;font-weight:600;color:var(--dark);line-height:1.4;margin-bottom:9px;}
.ed-speakers{font-size:13px;color:var(--grey);font-weight:400;line-height:1.55;}
.ed-badge{display:inline-block;margin-top:10px;font-size:10.5px;font-weight:700;background:rgba(200,169,110,.2);color:#8A6F35;padding:3px 9px;border-radius:20px;text-transform:uppercase;letter-spacing:1px;}
/* editions as a grid (subpage) */
.ed-grid{max-width:var(--wrap);margin:48px auto 0;padding:0 5vw;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.ed-grid .ed-card{flex:none;}

/* ── FUN FACTS ── */
.facts-section{background:var(--light);padding:94px 0;}
.facts-grid{max-width:var(--wrap);margin:0 auto;padding:0 5vw;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.fact{background:var(--white);border:1px solid rgba(10,35,51,.08);border-radius:14px;padding:30px 26px;text-align:center;
      transition:transform .25s,box-shadow .25s;}
.fact:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(10,35,51,.1);}
.fact-num{font-family:var(--font-head);font-size:clamp(2.2rem,4vw,3rem);font-weight:700;color:var(--blue-deep);line-height:1;margin-bottom:10px;}
.fact-lbl{font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--dark);margin-bottom:7px;}
.fact-sub{font-size:14px;color:var(--grey);line-height:1.55;}
.facts-note{max-width:var(--wrap);margin:22px auto 0;padding:0 5vw;font-size:13.5px;color:var(--grey);text-align:center;}

/* edition cards are links now */
.ed-card{text-decoration:none;display:block;}
.ed-more{display:inline-block;margin-top:12px;font-size:12px;font-weight:700;color:var(--blue-deep);letter-spacing:.4px;}
.ed-nav{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;align-items:center;}

/* ── GALLERY ── */
.gallery-section{background:var(--light);padding:100px 0;}
.photo-grid{max-width:var(--wrap);margin:48px auto 0;padding:0 5vw;display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:280px 200px;gap:10px;}
.ph{border-radius:10px;overflow:hidden;position:relative;background:var(--mid);}
.ph:first-child{grid-row:span 2;}
.ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s;}
.ph:hover img{transform:scale(1.04);}
.ph-cap{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(10,35,51,.85),transparent);padding:20px 14px 12px;font-size:12px;font-weight:600;color:rgba(255,255,255,.9);text-transform:uppercase;letter-spacing:1.5px;opacity:0;transform:translateY(4px);transition:all .3s;}
.ph:hover .ph-cap{opacity:1;transform:translateY(0);}
.gallery-footer{max-width:var(--wrap);margin:28px auto 0;padding:0 5vw;display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.gallery-link{font-size:13.5px;font-weight:700;color:var(--blue-deep);text-decoration:none;text-transform:uppercase;letter-spacing:1.5px;}

/* ── INSTAGRAM (capped at 3 rows — client request) ── */
.ig-section{background:var(--white);padding:96px 0;}
.ig-head{max-width:var(--wrap);margin:0 auto 36px;padding:0 5vw;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.ig-handle{font-size:15px;font-weight:700;color:var(--blue-deep);text-decoration:none;}
/* six posts: three across, two down */
.ig-grid{max-width:var(--wrap);margin:0 auto;padding:0 5vw;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.ig-tile{aspect-ratio:1;border-radius:8px;overflow:hidden;position:relative;background:var(--light);display:flex;align-items:center;justify-content:center;}
.ig-tile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s cubic-bezier(.22,.61,.36,1);}
.ig-tile:hover img{transform:scale(1.08);}
.ig-tile.empty{border:1px dashed rgba(10,35,51,.16);color:rgba(10,35,51,.3);font-size:20px;}
/* placeholder tiles are dimmed on purpose so nobody mistakes them for the live feed */
/* Die Kacheln waren gedimmt, um sie als Platzhalter zu kennzeichnen.
   Auf Kundenwunsch (08.09.2026) zeigen sie von Anfang an volle Farben;
   beim Zeigen bleibt nur die Zoom-Bewegung. */
.ig-note{max-width:var(--wrap);margin:20px auto 0;padding:0 5vw;font-size:14px;color:var(--grey);}

/* ── SPEAKERS ── */
.sp-section{background:var(--light);padding:96px 0;}
.sp-grid{max-width:var(--wrap);margin:44px auto 0;padding:0 5vw;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
/* Mit Porträt aus der Präsentation: Bild links, Text rechts.
   Karten ohne Bild (neun Sprecher fehlen im Dossier) behalten
   dasselbe Aussehen — der Text sitzt dann einfach allein. */
.sp{background:var(--white);border:1px solid rgba(10,35,51,.07);border-left:3px solid var(--blue);border-radius:8px;padding:16px 18px;transition:transform .2s,box-shadow .2s;
  display:flex;align-items:center;gap:14px;}
.sp-foto{flex:0 0 62px;width:62px;height:62px;border-radius:50%;overflow:hidden;background:var(--light);}
.sp-foto img{width:100%;height:100%;object-fit:cover;display:block;}
.sp-txt{min-width:0;}
.sp:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(10,35,51,.09);}
.sp-name{font-size:15.5px;font-weight:700;color:var(--dark);line-height:1.3;margin-bottom:5px;}
.sp-role{font-size:13px;font-weight:400;color:var(--grey);line-height:1.5;}
.sp-flag{font-size:11.5px;font-weight:700;color:var(--blue-deep);text-transform:uppercase;letter-spacing:1.4px;margin-bottom:7px;display:block;}

/* ── TEAM ── */
.team-section{background:var(--white);padding:100px 0;}
.team-header{max-width:var(--wrap);margin:0 auto 52px;padding:0 5vw;display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap;}
.team-grid{max-width:var(--wrap);margin:0 auto;padding:0 5vw;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.tm{background:var(--light);border-radius:14px;overflow:hidden;transition:box-shadow .25s;}
.tm:hover{box-shadow:0 10px 30px rgba(10,35,51,.12);}
.tm-img{width:100%;aspect-ratio:1;object-fit:cover;object-position:top;display:block;filter:grayscale(12%);transition:filter .3s;}
.tm-ph{width:100%;aspect-ratio:1;background:linear-gradient(135deg,var(--mid),rgba(109,198,222,.35));display:flex;align-items:center;justify-content:center;font-size:4rem;color:rgba(255,255,255,.6);}
.tm:hover .tm-img{filter:grayscale(0);}
.tm-body{padding:24px 26px 26px;}
.tm-name{font-size:19px;font-weight:700;color:var(--dark);margin-bottom:3px;}
.tm-role{font-size:11.5px;font-weight:700;color:var(--blue-deep);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px;}
.tm-bio{font-size:14.5px;font-weight:400;color:var(--grey);line-height:1.6;margin-bottom:14px;}
.tm-dl{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:700;color:var(--blue-deep);text-transform:uppercase;letter-spacing:1.5px;cursor:pointer;text-decoration:none;}
.team-cta{max-width:var(--wrap);margin:40px auto 0;padding:0 5vw;text-align:center;}

/* ── CONTENT BLOCKS (subpages) ── */
.section{padding:90px 0;}
.section.alt{background:var(--light);}
.prose{max-width:760px;margin:0 auto;padding:0 5vw;}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700;margin:44px 0 14px;line-height:1.25;}
.prose h2:first-child{margin-top:0;}
.prose h3{font-size:1.15rem;font-weight:700;margin:30px 0 10px;}
.prose p{font-size:17px;line-height:1.8;color:var(--grey);margin-bottom:16px;}
.prose ul,.prose ol{margin:0 0 18px 20px;}
.prose li{font-size:17px;line-height:1.8;color:var(--grey);margin-bottom:9px;}
.prose strong{color:var(--dark);font-weight:700;}
.prose a{color:var(--blue-deep);}

.obj-grid{max-width:var(--wrap);margin:44px auto 0;padding:0 5vw;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.obj{background:var(--white);border:1px solid rgba(10,35,51,.08);border-radius:12px;padding:26px 24px;}
.obj-num{font-size:12.5px;font-weight:700;color:var(--blue-deep);letter-spacing:2px;margin-bottom:12px;}
.obj p{font-size:15.5px;line-height:1.7;color:var(--grey);}

/* forums calendar */
.fo-list{max-width:var(--wrap);margin:44px auto 0;padding:0 5vw;display:flex;flex-direction:column;gap:12px;}
.fo{display:grid;grid-template-columns:190px 1fr 150px;gap:24px;align-items:center;background:var(--white);border:1px solid rgba(10,35,51,.08);border-left:3px solid var(--blue);border-radius:10px;padding:22px 26px;}
.fo.next{border-left-color:var(--gold);background:linear-gradient(90deg,rgba(200,169,110,.07),transparent 40%);}
.fo-place{font-size:16px;font-weight:700;color:var(--dark);}
.fo-country{font-size:11.5px;font-weight:700;color:var(--blue-deep);text-transform:uppercase;letter-spacing:1.6px;margin-bottom:4px;}
.fo-theme{font-size:15.5px;color:var(--grey);line-height:1.6;}
.fo-date{font-size:14.5px;font-weight:700;color:var(--dark);text-align:right;}

/* ── CONTACT / APPLY CARD ──
   The forms used to sit bare on a full-width white page, which read as
   unfinished next to the rest. They now live in a card that lifts into the
   page header, with the emblem straddling the edge. ── */
.card-section{padding:0 0 90px;background:var(--white);}
.form-wrap{max-width:820px;margin:0 auto;padding:0 5vw;}
.form-card{
  background:var(--white);border:1px solid rgba(10,35,51,.09);border-radius:20px;
  padding:64px 56px 52px;margin-top:-70px;position:relative;
  box-shadow:0 30px 70px rgba(10,35,51,.13),0 2px 6px rgba(10,35,51,.05);
}
.form-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:5px;border-radius:20px 20px 0 0;
  background:linear-gradient(90deg,var(--blue),#2C82A4);
}
/* emblem sitting on the top edge of the card */
.form-emblem{
  position:absolute;top:-44px;left:50%;transform:translateX(-50%);
  width:88px;height:88px;border-radius:50%;background:var(--white);
  border:1px solid rgba(109,198,222,.4);
  box-shadow:0 10px 30px rgba(10,35,51,.14);
  display:flex;align-items:center;justify-content:center;padding:12px;
}
.form-emblem img{width:100%;height:100%;object-fit:contain;display:block;}
.form-card > .head{text-align:center;margin-bottom:38px;}
.form-card > .head h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700;margin-bottom:10px;}
.form-card > .head p{font-size:16px;color:var(--grey);max-width:480px;margin:0 auto;line-height:1.7;}

/* contact details as their own tiles above the form */
/* Die Kacheln füllen die Breite aus, egal wie viele es sind.
   Feste 3 Spalten liessen eine leere Zelle stehen, seit die
   Telefon-Kachel weg ist — das Forum gibt keine Nummer heraus. */
.contact-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:36px;}
.ct{background:var(--light);border-radius:12px;padding:20px 18px;text-align:center;border:1px solid rgba(109,198,222,.28);}
.ct .ic{font-size:20px;margin-bottom:9px;}
.ct .lb{font-size:10.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--blue-deep);margin-bottom:6px;}
.ct .vl{font-size:14.5px;font-weight:700;color:var(--dark);word-break:break-word;}
.ct .vl a{color:var(--dark);text-decoration:none;}
.ct .vl a:hover{color:var(--blue-deep);}

.form-divider{display:flex;align-items:center;gap:16px;margin:6px 0 32px;color:var(--grey);
  font-size:11.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;}
.form-divider::before,.form-divider::after{content:'';flex:1;height:1px;background:rgba(10,35,51,.12);}
.form-card .btn{width:100%;justify-content:center;}
.field{margin-bottom:20px;}
.field label{display:block;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.6px;color:var(--dark);margin-bottom:8px;}
.field input,.field select,.field textarea{width:100%;font-family:var(--font);font-size:16px;padding:13px 15px;border:1px solid rgba(10,35,51,.16);border-radius:8px;background:var(--white);color:var(--dark);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft);}
.field textarea{min-height:130px;resize:vertical;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-note{font-size:14px;color:var(--grey);line-height:1.7;margin-top:8px;}

/* placeholder marker — visible on purpose, must not go live unnoticed */
.ph-note{background:rgba(200,169,110,.12);border:1px dashed rgba(200,169,110,.6);border-radius:10px;padding:17px 21px;font-size:14.5px;color:#7A6636;line-height:1.65;margin:24px 0;}
.ph-note strong{color:#5C4C24;}

/* ── CTA ──
   Boxed rather than a full-bleed band. The emblem straddles the top edge, so
   it lives on the wrapper, not inside the box — the box clips its own
   watermark and would clip the emblem with it. ── */
.cta-section{background:var(--white);padding:104px 0 100px;}
.cta-wrap{max-width:900px;margin:0 auto;padding:0 5vw;position:relative;}
.cta-box{
  position:relative;border-radius:22px;overflow:hidden;text-align:center;
  padding:86px 54px 66px;
  background:linear-gradient(135deg,#7FD0E4 0%,#3FA5C4 100%);
  box-shadow:0 30px 70px rgba(31,127,155,.26);
}
.cta-box::before{
  content:'GYLF';position:absolute;font-size:clamp(9rem,22vw,17rem);font-weight:700;
  color:rgba(255,255,255,.16);top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;white-space:nowrap;font-family:var(--font-head);letter-spacing:.02em;
}
/* half above the edge, half inside it */
.cta-emblem{
  position:absolute;top:-44px;left:50%;transform:translateX(-50%);
  width:88px;height:88px;border-radius:50%;background:var(--white);
  box-shadow:0 10px 28px rgba(10,35,51,.22);
  display:flex;align-items:center;justify-content:center;padding:12px;z-index:3;
}
.cta-emblem img{width:100%;height:100%;object-fit:contain;display:block;}
.cta-inner{position:relative;z-index:1;max-width:560px;margin:0 auto;}
.cta-inner h2{font-size:clamp(1.9rem,3.4vw,2.6rem);font-weight:700;color:var(--dark);margin-bottom:16px;}
.cta-inner p{font-size:16.5px;color:rgba(10,35,51,.82);line-height:1.75;margin-bottom:34px;}

/* ── FOOTER — light since rev. 3 (client: still too dark) ── */
footer{background:var(--light);padding:60px 0 28px;border-top:1px solid rgba(109,198,222,.4);}
.footer-inner{max-width:var(--wrap);margin:0 auto;padding:0 5vw;}
.footer-top{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:48px;margin-bottom:48px;}
footer .nav-name{color:var(--dark);}
footer .nav-name span{color:var(--blue-deep);}
.footer-brand p{font-size:13.5px;color:var(--grey);line-height:1.7;font-weight:400;margin-top:12px;max-width:240px;}
.footer-col h5{font-size:10.5px;font-weight:700;color:var(--dark);text-transform:uppercase;letter-spacing:2px;margin-bottom:14px;}
.footer-col a{display:block;font-size:13.5px;color:var(--grey);font-weight:400;text-decoration:none;margin-bottom:9px;transition:color .2s;}
.footer-col a:hover{color:var(--blue-deep);}
.footer-bottom{border-top:1px solid rgba(10,35,51,.12);padding-top:22px;display:flex;justify-content:space-between;align-items:center;font-size:12.5px;color:var(--grey);flex-wrap:wrap;gap:10px;}
.footer-bottom a{color:var(--grey);}
.footer-bottom a:hover{color:var(--blue-deep);}
.footer-langs{display:flex;gap:10px;}
.footer-langs a{color:var(--blue-deep);font-size:12.5px;font-weight:700;text-decoration:none;transition:color .2s;}
.footer-langs a:hover{color:var(--dark);}
/* die Sprache, in der man gerade ist, wird nicht als Angebot
   dargestellt — sonst klickt man auf das, was schon da ist */
.footer-langs a.aktiv{color:var(--dark);cursor:default;text-decoration:underline;text-underline-offset:3px;}

/* ── MODAL ── */
.modal{display:none;position:fixed;inset:0;background:rgba(6,22,33,.94);z-index:9999;align-items:center;justify-content:center;padding:20px;}
.modal.open{display:flex;}
.modal-inner{position:relative;width:100%;max-width:920px;aspect-ratio:16/9;}
.modal-inner iframe{width:100%;height:100%;border:none;border-radius:8px;}
.modal-close{position:absolute;top:-44px;right:0;background:none;border:none;color:#fff;font-size:26px;cursor:pointer;font-family:var(--font);}


/* ── NAV BREAKPOINT ──
   Earlier than the layout breakpoint: with the larger type the eight menu
   items stop fitting well before 900px. ── */
@media(max-width:1080px){
  /* absolute, not fixed: the bar itself carries a backdrop-filter, which makes
     it the containing block for fixed children — the menu then inherited the
     66px height of the bar and was cut off after the first item. */
  .nav-links{
    position:absolute;top:66px;left:0;right:0;
    height:calc(100vh - 66px);height:calc(100dvh - 66px);
    background:#fff;
    flex-direction:column;align-items:stretch;
    gap:0;padding:18px 5vw 60px;overflow-y:auto;-webkit-overflow-scrolling:touch;
    transform:translateX(100%);transition:transform .28s ease;
    box-shadow:0 20px 40px rgba(10,35,51,.18);
  }
  .nav-links.open{transform:translateX(0);}
  /* Top level: one clear row each, divider below. Submenus fold away. */
  .nav-links > a,
  .nav-drop > a,
  nav.scrolled .nav-links > a,
  nav.scrolled .nav-drop > a{
    display:flex;align-items:center;justify-content:space-between;
    padding:17px 2px;font-size:17px;font-weight:700;color:var(--dark);
    border-bottom:1px solid rgba(10,35,51,.09);
  }
  .nav-drop{width:100%;}
  .nav-drop > a::after{content:'';width:8px;height:8px;flex:none;margin-right:4px;
    border-right:2px solid rgba(10,35,51,.4);border-bottom:2px solid rgba(10,35,51,.4);
    transform:rotate(45deg) translateY(-2px);transition:transform .2s;}
  .nav-drop.offen > a::after{transform:rotate(-135deg) translateY(-2px);}
  /* the ▾ from the desktop label is redundant next to the arrow */
  .chev-desktop{display:none;}

  /* display, not max-height: the animated variant refused to open here and
     a submenu that does not open is worse than one that opens without a slide */
  .nav-drop > .nav-menu{
    position:static;opacity:1;visibility:visible;transform:none;
    background:transparent;border:none;box-shadow:none;padding:0;min-width:0;
    margin:0;max-height:none;overflow:visible;transition:none;display:none;
  }
  .nav-drop.offen > .nav-menu{display:block;}
  .nav-menu a,nav.scrolled .nav-menu a{
    font-size:15.5px;font-weight:500;color:var(--grey);
    padding:13px 0 13px 18px;border-bottom:none;
  }
  .nav-menu a:last-child{padding-bottom:18px;}

  /* social handles at the foot of the menu, as on the current contact page */
  /* the last menu row already draws a line — no second one on top of it */
  .nav-links > a:last-of-type,.nav-drop:last-of-type > a{border-bottom:none;}
  .nav-social{margin-top:10px;padding-top:22px;border-top:1px solid rgba(10,35,51,.12);}
  .nav-social-lbl{display:block;font-size:11px;font-weight:700;letter-spacing:2px;
    text-transform:uppercase;color:var(--blue-deep);margin-bottom:12px;}
  .nav-social-row{display:flex;flex-wrap:wrap;gap:8px;}
  .nav-social-row a{
    padding:9px 15px;border:1px solid rgba(10,35,51,.16);border-radius:50px;
    font-size:14px;font-weight:700;color:var(--dark);border-bottom:1px solid rgba(10,35,51,.16);
  }
  .nav-social-row a:hover{border-color:var(--blue);color:var(--blue-deep);}
  .nav-social-mail{display:inline-block;margin-top:16px;font-size:15px;
    color:var(--blue-deep);font-weight:700;border-bottom:none;padding:0;}

  .burger{display:block;}
  /* the bar needs a solid backing here so the logo stays legible */
  nav{background:rgba(10,35,51,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);}
  nav.scrolled{background:rgba(255,255,255,.92);}
  nav.menu-open{background:rgba(255,255,255,.97);}
  nav.menu-open .nav-name{color:var(--dark);}
  nav.menu-open .burger{border-color:rgba(10,35,51,.22);}
  nav.menu-open .burger span{background:var(--dark);}
  /* Platz ist knapp neben Knopf und Burger: nur die Fahne bleibt.
     Ganz ausblenden ginge nicht -- dann käme man am Handy nicht
     mehr in die andere Sprache. */
  .lang{padding:5px 7px;gap:0;}
  .lang .lang-txt{display:none;}
  .nav-right .btn{padding:11px 20px;font-size:13.5px;}
}

/* ============================================================
   RESPONSIVE — was missing entirely in rev. 1
   ============================================================ */
@media(max-width:1020px){
  .cards-grid,.who-grid{grid-template-columns:repeat(2,1fr);}
  .video-grid{grid-template-columns:repeat(2,1fr);}
  .sp-grid{grid-template-columns:repeat(3,1fr);}
  .team-grid,.ed-grid,.obj-grid,.facts-grid{grid-template-columns:repeat(2,1fr);}
  .split-inner,.timeline-wrap,.current-inner{gap:44px;}
  .hero-stats{grid-template-columns:repeat(3,1fr);}
  .hstat:nth-child(3n){border-right:none;}
}

@media(max-width:900px){
  .hero{min-height:auto;padding-top:66px;
    background:url(../img/gylf-group-palacio.webp) center/cover no-repeat;}
  .hero::after{
    background:
      linear-gradient(to bottom,rgba(6,22,33,.72) 0%,rgba(6,22,33,.5) 45%,rgba(6,22,33,.66) 100%);
  }
  .hero-inner{padding:64px 5vw 56px;}
  .split-inner,.timeline-wrap,.current-inner,.testi-layout{grid-template-columns:1fr;}
  .split-inner.rev{direction:ltr;}
  .split-inner.rev .split-img{order:-1;}
  .timeline-img,.testi-photo{position:static;aspect-ratio:16/9;}
  .footer-top{grid-template-columns:1fr 1fr;gap:32px;}
  .photo-grid{grid-template-columns:1fr 1fr;grid-template-rows:auto;}
  .ph:first-child{grid-row:span 1;grid-column:span 2;aspect-ratio:16/9;}
  .ph:not(:first-child){aspect-ratio:1;}
  .fo{grid-template-columns:1fr;gap:10px;}
  .fo-date{text-align:left;}
  .split,.dark-section,.testi-section,.timeline-section,.editions-section,
  .gallery-section,.team-section,.video-section,.ig-section,.sp-section,.section{padding:70px 0;}
  .who-section{padding:0 0 70px;}
}

@media(max-width:760px){
  .cards-grid,.who-grid,.video-grid,.sp-grid,.team-grid,.ed-grid,.obj-grid{grid-template-columns:1fr;}
  .facts-grid{grid-template-columns:1fr;}
  .ed-nav{flex-direction:column;align-items:stretch;}
  .ed-nav .btn{justify-content:center;}
  .ig-grid{grid-template-columns:repeat(2,1fr);}
  .hero-stats{margin-top:36px;grid-template-columns:repeat(2,1fr);border-radius:12px;}
  .hstat{padding:16px 14px;border-bottom:1px solid rgba(255,255,255,.14);}
  .hstat:nth-child(2n){border-right:none;}
  .hstat-num{font-size:1.6rem;}
  .current-meta{grid-template-columns:1fr;gap:14px;}
  .field-row{grid-template-columns:1fr;}
  .page-head{padding:120px 0 54px;}
  .form-card{padding:56px 24px 36px;margin-top:-52px;border-radius:16px;}
  .form-emblem{width:72px;height:72px;top:-36px;}
  .contact-tiles{grid-template-columns:1fr;}
  .team-header,.video-head,.ig-head{flex-direction:column;align-items:flex-start;gap:16px;}
  .footer-top{grid-template-columns:1fr;gap:28px;}
  .cta-section{padding:78px 0 70px;}
  .cta-box{padding:66px 22px 46px;border-radius:18px;}
  .cta-emblem{width:70px;height:70px;top:-35px;}
  .modal-close{top:auto;bottom:-42px;right:50%;transform:translateX(50%);}
}

@media(max-width:420px){
  .nav-name{font-size:11px;max-width:120px;}
  .nav-mark{width:34px;height:34px;}
    .cd-num{font-size:1.25rem;}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;}
  .logo-track{animation:none;}
}

/* Raster-Varianten: jede Galerie schliesst eben ab, nie eine angebrochene Zeile. */
.photo-grid{grid-auto-rows:200px;}
.photo-grid.drei{grid-template-rows:280px;}
.photo-grid.drei .ph:first-child{grid-row:auto;}
.photo-grid.gleich{grid-template-columns:repeat(3,1fr);grid-template-rows:none;grid-auto-rows:230px;}
.photo-grid.gleich .ph:first-child{grid-row:auto;}
.photo-grid.zwei{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:260px;}
.photo-grid.zwei .ph:first-child{grid-row:auto;}
@media(max-width:760px){
  .photo-grid.gleich,.photo-grid.zwei{grid-template-columns:1fr 1fr;}
  .photo-grid.gleich .ph:first-child,.photo-grid.zwei .ph:first-child{grid-column:auto;aspect-ratio:1;}
}

/* ── Handy-Kopfzeile (18.10.2026) ──
   Am Handy überschrieb die Desktop-Regel nav.scrolled die kleinen
   Größen: Logo und Name wuchsen beim Scrollen, „Contact us“ brach um.
   Jetzt: alles in einer Zeile, beim Scrollen wird es nur kleiner. */
@media(max-width:760px){
  .nav-inner{gap:10px;}
  .nav-logo{gap:8px;min-width:0;}
  .nav-mark,nav.scrolled .nav-mark{width:40px;height:40px;}
  nav.scrolled .nav-mark{width:34px;height:34px;}
  .nav-name,nav.scrolled .nav-name{font-size:13px;line-height:1.2;max-width:none;}
  nav.scrolled .nav-name{font-size:12.5px;}
  .nav-right{gap:8px;flex-shrink:0;}
  .nav-right .btn{white-space:nowrap;padding:9px 13px;font-size:13px;}
}
@media(max-width:380px){
  .nav-name,nav.scrolled .nav-name{font-size:11.5px;}
  .nav-right .btn{padding:8px 10px;font-size:12px;}
}

/* Countdown während des Forums: „Live now · Day X of 6“ (18.10.2026) */
.current-cd .cd-live{padding:12px 22px;}
.current-cd .cd-live .cd-num{font-size:1.3rem;white-space:nowrap;}
.current-cd .cd-live .cd-num::before{content:'';display:inline-block;width:9px;height:9px;border-radius:50%;
  background:#7FE3A0;margin-right:9px;vertical-align:middle;box-shadow:0 0 0 3px rgba(127,227,160,.25);}