/* ════════════════════════════════════════════════════════════
   Fliegergruppe Offenburg e.V. – zentrales Stylesheet
   Gilt für alle Seiten. Farben & Schriften hier ändern,
   dann ändern sie sich überall.
   ════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600&family=Barlow:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  /* Farben */
  --navy:#24325e;          /* Vereinsblau (Logo) */
  --sky:#2e7fb0;           /* Links, Akzente */
  --signal:#d9560b;        /* Windsack-Orange: nur für Haupt-Buttons */
  --meadow:#2f6b45;        /* Wiesengrün: Natur-Akzente */
  --ink:#1c2733;           /* Fließtext */
  --muted:#5c6b74;         /* Nebentext */
  --paper:#fbfbf9;         /* Seitenhintergrund */
  --card:#ffffff;
  --line:#e3e7e6;          /* Hairlines */
  --dark:#101820;          /* Footer */

  /* Schrift */
  --display:"Barlow Condensed", "Arial Narrow", sans-serif;
  --body:"Barlow", system-ui, Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;

  --radius:14px;
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--body); font-size:17px; color:var(--ink);
  background:var(--paper); line-height:1.7; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:var(--sky); text-decoration:none}
a:hover{text-decoration:underline}
p{margin:0 0 1em}

/* ── Typo-Rollen ─────────────────────────────────────────── */
h1,h2,h3,.display{
  font-family:var(--display); font-weight:600; line-height:1.05;
  letter-spacing:.015em; text-transform:uppercase; color:var(--navy); margin:0 0 .4em;
}
h1{font-size:clamp(2.6rem,6vw,4.4rem)}
h2{font-size:clamp(1.9rem,3.6vw,2.7rem)}
h3{font-size:clamp(1.25rem,2vw,1.5rem)}
h4{font-family:var(--body); font-weight:600; font-size:1.05rem; margin:0 0 .35em; color:var(--navy)}

/* "Datenzeile" im Anflugblatt-Stil – das Erkennungsmerkmal der Seite */
.data{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); display:flex; gap:.9em; flex-wrap:wrap;
}
.data b{color:var(--signal); font-weight:500}

/* Landebahn-Mittellinie als Trennelement */
.runway{
  border:none; height:0; margin:0 0 2.2rem;
  border-top:3px dashed var(--line);
}
.section > .runway{max-width:160px; border-top-color:#cfd6d4}

/* ── Layoutbausteine ─────────────────────────────────────── */
.wrap{max-width:var(--max); margin:0 auto; padding:0 22px}
.section{padding:4.5rem 0 4rem}
.section-head{max-width:720px; margin-bottom:2.4rem}
.section-head p{color:var(--muted); font-size:1.06rem}

.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:center}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:transform .25s ease, box-shadow .25s ease;
}
.card .body{padding:22px 24px}
.card p:last-child{margin-bottom:0}
a.card:hover, .card.hover:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(16,24,32,.10); text-decoration:none}

.tag{
  display:inline-block; font-family:var(--mono); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; padding:5px 10px; border:1px solid var(--line);
  border-radius:6px; color:var(--muted); margin-bottom:12px; background:#fff;
}
.tag.green{color:var(--meadow); border-color:#cfe2d5}
.tag.blue{color:var(--sky); border-color:#cfe0ec}
.tag.orange{color:var(--signal); border-color:#f0d4c2}

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:.5em; padding:13px 24px;
  border-radius:8px; font-weight:600; font-size:1rem; text-decoration:none;
  transition:background .2s ease, transform .2s ease; cursor:pointer; border:none;
}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-primary{background:var(--signal); color:#fff}
.btn-primary:hover{background:#bf4a08}
.btn-ghost{background:transparent; color:var(--navy); border:1px solid var(--navy)}
.btn-ghost:hover{background:var(--navy); color:#fff}
.btn-light{background:#fff; color:var(--navy); border:1px solid var(--line)}
.hero .btn-ghost{color:#fff; border-color:rgba(255,255,255,.55)}
.hero .btn-ghost:hover{background:rgba(255,255,255,.14); color:#fff}

/* ── Navigation ──────────────────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:1000; background:rgba(251,251,249,.9);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--line);
}
.nav{max-width:var(--max); margin:0 auto; padding:10px 22px; display:flex; align-items:center; justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:12px; color:var(--navy)}
.brand img{height:48px; width:auto}
.brand span{font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.03em; font-size:1.15rem; line-height:1.1}
.nav-links{display:flex; gap:22px; align-items:center}
.nav-links a{color:var(--ink); font-weight:500; font-size:.98rem}
.nav-links a:hover{color:var(--sky); text-decoration:none}
.nav-links .btn{padding:9px 18px; font-size:.95rem}
.nav-toggle{display:none; background:none; border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:1.2rem; line-height:1; color:var(--navy)}

/* ── Hero ────────────────────────────────────────────────── */
.hero{
  position:relative; color:#fff; display:flex; align-items:flex-end;
  min-height:min(78vh,720px);
  background:linear-gradient(180deg, rgba(12,24,34,.28) 0%, rgba(12,24,34,.66) 100%),
             var(--hero-img, url('images/hero-natur-segelflug.jpg')) center/cover no-repeat;
}
.hero-inner{position:relative; z-index:2; width:100%; max-width:var(--max); margin:0 auto; padding:110px 22px 64px}
.hero h1{color:#fff; max-width:820px}
.hero .lead{font-size:clamp(1.05rem,1.9vw,1.3rem); color:#eaf2f7; max-width:640px; margin-bottom:1.6em}
.hero .data{color:#c8d6de; margin-bottom:1.4em}
.hero .data b{color:#ffb27a}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap}

/* Terminkarte im Hero ("Boarding-Pass") */
.ticket{
  margin-top:2.2rem; display:inline-flex; align-items:stretch; border-radius:12px;
  overflow:hidden; background:rgba(255,255,255,.96); color:var(--ink);
  border:1px solid rgba(255,255,255,.4); max-width:100%;
}
.ticket .date{
  background:var(--navy); color:#fff; padding:16px 20px; display:flex; flex-direction:column;
  justify-content:center; font-family:var(--display); text-transform:uppercase; line-height:1.05;
  border-right:3px dashed rgba(255,255,255,.5); text-align:center;
}
.ticket .date strong{font-size:1.9rem}
.ticket .info{padding:14px 22px; align-self:center}
.ticket .info h3{margin:0 0 2px; font-size:1.2rem}
.ticket .info p{margin:0; color:var(--muted); font-size:.95rem}

/* ── Hinweisband (z.B. rettetdenflugplatz) ───────────────── */
.band{
  background:var(--meadow); color:#fff; padding:1.4rem 0;
}
.band .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap}
.band p{margin:0; max-width:760px; color:#e7f2ea}
.band strong{color:#fff}
.band a.btn{background:#fff; color:var(--meadow); padding:10px 20px}

/* ── Bild/Text-Duett ─────────────────────────────────────── */
.duet img{width:100%; height:100%; min-height:380px; object-fit:cover; border-radius:var(--radius); border:1px solid var(--line)}
.duet .copy h3{margin-top:0}
.badges{display:flex; gap:8px; flex-wrap:wrap; margin-top:14px}

/* ── Kennzahlen ──────────────────────────────────────────── */
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px}
.stat{border:1px solid var(--line); border-radius:12px; padding:16px 18px; background:#fff}
.stat strong{display:block; font-family:var(--display); font-size:2rem; color:var(--navy); line-height:1}
.stat span{color:var(--muted); font-size:.92rem}

/* ── Sparten / Flotte ────────────────────────────────────── */
.fleet .card img{height:230px; width:100%; object-fit:cover}

/* ── Events ──────────────────────────────────────────────── */
.events-list{display:grid; gap:14px}
.event{border:1px solid var(--line); border-left:4px solid var(--signal); border-radius:10px; background:#fff; padding:18px 22px}
.event h3{font-size:1.25rem; margin-bottom:.25em}
.event p{margin:0; color:var(--muted)}
.gallery-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.gallery-grid img{width:100%; height:170px; object-fit:cover; border-radius:10px; border:1px solid var(--line)}

/* ── Ausbildung ──────────────────────────────────────────── */
.license{border-top:4px solid var(--sky)}
.license.gold{border-top-color:var(--signal)}
.license.green{border-top-color:var(--meadow)}
.license ul{list-style:none; margin:16px 0 0; padding:0}
.license li{padding:6px 0 6px 26px; position:relative; color:var(--muted)}
.license li:before{content:"✓"; position:absolute; left:0; color:var(--meadow); font-weight:700}

.notice{
  border:1px solid var(--line); border-radius:var(--radius); background:#fff;
  padding:26px 28px; display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.notice p{margin:0; color:var(--muted); max-width:640px}

/* ── Piloteninfos ────────────────────────────────────────── */
.info-box{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px 28px; margin-bottom:22px}
.info-box h3{margin-top:0}
.info-box ul{padding-left:20px; margin:0}
.info-box li{margin-bottom:8px}
.freq{
  font-family:var(--mono); background:var(--navy); color:#fff; display:inline-block;
  padding:8px 14px; border-radius:8px; font-size:1.05rem; letter-spacing:.05em;
}
.warn{border-left:4px solid var(--signal)}
address{font-style:normal; background:var(--paper); border:1px solid var(--line); border-radius:10px; padding:14px 18px; line-height:1.7}

/* ── Video ───────────────────────────────────────────────── */
.video-cta{position:relative; display:block; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line)}
.video-cta img{width:100%}
.video-cta .play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(16,24,32,.25); transition:background .2s ease;
}
.video-cta:hover .play{background:rgba(16,24,32,.45)}
.video-cta .play span{
  width:76px; height:76px; border-radius:50%; background:rgba(255,255,255,.92);
  display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:var(--navy);
}

/* ── Footer ──────────────────────────────────────────────── */
.footer{background:var(--dark); color:#c9d4da; margin-top:4rem; padding:3.5rem 0 2.5rem}
.footer-inner{display:grid; grid-template-columns:1.2fr 1fr .8fr; gap:30px}
.footer h3{color:#fff; font-size:1.15rem}
.footer a{color:#c9d4da; display:block; margin-bottom:6px}
.footer a:hover{color:#fff}
.footer .data{color:#7d8b93; margin-top:2.2rem; border-top:1px dashed #2a3540; padding-top:1.2rem}

/* ── Animation (dezent) ──────────────────────────────────── */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none; transition:none}
  html{scroll-behavior:auto}
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:960px){
  .grid-2,.grid-3,.footer-inner{grid-template-columns:1fr}
  .duet img{min-height:280px}
  .stats{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:720px){
  .nav-toggle{display:block}
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column;
    align-items:flex-start; background:var(--paper); border-bottom:1px solid var(--line);
    padding:16px 22px; gap:14px;
  }
  .nav-links.open{display:flex}
  .brand span{font-size:1rem}
  .stats{grid-template-columns:1fr 1fr}
  .hero{min-height:70vh}
  .ticket{flex-direction:column}
  .ticket .date{border-right:none; border-bottom:3px dashed rgba(255,255,255,.5); flex-direction:row; gap:8px; align-items:baseline; justify-content:flex-start}
}