/*
 * AGIR Suisse v6.0 — css/style.css
 * Shared across all 7 pages.
 * Edit :root{} to change colours site-wide.
 */



/* ══════════════════════════════════════════════════════════════════
   DESIGN TOKENS  — Change here to update the whole site at once
   ══════════════════════════════════════════════════════════════════ */
:root {
  /* COLOURS — Warm Off-White palette (Variante 1 from brief) */
  --bg:        #F7F5F0;   /* main page background — warm off-white   */
  --bg-alt:    #F0EDE5;   /* slightly darker alternate background     */
  --petrol:    #1F4F52;   /* dark teal — primary brand colour         */
  --petrol-lt: #2A6B6F;   /* lighter teal for hover states            */
  --terra:     #B5572F;  /* darkened for WCAG AA contrast */   /* terracotta — accents, CTAs, highlights   */
  --terra-lt:  #C96B4A;  /* original terra now used as hover */   /* lighter terracotta for hover             */
  --text:      #2D2D2D;   /* near-black for headings                  */
  --text-md:   #555550;   /* medium grey for body paragraphs          */
  --text-lt:   #6A6A64;  /* darkened for WCAG AA contrast */   /* light grey for labels and captions       */
  --border:    #DDD9D0;   /* warm grey border / divider colour        */
  --white:     #FFFFFF;

  /* TYPOGRAPHY */
  --serif: 'Cormorant Garamond', Georgia, serif; /* headlines        */
  --sans:  'DM Sans', system-ui, sans-serif;     /* body and UI      */

  /* SPACING */
  --section-y: 80px;   /* top/bottom padding of every section        */
  --nav-h:     64px;   /* nav bar height — keep in sync with .nav-inner height */
  --radius:    4px;    /* border radius for cards, buttons, inputs   */

  /* ANIMATION */
  --ease: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ══════════════════════════════════════════════════════════════════
   RESET & BASE — removes browser defaults and sets the foundation
   ══════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box; /* width includes padding — much easier to work with */
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth; /* smooth scrolling for anchor links */
  -webkit-text-size-adjust: 100%; /* prevent iOS from auto-enlarging text in landscape */
  text-size-adjust: 100%;
  font-size: 16px;         /* base — all rem values are relative to this */
}
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased; /* crisper text on Mac/iOS */
  -moz-osx-font-smoothing: grayscale; /* Firefox equivalent */
  overflow-x: hidden; /* prevent accidental horizontal scroll on mobile */
  overflow-x: hidden;                  /* prevent horizontal scroll on mobile */
}
img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;           /* fill without distorting */
  object-position: center top; /* crop from top — EDIT per image if needed */
}
a { color: inherit; text-decoration: none; }
p { color: var(--text-md); line-height: 1.8; }


/* ══════════════════════════════════════════════════════════════════
   GLOBAL TYPOGRAPHY
   ══════════════════════════════════════════════════════════════════ */
/* Small orange caps label above a section title */
.label {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 12px;
}
/* Main section title — clamp() = fluid size between min and max */
.section-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  color: var(--petrol);
  line-height: 1.15;
  margin-bottom: 20px;
}
/* Intro paragraph below section title */
.section-lead {
  font-size: 1rem;
  color: var(--text-md);
  line-height: 1.8;
  max-width: 560px;
}


/* ══════════════════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════════════════ */
/* All sections get vertical padding from the token */
section { padding: var(--section-y) 0; }

/* Centred column with responsive side padding */
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px; /* 24px on mobile, overridden to 40px on larger screens below */
}


/* ══════════════════════════════════════════════════════════════════
   BUTTONS — used across multiple sections
   ══════════════════════════════════════════════════════════════════ */
/* Solid petrol button */
.btn-primary {
  display: inline-block;
  background: var(--petrol);
  color: var(--white);
  padding: 13px 28px;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.83rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  border: none;
  cursor: pointer;
  transition: background var(--ease);
}
.btn-primary { -webkit-tap-highlight-color: transparent; } /* remove iOS blue tap flash */
.btn-primary:hover { background: var(--petrol-lt); }

/* Outlined ghost button */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--petrol);
  font-size: 0.83rem;
  font-weight: 500;
  padding: 13px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: border-color var(--ease);
}
.btn-ghost:hover { border-color: var(--petrol); }

/* White button — used on coloured backgrounds */
.btn-white {
  display: inline-block;
  background: var(--white);
  color: var(--terra);
  padding: 14px 34px;
  border-radius: var(--radius);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  transition: opacity var(--ease);
}
.btn-white:hover { opacity: 0.88; }


/* ══════════════════════════════════════════════════════════════════
   IMAGE SLOT SYSTEM
   ──────────────────────────────────────────────────────────────────
   Every [data-slot] div is an image placeholder.
   To add a real image, put an <img alt=""> tag inside the div:

     <div class="img-slot" data-slot="HERO_MAIN">
       <img src="images/hero-main.jpg" alt="Beschreibung des Bildes"/>
     </div>

   The placeholder label disappears automatically.
   ══════════════════════════════════════════════════════════════════ */
.img-slot {
  width: 100%; height: 100%;
  position: relative; overflow: hidden;
  background: var(--petrol); /* fallback while no image */
}
/* Colour tone variants */
.img-slot.tone-dark  { background: linear-gradient(145deg,#1F4F52,#162E30); }
.img-slot.tone-mid   { background: linear-gradient(145deg,#2A5F5A,#1F4F52); }
.img-slot.tone-light { background: linear-gradient(145deg,#2A6060,#2A4A4C); }

/* The placeholder overlay */
.img-slot-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; pointer-events: none;
}
.slot-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center;
}
.slot-icon svg { width: 18px; height: 18px; stroke: rgba(255,255,255,0.55); fill: none; stroke-width: 1.5; }
.slot-name { font-size: 0.62rem; color: rgba(255,255,255,0.32); letter-spacing: 0.12em; text-transform: uppercase; font-family: var(--sans); }
.slot-size { font-size: 0.57rem; color: rgba(255,255,255,0.2); font-family: var(--sans); }

/* Hide placeholder label when a real <img alt=""> is present */
.img-slot img ~ .img-slot-label { display: none; }
/* Zoom on hover only when an image is loaded */
.img-slot img { transition: transform 0.7s ease; }
.img-slot:hover img { transform: scale(1.04); }


/* ══════════════════════════════════════════════════════════════════
   NAVIGATION — fixed top bar
   ══════════════════════════════════════════════════════════════════ */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: rgba(247,245,240,0.93);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--ease);
  /* env(safe-area-inset-top): pushes nav below iPhone Dynamic Island / notch */
  padding-top: env(safe-area-inset-top);
}
nav.scrolled { box-shadow: 0 2px 24px rgba(0,0,0,0.07); } /* shadow after 40px scroll */

/* Inner flex row: logo left, links right */
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--nav-h);
  max-width: 1160px; margin: 0 auto; padding: 0 24px;
}

/* Logo group */
.nav-logo      { display: flex; align-items: center; gap: 10px; }
.nav-logo-mark {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--petrol); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.nav-logo-mark span { font-family: var(--serif); font-weight: 600; color: var(--white); font-size: 13px; }
.nav-logo-text { font-family: var(--serif); font-size: 1.05rem; color: var(--petrol); }
.nav-logo-sub  { font-size: 0.6rem; color: var(--text-lt); letter-spacing: 0.1em; text-transform: uppercase; }

/* Desktop links — hidden on mobile via media query */
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-size: 0.8rem; color: var(--text); opacity: 0.72; letter-spacing: 0.03em; transition: opacity var(--ease); white-space: nowrap; }
.nav-links a:hover { opacity: 1; }
.nav-cta { background: var(--terra)!important; color: var(--white)!important; opacity: 1!important; padding: 8px 20px; border-radius: var(--radius); font-weight: 500!important; transition: background var(--ease)!important; }
.nav-cta:hover { background: var(--terra-lt)!important; }

/* Hamburger button — only shown on mobile */
.nav-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; background: none; border: none; }
.nav-hamburger span { display: block; width: 24px; height: 2px; background: var(--petrol); border-radius: 2px; transition: transform var(--ease), opacity var(--ease); }

/* Mobile nav drawer */
.nav-mobile { display: none; flex-direction: column; background: var(--bg); border-top: 1px solid var(--border); padding: 20px 24px 28px; gap: 4px; }
.nav-mobile a { font-size: 0.95rem; color: var(--text); padding: 10px 0; border-bottom: 1px solid var(--border); opacity: 0.8; }
.nav-mobile a:last-child { border-bottom: none; margin-top: 8px; }
.nav-mobile .nav-cta { text-align: center; padding: 12px; border-radius: var(--radius); }


/* ══════════════════════════════════════════════════════════════════
   HERO — full-screen split layout
   Image slots: HERO_MAIN (large), HERO_TOP_RIGHT, HERO_VIDEO_THUMB
   ══════════════════════════════════════════════════════════════════ */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr; /* 50/50 on desktop */
  padding-top: var(--nav-h);
  overflow: hidden;
}

/* Left text column */
.hero-left {
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px 44px 56px 24px;
}

/* Orange tag line above headline */
.hero-tag {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--terra); margin-bottom: 22px;
}
.hero-tag::before { content:''; display:block; width:28px; height:1px; background:var(--terra); }

/* Main headline — fluid size */
.hero h1 { font-family: var(--serif); font-weight: 300; font-size: clamp(2.1rem,5vw,3.9rem); line-height: 1.08; color: var(--petrol); margin-bottom: 22px; }
.hero h1 em { font-style: italic; color: var(--terra); }

.hero-desc { font-size: 1rem; color: var(--text-md); max-width: 400px; margin-bottom: 32px; line-height: 1.8; }

/* CTA row */
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* Statistics row */
.hero-stats { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--border); }
.stat-num   { font-family: var(--serif); font-size: 2.3rem; font-weight: 300; color: var(--petrol); line-height: 1; }
.stat-label { font-size: 0.68rem; color: var(--text-lt); text-transform: uppercase; letter-spacing: 0.09em; margin-top: 3px; }

/* Right image mosaic column */
.hero-right { position: relative; overflow: hidden; min-height: 420px; }
.hero-media-grid {
  position: absolute; inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
}
/* Large image spans both rows on the left side */
.media-cell-large { grid-row: 1 / 3; }

/* Video cell with play button overlay */
.hero-video-cell { position: relative; cursor: pointer; }
.hero-play-btn   { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; z-index: 2; }
.play-circle     { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.35); display: flex; align-items: center; justify-content: center; transition: background var(--ease); }
.hero-video-cell:hover .play-circle { background: rgba(255,255,255,0.28); }
.play-circle svg { fill: white; width: 16px; margin-left: 3px; }
.play-label { font-size: 0.63rem; color: rgba(255,255,255,0.42); letter-spacing: 0.1em; }


/* ══════════════════════════════════════════════════════════════════
   MISSION BAND — dark stripe with quote
   ══════════════════════════════════════════════════════════════════ */
.mission-band { background: var(--petrol); padding: 68px 0; position: relative; overflow: hidden; }
/* Decorative circles (CSS only, no images) */
.mission-band::before { content:''; position:absolute; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,0.03); top:-60px; right:-40px; }
.mission-band::after  { content:''; position:absolute; width:180px; height:180px; border-radius:50%; background:rgba(255,255,255,0.03); bottom:-50px; left:18%; }
.mission-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.mission-quote { font-family: var(--serif); font-size: clamp(1.35rem,2.5vw,2rem); font-weight: 300; line-height: 1.35; color: var(--white); }
.mission-quote em { font-style: italic; color: #A8D4D0; }
.mission-attr  { margin-top: 18px; font-size: 0.7rem; color: rgba(255,255,255,0.36); letter-spacing: 0.1em; text-transform: uppercase; }
.mission-points { display: flex; flex-direction: column; gap: 20px; }
.mission-point  { display: flex; gap: 16px; align-items: flex-start; }
.mission-dot    { width: 6px; height: 6px; border-radius: 50%; background: var(--terra); flex-shrink: 0; margin-top: 9px; }
.mission-text   { font-size: 0.88rem; color: rgba(255,255,255,0.7); line-height: 1.7; }
.mission-text strong { color: var(--white); font-weight: 500; }


/* ══════════════════════════════════════════════════════════════════
   SERVICES — 6 cards
   ══════════════════════════════════════════════════════════════════ */
.services { background: var(--bg); }
/* Responsive grid: 3→2→1 columns */
.services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2px; margin-top: 44px; }
.service-card  { background: var(--white); padding: 34px 28px; transition: box-shadow var(--ease); position: relative; overflow: hidden; }
/* Terracotta bottom reveal on hover */
.service-card::after { content:''; position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--terra); transform:scaleX(0); transform-origin:left; transition:transform var(--ease); }
.service-card:hover  { box-shadow: 0 10px 36px rgba(0,0,0,0.06); }
.service-card:hover::after { transform:scaleX(1); }
.service-icon  { width:42px; height:42px; background:var(--bg-alt); border-radius:var(--radius); display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.service-icon svg { width:20px; height:20px; stroke:var(--petrol); fill:none; stroke-width:1.5; }
.service-title { font-family:var(--serif); font-size:1.22rem; color:var(--petrol); margin-bottom:10px; font-weight:400; }
.service-desc  { font-size:0.86rem; color:var(--text-md); line-height:1.75; }


/* ══════════════════════════════════════════════════════════════════
   MEDIA SECTION — photo gallery + video tab
   Image slots: GALLERY_1–5 | Video slots: VIDEO_1–4_THUMB
   ══════════════════════════════════════════════════════════════════ */
.media-section { background: var(--bg-alt); }
.media-header  { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 18px; margin-bottom: 36px; }

/* Tab switcher */
.media-tabs { display: flex; gap: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 3px; }
.media-tab  { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; padding: 7px 16px; border-radius: 2px; color: var(--text-lt); cursor: pointer; border: none; background: none; font-family: var(--sans); transition: all var(--ease); }
.media-tab.active { background: var(--white); color: var(--petrol); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }

/* Photo gallery grid — first item spans 2×2 */
.media-gallery { display: grid; grid-template-columns: repeat(4,1fr); grid-template-rows: 260px 200px; gap: 3px; }
.gallery-item  { overflow: hidden; position: relative; }
.gallery-item:first-child { grid-column: 1/3; grid-row: 1/3; }
/* Caption overlay */
.gallery-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(20,50,52,0.55),transparent 50%); opacity:0; transition:opacity var(--ease); }
.gallery-caption { position:absolute; bottom:12px; left:14px; right:14px; font-size:0.68rem; color:rgba(255,255,255,0.9); letter-spacing:0.04em; opacity:0; transition:opacity var(--ease); }
.gallery-item:hover .gallery-overlay,
.gallery-item:hover .gallery-caption { opacity:1; }

/* Video grid (shown in Videos tab) */
.video-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 3px; }
.video-card { position: relative; aspect-ratio: 16/9; overflow: hidden; cursor: pointer; }
.video-card-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; z-index:2; }
.video-card-title { font-family:var(--serif); font-size:1.25rem; font-weight:300; color:var(--white); text-align:center; padding:0 20px; line-height:1.3; }
.video-duration { font-size:0.67rem; color:rgba(255,255,255,0.42); letter-spacing:0.1em; }


/* ══════════════════════════════════════════════════════════════════
   ABOUT — stacked images + text
   Image slots: ABOUT_MAIN, ABOUT_ACCENT
   ══════════════════════════════════════════════════════════════════ */
.about { background: var(--bg); }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
/* Stacked image composition */
.about-image-stack { position: relative; height: 500px; }
.about-img-main    { position:absolute; top:0; left:0; width:75%; height:78%; overflow:hidden; }
.about-img-accent  { position:absolute; bottom:0; right:0; width:53%; height:49%; overflow:hidden; border:4px solid var(--bg); }
/* Floating badge */
.about-badge     { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); background:var(--terra); width:82px; height:82px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; z-index:3; box-shadow:0 8px 28px rgba(201,107,74,0.36); }
.about-badge-num { font-family:var(--serif); font-size:1.6rem; font-weight:300; color:var(--white); line-height:1; }
.about-badge-lbl { font-size:0.5rem; color:rgba(255,255,255,0.75); letter-spacing:0.07em; text-align:center; }
/* Text content */
.about-content p  { font-size:0.93rem; margin-bottom:14px; }
.about-pillars    { display:flex; flex-direction:column; gap:9px; margin-top:26px; }
.pillar           { display:flex; align-items:center; gap:14px; padding:11px 17px; background:var(--bg-alt); border-radius:var(--radius); border-left:3px solid var(--terra); font-size:0.84rem; font-weight:500; color:var(--petrol); }


/* ══════════════════════════════════════════════════════════════════
   PHASES — three-step timeline
   ══════════════════════════════════════════════════════════════════ */
.phases { background: var(--bg-alt); }
.phases-track { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; position:relative; }
/* Horizontal connector line */
.phases-track::before { content:''; position:absolute; top:44px; left:15%; right:15%; height:1px; background:var(--border); z-index:0; }
.phase-item   { text-align:center; padding:0 18px; }
.phase-dot    { width:26px; height:26px; border-radius:50%; margin:30px auto 0; display:flex; align-items:center; justify-content:center; position:relative; z-index:1; font-size:0.7rem; font-weight:500; color:var(--white); }
.phase-dot.done    { background:var(--petrol); }
.phase-dot.active  { background:var(--terra); box-shadow:0 0 0 6px rgba(201,107,74,0.14); }
.phase-dot.planned { background:var(--border); color:var(--text-lt); }
.phase-status      { font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; margin-top:11px; }
.phase-status.done    { color:var(--petrol); }
.phase-status.active  { color:var(--terra);  }
.phase-status.planned { color:var(--text-lt);}
.phase-name { font-family:var(--serif); font-size:1.18rem; color:var(--text); margin:7px 0 9px; font-weight:400; }
.phase-desc { font-size:0.82rem; color:var(--text-md); line-height:1.7; }


/* ══════════════════════════════════════════════════════════════════
   BUDGET — animated bar chart
   ══════════════════════════════════════════════════════════════════ */
.budget { background: var(--bg); }
.budget-layout { display:grid; grid-template-columns:1fr 1fr; gap:44px; margin-top:44px; align-items:start; }
.budget-row        { margin-bottom:16px; }
.budget-row-header { display:flex; justify-content:space-between; margin-bottom:5px; }
.budget-row-label  { font-size:0.82rem; color:var(--text); }
.budget-row-amount { font-size:0.82rem; color:var(--petrol); font-weight:500; }
.budget-bar-bg     { height:6px; background:var(--border); border-radius:3px; overflow:hidden; }
/* width starts at 0 and animates to data-width via JS on scroll */
.budget-bar-fill   { height:100%; border-radius:3px; background:var(--petrol); width:0%; transition:width 1.2s cubic-bezier(0.4,0,0.2,1); }
.budget-bar-fill.accent { background:var(--terra); }
.budget-total      { display:flex; justify-content:space-between; align-items:center; margin-top:22px; padding-top:16px; border-top:1px solid var(--border); }
.budget-total-label { font-size:0.7rem; text-transform:uppercase; letter-spacing:0.09em; color:var(--text-lt); }
.budget-total-num   { font-family:var(--serif); font-size:2rem; font-weight:300; color:var(--petrol); }
.budget-note        { background:var(--bg-alt); padding:30px; border-radius:var(--radius); }
.budget-note p      { font-size:0.87rem; line-height:1.8; margin-bottom:12px; }
.budget-note p:last-of-type { margin-bottom:18px; }
.budget-note strong { color:var(--petrol); font-weight:500; }


/* ══════════════════════════════════════════════════════════════════
   TESTIMONIAL — dark pull-quote band
   ══════════════════════════════════════════════════════════════════ */
.testimony      { background:var(--petrol); padding:86px 0; }
.testimony-inner{ max-width:800px; margin:0 auto; text-align:center; padding:0 24px; }
.testimony-mark { font-family:var(--serif); font-size:6rem; line-height:0.4; color:rgba(255,255,255,0.07); display:block; margin-bottom:20px; user-select:none; }
.testimony-text { font-family:var(--serif); font-size:clamp(1.3rem,2.5vw,1.95rem); font-weight:300; font-style:italic; color:var(--white); line-height:1.45; margin-bottom:28px; }
.testimony-divider { width:36px; height:1px; background:var(--terra); margin:0 auto 16px; }
.testimony-attr { font-size:0.72rem; color:rgba(255,255,255,0.36); letter-spacing:0.1em; text-transform:uppercase; }


/* ══════════════════════════════════════════════════════════════════
   TEAM — Beirat cards
   Image slots: TEAM_RETO, TEAM_2 … TEAM_6 (54×54px circles)
   ══════════════════════════════════════════════════════════════════ */
.team { background:var(--bg-alt); }
.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; margin-top:44px; }
.team-card { background:var(--white); padding:30px 24px; transition:transform var(--ease); }
.team-card:hover { transform:translateY(-3px); }
/* Avatar circle — add <img> inside when photo is available */
.team-avatar { width:52px; height:52px; border-radius:50%; background:var(--bg-alt); margin-bottom:16px; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.team-avatar-placeholder { font-family:var(--serif); font-size:1.15rem; color:var(--petrol); font-weight:300; }
.team-name { font-family:var(--serif); font-size:1.03rem; color:var(--text); margin-bottom:4px; }
.team-role { font-size:0.68rem; color:var(--terra); letter-spacing:0.07em; text-transform:uppercase; font-weight:500; margin-bottom:11px; }
.team-area { font-size:0.82rem; color:var(--text-md); line-height:1.65; }


/* ══════════════════════════════════════════════════════════════════
   DONATE BAND — terracotta CTA stripe
   ══════════════════════════════════════════════════════════════════ */
.donate-band { background:var(--terra); padding:68px 0; text-align:center; }
.donate-band h2 { font-family:var(--serif); font-size:clamp(1.65rem,3vw,2.5rem); font-weight:300; color:var(--white); margin-bottom:12px; }
.donate-band p  { color:rgba(255,255,255,0.74); max-width:450px; margin:0 auto 28px; font-size:0.95rem; }


/* ══════════════════════════════════════════════════════════════════
   CONTACT — form + info columns
   ══════════════════════════════════════════════════════════════════ */
.contact { background:var(--bg); }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.contact-form { display:flex; flex-direction:column; gap:13px; }
.form-row     { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.form-field   { display:flex; flex-direction:column; gap:5px; }
.form-field label { font-size:0.69rem; letter-spacing:0.09em; text-transform:uppercase; color:var(--text-lt); font-weight:500; }
/* Base input style — -webkit-appearance removes iOS default styling */
.form-field input,
.form-field select,
.form-field textarea { font-family:var(--sans); font-size:0.9rem; padding:11px 13px; border:1px solid var(--border); background:var(--white); color:var(--text); border-radius:var(--radius); outline:none; transition:border-color var(--ease); resize:none; -webkit-appearance:none; appearance:none; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color:var(--petrol); }
.form-submit { align-self:flex-start; background:var(--petrol); color:var(--white); padding:12px 28px; border:none; border-radius:var(--radius); font-family:var(--sans); font-size:0.83rem; font-weight:500; cursor:pointer; letter-spacing:0.04em; transition:background var(--ease); }
.form-submit:hover { background:var(--petrol-lt); }
.contact-block { margin-bottom:32px; }
.contact-block h3 { font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--terra); font-weight:500; font-family:var(--sans); margin-bottom:7px; }
.contact-block p  { font-size:0.86rem; }
.contact-link { display:flex; align-items:center; gap:10px; font-size:0.83rem; color:var(--petrol); margin-top:7px; transition:color var(--ease); }
.contact-link:hover { color:var(--terra); }
.contact-link svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.5; flex-shrink:0; }


/* ══════════════════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════════════════ */
footer { background:#192B2D; padding:52px 0 26px; color:rgba(255,255,255,0.55);
  /* env(safe-area-inset-bottom): avoids content hiding behind iPhone home bar */
  padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:28px; margin-bottom:36px; }
.footer-brand p { font-size:0.82rem; color:rgba(255,255,255,0.36); line-height:1.75; margin-top:12px; max-width:250px; }
.footer-col h4  { font-size:0.63rem; letter-spacing:0.13em; text-transform:uppercase; color:rgba(255,255,255,0.26); font-weight:500; font-family:var(--sans); margin-bottom:13px; }
.footer-col ul  { list-style:none; display:flex; flex-direction:column; gap:8px; }
.footer-col ul li a { font-size:0.82rem; color:rgba(255,255,255,0.5); transition:color var(--ease); }
.footer-col ul li a:hover { color:rgba(255,255,255,0.9); }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.07); padding-top:20px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-bottom p { font-size:0.72rem; color:rgba(255,255,255,0.24); }
.footer-legal { display:flex; gap:16px; }
.footer-legal a { font-size:0.72rem; color:rgba(255,255,255,0.24); transition:color var(--ease); }
.footer-legal a:hover { color:rgba(255,255,255,0.6); }


/* ══════════════════════════════════════════════════════════════════
   VIDEO MODAL — overlay that opens on play click
   EDIT: openModal(url) injects an iframe automatically
   ══════════════════════════════════════════════════════════════════ */
.modal-overlay { display:none; position:fixed; inset:0; z-index:500; background:rgba(15,28,30,0.92); align-items:center; justify-content:center; padding:20px; }
.modal-overlay.open { display:flex; }
.modal-video   { width:min(820px,100%); aspect-ratio:16/9; position:relative; background:#000; }
.modal-close   { position:absolute; top:-36px; right:0; background:none; border:none; color:rgba(255,255,255,0.55); cursor:pointer; font-family:var(--sans); font-size:0.78rem; letter-spacing:0.06em; transition:color var(--ease); }
.modal-close:hover { color:var(--white); }
.modal-placeholder { width:100%; height:100%; background:var(--petrol); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.modal-placeholder p { color:rgba(255,255,255,0.42); font-size:0.82rem; }


/* ══════════════════════════════════════════════════════════════════
   SCROLL ANIMATION CLASSES
   .anim = starts invisible+slightly low, transitions to visible
   .anim-d1 to .anim-d4 = stagger delays for grid items
   ══════════════════════════════════════════════════════════════════ */
.anim { opacity:0; transform:translateY(20px); transition:opacity 0.6s ease, transform 0.6s ease; }
.anim.visible { opacity:1; transform:translateY(0); }
.anim-d1 { transition-delay:0.1s; }
.anim-d2 { transition-delay:0.2s; }
.anim-d3 { transition-delay:0.3s; }
.anim-d4 { transition-delay:0.42s; }



/* ══════════════════════════════════════════════════════════════════
   ACCESSIBILITY — reduced motion
   Respects the OS "Reduce Motion" setting (iOS Settings > Accessibility).
   Users who prefer less motion get no animations at all.
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .anim { opacity:1; transform:none; transition:none; } /* skip entrance anims */
  img   { transition:none; }                             /* skip zoom on hover  */
  html  { scroll-behavior: auto; }                       /* skip smooth scroll  */
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET  (≤ 900px)
   Two-column grids collapse to one, nav links hidden
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  /* Container: slightly less padding */
  .container { padding: 0 20px; }

  /* Nav: hide desktop links, show hamburger */
  .nav-links     { display: none; }
  .nav-hamburger { display: flex; }

  /* Hero: stack vertically (text on top, images below) */
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-left  { padding: 40px 20px; }
  .hero-right { min-height: 340px; }
  .hero-media-grid { position: relative; height: 340px; }

  /* Mission: single column */
  .mission-inner { grid-template-columns: 1fr; gap: 32px; }

  /* Services: two columns */
  .services-grid { grid-template-columns: repeat(2,1fr); }

  /* Media gallery: simplify to 2 cols */
  .media-gallery {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 220px 180px 180px;
  }
  .gallery-item:first-child { grid-column: 1/3; grid-row: 1/2; }

  /* Videos: single column */
  .video-grid { grid-template-columns: 1fr; }

  /* About: stack (image above text) */
  .about-grid { grid-template-columns: 1fr; }
  .about-image-stack { height: 360px; order: -1; }
  .about-img-main  { width: 70%; height: 74%; }
  .about-img-accent{ width: 52%; height: 47%; }

  /* Phases: vertical list */
  .phases-track { grid-template-columns: 1fr; }
  .phases-track::before { display: none; }
  .phase-item { text-align: left; display: flex; align-items: flex-start; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--border); }
  .phase-dot  { margin: 0; flex-shrink: 0; }

  /* Budget: stack */
  .budget-layout { grid-template-columns: 1fr; }

  /* Team: two columns */
  .team-grid { grid-template-columns: repeat(2,1fr); }

  /* Contact: stack */
  .contact-grid { grid-template-columns: 1fr; gap: 36px; }
  .form-row     { grid-template-columns: 1fr; }

  /* Footer: two columns */
  .footer-grid { grid-template-columns: 1fr 1fr; }
}


/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE  (≤ 600px)
   Single column layout, tighter spacing
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Even tighter section padding on small phones */
  :root { --section-y: 52px; }

  .container { padding: 0 16px; }

  /* Hero: simplified for mobile
     ─────────────────────────────────────────────────────────────────
     On phones the hero stacks vertically and becomes overwhelming.
     We strip it back to: tag → headline → single CTA.
     The description, ghost CTA, and image mosaic are hidden.
     They remain in the DOM — tablet (≥601px) shows everything normally.
     ──────────────────────────────────────────────────────────────── */
  .hero {
    min-height: auto;             /* don't force full viewport on mobile */
    padding-top: var(--nav-h);
  }
  .hero-left { padding: 36px 16px 28px; }

  /* Hide long description on mobile — headline + CTA is enough */
  .hero-desc--hideable { display: none; }

  /* Hide the secondary ghost CTA — keep only the primary "Jetzt unterstützen" */
  .hero-ghost--hideable { display: none; }

  /* Hide the image mosaic on mobile — a thin petrol accent bar replaces it */
  .hero-right--hideable {
    min-height: 6px;              /* thin accent strip instead of full mosaic */
    background: var(--petrol);
  }
  .hero-right--hideable .hero-media-grid { display: none; } /* hide cells inside */

  /* Tighten headline so it reads in 2 short lines on a small phone */
  .hero h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }

  /* Stats row: 2 columns on very small screens, no overflow */
  .hero-stats {
    gap: 16px;
    flex-wrap: wrap;
  }

  /* Services: single column */
  .services-grid { grid-template-columns: 1fr; }

  /* Gallery: single column stack */
  .media-gallery { grid-template-columns: 1fr; grid-template-rows: auto; }
  .gallery-item, .gallery-item:first-child { grid-column: 1; grid-row: auto; height: 200px; }

  /* Team: single column */
  .team-grid { grid-template-columns: 1fr; }

  /* Footer: single column */
  .footer-grid  { grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction: column; align-items: flex-start; }

  /* About image stack: adjust for small screens */
  .about-image-stack { height: 280px; }
  .about-img-main    { width: 72%; height: 72%; }
  .about-img-accent  { width: 52%; height: 46%; }

  /* Stats: 2 per row via auto-fill */
  .hero-stats { gap: 20px; }

  /* Phase items: compact */
  .phase-item { gap: 14px; }
}


/* ══════════════════════════════════════════════════════════════════
   LARGE SCREENS  (≥ 1200px)
   More breathing room on wide monitors
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  .container { padding: 0 40px; }
  .nav-inner  { padding: 0 40px; }
  .hero-left  { padding: 72px 56px 72px 40px; }
}

/* ══════════════════════════════════════════════════════════════════
   COOKIE CONSENT BANNER
   Fixed bottom bar; slides up when page loads (if no consent stored).
   z-index 300 keeps it above all page content including the nav (200).
   ══════════════════════════════════════════════════════════════════ */
#cookieBanner {
  position: fixed;                    /* stays at bottom while scrolling    */
  bottom: 0; left: 0; right: 0;
  z-index: 300;
  background: #1A2C2E;               /* same dark teal as footer            */
  border-top: 2px solid var(--terra);
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  /* slides up from below the fold */
  transform: translateY(100%);
  transition: transform 0.45s cubic-bezier(0.4,0,0.2,1);
  /* safe-area: don't hide behind iPhone home bar */
  padding-bottom: calc(18px + env(safe-area-inset-bottom));
}
#cookieBanner.visible { transform: translateY(0); } /* JS adds this class  */

/* Text inside banner */
.cookie-text {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.6;
  max-width: 680px;                  /* keep readable on wide screens       */
  flex: 1;
}
.cookie-text a {
  color: #A8D4D0;                    /* light teal — readable on dark bg    */
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Button group */
.cookie-btns {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
/* Accept button — terracotta */
.cookie-accept {
  background: var(--terra);
  color: var(--white);
  border: none;
  padding: 9px 22px;
  min-height: 40px;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.cookie-accept:hover { background: var(--terra-lt); }

/* Decline / essential-only button — outlined */
.cookie-decline {
  background: transparent;
  color: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 9px 18px;
  min-height: 40px;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 0.8rem;
  cursor: pointer;
  transition: border-color var(--ease), color var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.cookie-decline:hover { border-color: rgba(255,255,255,0.5); color: var(--white); }


/* ══════════════════════════════════════════════════════════════════
   LANGUAGE SWITCHER  — pill group in the nav
   Three buttons: DE / FR / EN.
   The active language gets a filled background.
   ══════════════════════════════════════════════════════════════════ */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 20px;            /* pill shape */
  padding: 3px;
  margin-left: 8px;               /* space from nav links */
}
.lang-btn {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  min-height: 30px;               /* touch-friendly */
  border-radius: 16px;
  border: none;
  background: transparent;
  color: var(--text-lt);
  cursor: pointer;
  transition: all var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.lang-btn:hover  { color: var(--petrol); }
.lang-btn.active {
  background: var(--petrol);      /* filled petrol for active language      */
  color: var(--white);
}

/* Mobile: language switcher inside the drawer */
.lang-switcher-mobile {
  display: flex;
  gap: 8px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
}
.lang-switcher-mobile .lang-btn {
  font-size: 0.8rem;
  padding: 8px 16px;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
}
.lang-switcher-mobile .lang-btn.active {
  background: var(--petrol);
  color: var(--white);
  border-color: var(--petrol);
}

/* Responsive: hide lang switcher label on small screens */
@media (max-width: 1050px) {
  .lang-switcher { margin-left: 4px; }
}


/* ══════════════════════════════════════════════════════════════════
   BEIRAT JOIN CARD
   Replaces the 5 empty "Stelle offen" cards while the Beirat is being
   formed. Remove this and uncomment the hidden cards in the HTML
   as real members join (see the HTML comment in the team section).
   ══════════════════════════════════════════════════════════════════ */
.team-card--join {
  /* Dashed border signals "in progress" without looking broken */
  border: 2px dashed var(--border);
  background: var(--bg);              /* slightly warmer than white cards  */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-height: 200px;
}
/* Icon circle */
.join-icon {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--bg-alt);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.join-icon svg {
  width: 18px; height: 18px;
  stroke: var(--petrol);
}
/* Override default team-name weight for join card */
.team-card--join .join-title {
  font-size: 1rem;
  color: var(--petrol);
}
.team-card--join .join-desc {
  font-size: 0.82rem;
  color: var(--text-md);
  line-height: 1.7;
  margin-top: 4px;
}
/* Small link CTA at bottom of join card */
.join-cta {
  display: inline-block;
  margin-top: 16px;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--terra);
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--terra);
  padding-bottom: 1px;
  transition: color var(--ease), border-color var(--ease);
  text-decoration: none;
}
.join-cta:hover {
  color: var(--terra-lt);
  border-color: var(--terra-lt);
}


/* ══════════════════════════════════════════════════════════════════
   CONTACT FORM — SUCCESS & ERROR FEEDBACK STATES
   Shown by JS after form submission. Hidden by default via [hidden].
   EDIT: colours and text can be adjusted independently.
   ══════════════════════════════════════════════════════════════════ */
.form-feedback {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-radius: var(--radius);
  margin-top: 4px;
  font-size: 0.88rem;
  line-height: 1.65;
}
/* [hidden] attribute hides the element completely */
.form-feedback[hidden] { display: none; }

/* Success — soft green tint */
.form-success {
  background: #EBF5EE;
  border: 1px solid #A8D5B4;
  color: #1F5C30;
}
.form-success svg  { stroke: #2A7A40; width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.form-success strong { display: block; margin-bottom: 2px; font-weight: 600; color: #1F5C30; }
.form-success p    { margin: 0; }

/* Error — soft red tint */
.form-error {
  background: #FDF0EE;
  border: 1px solid #E8B4AD;
  color: #7A2A20;
}
.form-error svg    { stroke: #A03020; width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.form-error strong { display: block; margin-bottom: 2px; font-weight: 600; color: #7A2A20; }
.form-error p      { margin: 0; }
.form-error a      { color: var(--terra); }

/* Submit button loading state — shown while fetch is in-flight */
.form-submit.loading {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}


/* ── NAV LOGO IMAGE ───────────────────────────────────────────────
   Real AGIR Suisse logo replaces the "AS" initials circle.
   Source: B&W Variante A, cropped from logo sheet (Mai 2025).
   The nav-logo-img class sizes it correctly and removes any
   default img margin/padding. filter:invert(1) in footer turns
   the black logo white against the dark footer background.      */
.nav-logo-img {
  display: block;             /* removes default inline gap        */
  object-fit: contain;        /* never distorts the logo           */
  object-position: left center;
}


/* ── SOCIAL MEDIA ICONS IN FOOTER ────────────────────────────────
   Small icon pills for LinkedIn, Instagram, TikTok.
   EDIT: update href values when new accounts are created.         */
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.6);
  transition: background var(--ease), color var(--ease);
  flex-shrink: 0;
  text-decoration: none;
}
.footer-social a:hover {
  background: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.95);
}
.footer-social svg {
  width: 15px; height: 15px;
  fill: currentColor;
}

/* Social link in contact section */
.contact-social {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.contact-social a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  color: var(--petrol);
  transition: color var(--ease);
  text-decoration: none;
}
.contact-social a:hover { color: var(--terra); }
.contact-social svg { width: 15px; height: 15px; fill: currentColor; flex-shrink:0; }


/* ── EMBEDDED SOCIAL VIDEO CARDS ─────────────────────────────────
   Used for Facebook and Instagram iframes in the video grid.
   Different from the YouTube modal cards — these play inline.
   ──────────────────────────────────────────────────────────────── */
.video-card--embed {
  background: #111;
  cursor: default;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Wrapper maintains aspect ratio for the iframe */
.video-embed-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;  /* 16:9 */
  flex: 1;
  overflow: hidden;
}
/* Instagram reels are portrait — 9:16 — so we adjust */
.video-embed-wrapper--ig {
  padding-bottom: 75%;  /* compromise between 9:16 and 16:9 grid */
}
.video-embed-wrapper iframe,
.video-embed-wrapper--ig iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Small platform label at bottom */
.video-embed-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.06em;
  background: #0a0a0a;
  flex-shrink: 0;
}


/* ── SOCIAL MEDIA ICONS IN FOOTER ────────────────────────────────
   Small icon pills for LinkedIn, Instagram, TikTok.
   EDIT: update href values when new accounts are created.         */
.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.6);
  transition: background var(--ease), color var(--ease);
  flex-shrink: 0;
  text-decoration: none;
}
.footer-social a:hover {
  background: rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.95);
}
.footer-social svg {
  width: 15px; height: 15px;
  fill: currentColor;
}

/* Social link in contact section */
.contact-social {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.contact-social a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  color: var(--petrol);
  transition: color var(--ease);
  text-decoration: none;
}
.contact-social a:hover { color: var(--terra); }
.contact-social svg { width: 15px; height: 15px; fill: currentColor; flex-shrink:0; }


/* ── EMBEDDED SOCIAL VIDEO CARDS ─────────────────────────────────
   Used for Facebook and Instagram iframes in the video grid.
   Different from the YouTube modal cards — these play inline.
   ──────────────────────────────────────────────────────────────── */
.video-card--embed {
  background: #111;
  cursor: default;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Wrapper maintains aspect ratio for the iframe */
.video-embed-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;  /* 16:9 */
  flex: 1;
  overflow: hidden;
}
/* Instagram reels are portrait — 9:16 — so we adjust */
.video-embed-wrapper--ig {
  padding-bottom: 75%;  /* compromise between 9:16 and 16:9 grid */
}
.video-embed-wrapper iframe,
.video-embed-wrapper--ig iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Small platform label at bottom */
.video-embed-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 0.68rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.06em;
  background: #0a0a0a;
  flex-shrink: 0;
}


/* ── VIDEO CARD — LINK VARIANT ───────────────────────────────────
   Used for Facebook/Instagram cards that open in a new tab instead
   of an embedded player. Looks identical to a video card but the
   whole card is clickable as a link.
   To convert back to a modal player: change to video-card--embed   */
.video-card--link {
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.video-card--link:hover .video-card-overlay { opacity: 1; }
.video-card--link .video-card-overlay {
  opacity: 0.75;              /* slightly visible by default so icon is seen */
  transition: opacity var(--ease);
}


/* ── SKIP NAVIGATION LINK ────────────────────────────────────────
   Hidden offscreen until focused — then slides into view at top.
   Required for keyboard and screen-reader users (WCAG 2.4.1).   */
.skip-link {
  position: fixed;
  top: -100px;              /* hidden above viewport               */
  left: 16px;
  z-index: 9999;
  background: var(--petrol);
  color: var(--white);
  padding: 12px 20px;
  border-radius: 0 0 var(--radius) var(--radius);
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: top 0.2s ease;
  outline: none;
}
/* Slides into view when focused with Tab key */
.skip-link:focus {
  top: 0;
  outline: 3px solid var(--terra);
  outline-offset: 2px;
}


/* ── FOCUS VISIBLE ───────────────────────────────────────────────
   Strong focus ring for keyboard and switch-access users.
   :focus-visible shows ring on keyboard only, not mouse click.
   This is critical for WCAG 2.4.7 (Focus Visible) — Level AA.  */
:focus-visible {
  outline: 3px solid var(--terra);   /* high-vis terracotta ring   */
  outline-offset: 3px;
  border-radius: var(--radius);
}
/* Remove default outline (replaced by :focus-visible above)       */
:focus:not(:focus-visible) { outline: none; }

/* Extra: ensure buttons/links never show the browser default      */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--terra);
  outline-offset: 3px;
  border-radius: var(--radius);
}
/* Input focus uses the border colour system already in place       */
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: none;              /* border-color handles it visually   */
  border-color: var(--petrol);
  box-shadow: 0 0 0 3px rgba(31,79,82,0.18);
}


/* ── GALLERY ACCESSIBILITY ───────────────────────────────────────
   Gallery cells are navigable via keyboard. They show caption on
   focus (same as hover). The focus ring is visible.              */
.gallery-item {
  /* Allow keyboard focus on gallery items */
}
.gallery-item:focus-within .gallery-overlay,
.gallery-item:focus-within .gallery-caption {
  opacity: 1;         /* show caption when child image is focused */
}


/* ── SCREEN READER ONLY ─────────────────────────────────────────
   Visually hidden but announced by VoiceOver / TalkBack / NVDA.
   Use for: extra context, hints, icon labels, status messages.  */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* Allow sr-only to be focusable (used for skip links etc.)       */
.sr-only:focus,
.sr-only:active {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: inherit;
  overflow: visible;
  clip: auto;
  white-space: normal;
}


/* ── TOUCH TARGETS ───────────────────────────────────────────────
   Apple and WCAG recommend 44×44px minimum for any tappable element.
   These rules ensure small elements still have enough hit area.  */
.lang-btn {
  min-height: 36px;
  min-width: 36px;
}
.media-tab {
  min-height: 40px;
}
.social-link {
  min-width: 44px;
  min-height: 44px;    /* override the 34px from before           */
}
.play-circle {
  min-width: 52px;
  min-height: 52px;
}
.join-cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}



/* ══ HERO PILL CTAs ═════════════════════════════════════════════ */
.btn-hero-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--terra); color: var(--white);
  padding: 14px 28px; border-radius: 50px;
  font-family: var(--sans); font-size: 0.9rem; font-weight: 500;
  border: none; cursor: pointer; text-decoration: none;
  transition: background var(--ease), transform var(--ease);
  min-height: 48px; -webkit-tap-highlight-color: transparent;
}
.btn-hero-primary:hover { background: var(--terra-lt); transform: translateY(-1px); }
.btn-hero-ghost {
  display: inline-flex; align-items: center; padding: 14px 28px;
  border-radius: 50px; border: 1.5px solid var(--petrol);
  color: var(--petrol); font-family: var(--sans); font-size: 0.9rem;
  font-weight: 500; text-decoration: none; min-height: 48px;
  transition: background var(--ease), color var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn-hero-ghost:hover { background: var(--petrol); color: var(--white); }
.hero-stats { display: none; } /* removed per assignment */

/* ══ TIMELINE ═══════════════════════════════════════════════════ */
.timeline-wrap { display: grid; grid-template-columns: 220px 1fr; gap: 48px; align-items: start; }
.timeline-heading { font-family: var(--serif); font-size: clamp(1.3rem,2.5vw,1.9rem); font-weight: 300; color: var(--petrol); line-height: 1.25; margin-top: 8px; }
.timeline-track { position: relative; display: flex; flex-direction: column; padding-left: 28px; }
.timeline-track::before { content:''; position:absolute; left:7px; top:14px; bottom:14px; width:1px; background:var(--border); }
.timeline-item { position: relative; padding-bottom: 38px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot { position:absolute; left:-28px; top:4px; width:14px; height:14px; border-radius:50%; z-index:1; }
.timeline-dot--done    { background: var(--terra); }
.timeline-dot--planned { background: var(--white); border: 2px solid var(--terra); }
.timeline-year { display:block; font-size:0.72rem; font-weight:600; letter-spacing:0.08em; color:var(--terra); margin-bottom:5px; text-transform:uppercase; }
.timeline-year--planned { color: var(--text-lt); }
.timeline-title { font-family:var(--serif); font-size:1.2rem; font-weight:400; color:var(--text); margin-bottom:7px; }
.timeline-desc { font-size:0.84rem; color:var(--terra); line-height:1.75; }
@media (max-width:900px) { .timeline-wrap { grid-template-columns:1fr; gap:24px; } }

/* ══ BEIRAT ═════════════════════════════════════════════════════ */
.beirat-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start; }
.beirat-col-heading { font-family:var(--serif); font-size:1.35rem; font-weight:400; color:var(--text); margin-bottom:22px; }
.beirat-list { list-style:none; display:flex; flex-direction:column; gap:15px; }
.beirat-item { display:flex; gap:12px; align-items:flex-start; font-size:0.87rem; color:var(--text-md); line-height:1.7; }
.beirat-check { flex-shrink:0; width:20px; height:20px; margin-top:1px; }
.beirat-check svg { width:20px; height:20px; stroke:var(--terra); }
.beirat-members { display:flex; flex-direction:column; gap:14px; }
.member-card { border-radius:12px; padding:22px; }
.member-card--white { background:var(--white); border:1px solid var(--border); box-shadow:0 2px 16px rgba(0,0,0,0.04); }
.member-card--beige { background:var(--bg-alt); border:1px solid var(--border); }
.member-role-label { display:inline-block; font-size:0.63rem; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--terra); margin-bottom:7px; }
.member-name { font-family:var(--serif); font-size:1.35rem; font-weight:400; color:var(--text); margin-bottom:9px; }
.member-desc { font-size:0.84rem; color:var(--text-md); line-height:1.72; }
.member-tags-heading { font-family:var(--sans); font-size:0.82rem; font-weight:600; color:var(--text); margin-bottom:12px; }
.member-tags { display:flex; flex-wrap:wrap; gap:7px; }
.member-tag { display:inline-block; padding:5px 12px; border-radius:20px; border:1px solid var(--border); background:var(--white); font-size:0.78rem; color:var(--text); }
@media (max-width:900px) { .beirat-grid { grid-template-columns:1fr; gap:32px; } }

/* ══ INTERNATIONALE PRESSE ══════════════════════════════════════ */
.presse-section { background:var(--bg); padding:var(--section-y) 0; }
.presse-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.presse-card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:22px; display:flex; flex-direction:column; gap:11px; transition:box-shadow var(--ease),transform var(--ease); }
.presse-card:hover { box-shadow:0 8px 28px rgba(0,0,0,0.07); transform:translateY(-2px); }
.presse-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.presse-source { font-size:0.67rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--terra); }
.presse-date { display:flex; align-items:center; gap:4px; font-size:0.71rem; color:var(--text-lt); }
.presse-title { font-family:var(--serif); font-size:1.08rem; font-weight:400; color:var(--text); line-height:1.35; }
.presse-desc { font-size:0.82rem; color:var(--text-md); line-height:1.72; flex:1; }
.presse-link { display:inline-flex; align-items:center; gap:5px; font-size:0.82rem; font-weight:500; color:var(--petrol); text-decoration:none; margin-top:4px; border-bottom:1px solid transparent; padding-bottom:1px; transition:color var(--ease),border-color var(--ease); }
.presse-link:hover { color:var(--terra); border-bottom-color:var(--terra); }
@media (max-width:900px) { .presse-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .presse-grid { grid-template-columns:1fr; } }

/* ══ KONTAKT (new) ══════════════════════════════════════════════ */
.contact { background:var(--bg); padding:var(--section-y) 0; }
.contact-grid { display:grid; grid-template-columns:360px 1fr; gap:60px; align-items:start; }
.contact-tagline { font-size:0.91rem; color:var(--terra); line-height:1.7; margin-bottom:34px; }
.contact-info-item { display:flex; align-items:flex-start; gap:15px; margin-bottom:22px; }
.contact-icon-circle { width:40px; height:40px; border-radius:50%; background:rgba(181,87,47,0.08); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.contact-icon-circle svg { width:16px; height:16px; stroke:var(--terra); }
.contact-info-name { display:block; font-size:0.9rem; font-weight:600; color:var(--text); margin-bottom:2px; }
.contact-info-line { font-size:0.84rem; color:var(--terra); line-height:1.65; text-decoration:none; }
.contact-info-line:hover { text-decoration:underline; }
.contact-form-card { background:var(--bg-alt); border:1px solid var(--border); border-radius:16px; padding:34px; }
.form-row--3 { grid-template-columns:1fr 1fr 1fr !important; }
.btn-contact-submit { width:100%; background:var(--terra); color:var(--white); border:none; border-radius:50px; padding:14px 28px; font-family:var(--sans); font-size:0.9rem; font-weight:500; cursor:pointer; min-height:48px; transition:background var(--ease); margin-top:8px; -webkit-tap-highlight-color:transparent; }
.btn-contact-submit:hover { background:var(--terra-lt); }
@media (max-width:900px) { .contact-grid { grid-template-columns:1fr; gap:32px; } .form-row--3 { grid-template-columns:1fr 1fr !important; } }
@media (max-width:600px) { .contact-form-card { padding:18px; } .form-row--3 { grid-template-columns:1fr !important; } }

/* ══ SPENDEN ════════════════════════════════════════════════════ */
.spenden-section { background:var(--bg-alt); padding:var(--section-y) 0; }
.spenden-grid { display:grid; grid-template-columns:340px 1fr; gap:52px; align-items:start; }
.spenden-sub { font-size:0.9rem; color:var(--terra); line-height:1.7; margin-bottom:26px; }
.spenden-bank-card { background:var(--white); border:1px solid var(--border); border-radius:12px; padding:18px; }
.spenden-heart { display:block; margin-bottom:9px; }
.spenden-heart svg { width:20px; height:20px; stroke:var(--terra); }
.spenden-bank-title { display:block; font-weight:600; font-size:0.88rem; margin-bottom:7px; color:var(--text); }
.spenden-bank-details { font-size:0.79rem; color:var(--terra); line-height:1.7; margin:0; }
.spenden-form-card { background:var(--white); border:1px solid var(--border); border-radius:16px; padding:34px; box-shadow:0 4px 24px rgba(0,0,0,0.05); }
.spenden-field-group { margin-bottom:18px; }
.spenden-field-label { display:block; font-size:0.74rem; font-weight:500; color:var(--text-lt); margin-bottom:9px; }
.amount-pills { display:flex; gap:7px; flex-wrap:wrap; }
.amount-pill { padding:8px 18px; border-radius:50px; border:1.5px solid var(--border); background:var(--white); font-family:var(--sans); font-size:0.87rem; cursor:pointer; min-height:40px; transition:all var(--ease); -webkit-tap-highlight-color:transparent; }
.amount-pill:hover { border-color:var(--terra); color:var(--terra); }
.amount-pill--active { background:var(--terra); color:var(--white); border-color:var(--terra); }
.amount-pill--input { flex:1; min-width:110px; border-radius:50px; text-align:center; outline:none; font-family:var(--sans); }
.amount-pill--input:focus { border-color:var(--petrol); }
.freq-pills { display:flex; gap:7px; flex-wrap:wrap; }
.freq-pill { padding:9px 20px; border-radius:50px; border:1.5px solid var(--border); background:var(--white); font-family:var(--sans); font-size:0.87rem; cursor:pointer; min-height:40px; transition:all var(--ease); -webkit-tap-highlight-color:transparent; }
.freq-pill:hover { border-color:var(--petrol); }
.freq-pill--active { background:var(--petrol); color:var(--white); border-color:var(--petrol); }
.pay-pills { display:flex; gap:7px; flex-wrap:wrap; }
.pay-pill { padding:9px 18px; border-radius:8px; border:1.5px solid var(--border); background:var(--white); font-family:var(--sans); font-size:0.84rem; cursor:pointer; min-height:40px; transition:all var(--ease); -webkit-tap-highlight-color:transparent; }
.pay-pill--active { border-color:var(--terra); color:var(--terra); font-weight:500; }
.pay-pill--disabled { opacity:0.4; cursor:not-allowed; }
.spenden-row { display:grid; grid-template-columns:1fr 1fr; gap:11px; margin-bottom:11px; }
.spenden-row--3 { grid-template-columns:1fr 1fr 1fr; }
.spenden-field { display:flex; flex-direction:column; gap:4px; margin-bottom:11px; }
.spenden-field label { font-size:0.71rem; font-weight:500; color:var(--text-lt); letter-spacing:0.04em; }
.spenden-field input, .spenden-field textarea { font-family:var(--sans); font-size:0.89rem; padding:10px 13px; border:1px solid var(--border); border-radius:8px; background:var(--bg); color:var(--text); outline:none; min-height:44px; transition:border-color var(--ease); -webkit-appearance:none; }
.spenden-field input:focus, .spenden-field textarea:focus { border-color:var(--petrol); }
.spenden-field textarea { resize:vertical; min-height:76px; }
.spenden-check-label { display:flex; align-items:center; gap:9px; font-size:0.82rem; color:var(--terra); cursor:pointer; margin-bottom:18px; }
.spenden-checkbox { width:16px; height:16px; cursor:pointer; flex-shrink:0; }
.btn-spenden-submit { width:100%; background:var(--terra); color:var(--white); border:none; border-radius:50px; padding:14px 28px; font-family:var(--sans); font-size:0.9rem; font-weight:500; cursor:pointer; min-height:48px; transition:background var(--ease); -webkit-tap-highlight-color:transparent; }
.btn-spenden-submit:hover { background:var(--terra-lt); }
@media (max-width:900px) { .spenden-grid { grid-template-columns:1fr; } .spenden-row { grid-template-columns:1fr; } .spenden-row--3 { grid-template-columns:1fr 1fr; } .spenden-form-card { padding:22px; } }
@media (max-width:600px) { .spenden-row--3 { grid-template-columns:1fr !important; } }


/* ════════════════════════════════════════════════════════════════
   LAYOUT UTILITIES — previously missing from CSS
   These classes handle the column layout within grid containers.
   ════════════════════════════════════════════════════════════════ */

/* Timeline left column: label + "Wie sich AGIR entwickelt." */
.timeline-intro {
  padding-top: 2px;
}

/* Timeline right column: each item's text block */
.timeline-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Beirat left column: checklist */
.beirat-tasks {
  /* Grid layout is handled by .beirat-grid — no extra positioning needed */
}

/* Spenden left column: heading + bank card */
.spenden-info {
  /* Grid layout is handled by .spenden-grid — no extra positioning needed */
}

/* Contact left column: heading + icon blocks */
.contact-left {
  /* Grid layout is handled by .contact-grid — no extra positioning needed */
}

/* ════════════════════════════════════════════════════════════════
   VISUAL FIXES — aligning with screenshots
   ════════════════════════════════════════════════════════════════ */

/* FIX: Contact form card → white (screenshot shows white, not --bg-alt) */
.contact-form-card {
  background: var(--white) !important;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 36px;
  box-shadow: 0 4px 32px rgba(0,0,0,0.05);
}

/* FIX: Beirat/Team section → same warm off-white as About (not --bg-alt) */
.team {
  background: var(--bg) !important;
  padding: var(--section-y) 0;
}

/* FIX: Timeline desc text → warm mid-grey, NOT terracotta
   Screenshot shows body text colour, not red/orange           */
.timeline-desc {
  font-size: 0.84rem;
  color: var(--text-md) !important;
  line-height: 1.75;
}

/* FIX: Hero H1 → larger on desktop, matching the bold screenshot style */
.hero h1,
#hero-heading {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  font-weight: 300;
  line-height: 1.12;
  color: var(--text);
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}

/* FIX: Hero tag — uppercase spaced label above headline */
.hero-tag,
p.hero-tag {
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 18px;
  display: block;
}

/* FIX: Hero desc — cleaner body text */
.hero-desc {
  font-size: 0.95rem;
  color: var(--text-md);
  line-height: 1.75;
  max-width: 520px;
  margin-bottom: 32px;
}

/* FIX: Hero actions — pill buttons sit side by side with gap */
.hero-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* FIX: Presse section alternating bg so it stands out */
.presse-section {
  background: var(--bg-alt);
  padding: var(--section-y) 0;
}

/* FIX: Presse card hover — tighter shadow */
.presse-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.09);
  transform: translateY(-3px);
}

/* FIX: Timeline dot sizes — slightly larger for visual weight */
.timeline-dot {
  width: 14px;
  height: 14px;
  margin-top: 5px;
}

/* FIX: Spenden section — slightly warmer bg to distinguish from content */
.spenden-section {
  background: var(--bg-alt);
  padding: var(--section-y) 0;
}

/* FIX: Contact section — clean white background */
.contact {
  background: var(--bg);
  padding: var(--section-y) 0;
}

/* FIX: Beirat member card bottom spacing */
.beirat-members {
  gap: 16px;
}

/* FIX: Member tag styling — cleaner pill shape */
.member-tag {
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--white);
  font-size: 0.78rem;
  font-family: var(--sans);
  color: var(--text);
  white-space: nowrap;
}

/* FIX: Section label (ÜBER UNS, BEIRAT etc.) spacing */
.label {
  display: block;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 14px;
}

/* FIX: Section title — consistent size and weight */
.section-title {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 300;
  color: var(--text);
  line-height: 1.1;
  margin-bottom: 18px;
}

/* FIX: Section lead — consistent */
.section-lead {
  font-size: 0.92rem;
  color: var(--text-md);
  line-height: 1.8;
  max-width: 640px;
  margin-bottom: 40px;
}

/* FIX: Form field inputs — consistent across both forms */
.form-field input,
.form-field select,
.form-field textarea,
.spenden-field input,
.spenden-field textarea {
  font-family: var(--sans);
  font-size: 0.88rem;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--white);
  color: var(--text);
  width: 100%;
  min-height: 44px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  box-sizing: border-box;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus,
.spenden-field input:focus,
.spenden-field textarea:focus {
  border-color: var(--petrol);
  box-shadow: 0 0 0 3px rgba(31,79,82,0.12);
}

/* FIX: Form labels — consistent small caps style */
.form-field label,
.spenden-field label {
  display: block;
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-lt);
  margin-bottom: 5px;
  letter-spacing: 0.02em;
}

/* FIX: Beirat col heading — consistent serif */
.beirat-col-heading {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 24px;
  line-height: 1.2;
}

/* FIX: Presse source label — slightly larger for readability */
.presse-source {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terra);
}

/* FIX: Timeline year — consistent label style */
.timeline-year {
  display: block;
  font-family: var(--sans);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--terra);
  margin-bottom: 6px;
}
.timeline-year--planned {
  color: var(--text-lt);
}

/* FIX: Timeline title — slightly larger */
.timeline-title {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 8px;
}

/* Mobile responsive fixes */
@media (max-width: 600px) {
  .hero-actions { flex-direction: column; align-items: stretch; }
  .btn-hero-primary, .btn-hero-ghost { text-align: center; justify-content: center; }
  .presse-grid { grid-template-columns: 1fr; }
  .contact-form-card { padding: 20px; }
  .spenden-form-card { padding: 20px; }
}


/* ── PHOTO CONTAINERS ──────────────────────────────────────── */
.photo-frame {
  overflow: hidden;
  border-radius: 12px;
  background: var(--bg-alt);
  line-height: 0;
  position: relative;
}
.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.6s ease;
}
.photo-frame:hover img { transform: scale(1.03); }
.photo-frame.no-radius { border-radius: 0; }

.reto-portrait {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--bg-alt);
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  flex-shrink: 0;
  line-height: 0;
}
.reto-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.photo-text-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 52px;
  align-items: center;
}
.photo-text-grid.reverse { }

.photo-bw img { filter: grayscale(100%); transition: filter 0.5s; }
.photo-bw:hover img { filter: grayscale(0%); }

.caption {
  font-size: 0.75rem;
  color: var(--text-lt);
  margin-top: 8px;
  padding-left: 4px;
  font-style: italic;
}

@media (max-width: 900px) {
  .photo-text-grid { grid-template-columns: 1fr; gap: 28px; }
  .reto-portrait { width: 140px; height: 140px; }
}

/* ── HERO 4-PHOTO GRID ──────────────────────────────────────── */
.hero-photo-quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 200px 200px 120px;
  gap: 8px;
  height: 100%;
}
.hero-photo-cell { overflow: hidden; border-radius: 8px; }
.hero-photo-cell .photo-frame {
  border-radius: 8px;
  height: 100%;
}
@media (max-width: 900px) {
  .hero-photo-quad { grid-template-rows: 160px 160px 100px; }
}
@media (max-width: 600px) {
  .hero-photo-quad { display: none; }
}