:root {
  --bg: #110e13;
  --surface: #171d1b;
  --ink: #f7f8f6;
  --muted: #b4c0b7;
  --accent: #ff3db8;
  --recruit-green: #69c634; /* Sampled from werdeschiri.ch reference screenshot */
  --gold: #e7c385;
  --max: 1130px;
  --hero-position-desktop: 55% 45%;
  --hero-position-mobile: 50% 25%;
  color-scheme: dark;
  font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
  font-synthesis: none;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 280px; overflow-x: clip; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.container { width: min(var(--max), calc(100% - 56px)); margin-inline: auto; }

.site-header { position: relative; z-index: 3; background: #110e13; border-bottom: 1px solid #252c29; }
.header-content { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 16px; text-decoration: none; }
.brand-logo { display: block; width: 58px; height: 58px; object-fit: contain; }
.header-punchline { font-size: 10px; letter-spacing: .16em; font-weight: 900; white-space: nowrap; color: #b9c6bc; }
.header-punchline span { color: var(--accent); }

.hero { min-height: 526px; position: relative; isolation: isolate; overflow: hidden; background: #201820; }
.hero-photo { position: absolute; z-index: -3; top: 0; right: 0; width: 77%; height: 100%; overflow: hidden; }
.hero-photo picture, .hero-photo img { display: block; width: 100%; height: 100%; }
.hero-photo img { object-fit: cover; object-position: var(--hero-position-desktop); }
/* Die Abdunklung liegt auf einer unbewegten Ebene statt als Filter auf dem Foto. */
.hero-photo::after { content:''; position:absolute; inset:0; pointer-events:none; background:rgba(23,17,27,.10); }
.hero-photo img.is-flipped { transform:scaleX(-1); }

/* Vorgerenderte, nahtlose 30-FPS-Videos statt rechenintensiver CSS-Bildanimation.
   Solange kein Video läuft (z.B. Datensparmodus), bleibt das Standbild sichtbar. */
.hero-motion {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 450ms ease;
}
.hero-motion.is-ready { opacity: 1; }
/* Variante 3 spiegelt wie das originale Standbild auch die Videoaufnahme. */
html[data-design="3"] .hero-motion { transform: scaleX(-1); }
.hero::before { content: ''; position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg,#17111b 7%,rgba(23,17,27,.99) 25%,rgba(23,17,27,.83) 43%,rgba(23,17,27,.25) 70%,rgba(23,17,27,.07) 100%),linear-gradient(0deg,#17111b 0%,transparent 31%); }
.hero::after { content:''; position:absolute; inset:0; z-index:-1; opacity:.34; background:linear-gradient(0deg,#050a08,transparent 35%); }
.hero-content { display:flex; align-items:center; min-height:526px; padding-top:55px; padding-bottom:132px; position:relative; z-index:1; }
.hero-copy { width: 100%; max-width: 855px; }
.hero-copy:not([data-copy="1"]) { display:none; }
html[data-design="2"] .hero-copy, html[data-design="3"] .hero-copy, html[data-design="4"] .hero-copy, html[data-design="5"] .hero-copy { display:none; }
html[data-design="2"] .hero-copy[data-copy="2"], html[data-design="3"] .hero-copy[data-copy="3"], html[data-design="4"] .hero-copy[data-copy="4"], html[data-design="5"] .hero-copy[data-copy="5"] { display:block; }
.hero-eyebrow { display:flex; gap:12px; align-items:center; margin:0 0 20px; font-size:11px; font-weight:900; letter-spacing:.2em; color:var(--accent); }
.eyebrow-line { width:27px; height:2px; background:var(--accent); flex:0 0 auto; }
h1, h2, p { overflow-wrap: break-word; }
/* Kacheln: niemals ein Wort mitten im Wort trennen. */
.card h2, .card p, .card-topline, .card-cta, .ifv-card strong, .ifv-desc, .ifv-eyebrow {
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  -webkit-hyphens:none;
}
h1 { margin:0; max-width:855px; font-size:clamp(48px,6.4vw,88px); font-weight: 950; line-height:1.04; letter-spacing:-.065em; text-wrap:balance; }
h1 em { color:var(--accent); font-style:normal; }
.hero-subline { max-width:570px; margin:24px 0 0; font-size:clamp(16px,1.6vw,19px); line-height:1.6; font-weight:450; color:#e4eae5; text-wrap:pretty; }

/* Folienartiger, einmaliger Auftritt. Ohne JavaScript bleiben alle Inhalte
   sofort sichtbar; das laufende Hintergrundvideo wird nicht animiert. */
.hero-title-line { display: block; }
@keyframes intro-from-left {
  from { opacity: 0; translate: -38px 0; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes intro-from-right {
  from { opacity: 0; translate: 38px 0; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes intro-from-bottom {
  from { opacity: 0; translate: 0 22px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes card-from-left {
  from { opacity: 0; translate: -64px 14px; scale: .975; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes card-from-right {
  from { opacity: 0; translate: 64px 14px; scale: .975; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes card-from-bottom {
  from { opacity: 0; translate: 0 44px; scale: .985; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
html.entrance-motion .hero-eyebrow {
  animation: intro-from-left 820ms cubic-bezier(.16, 1, .3, 1) 80ms both;
}
html.entrance-motion .hero-title-line {
  animation: intro-from-left 940ms cubic-bezier(.16, 1, .3, 1) both;
}
html.entrance-motion .hero-title-line:nth-child(1) { animation-delay: 280ms; }
html.entrance-motion .hero-title-line:nth-child(2) {
  animation-name: intro-from-right;
  animation-delay: 590ms;
}
html.entrance-motion .hero-title-line:nth-child(3) {
  animation-name: intro-from-right;
  animation-delay: 830ms;
}
html.entrance-motion .hero-subline {
  animation: intro-from-bottom 880ms cubic-bezier(.16, 1, .3, 1) 1140ms both;
}
/* CSS translate/scale sind von transform getrennt: Die Hover-Effekte
   der Kacheln bleiben nach dem Einflug voll funktionsfähig. */
html.entrance-motion .sponsor-card:not(.is-revealed) {
  opacity: 0; translate: 64px 14px; scale: .975;
}
html.entrance-motion .recruit-card:not(.is-revealed) {
  opacity: 0; translate: -64px 14px; scale: .975;
}
html.entrance-motion .inclusion-card:not(.is-revealed) {
  opacity:0; translate:0 44px; scale:.985;
}
html.entrance-motion .ifv-card:not(.is-revealed) {
  opacity: 0; translate: 0 44px; scale: .985;
}
html.entrance-motion .sponsor-card.is-revealed {
  animation: card-from-right 950ms cubic-bezier(.16, 1, .3, 1) var(--entry-wait, 0ms) both;
}
html.entrance-motion .recruit-card.is-revealed {
  animation: card-from-left 950ms cubic-bezier(.16, 1, .3, 1) var(--entry-wait, 0ms) both;
}
html.entrance-motion .inclusion-card.is-revealed {
  animation:card-from-bottom 900ms cubic-bezier(.16, 1, .3, 1) var(--entry-wait, 0ms) both;
}
html.entrance-motion .ifv-card.is-revealed {
  animation: card-from-bottom 900ms cubic-bezier(.16, 1, .3, 1) var(--entry-wait, 0ms) both;
}
/* Per Tastatur fokussierte Links müssen unabhängig vom Timing sichtbar sein. */
html.entrance-motion .instant-reveal {
  animation: none !important;
  opacity: 1 !important;
  translate: 0 0 !important;
  scale: 1 !important;
}

.hero-bottom-line { position:absolute; z-index:1; bottom:0; left:0; height:4px; width:100%; background:linear-gradient(90deg,var(--accent),var(--accent) 13%,transparent 13%,transparent); opacity:.85; }

.card-section { position: relative; z-index: 2; margin-top: -71px; padding-bottom: 30px; }
.main-cards { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:16px; }
.card { min-width:0; min-height:312px; padding:28px 30px 27px; display:flex; flex-direction:column; border-radius:16px; overflow:hidden; text-decoration:none; position:relative; isolation:isolate; border:1px solid rgba(255,255,255,.16); transition:transform .2s ease,border-color .2s ease, box-shadow .2s ease; }
.card::after { content:''; z-index:-1; position:absolute; inset:0; pointer-events:none; opacity:.15; background: repeating-linear-gradient(125deg,transparent 0,transparent 73px,rgba(255,255,255,.16) 74px,transparent 75px); }
.card:not(.is-pending):hover, .ifv-card:hover { transform:translateY(-3px); }
.sponsor-card { background:radial-gradient(circle at 94% 12%, rgba(235,195,127,.17), transparent 52%),linear-gradient(135deg,#302920,#1a1a18 80%); border-color:rgba(231,195,133,.58); }
.recruit-card { background:radial-gradient(circle at 88% 28%,rgba(105,198,52,.17), transparent 45%),linear-gradient(135deg,#1b2920,#101914 84%); border-color:rgba(105,198,52,.61); }
.card:not(.is-pending).sponsor-card:hover { border-color:var(--gold); box-shadow:0 13px 35px rgba(0,0,0,.22); }
.recruit-card:hover { border-color:var(--recruit-green); box-shadow:0 13px 35px rgba(0,0,0,.22); }
.recruit-card:focus-visible { outline-color:var(--recruit-green); }
.card-topline { font-size:10px; font-weight:900; letter-spacing:.16em; display:flex; align-items:center; gap:10px; position:relative; z-index:2; }
.sponsor-topline { color:var(--accent); }
.recruit-topline { color:var(--recruit-green); }
.eyebrow-dot { background:currentColor; width:6px; height:6px; border-radius:50%; }
.card-body { margin:25px 0 23px; position:relative; z-index:1; }
.card h2 { margin:0; font-size:clamp(33px,3.65vw,46px); font-weight:900; letter-spacing:-.055em; line-height:1.06; }
.card p { max-width:342px; font-size:14px; line-height:1.55; color:#ccd4cc; margin:13px 0 0; }
.card-cta { width:max-content; max-width:100%; display:inline-flex; justify-content:space-between; align-items:center; gap:24px; font-size:13px; font-weight:850; letter-spacing:.005em; padding:0 17px; min-height:46px; border-radius:7px; position:relative; z-index:2; margin-top:auto; }
.sponsor-cta { background:var(--gold); color:#161813; }
.is-pending { cursor:default; }
.is-pending .sponsor-cta { background:#5b503d; color:#f3ddbc; }
.recruit-cta { background:var(--recruit-green); color:#111810; }
.arrow { font-size:22px; font-weight:500; line-height:1; }
.sponsor-mark { color:rgba(231,195,133,.12); font-size:156px; font-weight:900; line-height:1; position:absolute; right:14px; top:44px; z-index:0; transform:rotate(-12deg); }
.sponsor-logo { position:absolute; right:26px; top:61px; width:168px; height:80px; object-fit:contain; padding:12px; background:#fff; border-radius:9px; z-index:1; }
.sponsor-card .card-body { max-width:calc(100% - 186px); }
.recruit-logo { position:absolute; top:57px; right:20px; width:135px; height:auto; max-height:145px; object-fit:contain; opacity:.95; pointer-events:none; }
.recruit-card h2 { max-width:310px; padding-right:0; font-size:clamp(32px,3.15vw,40px); }
.recruit-card p { max-width:330px; padding-right:44px; }
[hidden] { display:none!important; }


/* Inklusion: eigenständige, grossformatige Story-Kachel zwischen Recruitment und IFV. */
.inclusion-card {
  display:grid;
  grid-template-columns:minmax(0,.87fr) minmax(0,1.13fr);
  gap:clamp(22px,3vw,38px);
  align-items:center;
  min-width:0;
  margin-top:16px;
  padding:clamp(19px,2.5vw,30px);
  border:1px solid rgba(103,165,213,.5);
  border-radius:16px;
  background:radial-gradient(circle at 5% 10%,rgba(53,111,163,.24),transparent 52%),linear-gradient(128deg,#162936 0%,#101b23 76%);
  box-shadow:0 12px 32px rgba(0,0,0,.09);
  overflow:hidden;
}
.inclusion-flyer { min-width:0; }
.inclusion-flyer img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1600/1131;
  object-fit:contain;
  border-radius:8px;
  background:#f0f0ee;
  box-shadow:0 12px 35px rgba(0,0,0,.27);
}
.inclusion-content { min-width:0; }
.inclusion-eyebrow { display:flex; align-items:center; gap:9px; margin:0 0 13px; color:#98c7eb; font-size:10px; font-weight:900; letter-spacing:.16em; }
.inclusion-card h2 { margin:0; font-size:clamp(30px,3.7vw,46px); line-height:1.08; letter-spacing:-.052em; font-weight:950; }
.inclusion-card h2 em { font-style:normal; color:#9bcef3; }
.inclusion-lead { color:#d6e0e5; font-size:14px; line-height:1.6; max-width:640px; margin:14px 0 21px; }
.inclusion-films { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.inclusion-film {
  display:flex; min-width:0; flex-direction:column; align-items:stretch;
  padding:0; overflow:hidden; border-radius:11px; border:1px solid rgba(174,202,222,.3);
  color:var(--ink); background:#12242e; cursor:pointer; text-align:left; font:inherit;
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.inclusion-film:hover { transform:translateY(-3px); border-color:#a0d1f5; box-shadow:0 11px 23px rgba(0,0,0,.24); }
.inclusion-film:focus-visible, .inclusion-dialog-close:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.inclusion-film-image { position:relative; display:block; overflow:hidden; width:100%; aspect-ratio:16/9; background:#1a2e3b; }
.inclusion-film-image img { display:block; width:100%; height:100%; object-fit:cover; transition:scale .3s ease; }
.inclusion-film:hover img { scale:1.055; }
.inclusion-film--portrait .inclusion-film-image img { object-position:center 26%; }
.inclusion-film-image::after { content:''; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.32),transparent 70%); pointer-events:none; }
.inclusion-film-play { position:absolute; z-index:1; top:50%; left:50%; transform:translate(-50%,-50%); width:46px; height:46px; border-radius:50%; display:grid; place-items:center; padding-left:3px; color:#132330; background:#e9f6ff; font-size:17px; box-shadow:0 3px 16px rgba(0,0,0,.25); }
.inclusion-film-format { position:absolute; z-index:1; left:10px; bottom:9px; font-size:9px; font-weight:900; letter-spacing:.12em; }
.inclusion-film-info { display:flex; flex:1; flex-direction:column; gap:6px; padding:13px; }
.inclusion-film-info strong { font-size:13px; line-height:1.3; font-weight:850; }
.inclusion-film-info > span { font-size:11px; color:#a4c4d9; }
.inclusion-more { display:inline-flex; gap:10px; align-items:center; margin-top:19px; font-size:12px; font-weight:750; text-decoration:none; color:#a8d7fa; text-underline-offset:4px; }
.inclusion-more:hover { text-decoration:underline; }
.inclusion-card h2, .inclusion-lead, .inclusion-film-info strong, .inclusion-film-info > span, .inclusion-more {
  overflow-wrap:normal; word-break:normal; hyphens:none; -webkit-hyphens:none;
}

/* Native Dialog-Darstellung: ESC, Tastatur-Fokus, Vollbild und Videosteuerung. */
.inclusion-dialog {
  width:min(900px,calc(100% - 32px));
  max-height:calc(100dvh - 32px);
  margin:auto;
  padding:0;
  overflow:auto;
  border:1px solid #4b6e82;
  border-radius:16px;
  color:#f7f8f6;
  background:#101d24;
  box-shadow:0 24px 85px rgba(0,0,0,.65);
}
.inclusion-dialog::backdrop { background:rgba(3,9,12,.86); backdrop-filter:blur(7px); }
.inclusion-dialog-inner { padding:clamp(14px,2.7vw,24px); }
.inclusion-dialog-header { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:16px; }
.inclusion-dialog-eyebrow { color:#9bcaf0; font-size:10px; font-weight:900; letter-spacing:.12em; }
.inclusion-dialog-header h2 { font-size:clamp(20px,2.8vw,27px); margin:7px 0 0; line-height:1.2; }
.inclusion-dialog-close { flex:none; width:42px; height:42px; border-radius:50%; border:1px solid #658092; background:#1e3642; color:white; cursor:pointer; font-size:29px; line-height:1; }
.inclusion-dialog video { display:block; width:100%; max-height:calc(100dvh - 208px); aspect-ratio:16/9; background:#000; border-radius:8px; object-fit:contain; }
.inclusion-dialog.is-portrait { width:min(480px,calc(100% - 32px)); }
.inclusion-dialog.is-portrait video { aspect-ratio:9/16; max-height:calc(100dvh - 224px); }
.inclusion-dialog-desc { margin:13px 0 0; color:#b7cad3; font-size:13px; line-height:1.5; }

@media(max-width:951px) {
  .inclusion-card { width:100%; max-width:560px; margin-left:auto; margin-right:auto; grid-template-columns:minmax(0,1fr); gap:22px; }
  .inclusion-card h2 { font-size:clamp(32px,5vw,40px); }
  .inclusion-flyer { width:100%; }
  .inclusion-lead { margin-bottom:18px; }
}
@media(max-width:670px) {
  .inclusion-card { margin-top:12px; padding:16px; border-radius:13px; gap:19px; }
  .inclusion-card h2 { font-size:clamp(29px,8vw,37px); }
  .inclusion-lead { font-size:14px; }
  .inclusion-films { grid-template-columns:minmax(0,1fr); gap:10px; }
  .inclusion-film { display:grid; grid-template-columns:minmax(108px,39%) minmax(0,1fr); align-items:stretch; min-height:103px; }
  .inclusion-film-image { height:100%; aspect-ratio:auto; }
  .inclusion-film-info { justify-content:center; padding:12px; gap:8px; }
  .inclusion-film-info strong { font-size:14px; }
  .inclusion-film-play { width:38px; height:38px; font-size:15px; }
  .inclusion-more { margin-top:16px; line-height:1.5; }
  .inclusion-dialog { width:calc(100% - 16px); max-height:calc(100dvh - 16px); border-radius:10px; }
  .inclusion-dialog.is-portrait { width:min(430px,calc(100% - 16px)); }
  .inclusion-dialog video { max-height:calc(100dvh - 185px); }
  .inclusion-dialog.is-portrait video { max-height:calc(100dvh - 190px); }
}
@media(max-width:340px) {
  .inclusion-card { padding:12px; }
  .inclusion-film { grid-template-columns:102px minmax(0,1fr); }
  .inclusion-film-info { padding:9px; }
  .inclusion-film-info strong { font-size:12px; }
  .inclusion-film-info > span { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) {
  html.entrance-motion .inclusion-card { opacity:1!important; translate:0 0!important; scale:1!important; }
}


.ifv-card { display:flex; align-items:center; gap:24px; min-height:136px; margin-top:16px; padding:19px 23px; border:1px solid #303b35; border-radius:16px; background:#211922; text-decoration:none; transition:transform .2s ease,border-color .2s ease; }
.ifv-card:hover { border-color:#5a7963; }
.ifv-logo { display:grid; place-items:center; flex:0 0 97px; width:97px; height:97px; padding:7px; background:#fff; border-radius:8px; overflow:hidden; }
.ifv-logo img { display:block; width:100%; height:100%; object-fit:contain; }
.ifv-content { min-width:0; display:flex; flex:1; flex-direction:column; gap:6px; }
.ifv-eyebrow { color:var(--accent); font-size:10px; letter-spacing:.14em; font-weight:900; }
.ifv-content strong { font-size:clamp(17px,2.2vw,24px); line-height:1.2; letter-spacing:-.025em; }
.ifv-desc { font-size:13px; color:#adbcb2; }
.ifv-arrow { flex:0 0 41px; width:41px; height:41px; border:1px solid #536058; border-radius:50%; display:grid; place-items:center; font-size:22px; line-height:1; }
.site-footer { margin-top:8px; border-top:1px solid #242d27; }
.footer-content { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; min-height:79px; gap:12px 18px; padding-block:14px; color:#76857b; font-size:10px; font-weight:800; letter-spacing:.1em; }
.footer-links { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-style:italic; font-size:12px; font-weight:500; letter-spacing:.025em; }
.footer-separator { color:#9dad9f; font-style:normal; user-select:none; }
.footer-links a { display:inline-flex; align-items:center; gap:5px; }
.footer-content a { color:#9dad9f; font-weight:500; letter-spacing:.025em; font-size:12px; text-decoration:none; }
.footer-content a[href="impressum.html"] { font-style: italic; }
.footer-links a[href^="https://flowgridlabs.ch/"] { color:#9dad9f; font-size:inherit; }
.footer-links a[href^="https://flowgridlabs.ch/"]:hover { color:var(--accent); }
.footer-content a:hover { color:var(--accent); text-decoration:underline; text-underline-offset:4px; }

@media(max-width:900px) {
  .hero-photo { width:88%; }
  h1 { font-size:clamp(46px,7vw,70px); }
  .hero::before { background:linear-gradient(90deg,#17111b 0%,rgba(23,17,27,.92) 31%,rgba(23,17,27,.55) 65%,rgba(23,17,27,.10) 100%),linear-gradient(0deg,#17111b, transparent 43%); }
  .recruit-card p { padding-right:0; }
  .card h2 { font-size:35px; }
  .recruit-card h2 { font-size:35px; }
}

/* Tablet und schmaler Desktop: echte Rasterplätze statt absolut positionierter
   Logos oder künstlicher oberer Abstände. Zwei Spalten gibt es nur, solange
   beide Kacheln tatsächlich mindestens 440px Platz erhalten. */
@media (min-width:671px) and (max-width:1120px) {
  .main-cards {
    grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));
  }
  .main-cards .card {
    display:grid;
    min-height:0;
    grid-template-columns:minmax(0,1fr) clamp(105px,11vw,140px);
    grid-template-areas:
      "eyebrow eyebrow"
      "heading logo"
      "description description"
      "cta cta";
    grid-template-rows:auto auto 1fr auto;
    align-items:start;
    align-content:start;
    column-gap:clamp(14px,2vw,22px);
    row-gap:14px;
  }
  .main-cards .card .card-topline { grid-area:eyebrow; }
  .main-cards .card .card-body { display:contents; }
  .main-cards .card .card-body h2 {
    grid-area:heading;
    min-width:0;
    max-width:none;
    padding:0;
    margin:0;
    align-self:center;
    font-size:clamp(30px,3.2vw,37px);
  }
  .main-cards .card .card-body p {
    grid-area:description;
    min-width:0;
    max-width:none;
    margin:0;
    padding:0;
  }
  .main-cards .card .sponsor-logo,
  .main-cards .card .recruit-logo {
    grid-area:logo;
    position:static;
    top:auto;
    right:auto;
    justify-self:end;
    align-self:center;
    margin:0;
    object-fit:contain;
  }
  .main-cards .card .sponsor-logo {
    width:100%;
    height:74px;
    max-height:none;
    padding:9px;
  }
  .main-cards .card .recruit-logo {
    width:100%;
    height:90px;
    max-height:90px;
  }
  .main-cards .card .card-cta {
    grid-area:cta;
    justify-self:start;
    margin-top:0;
  }
}
/* In der einspaltigen Tablet-/Zwischenansicht sollen die Karten keine
   beinahe bildschirmbreiten Banner sein: als kompakte Gruppe zentrieren.
   Ab 952px können wieder zwei mindestens 440px breite Karten nebeneinander
   stehen; bis 670px bleibt das Smartphone-Layout in voller Breite bestehen. */
@media (min-width:671px) and (max-width:951px) {
  .main-cards,
  .ifv-card {
    width:100%;
    max-width:560px;
    margin-left:auto;
    margin-right:auto;
  }
}

@media(max-width:670px) {
  .container { width:calc(100% - 32px); }
  /* Auf Smartphones beginnt die Landingpage direkt mit dem Schiedsrichterfoto. */
  .site-header { display:none; }
  .hero { min-height:420px; }
  .hero-photo { top:0; left:0; right:0; width:100%; height:100%; }
  .hero-photo img { object-position:var(--hero-position-mobile); }
  .hero-motion { object-position:var(--hero-position-mobile); }
  .hero::before { background:linear-gradient(0deg,#17111b 0%,rgba(23,17,27,.99) 19%,rgba(23,17,27,.78) 47%,rgba(23,17,27,.25) 73%,rgba(23,17,27,.13) 100%); }
  .hero::after { opacity:.2; }
  .hero-content { min-height:420px; align-items:end; padding-top:32px; padding-bottom:82px; }
  .hero-eyebrow { margin-bottom:13px; font-size:9px; letter-spacing:.15em; gap:8px; }
  .eyebrow-line { width:17px; }
  h1 { max-width:540px; font-size:clamp(37px,8.8vw,58px); line-height:1.06; letter-spacing:-.067em; }
  .hero-subline { max-width:500px; margin-top:16px; font-size:15px; line-height:1.5; }
  .card-section { margin-top:-57px; padding-bottom:24px; }
  .main-cards { grid-template-columns:1fr; gap:12px; }
  .card { min-height:258px; padding:22px 24px; border-radius:13px; }
  .card-body { margin:24px 0 17px; }
  .sponsor-card { padding-top:18px; padding-bottom:18px; }
  .sponsor-logo { position:static; align-self:flex-start; margin-top:12px; width:152px; height:68px; padding:9px; }
  /* Mobil steht der Sponsorname bereits im Logo: keine doppelte Überschrift. */
  .sponsor-card { min-height:0; }
  .sponsor-card .card-body { max-width:none; margin:14px 0 16px; }
  .sponsor-card h2 { display:none; }
  .sponsor-card .card-body p { margin-top:0; max-width:100%; }
  .card h2 { font-size:38px; }
  .card p { font-size:14px; margin-top:9px; max-width:380px; }

  /* Werde Schiri: Titel und Logo nebeneinander statt viel Leerraum darüber.
     Grid ohne HTML-Änderungen; auf Desktop bleibt die ursprüngliche Karte. */
  .recruit-card {
    display:grid;
    grid-template-columns:minmax(0,1fr) 86px;
    grid-template-areas:
      "eyebrow eyebrow"
      "heading logo"
      "description description"
      "button button";
    column-gap:14px;
    align-items:center;
    min-height:0;
  }
  .recruit-topline { grid-area:eyebrow; margin-bottom:12px; }
  .recruit-logo {
    grid-area:logo;
    position:static;
    justify-self:end;
    width:86px;
    max-height:94px;
  }
  .recruit-card .card-body { display:contents; }
  .recruit-card .card-body h2 {
    grid-area:heading;
    font-size:clamp(27px,7.7vw,32px);
    line-height:1.06;
    padding-right:0;
  }
  .recruit-card .card-body p {
    grid-area:description;
    max-width:100%;
    margin:12px 0 17px;
    padding-right:0;
  }
  .recruit-card .card-cta {
    grid-area:button;
    justify-self:start;
    margin-top:0;
  }
  .card-cta { min-height:44px; }
  .ifv-card { gap:15px; padding:14px 15px; min-height:120px; margin-top:12px; border-radius:13px; }
  .ifv-logo { flex-basis:87px; width:87px; height:87px; }
  .ifv-content strong { font-size:17px; }
  .ifv-desc { font-size:12px; }
  .ifv-eyebrow { font-size:9px; }
  .ifv-arrow { flex-basis:33px; width:33px; height:33px; font-size:18px; }
  .footer-content { min-height:64px; font-size:9px; }
}
@media(max-width:380px) {
  .hero { min-height:400px; }
  .hero-content { min-height:400px; padding-top:22px; padding-bottom:74px; }
  h1 { font-size:clamp(34px,9.1vw,39px); }
  .hero-subline { font-size:14px; }
  .card { padding:20px 18px; }
  .sponsor-card { padding-top:16px; padding-bottom:16px; }
  .card h2 { font-size:34px; }
  .recruit-card { grid-template-columns:minmax(0,1fr) 72px; column-gap:10px; }
  .recruit-logo { width:72px; max-height:78px; }
  .recruit-card .card-body h2 { font-size:clamp(26px,7.7vw,29px); }
  .ifv-card { gap:12px; }
  .ifv-logo { flex-basis:73px; width:73px; height:76px; }
  .ifv-content strong { font-size:clamp(12px,3.75vw,15px); }
  .ifv-desc { display:block; font-size:11px; line-height:1.45; }
  .ifv-card { min-height:133px; }
  .ifv-arrow { display:none; }
}
@media(max-width:340px) {
  /* Sehr schmale Geräte: Logo neben der Kickerzeile, Titel volle Breite. */
  .recruit-card {
    grid-template-columns:minmax(0,1fr) 72px;
    grid-template-areas:
      "eyebrow logo"
      "heading heading"
      "description description"
      "button button";
  }
  .recruit-topline { margin-bottom:0; }
  .recruit-logo { width:72px; margin-bottom:8px; }
  .recruit-card .card-body h2 { font-size:31px; }
}
@media(max-width:310px) {
  .ifv-arrow { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
  html.entrance-motion .hero-eyebrow,
  html.entrance-motion .hero-title-line,
  html.entrance-motion .hero-subline,
  html.entrance-motion .sponsor-card,
  html.entrance-motion .recruit-card,
  html.entrance-motion .inclusion-card,
  html.entrance-motion .ifv-card {
    opacity: 1 !important;
    translate: 0 0 !important;
    scale: 1 !important;
  }
  .hero-motion { display:none!important; }
  .hero-photo img { transform:none; }
  .hero-photo img.is-flipped { transform:scaleX(-1); }
}


/* MBH-Shirtsponsor – grafisches Logo und vollständig anklickbare Dialog-Card */
.main-cards .sponsor-card {
  display:flex; flex-direction:column; align-items:stretch;
  width:100%; min-height:344px;
  appearance:none; color:var(--ink); text-align:left; font:inherit; cursor:pointer;
  background:radial-gradient(circle at 62% 30%,rgba(255,61,184,.16),transparent 58%),linear-gradient(140deg,#291a29,#16141d 82%);
  border-color:rgba(255,61,184,.55);
}
.main-cards .sponsor-card .sponsor-logo {
  display:block; position:static; flex:none; align-self:center; justify-self:center;
  width:min(100%,365px); max-width:100%; height:auto; aspect-ratio:2/1;
  object-fit:contain; padding:0; margin:4px auto 0; background:transparent; border-radius:0;
}
.main-cards .sponsor-card .card-body {
  display:block; max-width:none; width:100%; margin:0 0 19px;
}
.main-cards .sponsor-card .sponsor-name { 
  position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; 
}
.main-cards .sponsor-card .sponsor-description {
  display:block; max-width:430px; color:#e4d7df; font-size:14px; line-height:1.55;
  overflow-wrap:normal; word-break:normal; hyphens:none;
}
.main-cards .sponsor-card .sponsor-cta { 
  margin-top:auto; align-self:flex-start; justify-self:start; background:var(--accent); color:#20111e;
}
.card:not(.is-pending).sponsor-card:hover {
  border-color:var(--accent); box-shadow:0 13px 36px rgba(255,61,184,.12);
}
.sponsor-card:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }

/* Sponsorendialog mit zwei übergeordneten Cards und zugehörigen Unter-Cards. */
.sponsor-dialog {
  width:min(1000px,calc(100% - 32px)); max-height:calc(100dvh - 32px);
  margin:auto; overflow:auto; padding:0; border:1px solid rgba(255,61,184,.62);
  border-radius:17px; color:var(--ink); background:#16121b;
  box-shadow:0 26px 90px rgba(0,0,0,.65);
}
.sponsor-dialog::backdrop { background:rgba(6,4,9,.84); backdrop-filter:blur(6px); }
.sponsor-dialog-inner { padding:clamp(19px,3.5vw,35px); }
.sponsor-dialog-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.sponsor-dialog-eyebrow { margin:0 0 9px; color:var(--accent); font-size:10px; letter-spacing:.16em; font-weight:900; }
.sponsor-dialog-header h2 { margin:0; font-size:clamp(29px,4.4vw,43px); line-height:1.1; letter-spacing:-.045em; }
.sponsor-dialog-header h2 span { color:var(--accent); }
.sponsor-dialog-close {
  flex:none; width:42px; height:42px; border:1px solid #695366; border-radius:50%;
  background:#302337; color:var(--ink); font-size:29px; cursor:pointer; line-height:1;
}
.sponsor-dialog-close:hover { border-color:var(--accent); color:var(--accent); }
.sponsor-dialog-close:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
.sponsor-dialog-intro { max-width:750px; margin:15px 0 24px; color:#d2c2d0; font-size:14px; line-height:1.65; }

/* MBH Technik und MBH Gastro: zwei gleichwertige Haupt-Cards untereinander. */
.sponsor-dialog-groups { display:grid; grid-template-columns:minmax(0,1fr); gap:17px; }
.sponsor-dialog-top-card {
  min-width:0; padding:20px; border:1px solid rgba(255,255,255,.16);
  border-radius:13px; background:linear-gradient(145deg,#29202c,#1e1925);
}
.sponsor-dialog-group-heading { margin-bottom:17px; }
.sponsor-dialog-tag {
  margin:0 0 8px; color:#eaa4cb; font-size:10px; letter-spacing:.11em; font-weight:850;
}
.sponsor-dialog-group-heading h3 {
  margin:0; font-size:clamp(22px,2.5vw,27px); letter-spacing:-.025em; line-height:1.2;
}
.sponsor-dialog-group-description { margin:8px 0 0; color:#c8b3c5; font-size:12px; line-height:1.5; }

/* Drei exakt gleich breite Technik-Unter-Cards auf grossen Bildschirmen. */
.mbh-division-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; align-items:stretch; }
.mbh-division-grid--mbh > .mbh-division { display:flex; visibility:visible; opacity:1; }
.mbh-division-panel,
.sponsor-dialog-gastro-grid > .sponsor-dialog-entry {
  min-width:0; padding:18px; border:1px solid rgba(255,255,255,.12);
  border-radius:11px; background:linear-gradient(155deg,#211a26,#17151c);
}
.mbh-division { display:flex; flex-direction:column; }
.mbh-division-heading { display:flex; align-items:center; gap:11px; margin-bottom:16px; }
.mbh-division-letter {
  flex:0 0 45px; width:45px; height:48px; display:grid; place-items:center;
  border:1px solid rgba(255,61,184,.48); border-radius:10px;
  background:rgba(255,61,184,.11); color:var(--accent);
  font-size:28px; line-height:1; font-weight:900;
}
.mbh-division-heading h3 { margin:0; font-size:clamp(18px,2.1vw,22px); line-height:1.2; letter-spacing:-.025em; }
.mbh-division-list { margin:0; padding:0; list-style:none; display:grid; gap:11px; }
.mbh-division-list li {
  position:relative; padding-left:14px; color:#e1d6df; font-size:13px;
  line-height:1.5; overflow-wrap:break-word;
}
.mbh-division-list li::before {
  content:""; position:absolute; left:0; top:.62em; width:5px; height:5px;
  border-radius:50%; background:var(--accent);
}
.mbh-division-lead { color:#d9ced8; font-size:13px; line-height:1.55; margin:0 0 11px; }
.mbh-division-links { margin-top:auto; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); }
.mbh-division-links-label { margin:0; color:#d9b2cb; font-size:11px; font-weight:800; letter-spacing:.02em; }

/* Gastro: Träffpunkt Chämi und Sommermusik als zwei eigenständige Unter-Cards. */
.sponsor-dialog-gastro-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; align-items:stretch; }
.sponsor-dialog-entry h4 { margin:0 0 7px; font-size:17px; }
.sponsor-dialog-entry p { margin:0 0 13px; color:#d9ced8; font-size:13px; line-height:1.55; }
.sponsor-dialog-links { display:flex; gap:8px; flex-wrap:wrap; }
.sponsor-dialog-links--stacked { flex-direction:column; align-items:flex-start; margin-top:10px; }
.sponsor-dialog-links a {
  display:inline-flex; gap:9px; align-items:center; justify-content:space-between; max-width:100%;
  text-decoration:none; border:1px solid rgba(255,61,184,.34);
  background:rgba(255,61,184,.09); padding:9px 11px; border-radius:7px;
  color:#ffd1eb; font-size:12px; line-height:1.35; font-weight:750;
}
.sponsor-dialog a:hover { background:rgba(255,61,184,.20); border-color:var(--accent); }
.sponsor-dialog a:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }

@media(max-width:951px) {
  .main-cards .sponsor-card { min-height:0; }
  .mbh-division-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mbh-division:first-child { grid-column:1/-1; }
}
@media(max-width:670px) {
  .main-cards .sponsor-card { padding:17px 18px 19px; min-height:0; }
  .main-cards .sponsor-card .sponsor-logo { width:min(100%,340px); margin:5px auto 0; }
  .main-cards .sponsor-card .card-body { margin-bottom:16px; }
  .main-cards .sponsor-card .sponsor-description { font-size:13px; }
  .sponsor-dialog { width:calc(100% - 16px); max-height:calc(100dvh - 16px); border-radius:11px; }
  .sponsor-dialog-top-card { padding:14px; }
  .mbh-division-grid, .sponsor-dialog-gastro-grid { grid-template-columns:minmax(0,1fr); gap:10px; }
  .mbh-division:first-child { grid-column:auto; }
  .mbh-division-panel, .sponsor-dialog-gastro-grid > .sponsor-dialog-entry { padding:15px; }
  .sponsor-dialog-intro { margin:13px 0 18px; }
  .sponsor-dialog-header h2 { font-size:clamp(26px,7vw,34px); }
  .mbh-division-heading { margin-bottom:12px; }
}
@media(max-width:340px) {
  .main-cards .sponsor-card { padding:14px; }
  .main-cards .sponsor-card .sponsor-cta { font-size:12px; gap:10px; padding:0 12px; }
}

/* ISV-Card verwendet exakt das IFV-Card-Layout; nur auf sehr schmalen
   Smartphones die lange Verbandsbezeichnung leicht verkleinern. */
@media(max-width:340px) {
  .isv-card .ifv-content strong { font-size:11px; }
}