/* ============================================================
   SV Azadî Lübeck e.V. — Stylesheet v2
   Design-Linie: Kampagne 2023 + Azadî-Cup-Plakat
   Signatur: vertikales Streifenband, Brush-Banner,
   organische Inseln, Gras-Kanten, Print-Textur
   ============================================================ */

/* ---------- Fonts (selbst gehostet, DSGVO-konform) ---------- */
@font-face {
  font-family: 'Alfa Slab One';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/alfaslabone-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/sourcesans3-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/sourcesans3-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: italic; font-weight: 600; font-display: swap;
  src: url('../fonts/sourcesans3-600-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans 3';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/sourcesans3-700-normal.woff2') format('woff2');
}

/* ---------- Design-Token ---------- */
:root {
  --rot: #dd3a30;
  --rot-tief: #c22c23;
  --gelb: #f0b32c;
  --gelb-hell: #f8e9c4;
  --gruen: #2e8b57;   /* EIN Primärgrün für Bänder, Gras, Brush, Ribbon */
  --nacht: #17321f;
  --ink: #2b3a31;
  --grau: #64706a;
  --papier: #fffdf8;
  --wolke: #f2f1ec;
  --radius: 26px;
  --display: 'Alfa Slab One', 'Georgia', serif;
  --sans: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  --maxw: 1120px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

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

body {
  font-family: var(--sans);
  font-size: 1.075rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--gruen); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* ---------- Typo ---------- */
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.14; }
h1 { font-size: clamp(2.5rem, 5.6vw, 4rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); margin-bottom: .55em; }
h3 { font-size: 1.3rem; margin-bottom: .35em; }

.eyebrow {
  font-style: italic; font-weight: 600;
  font-size: 1.08rem; letter-spacing: .01em;
  display: block; margin-bottom: .6em;
}
.eyebrow--gelb  { color: var(--gelb); }
.eyebrow--rot   { color: var(--rot); }
.eyebrow--gruen { color: var(--gruen); }

.rot { color: var(--rot); }
.gruen { color: var(--gruen); }

/* ---------- Brush-Banner (Plakat-Signatur) ---------- */
.brush {
  position: relative;
  display: inline-block;
  padding: 13px 34px 15px;
  font-weight: 700;
  font-size: 1.06rem;
  color: #fff;
  text-decoration: none;
  transition: transform .15s ease;
  isolation: isolate;
}
.brush::before {
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--gruen);
  -webkit-mask: url('../img/brush.svg') center / 100% 100% no-repeat;
          mask: url('../img/brush.svg') center / 100% 100% no-repeat;
}
.brush:hover { transform: translateY(-2px) rotate(-.4deg); }
.brush--rot::before  { background: var(--rot); }
.brush--gelb        { color: var(--ink); }
.brush--gelb::before { background: var(--gelb); }

/* schmaler Brush als Label/Datum */
.brush--label {
  padding: 8px 36px 10px;
  font-size: .95rem;
  font-style: italic;
}

/* Text-Link mit Pfeil (sekundäre Aktion) */
.link-pfeil {
  font-weight: 700; font-size: 1.05rem;
  color: var(--gruen); text-decoration: none;
  border-bottom: 2.5px solid var(--gelb);
  padding-bottom: 2px;
}
.link-pfeil:hover { border-color: var(--gruen); }

/* ---------- Header / Nav ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,253,248,.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #e7e5de;
}
.nav {
  max-width: var(--maxw); margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; gap: 26px;
}
.nav__logo { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.nav__logo img { width: 50px; height: auto; }
.nav__logo span { font-family: var(--display); font-size: 1rem; color: var(--gruen); line-height: 1.08; }
.nav__links { display: flex; align-items: center; gap: 24px; list-style: none; }
.nav__links a { text-decoration: none; color: var(--ink); font-weight: 600; font-size: .99rem; }
.nav__links a:hover { color: var(--gruen); }
.nav__links .brush { padding: 8px 22px 10px; font-size: .93rem; }
.nav__links a.brush { color: #fff; }
.nav__links a.brush:hover { color: #fff; }
.nav__burger { display: none; background: none; border: none; cursor: pointer; padding: 6px; }
.nav__burger span { display: block; width: 26px; height: 3px; background: var(--ink); margin: 5px 0; border-radius: 2px; }

/* ---------- Streifenband (Flyer-Signatur) ----------
   Läuft bündig unter die folgende Insel: negativer
   Margin schiebt die Streifen hinter den Blob. */
.ribbon-gap {
  display: flex; justify-content: center;
  height: 170px;
  margin-bottom: -46px;
  position: relative; z-index: 0;
  background: var(--papier);
}
.ribbon-gap svg { height: 100%; width: auto; }

/* ---------- Hero: Mannschaftsfoto mit dunkelgrünem Verlauf ---------- */
.hero {
  position: relative;
  text-align: center;
  padding: 92px 24px 0;
  overflow: hidden;
  color: #fff;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; }
.hero__bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(23,50,31,.38) 0%,
    rgba(23,50,31,.52) 55%,
    rgba(23,50,31,.72) 100%);
}
.hero__inner { position: relative; z-index: 2; max-width: 780px; margin: 0 auto; }
.hero h1 span { display: block; }
.hell { color: #fff; }
.gelb-txt { color: var(--gelb); }
.nur-mobil { display: none; }
@media (max-width: 560px) { .nur-mobil { display: inline; } }
.hero__wappen {
  width: min(180px, 46vw);
  margin: 0 auto 28px;
}
/* Schattenfarbe: dunkles Grün statt Schwarz — harmoniert mit dem Rasen */
:root { --schatten: 9, 42, 24; }
.hero__logo {
  width: 100%;
  filter: drop-shadow(0 6px 12px rgba(var(--schatten),.5))
          drop-shadow(0 18px 38px rgba(var(--schatten),.45));
}
.hero h1 {
  margin-bottom: .3em;
  text-shadow: 0 4px 10px rgba(var(--schatten),.5), 0 12px 34px rgba(var(--schatten),.55);
}
.hero .eyebrow, .p-hero .eyebrow {
  text-shadow: 0 2px 6px rgba(var(--schatten),.55), 0 6px 18px rgba(var(--schatten),.5);
}
.hero p.lead {
  font-size: 1.22rem; max-width: 36em;
  margin: 0 auto 1.5em;
  color: rgba(255,255,255,.96);
  text-shadow: 0 2px 8px rgba(var(--schatten),.55), 0 8px 24px rgba(var(--schatten),.45);
}
.hero .link-pfeil { text-shadow: 0 2px 8px rgba(var(--schatten),.55); filter: drop-shadow(0 6px 14px rgba(var(--schatten),.4)); }
.hero .brush::before, .p-hero .brush::before {
  filter: drop-shadow(0 4px 8px rgba(var(--schatten),.45)) drop-shadow(0 12px 26px rgba(var(--schatten),.4));
}
.hero .link-pfeil { color: #fff; }
.hero__cta {
  display: flex; gap: 22px; justify-content: center; align-items: center;
  flex-wrap: wrap;
  margin-bottom: 72px;
}
.hero .grass { position: relative; z-index: 2; }

/* Gras-Kante */
.grass { display: block; width: 100%; height: auto; margin-bottom: -1px; }
.grass--fuss { transform: none; }

/* ---------- Grünes Band ----------
   Gras-Kante (fill #2e8b57) und Band sind EINE Fläche:
   der Verlauf startet exakt im Grün der Halme und läuft
   sanft dunkler aus — das gibt Tiefe ohne Bruchkante. */
.band {
  position: relative;
  background: linear-gradient(180deg, #2e8b57 0%, #29794d 55%, #246b44 100%);
  color: #fff;
}
.stats__inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 46px 24px 40px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 24px; text-align: center;
}
.stats__inner b { font-family: var(--display); font-weight: 400; font-size: 2.05rem; display: block; color: var(--gelb); line-height: 1.15; }
.stats__inner span { font-weight: 600; font-size: .97rem; opacity: .95; }

/* roter Unterstreifen wie auf dem Plakat */
.band__strip {
  background: linear-gradient(180deg, #cb372c 0%, #b12b21 100%);
  text-align: center;
  padding: 10px 20px 12px;
  font-style: italic; font-weight: 600;
  font-size: 1rem; color: #fff;
}

/* ---------- Sektionen ---------- */
.section { padding: 88px 0; }
#teams { padding-bottom: 30px; }
#sponsoren { padding-bottom: 30px; }
.section__head { max-width: 46em; margin-bottom: 46px; }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------- Team-Karten ---------- */
.teams__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(23,50,31,.09);
  display: flex; flex-direction: column;
  position: relative;
}
.card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .25s ease;
}
.card:hover .card__media img { transform: scale(1.045); }
.card__body { padding: 20px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.card__liga { font-style: italic; font-weight: 600; font-size: .93rem; color: var(--grau); margin-bottom: 13px; }
.card p { font-size: .99rem; flex: 1; }
.card__body > a { font-weight: 700; text-decoration: none; margin-top: 16px; }
.card__body > a:hover { text-decoration: underline; }
.badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: var(--gelb); color: var(--ink);
  font-size: .78rem; font-weight: 700;
  padding: 4px 13px; border-radius: 999px;
  box-shadow: 0 3px 10px rgba(23,50,31,.25);
}
.badge--rot { background: var(--rot); color: #fff; }

/* ---------- Engagement-Insel (Flyer-Blob) ---------- */
.insel-außen { padding: 0 0 90px; background: transparent; }
.insel {
  position: relative; z-index: 1;
  max-width: 980px; margin: 0 auto;
  background: linear-gradient(180deg, #f5f4f0 0%, #eeede6 100%);
  border-radius: 58% 42% 55% 45% / 46% 54% 46% 54%;
  padding: clamp(56px, 8vw, 96px) clamp(34px, 8vw, 110px);
  text-align: center;
}
.insel--klein {
  max-width: 880px;
  border-radius: 45% 55% 48% 52% / 55% 46% 54% 45%;
  padding: clamp(46px, 6vw, 72px) clamp(30px, 7vw, 90px);
}
.insel .herz { position: absolute; width: 34px; height: auto; }
.herz--1 { top: 14%; left: 12%; transform: rotate(-14deg); }
.herz--2 { top: 22%; right: 11%; transform: rotate(12deg); width: 26px; }
.herz--3 { bottom: 15%; left: 18%; transform: rotate(8deg); width: 24px; }
.insel p { max-width: 38em; margin-left: auto; margin-right: auto; }
.insel .cta-zeile { margin-top: 28px; }

/* ---------- Azadî-Cup (grünes Plakat-Band) ---------- */
.cup { text-align: center; padding: 0 0 0; }
.cup__band { padding: 74px 24px 80px; position: relative; }
.cup__band h2 { color: #fff; }
.cup__band p { max-width: 40em; margin: 0 auto 1.6em; color: #fff; }
.cup__datum { margin-bottom: 1.4em; }

/* ---------- Sponsoren ---------- */
.sponsoren__grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 16px; margin: 42px 0 34px;
}
.sponsoren__logo {
  background: #fff; border-radius: 16px;
  padding: 16px 18px; min-height: 96px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 5px 18px rgba(23,50,31,.07);
}
.sponsoren__logo img {
  max-height: 62px; width: auto; max-width: 100%;
  object-fit: contain;
  filter: grayscale(18%);
  transition: filter .2s ease, transform .2s ease;
}
.sponsoren__logo:hover img { filter: none; transform: scale(1.04); }

/* ---------- Instagram ---------- */
.insta__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin: 34px auto 30px; max-width: 720px;
}
.insta__grid a {
  display: block; border-radius: 18px; overflow: hidden;
  box-shadow: 0 8px 22px rgba(23,50,31,.14);
  transition: transform .18s ease;
}
.insta__grid a:hover { transform: translateY(-4px) rotate(-.5deg); }
.insta__grid img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; }
.insta__handles { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-top: 30px; }
.insta__handle {
  display: flex; align-items: center; gap: 13px;
  background: #fff; border-radius: 999px;
  padding: 13px 28px;
  box-shadow: 0 6px 18px rgba(23,50,31,.08);
  text-decoration: none; color: var(--ink);
  font-weight: 700; font-size: 1.07rem;
  transition: transform .15s ease;
}
.insta__handle:hover { transform: translateY(-2px); }
.insta__handle svg { width: 25px; height: 25px; }

/* ---------- Mitglied-CTA ---------- */
.mitglied { text-align: center; padding: 90px 24px 96px; }
.mitglied p { max-width: 37em; margin: 0 auto 1.7em; }

/* ---------- Footer (dunkelgrünes Plakat-Band) ---------- */
.footer {
  /* startet exakt im Grün der Gras-Kante darüber */
  background: linear-gradient(180deg, #17321f 0%, #122718 60%, #0d1e12 100%);
  color: #cfdcd2;
  padding: 58px 0 32px;
  font-size: .98rem;
}
.footer__grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; margin-bottom: 42px; }
.footer h3 { color: #fff; font-size: 1.02rem; font-family: var(--sans); font-weight: 700; margin-bottom: .8em; }
.footer a { color: #cfdcd2; text-decoration: none; }
.footer a:hover { color: var(--gelb); }
.footer ul { list-style: none; }
.footer li { margin-bottom: .45em; }
/* Logo im Footer: plastische 3D-Optik auf dunklem Grund —
   feine Lichtkante oben + gestaffelte dunkle Schatten */
.footer__logo {
  width: 96px; margin-bottom: 18px;
  filter:
    drop-shadow(0 -1px 0 rgba(255,255,255,.22))
    drop-shadow(0 3px 4px rgba(0,0,0,.35))
    drop-shadow(0 10px 18px rgba(0,0,0,.28));
}
.footer__legal {
  border-top: 1px solid rgba(255,255,255,.16);
  padding-top: 22px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: .9rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
  .stats__inner { grid-template-columns: repeat(2, 1fr); }
  .teams__grid { grid-template-columns: repeat(2, 1fr); }
  .sponsoren__grid { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1fr; }
  .ribbon-gap { height: 110px; }
  .insel, .insel--klein { border-radius: 40px; }
  .insel .herz { display: none; }

  .nav__links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--papier);
    flex-direction: column; align-items: flex-start;
    padding: 18px 24px 24px; gap: 16px;
    border-bottom: 1px solid #e7e5de;
  }
  .nav__links.open { display: flex; }
  .nav__burger { display: block; }
}
@media (max-width: 560px) {
  .teams__grid { grid-template-columns: 1fr; }
  .sponsoren__grid { grid-template-columns: repeat(2, 1fr); }
  .hero__bg::after {
    background: linear-gradient(180deg,
      rgba(23,50,31,.72) 0%,
      rgba(23,50,31,.66) 55%,
      rgba(23,50,31,.85) 100%);
  }
  .hero__wappen { width: 150px; }
  .badge { position: static; align-self: flex-start; margin-bottom: 8px; }
  .card::before { position: static; display: block; margin-bottom: 12px; }
  .card h3 { margin-top: 0; }
}

/* ============================================================
   Unterseiten
   ============================================================ */

/* kompakter Seiten-Hero */
.p-hero {
  position: relative;
  text-align: center;
  padding: 130px 24px 120px;
  overflow: hidden;
  color: #fff;
}
.p-hero .hero__bg::after {
  background: linear-gradient(180deg,
    rgba(23,50,31,.5) 0%,
    rgba(23,50,31,.62) 100%);
}
.p-hero__inner { position: relative; z-index: 2; max-width: 720px; margin: 0 auto; }
.p-hero h1 {
  font-size: clamp(2.1rem, 4.5vw, 3.1rem); margin-bottom: .25em;
  text-shadow: 0 4px 10px rgba(var(--schatten),.5), 0 12px 34px rgba(var(--schatten),.55);
}
.p-hero p {
  color: rgba(255,255,255,.96); max-width: 34em; margin: 0 auto;
  text-shadow: 0 2px 8px rgba(var(--schatten),.55), 0 8px 24px rgba(var(--schatten),.45);
}
.p-hero .grass { position: relative; z-index: 2; }

/* Team-Blöcke */
.team-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 48px; align-items: center;
  padding: 56px 0;
}
.team-row + .team-row { border-top: 1px solid #e7e5de; }
.team-row__foto { border-radius: var(--radius); overflow: hidden; box-shadow: 0 12px 32px rgba(23,50,31,.12); }
.team-row__foto img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/10; }
.team-row:nth-child(even) .team-row__foto { order: 2; }
.zeilen { list-style: none; margin: 18px 0 22px; }
.zeilen li { padding: 9px 0; border-bottom: 1px dashed #ddd8cf; display: flex; gap: 14px; }
.zeilen li strong { min-width: 150px; color: var(--gruen); }
.hinweis { font-size: .92rem; color: var(--grau); font-style: italic; }

/* Vorstand / Werte-Karten */
.personen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.person { background: #fff; border-radius: var(--radius); padding: 30px 26px; text-align: center; box-shadow: 0 8px 24px rgba(23,50,31,.08); }
.person__rolle { font-style: italic; font-weight: 600; color: var(--gelb); }
.person h3 { margin: 2px 0 8px; }

/* Formular */
.formular { display: grid; gap: 16px; max-width: 620px; margin: 0 auto; text-align: left; }
.formular label { font-weight: 700; font-size: .97rem; }
.formular input, .formular select, .formular textarea {
  font: inherit; width: 100%;
  padding: 12px 16px;
  border: 2px solid #ddd8cf; border-radius: 14px;
  background: #fff; color: var(--ink);
}
.formular input:focus, .formular select:focus, .formular textarea:focus {
  outline: none; border-color: var(--gruen);
}
.formular .zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
button.brush { border: none; background: none; cursor: pointer; font-family: var(--sans); justify-self: center; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; font-weight: 400; }
.check input { width: auto; margin-top: 5px; }

/* Downloads */
.downloads { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 760px; margin: 0 auto; }
.download {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border-radius: 18px; padding: 20px 22px;
  box-shadow: 0 6px 20px rgba(23,50,31,.08);
  text-decoration: none; color: var(--ink); font-weight: 700;
  transition: transform .15s ease;
}
.download:hover { transform: translateY(-3px); }
.download svg { width: 34px; height: 34px; flex: none; }
.download small { display: block; font-weight: 400; color: var(--grau); }

/* Schritte */
.schritte { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; counter-reset: schritt; }
.schritt { background: #fff; border-radius: var(--radius); padding: 30px 26px; box-shadow: 0 8px 24px rgba(23,50,31,.08); text-align: center; }
.schritt::before {
  counter-increment: schritt; content: counter(schritt);
  display: inline-block; font-family: var(--display);
  width: 52px; height: 52px; line-height: 52px; font-size: 1.5rem;
  background: var(--gelb); color: var(--ink); border-radius: 50%;
  margin-bottom: 14px;
}

/* Rechtstexte */
.recht { max-width: 46em; }
.recht h2 { font-size: 1.5rem; margin-top: 1.6em; }
.recht h3 { font-size: 1.1rem; font-family: var(--sans); font-weight: 700; margin-top: 1.3em; }
.recht p, .recht ul { margin-bottom: .8em; }
.recht ul { padding-left: 1.2em; }

/* Rückmeldung Formular */
.form-ok { background: var(--gruen); color: #fff; padding: 16px 22px; border-radius: 14px; font-weight: 600; }

@media (max-width: 860px) {
  .team-row { grid-template-columns: 1fr; gap: 24px; padding: 42px 0; }
  .team-row:nth-child(even) .team-row__foto { order: 0; }
  .personen, .schritte { grid-template-columns: 1fr; }
  .downloads { grid-template-columns: 1fr; }
  .formular .zeile { grid-template-columns: 1fr; }
}

/* Wolke-Flächen mit sanftem Verlauf (Plastizität) */
.section--wolke,
.mitglied--wolke {
  background: linear-gradient(180deg, #f5f4f0 0%, #edece5 100%);
}