/* ============================================================
   RYDERS4GOOD - Public Shared CSS
   Gemeinsame Basis-/Komponenten-Styles fuer die oeffentlichen
   Seiten (index, about, events, galerie, friends): Reset,
   Farbvariablen, Footer, Seiten-Intro-Hero, WhatsApp-Button.
   Nav/Mobile-App-Bar bewusst NICHT hier drin - die kommen aus
   assets/includes/nav_public.php (eigener <style>-Block dort).
============================================================ */

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

html { scroll-behavior: smooth; }

:root {
      --navy:#0f172a; --navy2:#1e293b; --navy3:#334155;
      --red:#D93F2C; --red2:#b91c1c; --blue:#235385; --blue2:#1d4ed8; --gold:#f59e0b;
      --light:#e2e8f0; --muted:#94a3b8; --white:#ffffff;
      --radius:14px; --shadow:0 20px 60px rgba(0,0,0,0.5);
    }

body { font-family:'Segoe UI',system-ui,-apple-system,sans-serif; background:var(--navy); color:var(--light); line-height:1.6; overflow-x:hidden; }

a { color:inherit; text-decoration:none; }

img { max-width:100%; display:block; }

.section-label { font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--red); margin-bottom:.75rem; }

.page-intro-eyebrow { display:inline-flex; align-items:center; gap:.5rem; font-size:.78rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.25); padding:.35rem .9rem; border-radius:99px; margin-bottom:1.5rem; }

.page-intro-eyebrow::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--gold); display:inline-block; }

.page-intro-title { font-size:clamp(2rem,4.5vw,3.6rem); font-weight:900; line-height:1.1; letter-spacing:-.02em; color:var(--white); margin-bottom:1.25rem; }

.page-intro-title em { font-style:normal; background:linear-gradient(135deg,var(--red),#f97316); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

.page-intro-sub { font-size:1.05rem; color:rgba(226,232,240,0.72); max-width:520px; line-height:1.75; }

.r4g-footer { background:rgba(2,6,23,0.95); border-top:1px solid rgba(148,163,184,0.08); padding:4rem 2rem 2rem; }

.footer-inner { max-width:1280px; margin:0 auto; }

.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:3rem; margin-bottom:3rem; }

.footer-brand img { height:42px; width:auto; margin-bottom:1rem; }

.footer-brand p { font-size:.85rem; color:var(--muted); line-height:1.7; max-width:260px; }

.footer-social { display:flex; gap:.75rem; margin-top:1.25rem; }

.footer-social a { width:36px; height:36px; border-radius:10px; background:rgba(30,41,59,0.8); border:1px solid rgba(148,163,184,0.1); display:flex; align-items:center; justify-content:center; transition:all .2s; }

.footer-social a:hover { background:rgba(148,163,184,0.1); border-color:rgba(148,163,184,0.25); }

.footer-social svg { width:16px; height:16px; fill:var(--muted); }

.footer-col h4 { font-size:.78rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--light); margin-bottom:1.1rem; }

.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.6rem; }

.footer-col ul a { font-size:.85rem; color:var(--muted); transition:color .2s; }

.footer-col ul a:hover { color:var(--white); }

.footer-bottom { border-top:1px solid rgba(148,163,184,0.08); padding-top:1.75rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; font-size:.78rem; color:var(--muted); }

.footer-bottom a { color:var(--muted); transition:color .2s; }

.footer-bottom a:hover { color:var(--white); }

.wa-float-tooltip { position:absolute; right:70px; top:50%; transform:translateY(-50%); background:#1a1a1a; color:#fff; font-size:.82rem; font-weight:600; white-space:nowrap; padding:.4rem .9rem; border-radius:8px; opacity:0; pointer-events:none; transition:opacity .2s; }

.wa-float:hover { transform:scale(1.1) translateY(-2px); box-shadow:0 10px 32px rgba(37,211,102,0.6),0 4px 12px rgba(0,0,0,0.35); }

.wa-float:hover .wa-float-tooltip { opacity:1; }

.wa-float svg { width:30px; height:30px; fill:#fff; }

@media (max-width:768px) {
  body { padding-bottom:calc(62px + env(safe-area-inset-bottom,0px)); }
  .wa-float { bottom:calc(72px + env(safe-area-inset-bottom,0px)); }
}