/* ===== Core Theme Vars ===== */
:root{
  --color-primary:#c82540;           /* Rot */
  --color-secondary:#2d469a;         /* Blau */
  --text:#0f172a;                    /* slate-900 */
  --muted:#475569;                   /* slate-600 */
  --bg:#ffffff;
  --surface:#ffffff;
  --border:#e2e8f0;                  /* slate-200 */
  --ring: color-mix(in srgb, var(--color-primary) 50%, transparent);
  --shadow: 0 10px 25px rgba(0,0,0,.08);
  --radius: 1rem;
}
html.dark{
  color-scheme:dark;
  --text:#e2e8f0; --muted:#94a3b8; --bg:#0b1020; --surface:#0f172a; --border:#1f2937; --shadow:0 10px 30px rgba(0,0,0,.45);
}

/* hidden garantiert wirklich versteckt */
[hidden] { display: none !important; }

/* Sicher mobil ausblenden */
#ctaDesktop{display:none;} /* baseline */

@media (max-width:860px){
  #ctaDesktop{display:none !important;}
}

@media (min-width:861px){
  #ctaDesktop{display:inline-flex !important;}
}



/* ===== Resets & Base ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;line-height:1.55;color:var(--text);background:var(--bg);touch-action:manipulation}
a{color:inherit;text-underline-offset:2px;text-decoration:none}
img{max-width:100%;display:block}
input,select,textarea,button{font:inherit;font-size:16px} /* verhindert iOS-Autozoom */

/* ===== Layout ===== */
.container{width:min(1100px,calc(100% - 2rem));margin-inline:auto}
.shadow{box-shadow:var(--shadow)}
.surface{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius)}
.muted{color:var(--muted)}
.row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.stack{display:grid;gap:.7rem}
.stack-lg{display:grid;gap:1rem}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:.6rem;border-radius:999px;padding:.9rem 1.2rem;font-weight:600;text-decoration:none;cursor:pointer;border:0}
.btn-primary{background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));color:#fff;position:relative;overflow:hidden;background-size:200% 100%;transition:transform .2s ease,background-position .4s ease}
.btn-primary:hover{transform:translateY(-1px);background-position:100% 0}
.btn-primary::before{content:"";position:absolute;inset:-2px;border-radius:999px;background:linear-gradient(120deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 70%);transform:translateX(-120%);transition:transform .5s ease;pointer-events:none}
.btn-primary:hover::before{transform:translateX(120%)}

.btn-outline{border:1px solid var(--border);background:transparent;color:var(--text)}
.btn:focus-visible{outline:3px solid var(--ring);outline-offset:2px}

/* Ersatz für weiße Burger-Icons */
.hamburger.btn-outline{color:var(--color-secondary);border-color:color-mix(in srgb,var(--color-secondary) 50%, var(--border));background:var(--surface)}

/* ===== Header & Nav ===== */
.header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--surface) 85%, transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.header-inner{padding:.9rem 0}
.nav{display:flex;gap:.3rem;align-items:center}
.nav a{padding:.6rem .9rem;border-radius:999px;color:var(--muted)}
.nav a:hover{background:color-mix(in srgb,var(--color-secondary) 8%, transparent)}
.nav a.active{color:var(--color-secondary);background:color-mix(in srgb,var(--color-secondary) 12%, transparent)}
.brand{display:flex;align-items:center;gap:.7rem;font-weight:700}
.brand-badge{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:999px;color:#fff;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary))}

/* Mobile nav */
.hamburger{display:none}
.mobile-panel{position:fixed;inset:0 0 0 auto;width:min(78vw,320px);background:var(--surface);border-left:1px solid var(--border);transform:translateX(100%);transition:transform .25s ease;z-index:60;padding:1rem}
.mobile-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:59}
.mobile-open .mobile-panel{transform:translateX(0)}
.mobile-open .mobile-backdrop{opacity:1;pointer-events:auto}

/* ===== Hero ===== */
section{scroll-margin-top:84px}
.hero{
  position:relative;overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.92)),
    radial-gradient(1200px 400px at 0% -10%, color-mix(in srgb,var(--color-primary) 10%, transparent), transparent 60%),
    radial-gradient(1000px 380px at 100% 110%, color-mix(in srgb,var(--color-secondary) 10%, transparent), transparent 60%);
}
.hero-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;padding-block:5rem}
.hero h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.1;margin:0 0 .8rem 0;background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:1.1rem;margin:0}
.visual{border-radius:1.25rem;border:1px solid var(--border);overflow:hidden}
.hero-points{margin-top:.9rem;display:flex;gap:1rem;flex-wrap:wrap;font-size:.95rem}
.cta-row{margin-top:1rem;display:flex;gap:.7rem;flex-wrap:wrap}

/* Glow Orbs */
.hero::before,.hero::after{content:"";position:absolute;inset:auto;filter:blur(40px);border-radius:999px;opacity:.18;pointer-events:none}
.hero::before{top:-80px;left:-120px;width:320px;height:320px;background:radial-gradient(circle at 30% 30%, var(--color-primary), transparent 60%);animation:float 10s ease-in-out infinite}
.hero::after{bottom:-120px;right:-80px;width:360px;height:360px;background:radial-gradient(circle at 70% 70%, var(--color-secondary), transparent 60%);animation:float 12s ease-in-out infinite reverse}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(16px)}}

/* ===== Sections, Cards, Grids ===== */
.section{padding-block:3.5rem;border-top:1px solid var(--border)}
.section h2{font-size:clamp(1.5rem,3.5vw,2rem);margin:0 0 .3rem 0}
.section h2::after{content:"";display:block;width:64px;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));margin-top:.5rem}
.section-head{align-items:end;margin-bottom:1rem}
.center-head{text-align:center;gap:.4rem;margin-bottom:1.1rem}

.grid{display:grid;gap:1rem}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1000px){.grid.cols-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:780px){.grid.cols-3,.grid.cols-2,.grid.cols-4{grid-template-columns:1fr}}

.card{padding:1.1rem;border-radius:1rem;border:1px solid var(--border);background:var(--surface);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow),0 8px 30px rgba(0,0,0,.06);border-color:color-mix(in srgb,var(--color-secondary) 30%, var(--border))}
.icon{display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:.8rem;background:color-mix(in srgb,var(--color-secondary) 12%, transparent);color:var(--color-secondary);font-weight:700}

.team-initials{display:grid;place-items:center;width:4rem;height:4rem;border-radius:999px;color:#fff;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));font-weight:700;margin-inline:auto}
.event{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem;border-radius:1rem;border:1px solid var(--border);transition:transform .25s ease, background .25s ease}
.event:hover{background:color-mix(in srgb,var(--color-secondary) 6%, transparent)}
.event span[aria-hidden]{display:inline-block;transition:transform .25s ease,opacity .25s ease;opacity:.4}
.event:hover span[aria-hidden]{transform:translateX(4px);opacity:1}

.ph-img{height:160px;display:grid;place-items:center;border-radius:.7rem}
.map-ph{height:240px;display:grid;place-items:center;border-radius:1rem}

/* ===== Inputs ===== */
.input{width:100%;padding:.8rem 1rem;border-radius:.7rem;border:1px solid var(--border);background:var(--surface);color:inherit}
.input:focus{outline:3px solid var(--ring);outline-offset:2px}
textarea.input{resize:vertical}
.input-money{position:relative}
.input-money .input{padding-right:2.4rem}
.input-money span{position:absolute;right:.8rem;top:50%;transform:translateY(-50%);color:var(--muted)}

/* ===== Footer ===== */
footer{padding-block:2.5rem;border-top:1px solid var(--border);font-size:.95rem}
.footer-row{flex-wrap:wrap;gap:.7rem}

/* ===== Utilities ===== */
.badge{display:inline-flex;align-items:center;gap:.4rem;border-radius:999px;padding:.4rem .7rem;background:color-mix(in srgb,var(--color-primary) 12%, transparent);color:var(--color-primary);font-weight:600;font-size:.9rem}
.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}

/* ===== Progress & Header-on-Scroll ===== */
#progress{position:fixed;top:0;left:0;height:4px;background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));width:0%;z-index:100}
.header.scrolled{box-shadow:var(--shadow);background:color-mix(in srgb,var(--surface) 95%, transparent)}

/* Desktop CTA sichtbar */
@media (min-width:861px){#ctaDesktop{display:inline-flex !important}}
.wave{line-height:0}

/* ===== Reveal on Scroll ===== */
.reveal{opacity:0;transform:translateY(18px)}
.reveal-in{opacity:1;transform:none;transition:opacity .6s ease, transform .6s ease}
@media (prefers-reduced-motion:reduce){.reveal,.reveal-in{transition:none;transform:none;opacity:1}}

/* ===== Sticky CTA (mobile) ===== */
.sticky-cta{position:fixed;right:1rem;bottom:1rem;z-index:70;box-shadow:var(--shadow)}

/* ===== Modal: Backdrop & Dialog ===== */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.45);
  backdrop-filter:blur(2px);z-index:95;
}
.modal{
  position:fixed;left:50%;top:6vh;transform:translateX(-50%) translateY(16px) scale(.98);
  opacity:0;width:min(720px,calc(100% - 1rem));
  padding:1.25rem;z-index:96;border-radius:var(--radius);
  border:1px solid var(--border);background:var(--surface);
  transition:opacity .18s ease, transform .22s ease;
  max-height:92vh;display:flex;flex-direction:column;overflow:hidden;
}
.modal[hidden], .modal-backdrop[hidden]{display:none !important}
.modal.is-open{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.modal header{flex:0 0 auto}
.modal form{flex:1 1 auto;min-height:0;overflow:auto;padding-bottom:1rem} /* Scroll im Modal mobil */
.modal-close{position:absolute;top:.8rem;right:.8rem}

.modal-progress{height:6px;background:color-mix(in srgb,var(--color-secondary) 10%, transparent);border-radius:999px;overflow:hidden;margin-bottom:1rem}
.modal-progress>span{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--color-primary),var(--color-secondary));transition:width .25s ease}

.modal-step{display:none}
.modal-step.active{display:block;animation:stepIn .18s ease}
@keyframes stepIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.modal-title{margin:0}
.modal-actions{margin-top:.5rem}

/* ===== Chips (5€, 7€, 10€) ===== */
.chips{display:flex;gap:.5rem;flex-wrap:wrap}
.chip,
.chips button{
  appearance:none;border:1px solid var(--border);background:color-mix(in srgb,var(--color-primary) 8%, transparent);
  color:var(--color-primary);border-radius:999px;padding:.55rem .9rem;font-weight:700;cursor:pointer;
}
.chip[aria-pressed="true"],
.chips button[aria-pressed="true"],
.chip.is-selected,
.chips button.is-selected{
  background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));
  color:#fff;border-color:transparent;
}

/* ===== Segmented Radio (Zahlweise) ===== */
.segmented{display:flex;gap:.5rem;flex-wrap:wrap}
.segmented label{position:relative}
.segmented label input{position:absolute;inset:0;opacity:0;pointer-events:none}
.segmented label span{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.55rem .9rem;border-radius:999px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font-weight:600;min-width:8.2rem;text-align:center;
}
.segmented label input:checked + span{
  background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));
  color:#fff;border-color:transparent;
}

/* ===== Consent / Review ===== */
.consent{justify-content:flex-start;gap:.6rem}
.review-box{padding:1rem;border-radius:.8rem}

/* ===== Mobile Tweaks ===== */
@media (max-width:860px){
  .hamburger{display:inline-flex}
  .nav-desktop{display:none}
  .hero-grid{padding-block:4rem}
}

/* ===== Close FAB (Daumen-Reach) ===== */
.modal-close-fab{
  position:fixed;right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom));
  z-index:97;border-radius:999px;box-shadow:var(--shadow);
  padding:.7rem 1rem;background:var(--surface);border:1px solid var(--border);color:var(--text);
}

/* ===== Info Rows ===== */
.info-row{justify-content:flex-start;gap:.6rem}

/* Optional hübsch: Kopieren-Feedback */
#donateCopy:active { transform: translateY(1px); }

/* News-Karten: Footer immer nach unten, Button rechts */
.news-card{display:flex;flex-direction:column;height:100%}
.news-card .post-footer{
  margin-top:auto;              /* Footer an den Kartenboden schieben */
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap
}
.news-card .post-tags{display:flex;gap:.4rem;flex-wrap:wrap}
.news-card .btn-readmore{margin-left:auto} /* Button nach rechts */


/* Einheitliche Thumbs für News-Karten */
.news-thumb{
  aspect-ratio: 16 / 9;     /* feste Höhe aus Breite abgeleitet */
  width: 100%;
  overflow: hidden;
  border-radius: .7rem;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--color-secondary) 6%, transparent);
}
.news-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;        /* gleichmäßig füllen, ggf. beschneiden */
  display: block;
}

/* Auch für die Hero-Grafik in der Einzelansicht */
.post-hero{
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--border);
  margin-bottom: 1rem;
}
.post-hero img{ width:100%; height:100%; object-fit:cover; display:block }

/* Fallback für sehr alte Browser ohne aspect-ratio */
@supports not (aspect-ratio: 1 / 1) {
  .news-thumb, .post-hero{ position: relative; height: 0; padding-bottom: 56.25%; }
  .news-thumb img, .post-hero img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
}