/* =========================================================
   Yunus Emre Camii — Design-System
   Markenfarben aus Farben.html · Mobile-First · Hell/Dunkel
   ========================================================= */

:root {
  /* Marken-Paletten */
  --navy-900:#0D141C; --navy-800:#0E2340; --blue-700:#173A67;
  --blue-500:#245CAE; --blue-300:#A8C3EA;
  --teal-500:#06A6A3; --teal-300:#8FE6E4; --teal-050:#E6FAFA;
  --gold-500:#E0A41C; --gold-300:#ECD693; --gold-050:#FBF6E9;
  --red-500:#C01017;  --red-300:#F2A29F;  --red-050:#FDECEC;

  /* Helles Theme (Standard) */
  --bg:#F6F8FA;
  --bg-alt:#EEF1F4;
  --surface:#FFFFFF;
  --text:#0D141C;
  --muted:#6E7A86;
  --border:#E0E5EA;
  --primary:var(--blue-700);
  --primary-ink:#FFFFFF;
  --accent:var(--teal-500);
  --gold:var(--gold-500);
  --danger:var(--red-500);

  --header-h:74px;
  --header-h-stuck:62px;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 8px 30px rgba(13,20,28,.10);
  --shadow-sm:0 2px 10px rgba(13,20,28,.08);
  --maxw:1140px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
}

html[data-theme="dark"] {
  --bg:#0D141C;
  --bg-alt:#0E2340;
  --surface:#13243B;
  --text:#EEF1F4;
  --muted:#9BA6B1;
  --border:#1E3556;
  --primary:var(--blue-500);
  --primary-ink:#FFFFFF;
  --accent:var(--teal-300);
  --gold:var(--gold-300);
  --shadow:0 8px 30px rgba(0,0,0,.45);
  --shadow-sm:0 2px 10px rgba(0,0,0,.35);
}

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

/* ---------------- Icons ---------------- */
.ic { flex:none; vertical-align:middle; }
.btn .ic { width:18px; height:18px; }
.meta-ic { width:16px; height:16px; vertical-align:-3px; margin-right:.4rem; color:var(--accent); flex:none; }
.list-ic { width:17px; height:17px; vertical-align:-3px; margin-right:.5rem; color:var(--accent); }
/* Hell-/Dunkel-Umschalter: passendes Icon je Theme zeigen */
.theme-toggle .i-sun { display:none; }
.theme-toggle .i-moon { display:block; }
html[data-theme="dark"] .theme-toggle .i-sun { display:block; }
html[data-theme="dark"] .theme-toggle .i-moon { display:none; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .3s var(--ease), color .3s var(--ease);
}
img { max-width:100%; display:block; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { line-height:1.2; font-weight:800; letter-spacing:-.01em; }
.container { max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.section { padding:64px 0; }
.section-alt { background:var(--bg-alt); }
.eyebrow { color:var(--accent); font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; }
.muted { color:var(--muted); }

/* ---------------- Buttons ---------------- */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.4rem; border-radius:999px; font-weight:700;
  border:1px solid transparent; cursor:pointer; font-size:1rem;
  transition:transform .15s var(--ease), background .2s, box-shadow .2s; text-decoration:none;
}
.btn:hover { transform:translateY(-2px); text-decoration:none; }
.btn-primary { background:var(--primary); color:var(--primary-ink); box-shadow:var(--shadow-sm); }
.btn-accent  { background:var(--accent); color:#03312F; }
.btn-gold    { background:var(--gold); color:#3A2A03; }
.btn-ghost   { background:transparent; color:var(--text); border-color:var(--border); }
.btn-block   { width:100%; justify-content:center; }

/* ---------------- Header (verschmilzt mit Wallpaper) ---------------- */
.site-header {
  position:fixed; top:0; left:0; right:0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  background:transparent;
  transition:background .35s var(--ease), height .35s var(--ease),
             box-shadow .35s var(--ease), backdrop-filter .35s var(--ease);
}
/* dezenter Verlauf für Lesbarkeit über dem Bild */
.site-header::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(13,20,28,.55), rgba(13,20,28,0));
  opacity:1; transition:opacity .35s var(--ease);
}
.site-header.is-stuck::before { opacity:0; }

.site-header .container { display:flex; align-items:center; justify-content:space-between; width:100%; }
.brand { display:flex; align-items:center; gap:.7rem; color:#fff; font-weight:800; }
.brand img { height:42px; width:auto; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); transition:height .35s var(--ease); }
.brand .brand-text { line-height:1.1; }
.brand .brand-text small { display:block; font-weight:500; font-size:.72rem; opacity:.85; }

/* Navigation hell, solange über dem Bild */
.nav { display:flex; align-items:center; gap:.3rem; }
.nav a {
  color:#fff; font-weight:600; padding:.5rem .85rem; border-radius:999px;
  font-size:.95rem; transition:background .2s, color .2s;
}
.nav a:hover, .nav a.active { background:rgba(255,255,255,.18); text-decoration:none; }

/* Zustand nach dem Scrollen: löst sich vom Bild, wird zur soliden Leiste */
.site-header.is-stuck {
  height:var(--header-h-stuck);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  box-shadow:var(--shadow);
}
.site-header.is-stuck .brand { color:var(--text); }
.site-header.is-stuck .brand img { height:36px; filter:none; }
.site-header.is-stuck .nav a { color:var(--text); }
.site-header.is-stuck .nav a:hover, .site-header.is-stuck .nav a.active {
  background:var(--primary); color:var(--primary-ink);
}

.header-actions { display:flex; align-items:center; gap:.5rem; }
.icon-btn {
  width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.12); color:#fff; display:grid; place-items:center;
  cursor:pointer; transition:background .2s,color .2s,border-color .2s; font-size:1.1rem;
}
.site-header.is-stuck .icon-btn { border-color:var(--border); background:var(--bg-alt); color:var(--text); }
.icon-btn:hover { background:var(--primary); color:#fff; }

.nav-toggle { display:none; }

/* ---------------- Hero / Wallpaper ---------------- */
.hero {
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  color:#fff; overflow:hidden;
}
.hero-bg {
  position:absolute; inset:0; z-index:-2;
  background:#0d141c center/cover no-repeat;
}
.hero::after { /* Abdunklung für Kontrast */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(13,20,28,.45) 0%, rgba(13,20,28,.35) 40%, rgba(13,20,28,.78) 100%);
}
.hero-inner { padding-top:var(--header-h); width:100%; }
.hero-copy {
  max-width:640px;
  padding:1rem 1.15rem 1.1rem;
  background:rgba(13,20,28,.36);
  border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 14px 42px rgba(0,0,0,.20);
}
.hero h1 { font-size:clamp(2.1rem, 6vw, 4rem); text-shadow:0 4px 30px rgba(0,0,0,.5); }
.hero-copy h1 { font-size:2.25rem; }
.hero-subtitle {
  margin-top:.4rem;
  font-size:1.05rem;
  font-weight:700;
  color:var(--teal-300);
  text-shadow:0 2px 12px rgba(0,0,0,.45);
}
.hero .lead { font-size:1.05rem; max-width:560px; margin-top:.8rem; opacity:.95; text-shadow:0 2px 12px rgba(0,0,0,.5); }
.hero .welcome { font-size:.95rem; opacity:.9; }
.scroll-hint {
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  color:#fff; opacity:.85; font-size:1.6rem; animation:bounce 2s infinite;
}
@keyframes bounce { 0%,100%{transform:translate(-50%,0)} 50%{transform:translate(-50%,10px)} }

/* Schnellzugriff-Buttons im Hero */
.quick-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
  margin-top:1.5rem; max-width:560px;
}
.quick-card {
  display:flex; align-items:center; gap:.8rem; padding:1rem 1.1rem;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22);
  border-radius:var(--radius); color:#fff; font-weight:700;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background .2s, transform .15s;
}
.quick-card:hover { background:rgba(255,255,255,.26); transform:translateY(-3px); text-decoration:none; }
.quick-card .qi { font-size:1.5rem; display:inline-flex; }
.quick-card .qi .ic { width:26px; height:26px; }

/* ---------------- Karten / Grids ---------------- */
.grid { display:grid; gap:20px; }
.grid-3 { grid-template-columns:repeat(3,1fr); }
.grid-2 { grid-template-columns:repeat(2,1fr); }
.card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.4rem; box-shadow:var(--shadow-sm);
}
.card h3 { margin-bottom:.4rem; }
.section-head { display:flex; align-items:end; justify-content:space-between; margin-bottom:1.6rem; gap:1rem; flex-wrap:wrap; }
.section-head h2 { font-size:clamp(1.5rem,3.5vw,2.1rem); }

/* Gebetszeiten-Widget */
.prayer-widget { background:linear-gradient(135deg,var(--blue-700),var(--navy-800)); color:#fff; border:none; }
.prayer-next { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.prayer-next .next-name { font-size:1.4rem; font-weight:800; color:var(--teal-300); }
.countdown { font-variant-numeric:tabular-nums; font-size:2rem; font-weight:800; letter-spacing:.02em; }
.prayer-row { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-top:1.2rem; }
.prayer-cell { text-align:center; background:rgba(255,255,255,.1); border-radius:var(--radius-sm); padding:.7rem .3rem; }
.prayer-cell .pn { font-size:.72rem; opacity:.85; text-transform:uppercase; letter-spacing:.05em; }
.prayer-cell .pt { font-weight:800; font-size:1.05rem; margin-top:.2rem; }
.prayer-cell.is-next { outline:2px solid var(--teal-300); background:rgba(6,166,163,.25); }

/* Ankündigungen */
.ann { border-left:4px solid var(--accent); padding-left:1rem; }
.ann.pinned { border-color:var(--gold); }
.badge { display:inline-block; font-size:.72rem; font-weight:700; padding:.2rem .6rem; border-radius:999px; background:var(--teal-050); color:#055; }
html[data-theme="dark"] .badge { background:rgba(6,166,163,.2); color:var(--teal-300); }

/* Spendenziel-Balken */
.progress { height:12px; background:var(--bg-alt); border-radius:999px; overflow:hidden; margin:.6rem 0; }
.progress > span { display:block; height:100%; background:linear-gradient(90deg,var(--teal-500),var(--gold-500)); border-radius:999px; }
.goal-meta { display:flex; justify-content:space-between; font-size:.9rem; font-weight:700; }

/* Tabellen */
.table-wrap { overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border); }
table { width:100%; border-collapse:collapse; background:var(--surface); }
th,td { padding:.75rem 1rem; text-align:left; border-bottom:1px solid var(--border); white-space:nowrap; }
th { background:var(--bg-alt); font-size:.82rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
tr:last-child td { border-bottom:none; }
tr.today td { background:color-mix(in srgb, var(--accent) 12%, transparent); font-weight:700; }

/* Formulare */
.form-group { margin-bottom:1.1rem; }
label { display:block; font-weight:600; margin-bottom:.35rem; font-size:.95rem; }
input,select,textarea {
  width:100%; padding:.8rem .9rem; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--text); font-size:1rem; font-family:inherit;
}
input:focus,select:focus,textarea:focus { outline:2px solid var(--accent); border-color:var(--accent); }
.field-error { color:var(--danger); font-size:.85rem; margin-top:.3rem; }
.hp { position:absolute; left:-9999px; }      /* Honeypot */
.alert { padding:1rem 1.2rem; border-radius:var(--radius-sm); margin-bottom:1.4rem; font-weight:600; }
.alert-success { background:var(--teal-050); color:#044; border:1px solid var(--teal-300); }
.alert-error { background:var(--red-050); color:#7a0b10; border:1px solid var(--red-300); }
html[data-theme="dark"] .alert-success { background:rgba(6,166,163,.15); color:var(--teal-300); }
html[data-theme="dark"] .alert-error { background:rgba(192,16,23,.18); color:var(--red-300); }

/* Footer */
.site-footer { background:var(--navy-900); color:#cdd6e0; padding:48px 0 28px; margin-top:40px; }
.site-footer h4 { color:#fff; margin-bottom:.8rem; }
.site-footer a { color:#9fb4d4; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:32px; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); margin-top:28px; padding-top:18px; font-size:.85rem; color:#8290a3; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

/* Mobile-Menü-Overlay */
.mobile-menu {
  position:fixed; inset:0; z-index:200; background:var(--navy-900);
  display:flex; flex-direction:column; padding:2rem; gap:.5rem;
  transform:translateX(100%); transition:transform .3s var(--ease); visibility:hidden;
}
.mobile-menu.open { transform:translateX(0); visibility:visible; }
.mobile-menu a { color:#fff; font-size:1.3rem; font-weight:700; padding:.8rem 0; border-bottom:1px solid rgba(255,255,255,.1); }
.mobile-menu .close { align-self:flex-end; font-size:2rem; background:none; border:none; color:#fff; cursor:pointer; }

/* ---------------- Responsive ---------------- */
@media (max-width:860px){
  .nav { display:none; }
  .nav-toggle { display:grid; }
  .grid-3 { grid-template-columns:1fr; }
  .grid-2 { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:22px; }
  .prayer-row { grid-template-columns:repeat(3,1fr); }
  .quick-grid { grid-template-columns:1fr 1fr; }
  .hero-copy h1 { font-size:1.85rem; }
  .section { padding:48px 0; }
}
@media (max-width:480px){
  .quick-grid { grid-template-columns:1fr; }
  .hero-copy { padding:.9rem; }
  .hero-copy h1 { font-size:1.45rem; }
  .hero-subtitle { font-size:.95rem; }
  .brand .brand-text small { display:none; }
}

/* Zugänglichkeit: reduzierte Bewegung */
@media (prefers-reduced-motion:reduce){
  * { animation:none !important; scroll-behavior:auto !important; transition:none !important; }
}
.skip-link { position:absolute; left:-9999px; top:0; background:var(--primary); color:#fff; padding:.6rem 1rem; z-index:999; }
.skip-link:focus { left:8px; top:8px; }