/* assets/css/style.css
   Basis + Navigation + Dropdown (korrigiert) + Form-Wrapper (responsive)
   Hinweise:
   - Nur Dropdown-Block und Form-Wrapper sind neu/angepasst.
   - Andere Styles unverändert.
*/

/* ---- Grundlegendes ---- */
:root{
  --max-width:1100px;
  --accent:#0b6b58;
  --accent-light:#2a8a6e;
  --muted:#666;
  --bg:#ffffff;
  --card-bg:#fafafa;

  /* NEU: Akzent für Dropdown (dunkler für bessere Lesbarkeit) */
  --dropdown-bg: #066a57;
  --dropdown-hover-overlay: rgba(255,255,255,0.06);
}

*{box-sizing:border-box}
body{font-family:Inter,system-ui,Arial,sans-serif;margin:0;color:#222;background:var(--bg);line-height:1.45}
.container{max-width:var(--max-width);margin:1.6rem auto;padding:0 1rem}
.wrap{max-width:var(--max-width);margin:0 auto;padding:0 1rem}

/* ---- Header / Navigation ---- */
.site-header{background:linear-gradient(90deg,var(--accent),#066a57);color:#fff;position:relative;z-index:20}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;padding:0.7rem 0}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none}
.brand-logo{width:36px;height:36px}
.brand-text{font-weight:700}

/* Hauptnavigation */
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:0.4rem;align-items:center}
.main-nav a, .dropbtn{
  color:#fff;
  text-decoration:none;
  padding:.45rem .6rem;
  border-radius:6px;
  display:inline-block;
  background:transparent;
  border:0;
  cursor:pointer;
  font-size:0.95rem;
}

/* aktive Links */
.main-nav a.active, .dropbtn.active{background:rgba(255,255,255,0.08);text-decoration:underline}


/* ===============================
   DROPDOWN (bereinigt & robust)
   - ersetzt die mehrfachen/konfligierenden Regeln
   - funktioniert per :hover (Desktop) und per .open (Touch/JS)
   =============================== */
/* ==== DROPDOWN (robust für Desktop + Mobile) ==== */

/* Stelle sicher, dass Header Elemente nicht das Dropdown clippen */
.site-header, .site-header .wrap {
  overflow: visible; /* WICHTIG: verhindert Abschneiden / Clipping des absolut positionierten Menüs */
}

/* Positionierung & Stacking */
.dropdown {
  position: relative;
  z-index: 9999; /* hoch genug, damit das Menü oberhalb anderer Elemente liegt */
}

/* Das Dropdown-Menü: direkt angrenzend (kein Abstand), pointer-events aktiv */
.dropdown .dropdown-menu {
  position: absolute;
  top: 100%;               /* WICHTIG: direkt an die Unterkante des Parent <li> anschließen (keine Lücke) */
  left: 0;
  min-width: 200px;
  width: max-content;
  background: #066a57;     /* dunkles Grün für gute Lesbarkeit */
  color: #fff;
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.13);
  display: none;           /* wird sichtbar durch :hover / .open / :focus-within */
  padding: 0.25rem 0;
  pointer-events: auto;
  z-index: 9999;           /* doppelt abgesichert */
}

/* Menuitems */
.dropdown .dropdown-menu a {
  display: block;
  padding: 0.55rem 1rem;
  color: #fff;
  text-decoration: none;
}
.dropdown .dropdown-menu a:hover,
.dropdown .dropdown-menu a:focus {
  background: rgba(255,255,255,0.06);
}

/* Sichtbar machen: Desktop Hover + Touch/JS + Keyboard */
.dropdown:hover > .dropdown-menu,
.dropdown.open > .dropdown-menu,
.dropdown:focus-within > .dropdown-menu {
  display: block;
}

/* Mobile: kein absolute positioning (fließt mit) — vermeidet Positionierungsprobleme auf sehr kleinen Viewports */
@media (max-width: 700px) {
  .dropdown .dropdown-menu {
    position: static;
    box-shadow: none;
    padding: 0.2rem 0;
    border-radius: 6px;
  }
}

/* ===============================
   ENDE Dropdown
   =============================== */


/* ---- Hero (Startseite) ---- */
.hero-centered{padding:2.8rem 1rem;text-align:center}
.logo-wrap{display:flex;justify-content:center;margin-bottom:0.6rem}
/* ---- für Breites Logo auf Startseite neu, Backup:  .hero-logo{width:160px;height:auto;border-radius:12px} ---- */
.hero-logo {
  width: 100%;       /* nimmt die komplette Breite des Containers */
  height: auto;      /* Höhe proportional, damit das Logo nicht verzerrt */
  max-width: 100%;   /* verhindert, dass es über den Rand hinausgeht */
  display: block;    /* entfernt kleine "Lücken" durch inline-Images */
}
.hero-title{margin:.3rem 0 .1rem;font-size:2rem;color:var(--accent)}
.hero-sub{color:var(--muted);margin-top:0}

/* ---- Form-Wrapper (NEU: zentrale Styles für Google-Form) ----
   - Breite: 100% des Containers (passt sich an Gerät an)
   - max-width: verhindert zu breite Darstellung auf sehr großen Bildschirmen
   - min-height: lediglich ein Startwert; Höhe kann gescrollt werden
*/
.form-wrapper {
  width: 100%;
  max-width: 1000px;   /* anpassen falls gewünscht */
  margin: 0.6rem auto;
}

.form-wrapper iframe {
  width: 100%;         /* WICHTIG: sorgt dafür, dass die Breite immer passt */
  min-height: 900px;   /* Höhe egal für dich — iframe scrollt intern */
  border: 0;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* kleineres Gerät: evtl. mehr Höhe, wenn Formular mobil länger ist (optional) */
@media (max-width: 600px) {
  .form-wrapper iframe {
    min-height: 1200px;
  }
}

/* ---- Zwei Karten auf Startseite: jetzt FULL WIDTH stacked (untereinander) ---- */
.two-cards{display:block;margin-top:1.2rem}
.two-cards .card{width:100%;margin-bottom:1rem;background:var(--card-bg);border:1px solid #eee;padding:1.1rem;border-radius:10px}

/* ---- Buttons / Links ---- */
.btn{display:inline-block;background:var(--accent);color:#fff;padding:.45rem .8rem;border-radius:8px;text-decoration:none}
.link{color:var(--accent)}

/* ---- Footer ---- */
.site-footer{background:#f4f4f4;padding:1rem 0;margin-top:2rem;text-align:center;color:var(--muted)}

/* ---- Hintergrund-Logo für 'other' Seiten ---- */
body.has-bg::before{
  content:"";
  position:fixed;
  left:50%;
  top:80px;
  transform:translateX(-50%);
  width:420px;
  height:420px;
  background-image:url('/assets/images/logo.svg');
  background-repeat:no-repeat;
  background-size:contain;
  opacity:0.06;
  pointer-events:none;
  z-index:0;
}

/* 15.11.25: Qr-Code für Spendenseite skalieren */ 
.qr-code {
  width: 50%;    /* z.B. 1/2 der Containerbreite */
  height: auto;
  max-width: 400px;  /* nicht zu groß */
  min-width: 200px;  /* nicht zu klein */
  display: block;      /* wichtig! */
  margin-right: auto;   /* schiebt es nach links */
}


/* Inhalte sollen über dem Hintergrund liegen */
.container, .site-header, .site-footer{position:relative;z-index:10}

/* ---- Mobile: nav wrap ---- */
@media(max-width:700px){
  .main-nav ul{flex-direction:column;background:transparent;gap:0.15rem}
  .site-header .wrap{flex-direction:column;align-items:stretch}
  /* mobile dropdown handled above (position:static) */
}