/* ------------------------------------------------------------------
   Feuerwehr Waidbruck – modern.css (2025)
   Full stylesheet: Light + Dark, Header + Layout + Admin
-------------------------------------------------------------------*/

/* ---------- Design-Tokens ---------- */

:root{
  --brand:#B5121B;
  --brand-700:#7A0E14;

  --ink:#1C1C1E;
  --muted:#6B6B6B;

  --bg:#F7F8FA;
  --surface:#FFFFFF;
  --surface-elev:#FFFFFF;

  --border:#E1E4E8;
  --border-strong:#D5D9DE;

  --hover:rgba(181,18,27,.06);
  --ring:rgba(181,18,27,.45);

  --shadow-1:0 1px 2px rgba(16,24,40,.05);
  --shadow-2:0 8px 16px rgba(16,24,40,.08);

  --r:8px;
  --maxw:1200px;
}

/* ---------- Global ---------- */

*{box-sizing:border-box;}

html{scroll-behavior:smooth;}

body{
  margin:0;
  font-family:'Roboto Flex',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

/* Hellmodus: Soft Mist (ruhig, leicht dunkler, sehr fein) */
html:not([data-theme="dark"]) body {
  background-color: var(--bg);

  background-image:
    /* sehr großer, weicher Spot oben links */
    radial-gradient(
      circle at 10% 0%,
      rgba(0, 0, 0, 0.06),
      transparent 65%
    ),
    /* großer, noch softer Spot mittig rechts */
    radial-gradient(
      circle at 85% 40%,
      rgba(0, 0, 0, 0.04),
      transparent 70%
    ),
    /* ganz leichter vertikaler Verlauf für etwas Tiefe */
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.03),
      transparent 30%,
      transparent 70%,
      rgba(0, 0, 0, 0.035)
    );

  /* große Flächen -> ruhig fürs Auge */
  background-size:
    900px 900px,
    820px 820px,
    100% 100%;

  background-attachment: fixed;
}

/* Hellmodus: Soft Gradient Grid */
html:not([data-theme="dark"]) body {
  background-color: var(--bg);

  background-image:
    radial-gradient(circle at 0 0,
      rgba(0, 0, 0, 0.06),
      transparent 60%),
    radial-gradient(circle at 100% 0,
      rgba(0, 0, 0, 0.05),
      transparent 55%),
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.04) 1px,
      transparent 1px),
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.04) 1px,
      transparent 1px);

  /* große, entspannte Struktur */
  background-size:
    420px 420px,    /* Spot links oben  */
    380px 380px,    /* Spot rechts oben */
    120px 120px,    /* vertikale Linien */
    120px 120px;    /* horizontale Linien */

  background-attachment: fixed;
}

/* Darkmode: Soft Gradient Grid (ruhig, weich, modern) */
html[data-theme="dark"] body {
  background-color: var(--bg);

  background-image:
    /* weicher Spot oben links */
    radial-gradient(
      circle at 0 0,
      rgba(255, 255, 255, 0.07),
      transparent 60%
    ),

    /* weicher Spot oben rechts */
    radial-gradient(
      circle at 100% 0,
      rgba(255, 255, 255, 0.05),
      transparent 55%
    ),

    /* vertikale Linien – sehr dezent sichtbar */
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.03) 1px,
      transparent 1px
    ),

    /* horizontale Linien – gleiche Stärke */
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.03) 1px,
      transparent 1px
    );

  /* gleiche Struktur wie im Hellmodus – nur invertiert */
  background-size:
    420px 420px,
    380px 380px,
    120px 120px,
    120px 120px;

  background-attachment: fixed;
}





img,svg,video{max-width:100%;height:auto;display:block;}

a{color:var(--brand);text-decoration:none;}
a:hover{text-decoration:underline;text-underline-offset:2px;}

:focus-visible{
  outline:2px solid var(--ring);
  outline-offset:3px;
  border-radius:4px;
}

/* ---------- Layout-Helfer ---------- */

.container{
  max-width:var(--maxw);
  margin-inline:auto;
  padding:clamp(16px,3vw,32px);
}

.section{
  margin-block:clamp(24px,3vw,48px);
}

.grid{
  display:grid;
  gap:clamp(12px,2vw,20px);
}
@media (min-width:720px){
  .grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}
}

.row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

.center{text-align:center;}
.small{font-size:.925rem;}
.muted{color:var(--muted);}

/* Seite mit einheitlicher Maximalbreite */

.page-wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(16px,3vw,32px);
}

.page-wrap--narrow{
  max-width:800px;
}

/* ---------- Buttons ---------- */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 14px;
  border-radius:6px;
  border:1px solid var(--brand-700);
  background:var(--brand);
  color:#fff;
  font-weight:600;
  font-size:0.95rem;
  box-shadow:var(--shadow-1);
  cursor:pointer;
  transition:transform .12s ease,filter .12s ease,background .12s ease,border-color .12s ease;
}

.btn:hover{
  filter:brightness(1.05);
  text-decoration:none;
}

.btn:active{
  transform:translateY(1px);
}

.btn.secondary{
  background:#fff;
  color:var(--brand-700);
  border-color:var(--border-strong);
}

.btn.secondary:hover{
  background:#fdf2f2;
  border-color:var(--brand);
}

.btn.ghost{
  background:transparent;
  border:1px solid var(--border);
  color:var(--ink);
}

.btn.ghost:hover{
  background:var(--hover);
  border-color:var(--brand);
  color:var(--brand);
}

/* ==================================================================
   HEADER & NAVIGATION
   passt zu app/partials/header.php + app.js
================================================================== */

/* Haupt-Header mit rotem Verlauf */
.site-header{
  position:sticky;
  top:0;
  z-index:40;
  background:linear-gradient(90deg,#8f0e16,#b5121b,#d21c26);
  color:#fff;
  border-bottom:1px solid rgba(0,0,0,.18);
}

.site-header-inner{
  display:flex;
  align-items:center;
  gap:16px;
  max-width:var(--maxw);
  margin:0 auto;
  padding:10px 16px;
}

/* Brand mit Emblem */
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#fff;
}

.brand-mark{
  width:32px;
  height:32px;
  flex:0 0 32px;
  object-fit:contain;
  filter:brightness(0) invert(1); /* Logo weiß */
}

.brand-title{
  font-weight:700;
  letter-spacing:.2px;
  line-height:1.2;
  color:#fff;
}

/* Navigation (Desktop) */
.main-nav{
  display:flex;
  gap:8px;
  margin-left:auto;
}

.nav-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 14px;
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.24);
  font-weight:500;
  box-shadow:var(--shadow-1);
  white-space:nowrap;
}

.nav-link:hover,
.nav-link.is-active{
  background:#fff;
  color:var(--brand-700);
  border-color:#fff;
  text-decoration:none;
}

/* Theme-Toggle rechts */
.theme-toggle{
  margin-left:12px;
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.08);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:var(--shadow-1);
  padding:0;
}

.theme-toggle img{
  width:26px;
  height:26px;
  filter:brightness(0) invert(1); /* Icons weiß */
}

/* --- Burger-Button (nur Mobile) ----------------------------- */

/* auf Desktop ausblenden */
.nav-toggle {
  display: none;
}

/* auf Mobile einblenden und stylen */
@media (max-width: 960px) {
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 14px;                           /* weniger rund */
    border: 1px solid rgba(255, 255, 255, 0.35);   /* dezente Linie */
    background: rgba(0, 0, 0, 0.22);               /* dunkler, weniger „Gummibärchen“ */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    cursor: pointer;
  }

  .nav-toggle span {
    position: relative;
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
  }

  .nav-toggle span::before,
  .nav-toggle span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
  }

  .nav-toggle span::before {
    top: -6px;   /* Abstand zur oberen Linie */
  }

  .nav-toggle span::after {
    top: 6px;    /* Abstand zur unteren Linie */
  }
}


/* ---------- Mobile Navigation ---------- */

@media (max-width:820px){

  .site-header-inner{
    padding:8px 12px;
  }

  /* Brand links, Icons rechts */
  .main-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:linear-gradient(180deg,#8f0e16,#b5121b,#d21c26);
    padding:12px 16px 16px;
    flex-direction:column;
    gap:8px;
    display:none;
  }

  .main-nav.open{
    display:flex;
  }

  .nav-link{
    width:100%;
    justify-content:flex-start;
    border-radius:999px;
    background:rgba(255,255,255,.95);
    color:#b5121b;
    border-color:#fff;
    box-shadow:0 6px 16px rgba(0,0,0,.25);
  }

  .nav-link:hover,
  .nav-link.is-active{
    background:#fff;
    color:#b5121b;
  }

  .nav-toggle{
    display:inline-flex;
  }
}

/* ==================================================================
   Cards, Hero, Sektionen
================================================================== */

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:6px;
  box-shadow:var(--shadow-1);
  overflow:hidden;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-2);
  border-color:var(--border-strong);
}
.card>.card-media img{
  width:100%;
  height:220px;
  object-fit:cover;
}
.card .card-body{padding:16px;}
.card h3{
  margin:0 0 6px 0;
  font-size:clamp(18px,2.1vw,20px);
  line-height:1.3;
}
.card p{margin:0 0 10px;}

.hero{
  padding:clamp(22px,4vw,48px);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:6px;
  box-shadow:var(--shadow-1);
}

.hero-photo{position:relative;}
.hero-photo img{filter:brightness(.98) contrast(1.04);}
.hero-photo::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.04),transparent 40%);
  pointer-events:none;
}

.slogan{
  margin-top:10px;
  color:var(--muted);
}

.band{
  padding:clamp(16px,3vw,24px);
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--surface);
}
.band.alt{
  background:#F3F4F6;
  border-color:var(--border);
}

.section-title{
  position:relative;
  padding-left:12px;
  margin:0 0 8px;
}
.section-title::before{
  content:"";
  position:absolute;
  left:0;
  top:.2em;
  width:4px;
  height:1.2em;
  background:linear-gradient(180deg,var(--brand),var(--brand-700));
  border-radius:2px;
}

.jumpnav{
  overflow-x:auto;
  white-space:nowrap;
  padding-bottom:6px;
  border-bottom:1px solid var(--border);
  margin-top:8px;
}
.jumpnav .btn{
  display:inline-block;
  margin-right:8px;
}

/* HERO SLIDESHOW ---------------------------------------- */

.hero-slideshow{
  position:relative;
  border-radius:8px;
  overflow:hidden;
  min-height:220px;
  color:#fff;
  background:#000;
}

/* Hintergrund-Slides */
.hero-slide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  transform:scale(1.03);
  transition:opacity 1.2s ease, transform 1.2s ease;
}
.hero-slide.is-active{
  opacity:1;
  transform:scale(1);
}

/* Inhalt oben drauf */
.hero-slideshow-inner{
  position:relative;
  z-index:1;
  padding:18px 16px 20px;
  background:linear-gradient(120deg,rgba(0,0,0,0.55),rgba(0,0,0,0.15) 55%,rgba(0,0,0,0));
  min-height:220px;
  display:flex;
  align-items:flex-end;
}

.hero-slideshow-text h2{
  margin:0 0 6px 0;
  font-size:1.5rem;
}

.hero-slideshow-text p{
  margin:0 0 10px 0;
  max-width:32rem;
}

.hero-slideshow-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

/* Desktop: größerer Hero */
@media (min-width:900px){
  .hero-slideshow{
    min-height:280px;
  }
  .hero-slideshow-inner{
    padding:24px 28px 26px;
    align-items:center;
  }
  .hero-slideshow-text h2{
    font-size:2rem;
  }
}

/* Darkmode: etwas weniger schwarzer Verlauf, damit es nicht "zu dunkel" wird */
html[data-theme="dark"] .hero-slideshow-inner{
  background:linear-gradient(120deg,rgba(0,0,0,0.65),rgba(0,0,0,0.25) 55%,rgba(0,0,0,0));
}

/* ==================================================================
   Mannschaft / Member-Listen
================================================================== */

.role-badge{
  display:inline-block;
  padding:.2rem .5rem;
  border-radius:4px;
  font-size:.85rem;
  color:#fff;
  background:linear-gradient(90deg,var(--brand),var(--brand-700));
}

.member-list{
  columns:1;
  column-gap:24px;
  padding:0;
  margin:8px 0 0 0;
  list-style:none;
}
.member-list li{
  break-inside:avoid;
  padding:6px 0;
  border-bottom:1px solid var(--border);
  transition:color .15s ease;
}
.member-list li:hover{
  color:var(--brand);
  font-weight:600;
}
@media (min-width:720px){
  .member-list{columns:2;}
}
@media (min-width:1024px){
  .member-list{columns:3;}
}

/* ==================================================================
   Footer
================================================================== */

.site-footer{
  border-top:1px solid var(--border);
  background:var(--surface);
  color:var(--ink);
}

.footer-grid{
  display:grid;
  gap:16px;
}
@media (min-width:720px){
  .footer-grid{grid-template-columns:1fr 1fr;}
}

.ft-title{
  margin:8px 0 6px 0;
  font-size:1.05rem;
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  font-size:0.9rem;
}

/* Hellmodus: dunkler Footer */
html:not([data-theme="dark"]) .site-footer{
  background:#23262B;
  color:#fff;
  border-top:1px solid #2A2D33;
}
html:not([data-theme="dark"]) .site-footer a{
  color:#E7E9ED;
}
html:not([data-theme="dark"]) .site-footer a:hover{
  color:#ffffff;
}

/* ==================================================================
   Reveal-Effekt
================================================================== */

.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.is-visible{
  opacity:1;
  transform:none;
}

/* ==================================================================
   DARK MODE v2
================================================================== */

html[data-theme="dark"]{
  --bg:#0F1116;
  --surface:#161A22;
  --surface-elev:#1C212B;
  --border:#2A313C;
  --border-strong:#39424F;
  --ink:#E7E9ED;
  --muted:#B3BAC4;
  --brand:#E34950;
  --brand-700:#B5121B;
  --hover:rgba(227,73,80,.14);
  --ring:rgba(227,73,80,.42);
  --shadow-1:0 1px 2px rgba(0,0,0,.38);
  --shadow-2:0 10px 20px rgba(0,0,0,.48);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .site-footer{
  background:var(--bg)!important;
  color:var(--ink)!important;
  border-color:var(--border)!important;
}

html[data-theme="dark"] .card,
html[data-theme="dark"] .hero,
html[data-theme="dark"] .band{
  background:var(--surface)!important;
  color:var(--ink)!important;
  border-color:var(--border)!important;
}
html[data-theme="dark"] .band.alt{
  background:var(--surface-elev)!important;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] p{
  color:var(--ink)!important;
}
html[data-theme="dark"] .muted{
  color:var(--muted)!important;
}

html[data-theme="dark"] .site-header{
  /* etwas weicherer Verlauf, besser passend zum dunklen Hintergrund */
  background:linear-gradient(90deg,#18080c,#3a0f15,#5b1218);
  border-bottom:1px solid #2A313C;
}
html[data-theme="dark"] .brand,
html[data-theme="dark"] .nav-link{
  color:#fff;
}
html[data-theme="dark"] .brand-mark{
  filter:brightness(1.2) drop-shadow(0 0 3px rgba(0,0,0,.8));
}
html[data-theme="dark"] .nav-link{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.15);
}
html[data-theme="dark"] .nav-link:hover,
html[data-theme="dark"] .nav-link.is-active{
  background:#fff;
  color:#b5121b;
}

/* Darkmode Mobile-Navi */
@media (max-width:820px){
  html[data-theme="dark"] .main-nav{
    background:linear-gradient(180deg,#2b0a10,#611016,#8a151c);
  }
}

/* ==================================================================
   Formulare / Login / Admin
================================================================== */

.form-stacked .form-row{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:12px;
}

.form-stacked label{
  font-size:0.9rem;
  font-weight:500;
}

.form-stacked input,
.form-stacked textarea,
.form-stacked select{
  border-radius:6px;
  border:1px solid var(--border);
  padding:8px 10px;
  font:inherit;
  background:#fff;
}
html[data-theme="dark"] .form-stacked input,
html[data-theme="dark"] .form-stacked textarea,
html[data-theme="dark"] .form-stacked select{
  background:#161a22;
  border-color:#2a313c;
  color:var(--ink);
}

/* Alerts */
.alert{
  padding:0.75rem 1rem;
  border-radius:6px;
  font-size:0.9rem;
}
.alert-error{
  background:#FEE2E2;
  color:#991B1B;
  border:1px solid #FCA5A5;
}

/* Admin-spezifisch */
.btn.danger{
  background:var(--brand);
  color:#fff;
  border-color:var(--brand);
}
.btn.danger:hover{
  background:#b31218;
  border-color:#b31218;
  color:#fff;
}

/* Rote Statusmeldungen im Adminbereich (z.B. Benutzer angelegt / gelöscht) */
.alert-admin{
  margin-bottom:1rem;
  padding:0.75rem 1rem;
  border-radius:8px;
  border:1px solid #a4161a;
  background:rgba(164,22,26,0.08);
  color:#a4161a;
  font-size:0.9rem;
}

/* Benutzerverwaltung: Tabellenhinweis */
.table-scroll-hint{
  font-size:0.8rem;
  color:var(--muted);
  margin-top:6px;
}