@charset "UTF-8";
@font-face{font-family:'Fredoka';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/fredoka-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/fredoka-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Fredoka';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/fredoka-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/poppins-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/poppins-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/poppins-latin-600-normal.woff2') format('woff2');}

/* =========================================================================
   EISLEBEN BLEIBT BUNT – Community-Plattform
   styles.css – Design-Tokens + Layout + Komponenten
   ========================================================================= */

:root{
  /* Marken-Palette */
  --indigo:#1E1B4B;
  --violet:#7C3AED;
  --violet-dark:#6D28D9;
  --pink:#DB2777;
  --pink-dark:#BE185D;
  --orange:#F97316;
  --amber:#FBBF24;
  --teal:#14B8A6;
  --teal-dark:#0F766E;
  --green:#22C55E;
  --blue:#3B82F6;

  --gradient-hero: linear-gradient(135deg,var(--indigo) 0%,#4C1D95 18%,var(--violet) 36%,var(--pink) 54%,var(--orange) 72%,var(--amber) 90%);
  --gradient-brand: linear-gradient(90deg,var(--violet),var(--pink));

  /* Regenbogen-Reihenfolge fuer Karten-Akzentstreifen (das "Signatur-Element") */
  --rb-1:#EF4444; --rb-2:#F97316; --rb-3:#FBBF24; --rb-4:#22C55E; --rb-5:#3B82F6; --rb-6:#8B5CF6;

  --gray-50:#F9FAFB; --gray-100:#F3F4F6; --gray-200:#E5E7EB; --gray-300:#D1D5DB;
  --gray-400:#9CA3AF; --gray-500:#6B7280; --gray-600:#4B5563; --gray-700:#374151;
  --gray-900:#111827; --gray-950:#0A0D14;

  --radius-sm:.6rem; --radius:1rem; --radius-lg:1.5rem;
  --shadow-sm:0 2px 8px rgba(17,24,39,.06);
  --shadow-md:0 8px 24px rgba(17,24,39,.10);
  --shadow-lg:0 20px 48px rgba(17,24,39,.18);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
body{
  font-family:'Poppins','Segoe UI',system-ui,-apple-system,sans-serif;
  color:var(--gray-900);
  background:
    radial-gradient(circle at 8% 8%, rgba(124,58,237,.06), transparent 38%),
    radial-gradient(circle at 92% 15%, rgba(219,39,119,.05), transparent 40%),
    radial-gradient(circle at 50% 95%, rgba(20,184,166,.05), transparent 42%),
    #fff;
  background-attachment:fixed;
  line-height:1.55;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button, input, textarea, select{font-family:inherit;font-size:1rem;}
button{cursor:pointer;border:none;background:none;}
ul{list-style:none;}
h1,h2,h3,h4{font-family:'Fredoka','Segoe UI',system-ui,-apple-system,sans-serif;font-weight:700;letter-spacing:-.01em;line-height:1.15;}

::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:var(--gray-100);}
::-webkit-scrollbar-thumb{background:linear-gradient(to bottom,var(--violet),var(--pink));border-radius:4px;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;}
}

.container{max-width:1200px;margin:0 auto;padding:0 1.25rem;}
.section{padding:3.5rem 0;}
@media(min-width:768px){.section{padding:5rem 0;}}
.section-alt{background:linear-gradient(135deg,#F5F3FF 0%,#FDF2F8 55%,#F0FDFA 100%);}
.page-tint-violet{background:linear-gradient(180deg,#F5F3FF 0%,#fff 26rem);}
.page-tint-warm{background:linear-gradient(180deg,#FFF7ED 0%,#fff 26rem);}
.page-tint-teal{background:linear-gradient(180deg,#F0FDFA 0%,#fff 26rem);}
.page-tint-cool{background:linear-gradient(180deg,#EFF6FF 0%,#fff 26rem);}
.page-tint-rose{background:linear-gradient(180deg,#FFF1F2 0%,#fff 26rem);}
.page-tint-green{background:linear-gradient(180deg,#F0FDF4 0%,#fff 26rem);}

.about-cta-grid{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center;}
@media(min-width:900px){.about-cta-grid{grid-template-columns:1.05fr 1fr;gap:3rem;}}
.about-cta-text h2{margin-top:.5rem;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem;}
.about-cta-underline{display:block;width:3.2rem;height:4px;border-radius:2px;background:var(--pink);margin:.5rem 0 1.1rem;}
.about-cta-text p{color:var(--gray-700);margin-bottom:1.5rem;}

.about-collage-wrap{position:relative;padding:1.5rem 0;}
.about-collage-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;z-index:0;}
.about-collage-blob.c1{top:-2rem;left:2%;width:13rem;height:13rem;background:var(--pink);}
.about-collage-blob.c2{bottom:-2rem;right:6%;width:15rem;height:15rem;background:var(--teal);}
.about-collage-blob.c3{top:45%;left:42%;width:11rem;height:11rem;background:var(--amber);}
.about-collage{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;max-width:23rem;margin:0 auto;}
.collage-tile{width:100%;aspect-ratio:4/5;background:#fff;padding:.5rem;border-radius:1rem;box-shadow:var(--shadow-lg);overflow:hidden;transition:transform .3s;}
.collage-tile:hover{transform:scale(1.06) rotate(0deg) !important;z-index:5;}
.collage-tile[data-action="open-collage-lightbox"]{cursor:zoom-in;}
.collage-tile img{width:100%;height:100%;object-fit:cover;border-radius:.6rem;display:block;}
.collage-placeholder{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--gray-100),var(--gray-50));}
.collage-placeholder span{font-size:2.4rem;opacity:.55;}
@media(max-width:560px){.about-collage{max-width:17rem;}}

.quicklinks-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;}
@media(min-width:640px){.quicklinks-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1080px){.quicklinks-grid{grid-template-columns:repeat(5,1fr);}}
.quicklink-card{background:#fff;border-radius:var(--radius);padding:1.6rem 1.4rem;box-shadow:var(--shadow-sm);border:1px solid var(--gray-100);transition:transform .25s,box-shadow .25s;display:block;}
.quicklink-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.ql-icon{width:2.9rem;height:2.9rem;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:1rem;}
.quicklink-card h3{font-size:1.05rem;margin-bottom:.5rem;}
.quicklink-card p{color:var(--gray-600);font-size:.87rem;margin-bottom:.9rem;}
.ql-link{font-weight:800;font-size:.8rem;color:var(--pink);display:inline-flex;align-items:center;gap:.3rem;}
/* ---- Startseite: Willkommens-Eyebrow im Hero ---- */
.hero-eyebrow{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem 1.1rem;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);color:#fff;font-weight:700;font-size:.78rem;letter-spacing:.03em;margin-bottom:1.2rem;backdrop-filter:blur(3px);}

/* ---- Startseite: Leitgedanke-Zitat ---- */
.home-quote{position:relative;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:2.4rem 2rem 2rem;max-width:44rem;margin:3.5rem auto 0;text-align:center;}
.home-quote::before{content:'';position:absolute;top:0;left:12%;right:12%;height:4px;border-radius:0 0 2px 2px;background:linear-gradient(90deg,var(--rb-1),var(--rb-2),var(--rb-3),var(--rb-4),var(--rb-5),var(--rb-6));}
.home-quote-mark{font-family:'Fredoka';font-size:3rem;line-height:1;color:var(--violet);opacity:.3;display:block;margin-bottom:-.5rem;}
.home-quote p{font-family:'Fredoka';font-size:1.3rem;font-weight:600;color:var(--gray-900);line-height:1.4;}
.home-quote .source{display:block;margin-top:1rem;font-size:.85rem;font-weight:700;color:var(--gray-500);}

/* Haltungs-Diagramm (z.B. "Hass & Hetze 0%" vs. "Unsere Werte 10/10") */
.stat-bars{max-width:38rem;margin:0 auto;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:2rem 1.75rem;}
.stat-bar-row{margin-bottom:1.6rem;}
.stat-bar-row:last-child{margin-bottom:0;}
.stat-bar-label{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:.5rem;font-weight:700;color:var(--gray-800);font-size:1.02rem;}
.stat-bar-value{font-family:'Fredoka';font-weight:700;font-size:1.15rem;}
.stat-bar-track{width:100%;height:1.1rem;border-radius:999px;background:var(--gray-100);overflow:hidden;}
.stat-bar-fill{height:100%;border-radius:999px;transition:width .6s ease;}
.stat-bar-fill.is-empty{width:.6rem;}

/* Haltungs-Diagramm — vertikales Balkendiagramm */
.haltung-chart{max-width:44rem;margin:0 auto;background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:2.25rem 1.75rem 1.25rem;}
.haltung-chart-plot{display:grid;grid-template-columns:2.1rem 1fr;column-gap:.5rem;}
.haltung-yaxis{display:flex;flex-direction:column;justify-content:space-between;height:230px;padding-bottom:1px;font-family:'Fredoka';font-weight:600;font-size:.7rem;color:var(--gray-400);text-align:right;}
.haltung-bars-wrap{position:relative;height:230px;}
.haltung-gridlines{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;}
.haltung-gridlines span{display:block;border-top:1px dashed var(--gray-200);}
.haltung-gridlines span:last-child{border-top:1px solid var(--gray-300);}
.haltung-bars{position:relative;height:100%;display:flex;align-items:flex-end;gap:clamp(.4rem,1.8vw,1rem);padding:0 .25rem;}
.haltung-bar-col{flex:1;height:100%;display:flex;align-items:flex-end;}
.haltung-bar{width:100%;min-height:6px;border-radius:.5rem .5rem 0 0;transition:height .8s cubic-bezier(.22,1,.36,1);box-shadow:0 2px 6px rgba(17,24,39,.08);}
.haltung-chart-labels{display:grid;grid-template-columns:2.1rem 1fr;column-gap:.5rem;margin-top:.75rem;}
.haltung-chart-labels-inner{display:flex;gap:clamp(.4rem,1.8vw,1rem);padding:0 .25rem;}
.haltung-chart-labels-inner span{flex:1;font-family:'Fredoka';font-weight:600;font-size:.72rem;line-height:1.2;text-align:center;white-space:normal;overflow-wrap:break-word;}
@media (max-width:640px){
  .haltung-chart{padding:1.75rem 1rem 1.25rem;}
  .haltung-yaxis,.haltung-bars-wrap{height:170px;}
  .haltung-chart-labels-inner span{font-size:.6rem;}
}

/* ---- Startseite: Naechster Termin ---- */
.home-next-event{max-width:36rem;margin:0 auto;}

/* ---- Startseite: Abschluss-CTA-Band ---- */
.home-cta-band{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;background:var(--gradient-brand);border-radius:var(--radius-lg);padding:2.2rem 2.4rem;box-shadow:var(--shadow-md);color:#fff;}
.home-cta-band h2{font-size:1.5rem;margin-bottom:.4rem;color:#fff;}
.home-cta-band p{color:rgba(255,255,255,.9);font-size:.95rem;max-width:32rem;margin:0;}
.home-cta-actions{display:flex;gap:.8rem;flex-wrap:wrap;flex-shrink:0;}

/* ---- Shop ---- */
/* Warme Eigenoptik fuer den Shop-Bereich: rundere Schrift (Fredoka fuer
   Ueberschriften, Poppins fuer Fliesstext) statt Segoe UI, warmes Creme
   statt kuehlem Grau/Weiss, Terracotta/Amber-Akzente statt Violett. */
#page-shop{
  background:
    radial-gradient(circle at 12% 10%, rgba(249,115,22,.07), transparent 42%),
    radial-gradient(circle at 90% 20%, rgba(251,191,36,.08), transparent 45%),
    radial-gradient(circle at 50% 100%, rgba(219,39,119,.05), transparent 45%),
    #FFFBF6;
}
.shop-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;}
@media(min-width:640px){.shop-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1000px){.shop-grid{grid-template-columns:repeat(3,1fr);}}
.shop-skeleton-card{background:#FFFEFC;border-radius:var(--radius);overflow:hidden;box-shadow:0 3px 14px rgba(194,65,12,.08);border:1px solid #FBEAD9;}
.shop-skeleton-img{width:100%;aspect-ratio:4/3;background:linear-gradient(90deg,#FFF6EA 25%,#FBEAD9 37%,#FFF6EA 63%);background-size:400% 100%;animation:shopSkeletonPulse 1.4s ease-in-out infinite;}
.shop-skeleton-line{height:.85rem;margin:1.1rem 1.3rem;border-radius:.4rem;background:linear-gradient(90deg,#FFF6EA 25%,#FBEAD9 37%,#FFF6EA 63%);background-size:400% 100%;animation:shopSkeletonPulse 1.4s ease-in-out infinite;}
.shop-skeleton-line.short{width:55%;}
@keyframes shopSkeletonPulse{0%{background-position:100% 0;}100%{background-position:0 0;}}
.shop-category-section{margin-bottom:2.4rem;}
.shop-category-heading{font-family:'Fredoka',var(--font-shop-fallback,inherit);font-weight:700;font-size:2rem;color:#9A3412;margin-bottom:1.2rem;padding-bottom:.5rem;border-bottom:2px solid #FDE8D2;}
.shop-price-list{margin-bottom:.9rem;}
.shop-price-row{display:flex;justify-content:space-between;align-items:center;gap:.6rem;padding:.25rem 0;}
.shop-price-row span{font-family:'Poppins',inherit;font-size:.72rem;color:#A8927E;font-weight:700;text-transform:uppercase;letter-spacing:.03em;}
.shop-price-row strong{display:inline-block;padding:.25rem .75rem;border-radius:999px;background:#FFF1DE;color:#C2410C;font-family:'Poppins',inherit;font-size:.9rem;font-weight:700;white-space:nowrap;}
.shop-card{background:#FFFEFC;border-radius:var(--radius);overflow:hidden;box-shadow:0 3px 14px rgba(194,65,12,.08);border:1px solid #FBEAD9;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s;content-visibility:auto;contain-intrinsic-size:0 560px;}
.shop-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px rgba(194,65,12,.16);}
.shop-card-img{width:100%;aspect-ratio:4/3;background:#FFFAF3;overflow:hidden;}
.shop-card-img img{width:100%;height:100%;object-fit:contain;}
.shop-card-thumbs{display:flex;gap:.4rem;padding:.5rem;background:#FFF6EA;}
.shop-thumb-btn{width:44px;height:44px;padding:0;border:2px solid transparent;border-radius:6px;overflow:hidden;background:#fff;cursor:pointer;flex-shrink:0;}
.shop-thumb-btn img{width:100%;height:100%;object-fit:contain;display:block;}
.shop-thumb-btn.active{border-color:#F97316;}
.shop-partner-hint{font-family:'Poppins',inherit;font-size:.75rem;color:#B9A594;text-align:center;margin-top:.4rem;}
.shop-card-body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;flex:1;}
.shop-card-body h3{font-family:'Fredoka',inherit;font-weight:600;font-size:1.55rem;color:#7C2D12;margin-bottom:.5rem;letter-spacing:.01em;}
.shop-card-body p{font-family:'Poppins',inherit;color:#8A7767;font-size:.87rem;margin-bottom:.9rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.shop-card-footer{margin-top:auto;}
.shop-price{font-family:'Poppins',inherit;font-weight:700;color:#C2410C;font-size:1.05rem;margin-bottom:.75rem;}
#page-shop .btn-primary{background:linear-gradient(90deg,#F97316,#DB2777);box-shadow:0 10px 22px rgba(249,115,22,.28);}
#page-shop .btn-primary:hover{box-shadow:0 16px 30px rgba(249,115,22,.38);}
.shop-partner-notice{font-family:'Poppins',inherit;font-size:.92rem;color:#9A3412;background:#FFF1DE;border:1px solid #FBEAD9;border-radius:var(--radius-sm);padding:.9rem 1.2rem;margin-bottom:2rem;text-align:center;}
.shop-partner-notice strong{font-weight:700;}


/* ---- Unterstützer ---- */
/* Flexbox statt festem Spalten-Grid: Karten zentrieren sich in der Zeile,
   egal ob 1, 2 oder 10 Unterstützer eingetragen sind - keine leeren
   Spalten/Lücken mehr wie beim vorherigen 3-Spalten-Grid. */
.supporters-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;}
.supporter-card{background:#fff;border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow-sm);display:flex;gap:1rem;align-items:flex-start;}
.supporter-logo{width:3.4rem;height:3.4rem;border-radius:50%;overflow:hidden;flex-shrink:0;background:#fff;border:1px solid var(--gray-200);display:flex;align-items:center;justify-content:center;font-size:1.3rem;}
.supporter-logo img{width:100%;height:100%;object-fit:contain;padding:.15rem;box-sizing:border-box;}
.supporter-card h3{font-size:1rem;margin-bottom:.3rem;}
.supporter-card p{color:var(--gray-600);font-size:.85rem;}
.supporter-links{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem;}
.supporter-link-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .8rem;border-radius:999px;background:var(--gray-100);color:var(--gray-700);font-size:.8rem;font-weight:700;transition:background .2s;}
.supporter-link-btn:hover{background:var(--gray-200);}

/* ---- Kompakte Unterstützer-Karte (Logo + Name, Rest im Modal) ---- */
.supporter-card-compact{background:#fff;border-radius:var(--radius);padding:1.8rem 1.2rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center;text-align:center;gap:.8rem;cursor:pointer;border:none;flex:0 1 260px;width:260px;transition:transform .25s,box-shadow .25s;}
.supporter-card-compact:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.supporter-card-compact .supporter-logo{width:10.5rem;height:10.5rem;font-size:3rem;}
.supporter-card-compact .supporter-logo img{padding:.35rem;}
.supporter-card-compact h3{font-size:1.02rem;}

.vorstand-grid{display:grid;grid-template-columns:1fr;gap:1.6rem;}
@media(min-width:640px){.vorstand-grid{grid-template-columns:1fr 1fr;}}
@media(min-width:1000px){.vorstand-grid{grid-template-columns:repeat(3,1fr);}}
.vorstand-card{background:#fff;border-radius:var(--radius-lg);padding:1.8rem 1.5rem 1.6rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;align-items:center;text-align:center;transition:transform .25s,box-shadow .25s;}
.vorstand-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}
.vorstand-photo{width:8rem;height:8rem;border-radius:50%;overflow:hidden;background:linear-gradient(135deg,#9F1239,#D97706);display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Fredoka',sans-serif;font-weight:700;font-size:2.2rem;margin-bottom:1.1rem;flex-shrink:0;box-shadow:0 10px 24px rgba(159,18,57,.25);cursor:pointer;}
.vorstand-card.is-placeholder .vorstand-photo{cursor:default;}
.vorstand-photo img{width:100%;height:100%;object-fit:cover;}
.vorstand-card h3{font-size:1.08rem;margin-bottom:.25rem;}
.vorstand-role{display:inline-block;background:#FFF1F2;color:#9F1239;font-weight:700;font-size:.72rem;letter-spacing:.02em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px;margin-bottom:.85rem;}
.vorstand-card p{color:var(--gray-600);font-size:.87rem;line-height:1.5;}
.vorstand-card.is-placeholder{background:transparent;border:2px dashed var(--gray-300);box-shadow:none;}
.vorstand-card.is-placeholder:hover{transform:none;box-shadow:none;}
.vorstand-card.is-placeholder .vorstand-photo{background:var(--gray-100);color:var(--gray-400);box-shadow:none;}
.vorstand-card.is-placeholder h3{color:var(--gray-400);}
.vorstand-card.is-placeholder .vorstand-role{background:var(--gray-100);color:var(--gray-500);}

.section-head{text-align:center;max-width:640px;margin:0 auto 2.5rem;}
.eyebrow{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem 1rem;border-radius:999px;font-size:.8rem;font-weight:800;margin-bottom:.9rem;}
.eyebrow.purple{background:#F3E8FF;color:#7E22CE;}
.eyebrow.orange{background:#FFEDD5;color:#C2410C;}
.eyebrow.teal{background:#CCFBF1;color:#0F766E;}
.eyebrow.pink{background:#FCE7F3;color:#BE185D;}
.section-head h2{font-size:1.9rem;margin-bottom:.6rem;}
@media(min-width:768px){.section-head h2{font-size:2.4rem;}}
.section-head p{color:var(--gray-600);font-size:1.02rem;}

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.7rem;border-radius:999px;font-weight:800;font-size:.95rem;transition:transform .25s, box-shadow .25s, background .25s;}
.btn svg{flex-shrink:0;}
.btn-primary{color:#fff;background:var(--gradient-brand);box-shadow:0 10px 22px rgba(124,58,237,.28);}
.btn-primary:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 16px 30px rgba(124,58,237,.38);}
.btn-outline{border:2px solid var(--violet);color:var(--violet);background:#fff;}
.btn-outline:hover{background:var(--violet);color:#fff;}
.btn-ghost-white{border:2px solid rgba(255,255,255,.55);color:#fff;}
.btn-ghost-white:hover{background:rgba(255,255,255,.15);border-color:#fff;}
.btn-white{background:#fff;color:var(--violet-dark);box-shadow:var(--shadow-md);}
.btn-white:hover{transform:translateY(-2px) scale(1.02);}
.btn-danger{background:#FEE2E2;color:#B91C1C;font-weight:700;}
.btn-danger:hover{background:#FECACA;}
.btn-sm{padding:.45rem .9rem;font-size:.82rem;border-radius:999px;}
.btn-block{width:100%;justify-content:center;}
.btn:disabled{opacity:.6;cursor:not-allowed;transform:none !important;}

/* ---------------------------------------------------------------------
   HEADER / NAVIGATION
   --------------------------------------------------------------------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;padding:.85rem 0;transition:all .3s;
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);box-shadow:var(--shadow-sm);}
.site-header.scrolled{padding:.55rem 0;box-shadow:var(--shadow-md);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;max-width:1520px;margin:0 auto;padding:0 2rem;gap:1.5rem;}
.brand{display:flex;align-items:center;gap:.65rem;}
.brand-mark{width:38px;height:38px;border-radius:50%;background:var(--gradient-hero);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px rgba(255,255,255,.6);flex-shrink:0;font-size:1.05rem;overflow:hidden;}
.brand-mark img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.brand-text{display:flex;flex-direction:column;line-height:1.08;color:var(--gray-900);}
.brand-line1,.brand-line2{font-family:'Fredoka','Segoe UI',system-ui,-apple-system,sans-serif;font-weight:700;font-size:1rem;letter-spacing:-.02em;white-space:nowrap;}
.brand-heart{margin-left:.15rem;}
.brand-bunt{background:linear-gradient(90deg,var(--pink),var(--orange),var(--amber),var(--teal),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent;}
@media(max-width:420px){.brand-text{display:none;}}

.desktop-nav{display:none;align-items:center;gap:.3rem;flex-wrap:nowrap;justify-content:flex-end;}
@media(min-width:1080px){.desktop-nav{display:flex;}}
.nav-link{display:inline-flex;align-items:center;gap:.35rem;padding:.65rem .8rem;border-radius:999px;font-weight:700;font-size:.9rem;color:var(--gray-700);transition:all .2s;position:relative;white-space:nowrap;flex:0 0 auto;}
.nav-link svg{flex-shrink:0;opacity:.85;}
.nav-link:hover{background:var(--gray-100);}
.nav-link.current{color:var(--pink);}
.nav-link.current::after{content:'';position:absolute;left:.85rem;right:.85rem;bottom:.15rem;height:2px;border-radius:2px;background:var(--pink);}
.nav-admin-btn{margin-left:.2rem;}

.nav-lock-btn{display:inline-flex;align-items:center;gap:.4rem;padding:.65rem .85rem;border-radius:999px;font-weight:700;font-size:.9rem;color:var(--gray-700);margin-left:.2rem;transition:all .2s;flex:0 0 auto;white-space:nowrap;}
#kontakt-section-formular,#kontakt-section-email,#kontakt-section-social{scroll-margin-top:6.5rem;}
.nav-lock-btn:hover{background:var(--gray-100);}

/* ---- Nav-Dropdown ("Über uns", "Mitmachen", "Mehr") ---- */
.nav-dropdown{position:relative;}
.nav-dropdown-toggle{background:none;border:none;cursor:pointer;font:inherit;}
.nav-caret{transition:transform .2s;opacity:.7;margin-left:-.1rem;}
.nav-dropdown.open .nav-caret{transform:rotate(180deg);}
.nav-dropdown.open>.nav-dropdown-toggle{background:var(--gray-100);}
.nav-dropdown-menu{position:absolute;top:calc(100% + .5rem);left:0;min-width:16.5rem;background:#fff;border-radius:1rem;box-shadow:var(--shadow-md);padding:.6rem .5rem .5rem;display:none;flex-direction:column;gap:.1rem;border:1px solid var(--gray-100);border-top:4px solid var(--nav-accent,var(--pink-dark));z-index:150;}
.nav-dropdown.open .nav-dropdown-menu{display:flex;}
.nav-dropdown-menu a{display:block;padding:.7rem .85rem;border-radius:.6rem;font-weight:600;font-size:.92rem;color:var(--gray-700);white-space:nowrap;position:static;}
.nav-dropdown-menu a:hover{background:var(--nav-accent-bg,var(--gray-100));color:var(--nav-accent,var(--violet-dark));}
.nav-dropdown-menu a.current{color:var(--nav-accent,var(--pink-dark));background:var(--nav-accent-bg,#FDF2F8);}
.nav-dropdown-menu a.current::after{display:none;}
/* Jedes Dropdown bekommt eine eigene Regenbogen-Akzentfarbe (Rand oben +
   Hover/Aktiv-Farbe), damit die sechs Menüs auf einen Blick unterscheidbar
   sind, statt alle identisch pink/violett zu wirken. */
.nav-dropdown[data-dropdown="ueberuns"]{--nav-accent:#8B5CF6;--nav-accent-bg:#F5F0FE;}
.nav-dropdown[data-dropdown="arbeit"]{--nav-accent:#16A34A;--nav-accent-bg:#EFFDF4;}
.nav-dropdown[data-dropdown="mitmachen"]{--nav-accent:#F97316;--nav-accent-bg:#FFF3E8;}
.nav-dropdown[data-dropdown="aktuelles"]{--nav-accent:#3B82F6;--nav-accent-bg:#EEF4FE;}
.nav-dropdown[data-dropdown="galerie"]{--nav-accent:#CA8A04;--nav-accent-bg:#FEFBEA;}
.nav-dropdown[data-dropdown="kontakt"]{--nav-accent:#EF4444;--nav-accent-bg:#FEEEEE;}

.mobile-toggle{display:flex;padding:.5rem;border-radius:.6rem;color:var(--gray-700);}
@media(min-width:1080px){.mobile-toggle{display:none;}}
.mobile-menu{display:none;background:rgba(255,255,255,.98);backdrop-filter:blur(10px);box-shadow:var(--shadow-md);border-top:1px solid var(--gray-100);}
.mobile-menu.open{display:block;max-height:calc(100vh - 4.5rem);overflow-y:auto;-webkit-overflow-scrolling:touch;}
.mobile-menu-inner{max-width:1200px;margin:0 auto;padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.3rem;}
.mobile-menu .nav-link{color:var(--gray-700);padding:.8rem 1rem;}
.mobile-menu .nav-link:hover{background:#FAF5FF;color:var(--violet-dark);}
.mobile-menu-group-label{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-400);padding:1rem 1rem .25rem;border-left:3px solid transparent;margin-left:.25rem;}
/* Gleiche sechs Akzentfarben wie bei den Desktop-Dropdowns, nach Reihenfolge
   der Gruppen im mobilen Menü (Über uns, Unsere Arbeit, Mitmachen, Aktuelles,
   Galerie, Kontakt). */
.mobile-menu-group-label:nth-of-type(1){border-left-color:#8B5CF6;color:#8B5CF6;}
.mobile-menu-group-label:nth-of-type(2){border-left-color:#16A34A;color:#16A34A;}
.mobile-menu-group-label:nth-of-type(3){border-left-color:#F97316;color:#F97316;}
.mobile-menu-group-label:nth-of-type(4){border-left-color:#3B82F6;color:#3B82F6;}
.mobile-menu-group-label:nth-of-type(5){border-left-color:#CA8A04;color:#CA8A04;}
.mobile-menu-group-label:nth-of-type(6){border-left-color:#EF4444;color:#EF4444;}
.mobile-menu .nav-link.sub{padding-left:1.7rem;font-weight:600;font-size:.86rem;}

/* ---------------------------------------------------------------------
   HERO
   --------------------------------------------------------------------- */
.hero{position:relative;min-height:88vh;display:flex;align-items:center;overflow:hidden;
  background:var(--gradient-hero);background-size:200% 200%;animation:gradientShift 12s ease infinite;padding:8rem 1.25rem 4rem;}
.hero::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.28);}
.hero-blob{position:absolute;border-radius:50%;filter:blur(70px);animation:float 7s ease-in-out infinite;}
.hero-blob.b1{top:15%;left:6%;width:15rem;height:15rem;background:rgba(168,85,247,.25);}
.hero-blob.b2{bottom:12%;right:8%;width:20rem;height:20rem;background:rgba(236,72,153,.22);animation-delay:2.2s;}
.hero-blob.b3{top:55%;left:48%;width:22rem;height:22rem;background:rgba(250,204,21,.14);animation-delay:4.4s;}
.hero-content{position:relative;z-index:2;max-width:38rem;margin:0;text-align:left;color:#fff;}
.hero-title-panel{display:inline-block;background:rgba(10,8,20,.5);backdrop-filter:blur(2px);padding:1.3rem 1.6rem;border-radius:1.4rem 1.7rem 1.5rem 1.6rem;transform:rotate(-1deg);margin-bottom:1.5rem;box-shadow:0 20px 40px rgba(0,0,0,.25);}
.hero-content h1{font-size:2.1rem;text-shadow:0 4px 20px rgba(0,0,0,.35);text-transform:uppercase;}
@media(min-width:600px){.hero-content h1{font-size:2.8rem;}}
@media(min-width:900px){.hero-content h1{font-size:3.6rem;}}
.hero-bunt{background:linear-gradient(90deg,#ec4899,#f97316,#fbbf24);-webkit-background-clip:text;background-clip:text;color:transparent;}
.hero-heart{display:inline-block;color:#fff;-webkit-text-fill-color:#fff;font-size:.75em;vertical-align:middle;}
.hero-content p.lead{font-size:1.05rem;max-width:30rem;margin:0 0 2rem;color:rgba(255,255,255,.92);font-weight:600;}
@media(min-width:600px){.hero-content p.lead{font-size:1.15rem;}}
.hero-ctas{display:flex;flex-wrap:wrap;gap:.9rem;}
.hero-ctas .btn{text-transform:uppercase;letter-spacing:.03em;font-size:.85rem;}
.hero-dots{display:flex;gap:.45rem;margin-top:2.5rem;}
.hero-dots span{width:1.4rem;height:.35rem;border-radius:999px;}

@keyframes gradientShift{0%,100%{background-position:0 50%;}50%{background-position:100% 50%;}}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
.fade-up{opacity:0;animation:fadeUp .7s ease-out forwards;}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:translateY(0);}}

/* ---------------------------------------------------------------------
   RAINBOW ACCENT (Signatur-Element fuer Karten)
   --------------------------------------------------------------------- */
.rb-card{border-left:5px solid var(--rb-1);}
.rb-0{border-left-color:var(--rb-1);}
.rb-1{border-left-color:var(--rb-2);}
.rb-2{border-left-color:var(--rb-3);}
.rb-3{border-left-color:var(--rb-4);}
.rb-4{border-left-color:var(--rb-5);}
.rb-5{border-left-color:var(--rb-6);}
.rainbow-rule{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--rb-1),var(--rb-2),var(--rb-3),var(--rb-4),var(--rb-5),var(--rb-6));}

/* ---------------------------------------------------------------------
   ALLGEMEINE KARTEN / GRIDS
   --------------------------------------------------------------------- */
.card-hover{transition:transform .3s, box-shadow .3s;}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);}

.posts-grid{display:grid;grid-template-columns:1fr;gap:1.75rem;}
@media(min-width:720px){.posts-grid.two-col{grid-template-columns:1fr 1fr;}}

.empty-state{text-align:center;padding:3.5rem 1rem;color:var(--gray-400);}

.cg-thumbs{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:.6rem;}
.cg-thumb{position:relative;width:5.5rem;height:5.5rem;border-radius:.6rem;overflow:hidden;border:1px solid var(--gray-100);}
.cg-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.cg-thumb .icon-btn{position:absolute;top:.25rem;right:.25rem;width:1.6rem;height:1.6rem;background:rgba(255,255,255,.9);}
.cg-public-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9rem,1fr));gap:.9rem;margin-top:1.5rem;}
.cg-public-thumb{position:relative;aspect-ratio:1;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);}
.cg-public-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.cg-public-remove-btn{position:absolute;top:.4rem;right:.4rem;width:1.9rem;height:1.9rem;z-index:2;
  background:rgba(255,255,255,.92);box-shadow:var(--shadow-sm);}
.cg-public-download-btn{position:absolute;bottom:.4rem;right:.4rem;width:1.9rem;height:1.9rem;z-index:2;
  display:flex;align-items:center;justify-content:center;border-radius:999px;
  background:rgba(255,255,255,.92);box-shadow:var(--shadow-sm);color:var(--gray-700,#374151);}
.cg-public-download-btn:hover{background:#fff;color:var(--teal,#0d9488);}
.cg-public-thumb img[data-action]{cursor:pointer;}
.cg-public-add-tile{aspect-ratio:1;border-radius:var(--radius);border:2px dashed var(--gray-300);
  background:var(--gray-50);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.4rem;color:var(--gray-400);font-size:.78rem;font-weight:700;cursor:pointer;}
.cg-public-add-tile:hover{border-color:var(--violet);color:var(--violet);background:#faf5ff;}

.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:.9rem;}
.faq-item{background:#fff;border:1px solid var(--gray-100);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;}
.faq-item summary{list-style:none;cursor:pointer;padding:1.1rem 1.4rem;font-family:'Fredoka','Segoe UI',system-ui,-apple-system,sans-serif;font-weight:600;color:var(--gray-900);display:flex;align-items:center;justify-content:space-between;gap:1rem;transition:background .2s;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:'+';font-size:1.3rem;font-weight:700;color:var(--violet);flex-shrink:0;transition:transform .25s;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item summary:hover{background:var(--gray-50);}
.faq-answer{padding:0 1.4rem 1.2rem;color:var(--gray-700);line-height:1.6;}

.demo-grid{display:grid;grid-template-columns:1fr;gap:1.4rem;}
@media(min-width:720px){.demo-grid{grid-template-columns:1fr 1fr;}}
.kal-card{background:#fff;border:1px solid var(--gray-100);border-radius:1rem;padding:1.4rem;box-shadow:var(--shadow-md);}
.kal-detail-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.6rem;padding-bottom:1rem;margin-bottom:1.2rem;border-bottom:1px solid var(--gray-100);}
.kal-detail-label{font-family:'Fredoka','Segoe UI',system-ui,sans-serif;font-weight:700;font-size:1.15rem;color:var(--gray-900);}
.kal-detail-count{font-size:.8rem;font-weight:700;color:#fff;background:var(--gradient-brand);padding:.25rem .7rem;border-radius:999px;}
.kal-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.6rem;}
.kal-header h3{margin:0;font-size:1.15rem;}
.kal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem;margin-bottom:.3rem;}
.kal-weekday{text-align:center;font-size:.78rem;font-weight:700;color:var(--gray-500);padding:.3rem 0;}
.kal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:.3rem;}
.kal-day{position:relative;aspect-ratio:1/1;border:1px solid var(--gray-100);border-radius:.6rem;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.85rem;color:var(--gray-700);padding:0;}
.kal-day-empty{border:none;background:none;cursor:default;}
.kal-day:hover:not(.kal-day-empty){background:var(--gray-100);}
.kal-day.is-today{border-color:var(--pink-dark,#DB2777);}
.kal-day.has-events{background:#FDF2F8;}
.kal-day.is-selected{background:var(--pink-dark,#DB2777);color:#fff;border-color:var(--pink-dark,#DB2777);}
.kal-day-dot{position:absolute;bottom:.35rem;width:.35rem;height:.35rem;border-radius:50%;background:var(--pink-dark,#DB2777);}
.kal-day.is-selected .kal-day-dot{background:#fff;}
.demo-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;display:flex;flex-direction:column;border:1px solid var(--gray-100);transition:transform .25s,box-shadow .25s;}
.demo-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md,0 10px 24px rgba(17,24,39,.1));}
.demo-card-img{aspect-ratio:4/3;overflow:hidden;background:linear-gradient(135deg,var(--gray-50),var(--gray-100));position:relative;display:flex;align-items:center;justify-content:center;cursor:zoom-in;}
.demo-card-img img{width:100%;height:100%;object-fit:contain;transition:filter .25s,transform .3s;}
.demo-card:hover .demo-card-img img{transform:scale(1.02);}
.demo-card-body{padding:1.3rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;}
.demo-card h3{font-size:1.15rem;}
.demo-card-meta{display:flex;flex-wrap:wrap;gap:.6rem;font-size:.85rem;font-weight:700;}
.demo-date-badge{background:var(--gradient-brand);color:#fff;padding:.25rem .7rem;border-radius:999px;}
.demo-location{color:var(--gray-600);display:flex;align-items:center;gap:.3rem;}
.demo-card p{color:var(--gray-700);font-size:.92rem;line-height:1.55;margin:0;}
.demo-card-desc{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.demo-card-desc.is-expanded{display:block;-webkit-line-clamp:unset;overflow:visible;}
.demo-card-more{align-self:flex-start;background:none;border:none;padding:0;margin-top:-.15rem;font-size:.85rem;font-weight:700;color:var(--violet);cursor:pointer;}
.demo-card-more:hover{text-decoration:underline;}

/* Vergangene Termine: nicht mehr komplett verblassen, sondern klar markieren */
.demo-card.is-past{opacity:1;}
.demo-card.is-past .demo-card-img img{filter:grayscale(65%) brightness(.92);}
.demo-card.is-past .demo-card-img::after{content:'Vergangen';position:absolute;top:.7rem;right:.7rem;background:rgba(17,24,39,.72);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.02em;padding:.3rem .7rem;border-radius:999px;backdrop-filter:blur(2px);}
.demo-card.is-past .demo-date-badge{background:var(--gray-400);}
.admin-panel .empty-state{background:linear-gradient(135deg,#F5F3FF,#FDF2F8);border-radius:var(--radius);color:var(--gray-600);}
.empty-state svg{margin:0 auto 1rem;opacity:.4;}
.empty-state p{font-size:.95rem;}

/* ---------------------------------------------------------------------
   POST-KARTEN (Feed)
   --------------------------------------------------------------------- */
.post-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid var(--gray-100);overflow:hidden;position:relative;}
.post-media{max-height:36rem;overflow:hidden;background:var(--gray-950);display:flex;align-items:center;justify-content:center;position:relative;}
.post-media-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(35px) brightness(.55) saturate(1.3);transform:scale(1.15);z-index:0;}
.post-media img, .post-media video{width:100%;height:auto;max-height:36rem;object-fit:contain;position:relative;z-index:1;}
.post-media iframe{width:100%;aspect-ratio:16/9;border:0;display:block;}
.media-add-placeholder{min-height:9rem;width:100%;background:var(--gray-100);color:var(--gray-600);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;cursor:pointer;}
.video-thumb .media-add-placeholder{position:absolute;inset:0;min-height:0;}
.post-body{padding:1.5rem;}
.post-meta{display:flex;align-items:center;gap:.5rem;color:var(--gray-500);font-size:.8rem;font-weight:700;margin-bottom:.6rem;}
.post-body h3{font-size:1.25rem;margin-bottom:.6rem;}
.post-text{color:var(--gray-600);font-size:.95rem;white-space:pre-line;margin-bottom:1.1rem;}
.post-actions{display:flex;align-items:center;gap:.75rem;padding-top:.9rem;border-top:1px solid var(--gray-100);}
.like-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1rem;border-radius:999px;background:var(--gray-100);color:var(--gray-700);font-weight:800;font-size:.88rem;transition:all .2s;}
.like-btn:hover{background:#FCE7F3;color:var(--pink-dark);}
.like-btn.liked{background:linear-gradient(90deg,var(--violet),var(--pink));color:#fff;}
.comment-toggle-btn{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1rem;border-radius:999px;background:var(--gray-100);color:var(--gray-700);font-weight:800;font-size:.88rem;transition:background .2s;}
.comment-toggle-btn:hover{background:#E0F2FE;color:#0369A1;}
.post-admin-actions{margin-left:auto;display:flex;gap:.4rem;}
.icon-btn{width:2.1rem;height:2.1rem;border-radius:.6rem;display:inline-flex;align-items:center;justify-content:center;color:var(--gray-600);background:var(--gray-100);transition:all .2s;}
.icon-btn:hover{background:var(--gray-200);color:var(--gray-900);}
.icon-btn.danger:hover{background:#FEE2E2;color:#B91C1C;}

.comments-section{margin-top:1.1rem;padding-top:1.1rem;border-top:1px dashed var(--gray-200);display:none;}
.comments-section.open{display:block;}
.comment-item{display:flex;gap:.7rem;padding:.6rem 0;}
.comment-avatar{width:2.1rem;height:2.1rem;border-radius:50%;background:var(--gradient-brand);color:#fff;font-weight:800;font-size:.85rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;}
.avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.comment-bubble{background:var(--gray-50);border-radius:var(--radius-sm);padding:.55rem 2.1rem .55rem .85rem;flex:1;position:relative;}
.comment-bubble .c-name{font-weight:800;font-size:.83rem;margin-bottom:.1rem;word-break:break-word;}
.comment-bubble .c-text{font-size:.88rem;color:var(--gray-700);word-break:break-word;white-space:pre-wrap;}
.comment-bubble .c-date{font-size:.7rem;color:var(--gray-400);margin-top:.25rem;}
.comment-delete{position:absolute;top:.35rem;right:.35rem;width:1.5rem;height:1.5rem;min-width:0;border-radius:50%;background:transparent;color:var(--gray-400);}
.comment-delete:hover{color:#B91C1C;background:#FEE2E2;}
.comment-form{display:flex;gap:.5rem;margin-top:.9rem;flex-wrap:wrap;}
.comment-form input[type="text"]{flex:1;min-width:120px;padding:.6rem .9rem;border:1px solid var(--gray-200);border-radius:999px;font-size:.85rem;}
.comment-form input[name="c-name"]{flex:0 0 140px;}
.comment-form input:focus{outline:none;border-color:#c4b5fd;box-shadow:0 0 0 3px rgba(196,181,253,.3);}
.comment-form button{flex-shrink:0;}

/* ---------------------------------------------------------------------
   GALERIE
   --------------------------------------------------------------------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:2.25rem;}
.filter-btn{padding:.5rem 1.2rem;border-radius:999px;font-size:.85rem;font-weight:800;border:1px solid var(--gray-200);background:#fff;color:var(--gray-700);transition:all .2s;}
.filter-btn:hover{border-color:#c4b5fd;color:var(--violet-dark);}
.filter-btn.active{background:linear-gradient(90deg,var(--violet),var(--teal-dark));color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(124,58,237,.28);transform:scale(1.04);}

.gallery-grid{display:flex;flex-direction:column;gap:2.2rem;}
.gallery-item{position:relative;display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);cursor:pointer;background:#fff;}
@media(min-width:768px){
  .gallery-item{flex-direction:row;align-items:stretch;}
  .gallery-item:nth-child(even){flex-direction:row-reverse;}
}
.gallery-item .thumb{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--gray-100);flex:none;}
@media(min-width:768px){.gallery-item .thumb{flex:0 0 46%;max-width:46%;aspect-ratio:auto;}}
.gallery-item .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.gallery-item:hover .thumb img{transform:scale(1.06);}
.gallery-item .alt-info{flex:1;padding:1.3rem 1.5rem;display:flex;flex-direction:column;justify-content:center;gap:.5rem;}
.alt-info .cat{display:inline-block;align-self:flex-start;padding:.15rem .6rem;border-radius:999px;background:rgba(124,58,237,.12);color:var(--violet-dark);font-size:.68rem;font-weight:800;}
.alt-info h4{font-size:1.05rem;color:var(--gray-800);}
.alt-info p{font-size:.88rem;color:var(--gray-500);}
.gallery-item .g-admin{position:absolute;top:.5rem;right:.5rem;display:flex;gap:.3rem;z-index:2;}

/* ---------------------------------------------------------------------
   LIGHTBOX / VIDEO MODAL
   --------------------------------------------------------------------- */
.overlay-modal{position:fixed;inset:0;background:rgba(10,13,20,.94);z-index:300;display:none;align-items:center;justify-content:center;padding:1.5rem;}
.overlay-modal.open{display:flex;}
.overlay-modal .modal-box{max-width:56rem;width:100%;text-align:center;position:relative;}
.overlay-modal .modal-box img{max-height:72vh;margin:0 auto;border-radius:var(--radius-sm);box-shadow:0 24px 64px rgba(0,0,0,.5);}
.overlay-modal .video-frame{position:relative;width:100%;aspect-ratio:16/9;border-radius:var(--radius-sm);overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.5);background:#000;}
.overlay-modal .video-frame iframe, .overlay-modal .video-frame video{width:100%;height:100%;border:0;object-fit:contain;background:#000;}
.modal-caption{color:#fff;margin-top:1.1rem;}
.modal-caption h3{font-size:1.15rem;margin-bottom:.3rem;}
.modal-caption p{color:rgba(255,255,255,.68);font-size:.85rem;}
.modal-close{position:absolute;top:1.25rem;right:1.25rem;color:#fff;background:rgba(255,255,255,.12);width:2.6rem;height:2.6rem;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.modal-close:hover{background:rgba(255,255,255,.28);}
.supporter-modal-logo{width:8rem;height:8rem;border-radius:50%;overflow:hidden;margin:0 auto;background:var(--gray-100);display:flex;align-items:center;justify-content:center;font-size:3rem;box-shadow:0 24px 64px rgba(0,0,0,.5);}
.supporter-modal-logo img{width:100%;height:100%;object-fit:cover;}
#supporterModal .supporter-links{justify-content:center;}
#supporterModal .supporter-link-btn{background:rgba(255,255,255,.14);color:#fff;}
#supporterModal .supporter-link-btn:hover{background:rgba(255,255,255,.28);}
.modal-nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;background:rgba(255,255,255,.12);width:2.9rem;height:2.9rem;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.modal-nav:hover{background:rgba(255,255,255,.28);}
.modal-prev{left:1.25rem;}
.modal-next{right:1.25rem;}

/* ---------------------------------------------------------------------
   VIDEOS
   --------------------------------------------------------------------- */
.video-grid{display:flex;flex-direction:column;gap:2.2rem;}
.video-card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);cursor:pointer;position:relative;display:flex;flex-direction:column;}
@media(min-width:768px){
  .video-card{flex-direction:row;align-items:stretch;}
  .video-card:nth-child(even){flex-direction:row-reverse;}
}
.video-thumb{aspect-ratio:16/9;background:var(--gray-950);position:relative;overflow:hidden;flex:none;}
@media(min-width:768px){.video-thumb{flex:0 0 46%;max-width:46%;aspect-ratio:auto;}}
.video-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s;opacity:.85;}
.video-card:hover .video-thumb img{transform:scale(1.06);opacity:1;}
.play-btn{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:3.6rem;height:3.6rem;border-radius:50%;background:rgba(255,255,255,.92);color:var(--violet);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.35);transition:transform .25s;}
.video-card:hover .play-btn{transform:translate(-50%,-50%) scale(1.12);}
.video-badge{position:absolute;top:.6rem;left:.6rem;padding:.2rem .6rem;border-radius:999px;background:rgba(0,0,0,.6);color:#fff;font-size:.68rem;font-weight:800;}
.video-body{flex:1;padding:1.3rem 1.5rem;display:flex;flex-direction:column;justify-content:center;gap:.3rem;}
.video-body h4{font-size:1.05rem;margin-bottom:.2rem;}
.video-body .video-date{font-size:.8rem;color:var(--gray-400);}
.video-admin{position:absolute;top:.5rem;right:.5rem;display:flex;gap:.3rem;z-index:2;}

/* ---------------------------------------------------------------------
   KONTAKT
   --------------------------------------------------------------------- */
/* Kontakt-Reiter: Kontaktformular / E-Mail / Social Media zeigen jeweils
   nur ihren eigenen Inhalt statt einer gemeinsamen langen Seite, damit
   z.B. "Social Media" unabhängig wachsen kann (weitere Kanäle wie TikTok,
   Facebook, ...). */
.kontakt-tabs{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;margin-bottom:2.2rem;}
.kontakt-tab{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.3rem;border-radius:999px;border:2px solid var(--gray-200);background:#fff;font-weight:700;font-size:.92rem;font-family:inherit;cursor:pointer;color:var(--gray-600);transition:border-color .15s,color .15s,background .15s;}
.kontakt-tab:hover{border-color:#93C5FD;color:#2563EB;}
.kontakt-tab.active{background:linear-gradient(135deg,#2563EB,#4338CA);border-color:transparent;color:#fff;}
.kontakt-panel{display:none;}
.kontakt-panel.active{display:block;animation:kontaktPanelFade .25s ease;}
@keyframes kontaktPanelFade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}
.form-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-md);padding:2rem;}
.form-group{margin-bottom:1.15rem;}
.form-group label{display:block;font-weight:800;font-size:.86rem;color:var(--gray-700);margin-bottom:.4rem;}
/* fieldset/legend als Ersatz für Gruppen-Überschriften über mehreren Radio-
   Buttons (statt eines "nackten" <label> ohne zugehöriges Formularfeld -
   Browser/Screenreader melden das sonst als Accessibility-Fehler): Reset
   der Standard-Rahmen/-Innenabstände, damit es optisch wie vorher aussieht. */
fieldset.form-group{border:0;padding:0;margin:0 0 1.15rem 0;min-width:0;}
fieldset.form-group legend{display:block;width:100%;padding:0;font-weight:800;font-size:.86rem;color:var(--gray-700);margin-bottom:.4rem;}
/* Ersatz für <label> als reine Abschnitts-Überschrift (z.B. über der
   Unterschrift oder einem Textblock, ohne dass ein einzelnes Formularfeld
   dahintersteht) - optisch identisch zu .form-group label. */
.form-group-heading{display:block;font-weight:800;font-size:.86rem;color:var(--gray-700);margin-bottom:.4rem;}
.form-group input, .form-group textarea, .form-group select{width:100%;padding:.75rem 1rem;border:1px solid var(--gray-200);border-radius:.7rem;font-size:.92rem;color:var(--gray-900);transition:all .2s;}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{outline:none;border-color:#c4b5fd;box-shadow:0 0 0 3px rgba(196,181,253,.3);}
.form-group textarea{resize:vertical;min-height:6rem;}
.form-hint{font-size:.78rem;color:var(--gray-400);margin-top:.3rem;}
.signature-pad-wrap{border:1px solid var(--gray-200);border-radius:.7rem;background:var(--gray-50);overflow:hidden;}
.signature-pad-wrap canvas{display:block;width:100%;height:9rem;touch-action:none;cursor:crosshair;background:#fff;}
.signature-pad-bar{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.5rem .75rem;border-top:1px solid var(--gray-200);}
.signature-pad-placeholder{position:absolute;font-size:.82rem;color:var(--gray-400);pointer-events:none;}
.signature-pad-clear{font-size:.78rem;font-weight:700;color:var(--violet);background:none;border:none;cursor:pointer;padding:.2rem .4rem;}
.signature-pad-clear:hover{text-decoration:underline;}
.info-card{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-md);padding:1.75rem;}
.info-row{display:flex;align-items:center;gap:1rem;margin-bottom:1.1rem;}
.info-row .ic{width:2.75rem;height:2.75rem;border-radius:.7rem;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:0 8px 16px rgba(0,0,0,.15);}
.info-row .label{font-size:.78rem;color:var(--gray-500);font-weight:700;}
.info-row .value{font-weight:800;color:var(--gray-900);}

/* ---------------------------------------------------------------------
   ADMIN
   --------------------------------------------------------------------- */
.login-wrap{max-width:26rem;margin:0 auto;}
.login-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:2.5rem;text-align:center;}
.login-card h2{font-size:1.5rem;margin-bottom:.4rem;}
.login-card p{color:var(--gray-500);font-size:.88rem;margin-bottom:1.75rem;}
.login-error{background:#FEE2E2;color:#B91C1C;padding:.65rem 1rem;border-radius:.7rem;font-size:.85rem;font-weight:700;margin-bottom:1rem;display:none;}
.login-error.show{display:block;}

.admin-shell{display:grid;grid-template-columns:1fr;gap:1.5rem;}
.admin-shell > div{min-width:0;}
@media(min-width:900px){.admin-shell{grid-template-columns:230px 1fr;}}
.admin-side{background:var(--gray-50);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1rem;height:fit-content;display:flex;flex-direction:row;overflow-x:auto;gap:.3rem;}
@media(min-width:900px){.admin-side{flex-direction:column;}}
.admin-tab-btn{display:flex;align-items:center;gap:.6rem;padding:.75rem 1rem;border-radius:.7rem;font-weight:700;font-size:.88rem;color:var(--gray-600);white-space:nowrap;transition:all .2s;text-align:left;border-left:3px solid transparent;}
.admin-tab-btn:hover{background:var(--gray-100);border-left-color:var(--gray-300);}
.admin-tab-btn.active{background:var(--gray-200);color:var(--gray-900);border-left-color:var(--gray-500);}
.admin-nav-group{display:flex;flex-direction:column;}
.admin-nav-group-toggle{background:none;border:none;cursor:pointer;font:inherit;width:100%;justify-content:flex-start;position:relative;}
.admin-nav-caret{margin-left:auto;transition:transform .2s;flex-shrink:0;}
.admin-nav-group.open .admin-nav-caret{transform:rotate(180deg);}
.admin-nav-group-menu{display:none;flex-direction:column;gap:.15rem;padding-left:1rem;}
.admin-nav-group.open .admin-nav-group-menu{display:flex;}
.admin-nav-group.has-active .admin-nav-group-toggle{color:var(--gray-900);}
.admin-tab-btn.sub{font-size:.82rem;padding:.6rem .85rem;}
.admin-tab-btn.logout{margin-top:.5rem;color:#B91C1C;}
.admin-tab-btn.logout:hover{background:#FEE2E2;border-left-color:#EF4444;}
/* Einheitlicher, dezenter Akzent statt eines Farbtons je Menüpunkt */
.perm-cat{margin-bottom:.9rem;}
.perm-cat h5{font-size:.76rem;text-transform:uppercase;letter-spacing:.03em;color:var(--gray-500);margin-bottom:.4rem;}
.perm-check{display:flex;align-items:center;gap:.5rem;font-size:.85rem;padding:.22rem 0;}
.perm-check input{width:auto;}
.dashboard-section{margin-bottom:2rem;}
.dashboard-section:last-child{margin-bottom:0;}
.dashboard-section-head{display:flex;align-items:baseline;gap:.7rem;margin-bottom:.9rem;}
.dashboard-section-head h4{font-size:1rem;font-weight:800;color:var(--gray-900);}
.dashboard-section-head .sub{font-size:.8rem;color:var(--gray-500);}
.dashboard-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(12.5rem,1fr));gap:1rem;}
.dashboard-stat-card{display:flex;align-items:center;gap:.9rem;padding:1.1rem 1.2rem;border:1px solid rgba(0,0,0,.04);border-radius:var(--radius);transition:transform .25s,box-shadow .25s;}
.dashboard-stat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-md);}
.dashboard-stat-icon{flex-shrink:0;width:2.75rem;height:2.75rem;border-radius:.85rem;display:flex;align-items:center;justify-content:center;font-size:1.25rem;background:rgba(255,255,255,.6);}
.dashboard-stat-card .n{font-size:1.6rem;font-weight:800;line-height:1.1;color:var(--gray-900);}
.dashboard-stat-card .l{font-size:.78rem;color:var(--gray-600);margin-top:.15rem;}
.dashboard-progress-card{background:linear-gradient(135deg,#ECFDF5 0%,#FEFCE8 50%,#FEF2F2 100%);border:1px solid rgba(0,0,0,.04);border-radius:var(--radius);padding:1.3rem 1.4rem;margin-bottom:1.2rem;}
.dashboard-progress-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.7rem;flex-wrap:wrap;gap:.4rem;}
.dashboard-progress-head .pct{font-size:1.4rem;font-weight:800;color:var(--gray-900);}
.dashboard-progress-bar{display:flex;height:.9rem;border-radius:999px;overflow:hidden;background:var(--gray-100);}
.dashboard-progress-bar span{transition:width .5s;}
.dashboard-progress-legend{display:flex;gap:1.2rem;margin-top:.8rem;flex-wrap:wrap;}
.dashboard-progress-legend .item{display:flex;align-items:center;gap:.4rem;font-size:.8rem;color:var(--gray-600);}
.dashboard-progress-legend .dot{width:.6rem;height:.6rem;border-radius:50%;flex-shrink:0;}

.admin-panel{display:none;background:linear-gradient(160deg,#F5F3FF 0%,#FDF2F8 45%,#F0FDFA 100%);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.75rem;min-width:0;overflow-x:hidden;}
.admin-panel.active{display:block;}
.admin-panel h3{font-size:1.25rem;margin-bottom:1.25rem;}
.admin-form-box{background:var(--gray-50);border-radius:var(--radius-sm);padding:1.4rem;margin-bottom:1.75rem;}
.admin-form-box h4{font-size:1rem;margin-bottom:1rem;}
.form-row{display:grid;grid-template-columns:1fr;gap:1rem;}
@media(min-width:600px){.form-row.two{grid-template-columns:1fr 1fr;}}
.admin-list{display:flex;flex-direction:column;gap:.75rem;}
.admin-list-item{display:flex;align-items:center;gap:1rem;padding:.85rem 1rem;background:rgba(255,255,255,.55);border:1px solid rgba(0,0,0,.05);border-left:3px solid var(--gray-300);border-radius:.8rem;transition:border-color .2s,box-shadow .2s;}
.admin-list-item:hover{box-shadow:var(--shadow-sm);}
.admin-list-item .thumb-sm{width:3rem;height:3rem;border-radius:.6rem;object-fit:cover;flex-shrink:0;background:var(--gray-100);}
.admin-list-item .meta{flex:1;min-width:0;}
.admin-list-item .meta .t{font-weight:800;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.admin-list-item .meta .s{font-size:.78rem;color:var(--gray-500);line-height:1.5;}
.admin-list-item .actions{display:flex;gap:.4rem;flex-shrink:0;}
/* Auf schmalen Bildschirmen quetschen sich Text und Buttons sonst in eine
   Zeile zusammen (z.B. Flyer-Verteilung) - deshalb stapeln wir die
   Listeneinträge dort und geben Text/Buttons mehr Luft. */
@media(max-width:640px){
  .admin-list-item{flex-direction:column;align-items:stretch;gap:.65rem;padding:1rem;}
  .admin-list-item .meta .t{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.4;}
  .admin-list-item .actions{flex-wrap:wrap;gap:.5rem .6rem;}
  .admin-list-item .actions .btn-sm{flex:1 1 auto;}
}
.file-preview{margin-top:.75rem;max-width:8rem;border-radius:.6rem;overflow:hidden;box-shadow:var(--shadow-sm);}
.msg-item{padding:1rem;border:1px solid var(--gray-100);border-radius:.8rem;margin-bottom:.75rem;}
.msg-item .m-head{display:flex;justify-content:space-between;gap:1rem;margin-bottom:.4rem;flex-wrap:wrap;}
.msg-item .m-from{font-weight:800;font-size:.9rem;}
.msg-item .m-date{font-size:.75rem;color:var(--gray-400);}
.msg-item .m-subject{font-size:.85rem;color:var(--violet-dark);font-weight:700;margin-bottom:.3rem;}
.msg-item .m-text{font-size:.88rem;color:var(--gray-600);}

.category-chip{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .75rem;border-radius:999px;background:var(--gray-100);font-size:.8rem;font-weight:700;color:var(--gray-700);}
.category-chip button{color:var(--gray-400);display:flex;}
.category-chip button:hover{color:#B91C1C;}
.reorder-btn{width:1.9rem;height:1.9rem;}
.reorder-btn:disabled{opacity:.3;cursor:not-allowed;}
.reorder-btn:disabled:hover{background:var(--gray-100);color:var(--gray-600);}

.admin-user-badge{font-size:.85rem;font-weight:700;color:var(--violet-dark);background:#F3E8FF;padding:.5rem 1rem;border-radius:999px;}
#settings-logo-current img{width:100%;height:100%;object-fit:cover;}
.new-admin-result{background:linear-gradient(135deg,#F3E8FF,#FCE7F3);border:1px solid #d8b4fe;border-radius:var(--radius-sm);padding:1.25rem;margin-bottom:1.5rem;}
.new-admin-result h4{color:var(--violet-dark);font-size:.95rem;margin-bottom:.75rem;}
.new-admin-result .cred-row{display:flex;align-items:center;gap:.6rem;background:#fff;border-radius:.6rem;padding:.6rem .9rem;margin-bottom:.6rem;font-family:'Courier New',monospace;font-size:.95rem;font-weight:700;}
.new-admin-result .cred-row span.label{font-family:'Poppins',inherit;font-weight:700;font-size:.78rem;color:var(--gray-500);min-width:5.5rem;}
.new-admin-result .warn{font-size:.78rem;color:#92400e;background:#fef3c7;padding:.5rem .75rem;border-radius:.5rem;margin-top:.5rem;}
.pw-value{font-family:'Courier New',monospace;letter-spacing:.03em;}
.copy-btn{color:var(--gray-500);}
.copy-btn:hover{color:var(--violet-dark);}

/* ---- Kreativmodus (Baukasten) ---- */
/* ---- Kreativmodus: LIVE-Bearbeitung direkt auf der Website ---- */
body.creative-mode-on [data-editable]{outline:1px dashed transparent;border-radius:.3rem;cursor:text;transition:outline-color .15s,background .15s;}
body.creative-mode-on [data-editable]:hover{outline-color:var(--violet);background:rgba(124,58,237,.06);}
body.creative-mode-on [data-editable="text"]:focus{outline:2px solid var(--pink);background:rgba(219,39,119,.07);cursor:text;}
body.creative-mode-on [data-editable="image"]{cursor:pointer;position:relative;}
/* Sobald per Kreativmodus ein echtes Foto als Hintergrund gesetzt wurde, muss
   das Platzhalter-Icon (Emoji-Span) im selben Element verschwinden - sonst
   schwebt es dauerhaft ueber dem Foto (Bug: Hintergrundbild + Icon gleichzeitig sichtbar). */
[data-editable="image"][style*="background-image"] > span{display:none;}
body.creative-mode-on [data-editable="image"]:hover::after{
  content:'🖼️ Bild ändern';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(30,27,75,.55);color:#fff;font-weight:800;font-size:.85rem;border-radius:inherit;z-index:5;
  pointer-events:none;
}
.creative-toolbar{position:fixed;left:50%;bottom:1.25rem;transform:translateX(-50%);z-index:900;
  background:var(--gray-900);color:#fff;border-radius:999px;padding:.6rem .6rem .6rem 1.1rem;
  display:flex;align-items:center;gap:.6rem;box-shadow:var(--shadow-lg);font-size:.85rem;font-weight:700;}
.creative-toolbar span.dot{width:.5rem;height:.5rem;border-radius:50%;background:#4ADE80;display:inline-block;animation:pulseDot 1.4s infinite;}
@keyframes pulseDot{0%,100%{opacity:1;}50%{opacity:.3;}}
.creative-toolbar button{border-radius:999px;padding:.5rem 1rem;font-weight:800;font-size:.82rem;}
.creative-toolbar button.ct-save{background:linear-gradient(90deg,var(--violet),var(--pink));color:#fff;}
.creative-toolbar button.ct-exit{background:#374151;color:#fff;}

/* ---- Rich-Text-Buttons für Impressum/Datenschutz im Kreativmodus ---- */
.legal-rt-toolbar{position:fixed;top:1.1rem;left:50%;transform:translateX(-50%);z-index:901;
  background:var(--gray-900);color:#fff;border-radius:.75rem;padding:.5rem;
  display:flex;align-items:center;gap:.35rem;box-shadow:var(--shadow-lg);}
.legal-rt-toolbar button{background:#374151;color:#fff;border-radius:.5rem;padding:.45rem .75rem;
  font-size:.8rem;font-weight:700;white-space:nowrap;}
.legal-rt-toolbar button:hover{background:var(--violet);}
.legal-rich-text{outline:none;}
body.creative-mode-on .legal-rich-text:focus{box-shadow:0 0 0 2px var(--violet);border-radius:.5rem;}

/* ---- Freie Inhaltsboxen (Baukasten) ---- */
.custom-boxes-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;}
@media(min-width:768px){.custom-boxes-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1100px){.custom-boxes-grid{grid-template-columns:repeat(3,1fr);}}
.custom-box{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:1.5rem;position:relative;overflow:hidden;}
.custom-box::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--violet),var(--pink));}
.custom-box .cb-icon{font-size:1.6rem;margin-bottom:.6rem;display:block;}
.custom-box h3{font-size:1.1rem;margin-bottom:.5rem;}
.custom-box p{color:var(--gray-600);font-size:.92rem;white-space:pre-line;}
body.creative-mode-on .custom-box{outline:1px dashed #d8b4fe;}
.cb-admin-row{display:flex;gap:.75rem;align-items:flex-start;padding:1rem;border:1px solid var(--gray-100);border-radius:.8rem;margin-bottom:.75rem;}
.cb-admin-row .cb-admin-fields{flex:1;display:flex;flex-direction:column;gap:.5rem;}
.cb-admin-row input, .cb-admin-row textarea{width:100%;padding:.5rem .7rem;border:1px solid var(--gray-200);border-radius:.5rem;font-size:.85rem;}
.cb-admin-row .cb-admin-actions{display:flex;flex-direction:column;gap:.4rem;}
.creative-mode-box{margin-top:1.75rem;padding:1.75rem;border-radius:var(--radius);background:linear-gradient(135deg,#FAF5FF,#FDF2F8,#FFF7ED);border:2px solid #E9D5FF;position:relative;overflow:hidden;}
.creative-mode-box::before{content:'';position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,var(--rb-1),var(--rb-2),var(--rb-3),var(--rb-4),var(--rb-5),var(--rb-6));}
.creative-mode-head{margin-bottom:1.5rem;}
.creative-badge{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .85rem;border-radius:999px;background:linear-gradient(90deg,var(--violet),var(--pink));color:#fff;font-size:.75rem;font-weight:800;margin-bottom:.6rem;}
.creative-mode-head h4{font-size:1.15rem;margin-bottom:.3rem;}
.creative-mode-head p{color:var(--gray-600);font-size:.85rem;}

.preset-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.5rem;}
.preset-btn{display:flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border-radius:999px;background:#fff;border:1px solid var(--gray-200);font-size:.82rem;font-weight:700;color:var(--gray-700);transition:all .2s;}
.preset-btn:hover{border-color:#c4b5fd;transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.preset-btn.active{border-color:var(--violet);box-shadow:0 0 0 2px rgba(124,58,237,.2);}
.preset-swatch{display:flex;border-radius:50%;overflow:hidden;width:1.3rem;height:1.3rem;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);}
.preset-swatch span{flex:1;height:100%;}

.color-picker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:1rem;margin-bottom:1.5rem;}
.color-picker-item{display:flex;flex-direction:column;align-items:center;gap:.5rem;cursor:pointer;}
.color-picker-item input[type="color"]{width:3.2rem;height:3.2rem;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--gray-200), var(--shadow-sm);cursor:pointer;padding:0;background:none;}
.color-picker-item input[type="color"]:hover{box-shadow:0 0 0 2px #c4b5fd, var(--shadow-md);}
.color-picker-item span{font-size:.78rem;font-weight:700;color:var(--gray-600);}

.hero-bg-box{background:#fff;border-radius:var(--radius-sm);padding:1.25rem;border:1px solid var(--gray-100);}
.hero-bg-box input[type="file"]{font-size:.82rem;}
#hero-bg-preview img{max-width:10rem;border-radius:.6rem;box-shadow:var(--shadow-sm);}

/* Wenn ein eigenes Hero-Hintergrundbild gesetzt ist, keinen Farbverlauf-Overlay-Text-Schatten veraendern noetig - nur Animation stoppen */
.hero.hero-custom-bg{animation:none;}

/* Bearbeiten-Hervorhebung (wenn ein Formular im Edit-Modus ist) */
.admin-form-box.editing{outline:2px solid var(--amber);outline-offset:3px;}

/* ---------------------------------------------------------------------
   RECHTLICHE SEITEN / SONSTIGES
   --------------------------------------------------------------------- */
.page-hero{padding:3.25rem 1.25rem;text-align:center;color:#fff;position:relative;overflow:hidden;}
.page-hero .overlay{position:absolute;inset:0;background:rgba(0,0,0,.2);}
.page-hero .inner{position:relative;z-index:1;max-width:36rem;margin:0 auto;}
.page-hero h1{font-size:2.2rem;margin-bottom:.75rem;}
@media(min-width:768px){.page-hero h1{font-size:2.75rem;}}
.page-hero p{color:rgba(255,255,255,.86);}

/* ---------------------------------------------------------------------
   VEREINSGESCHICHTE: VERTIKALER ZEITSTRAHL
   Mittige Linie mit Regenbogen-Verlauf, Karten kleben abwechselnd
   links/rechts direkt an der Linie (klassisches Zigzag-Muster).
   --------------------------------------------------------------------- */
.story-intro{max-width:38rem;margin:0 auto 1rem;text-align:center;color:var(--gray-600);}

.vg-timeline{position:relative;max-width:52rem;margin:3rem auto 0;}
.vg-timeline::before{content:'';position:absolute;left:50%;top:.4rem;bottom:.4rem;width:4px;transform:translateX(-50%);
  background:linear-gradient(180deg,var(--rb-2),var(--rb-3),var(--rb-4),var(--rb-5),var(--rb-1));border-radius:4px;}

.vg-item{position:relative;display:grid;grid-template-columns:1fr 2.75rem 1fr;align-items:start;margin-bottom:2.75rem;}
.vg-item:last-child{margin-bottom:0;}

.vg-dot{grid-column:2;justify-self:center;margin-top:.3rem;width:1.3rem;height:1.3rem;border-radius:50%;
  background:var(--vg-color);border:4px solid #fff;box-shadow:0 0 0 3px var(--vg-color),0 3px 8px rgba(17,24,39,.2);z-index:2;}

.vg-card{position:relative;background:#fff;border-radius:1rem;box-shadow:var(--shadow-md);padding:1.15rem 1.3rem;
  border:1px solid var(--gray-100);transition:transform .2s,box-shadow .2s;}
.vg-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.vg-item:nth-child(odd) .vg-card{grid-column:1;text-align:right;}
.vg-item:nth-child(even) .vg-card{grid-column:3;text-align:left;}
.vg-item:nth-child(odd) .vg-card::after,.vg-item:nth-child(even) .vg-card::after{content:'';position:absolute;top:1.05rem;
  width:1.4rem;height:3px;background:var(--vg-color);}
.vg-item:nth-child(odd) .vg-card::after{right:-1.4rem;}
.vg-item:nth-child(even) .vg-card::after{left:-1.4rem;}

.vg-date{display:inline-block;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  margin-bottom:.3rem;color:var(--vg-color);}
.vg-card h3{font-size:1.05rem;margin:0 0 .4rem;line-height:1.3;}
.vg-card p{font-size:.85rem;color:var(--gray-600);line-height:1.55;margin:0 0 .7rem;}
.vg-media{width:80%;max-width:20rem;margin:0 auto;aspect-ratio:16/10;border-radius:.7rem;overflow:hidden;cursor:pointer;padding:.5rem;
  background-color:#fff;background-repeat:no-repeat;background-size:contain;background-position:center;background-origin:content-box;background-clip:content-box;
  box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;box-sizing:border-box;}
.vg-media img{width:100%;height:100%;object-fit:contain;object-position:center;border-radius:.4rem;}
.vg-media span{font-size:1.6rem;opacity:.5;}
.vg-media-cover{padding:0;background-color:transparent;}
.vg-media-cover img{object-fit:cover;border-radius:.7rem;}

@media(max-width:760px){
  .vg-timeline{margin-top:2.25rem;}
  .vg-timeline::before{left:1rem;}
  .vg-item{grid-template-columns:2rem 1fr;margin-bottom:2.25rem;}
  .vg-dot{grid-column:1;margin-top:.25rem;width:1.1rem;height:1.1rem;}
  .vg-item:nth-child(odd) .vg-card,.vg-item:nth-child(even) .vg-card{grid-column:2;text-align:left;}
  .vg-item:nth-child(odd) .vg-card::after,.vg-item:nth-child(even) .vg-card::after{left:-1.1rem;right:auto;width:1.1rem;}
}

/* ---------------------------------------------------------------------
   TOASTS
   --------------------------------------------------------------------- */
.toast-container{position:fixed;top:1.25rem;right:1.25rem;z-index:500;display:flex;flex-direction:column;gap:.55rem;}
.toast{background:var(--gray-900);color:#fff;padding:.75rem 1.15rem;border-radius:.7rem;box-shadow:var(--shadow-lg);font-size:.88rem;font-weight:700;display:flex;align-items:center;gap:.55rem;animation:toastIn .3s ease-out;}
.toast.success svg{color:#4ADE80;}
.toast.error{background:#7F1D1D;}
.toast.error svg{color:#FCA5A5;}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:translateY(0);}}

/* ---------------------------------------------------------------------
   FOOTER
   --------------------------------------------------------------------- */
footer{background:var(--gray-950);color:#d1d5db;}
.footer-inner{max-width:1200px;margin:0 auto;padding:3rem 1.25rem;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:2.25rem;}
@media(min-width:768px){.footer-grid{grid-template-columns:1.1fr 1fr 1fr 1fr;}}
.footer-grid h3{color:#fff;font-size:1.05rem;margin-bottom:.9rem;}
.footer-grid h4{color:#fff;font-weight:800;margin-bottom:.9rem;font-size:.95rem;}
.footer-grid p{font-size:.88rem;color:#9CA3AF;}
.footer-nav-list{display:flex;flex-direction:column;gap:.5rem;font-size:.88rem;}
.footer-nav-list a:hover{color:#C4B5FD;}
.footer-social{display:flex;gap:.6rem;margin-top:1.1rem;}
.footer-social a{width:2.2rem;height:2.2rem;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff;transition:background .2s;}
.footer-social a:hover{background:var(--violet);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:2.25rem;padding-top:1.4rem;text-align:center;font-size:.85rem;color:#6B7280;}
.footer-bottom .accent{color:#C4B5FD;}

/* ---------------------------------------------------------------------
   SEITEN-SICHTBARKEIT (SPA-Router)
   --------------------------------------------------------------------- */
.page{display:none;}
.page.active{display:block;}
.pt-nav{padding-top:5.25rem;}
main{min-height:70vh;}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}

/* ---------------------------------------------------------------------
   COMMUNITY-CHAT
   --------------------------------------------------------------------- */
.chat-wrap{max-width:44rem;margin:0 auto;}
.chat-locked{text-align:center;background:#fff;border:1px solid var(--gray-200,#e5e7eb);border-radius:1rem;padding:2.5rem 1.5rem;box-shadow:var(--shadow,0 1px 3px rgba(0,0,0,.08));}
.chat-locked svg{color:var(--violet);margin-bottom:.75rem;}
.chat-locked h3{font-size:1.2rem;margin-bottom:.5rem;}
.chat-locked p{color:var(--gray-600,#4b5563);margin-bottom:1.25rem;}
.chat-box{background:#fff;border:1px solid var(--gray-200,#e5e7eb);border-radius:1rem;box-shadow:var(--shadow,0 1px 3px rgba(0,0,0,.08));display:flex;flex-direction:column;overflow:hidden;}
.chat-messages{height:min(55vh,32rem);overflow-y:auto;padding:1.1rem;display:flex;flex-direction:column;gap:.7rem;background:var(--gray-50,#f9fafb);}
.chat-msg{display:flex;gap:.65rem;max-width:88%;}
.chat-msg.own{align-self:flex-end;flex-direction:row-reverse;}
.chat-msg-avatar{flex-shrink:0;width:2.1rem;height:2.1rem;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--pink));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.78rem;overflow:hidden;}
.chat-msg-avatar.clickable, .chat-msg-name.clickable{cursor:pointer;}
.chat-msg-avatar.clickable:hover{filter:brightness(1.08);}
.chat-msg-name.clickable:hover{text-decoration:underline;}
.profile-modal-box{max-width:24rem;width:100%;text-align:center;background:#fff;border-radius:var(--radius-lg,1rem);padding:2rem 1.75rem 1.75rem;}
.profile-modal-avatar{width:5rem;height:5rem;border-radius:50%;margin:0 auto .9rem;background:linear-gradient(135deg,var(--violet),var(--pink));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.6rem;overflow:hidden;}
.profile-modal-avatar img{width:100%;height:100%;object-fit:cover;}
.profile-modal-position{color:var(--violet-dark,var(--violet));font-weight:700;font-size:.9rem;margin-top:.2rem;}
.profile-modal-bio{margin-top:1rem;color:var(--gray-600);font-size:.9rem;line-height:1.5;white-space:pre-wrap;text-align:left;}
.chat-msg-body{background:#fff;border:1px solid var(--gray-200,#e5e7eb);border-radius:.9rem;padding:.55rem .8rem;position:relative;}
.chat-msg-delete{position:absolute;top:.3rem;right:.3rem;width:1.4rem;height:1.4rem;min-width:0;border-radius:50%;background:transparent;color:var(--gray-400);}
.chat-msg-delete:hover{color:#B91C1C;background:#FEE2E2;}
.chat-msg.own .chat-msg-delete{color:rgba(255,255,255,.75);}
.chat-msg.own .chat-msg-delete:hover{color:#fff;background:rgba(0,0,0,.2);}
.chat-msg-body.has-delete{padding-right:1.9rem;}
.chat-msg.own .chat-msg-body{background:linear-gradient(135deg,var(--violet),var(--pink));color:#fff;border-color:transparent;}
.chat-msg-name{font-size:.75rem;font-weight:800;margin-bottom:.15rem;color:var(--violet-dark,var(--violet));}
.chat-msg.own .chat-msg-name{color:rgba(255,255,255,.85);}
.chat-msg-text{font-size:.92rem;line-height:1.4;white-space:pre-wrap;word-break:break-word;}
.chat-msg-time{font-size:.68rem;opacity:.6;margin-top:.25rem;}
.chat-empty{margin:auto;text-align:center;color:var(--gray-500,#6b7280);font-size:.9rem;}
.chat-input-row{display:flex;gap:.6rem;padding:.85rem;border-top:1px solid var(--gray-200,#e5e7eb);background:#fff;}
.chat-input-row textarea{flex:1;resize:none;border:1px solid var(--gray-300,#d1d5db);border-radius:.7rem;padding:.6rem .8rem;font:inherit;font-size:.9rem;max-height:6rem;}
.chat-input-row textarea:focus{outline:2px solid var(--violet);outline-offset:1px;}
.chat-send-btn{flex-shrink:0;width:2.7rem;height:2.7rem;border-radius:.7rem;border:none;background:linear-gradient(135deg,var(--violet),var(--pink));color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .2s;}
.chat-send-btn:disabled{opacity:.5;cursor:default;}
.chat-status{font-size:.78rem;color:var(--gray-500,#6b7280);padding:.4rem 1.1rem;text-align:center;}

/* ---------------------------------------------------------------------
   SPENDEN-DANKESCHÖN
   --------------------------------------------------------------------- */
.donations-card{max-width:44rem;margin:0 auto;background:#fff;border:1px solid var(--gray-200,#e5e7eb);border-radius:1rem;padding:1.6rem 1.7rem;box-shadow:var(--shadow,0 1px 3px rgba(0,0,0,.08));}
.donations-card h3{font-size:1.2rem;margin-bottom:.4rem;}

.flyer-map-label{background:#fff;border:none;box-shadow:var(--shadow-sm);border-radius:.5rem;padding:.2rem .5rem;font-size:.72rem;font-weight:700;color:var(--gray-900);line-height:1.35;}
.flyer-map-label::before{display:none;}

/* Karten-Pin: farbiger Kreis mit Materialart-Emoji (📄/📰/🪧) in der Mitte.
   Füllfarbe = Status oder gemeldetes Problem, Randfarbe = zuständige Person
   (siehe buildFlyerMarkerIcon/getStreetMarkerFillColor in app.js). */
.flyer-marker-icon{background:none;border:none;}
.flyer-marker-pin{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.95rem;line-height:1;border:3px solid;box-shadow:0 2px 6px rgba(17,24,39,.28);}

/* ---------------------------------------------------------------------
   FLYER-VERTEILUNG: Handy-Bedienbarkeit
   Größere Tippflächen für Buttons/Inputs und Leaflet-Zoomcontrols,
   Statistik-Leiste, gestapeltes Suchformular auf schmalen Screens.
   --------------------------------------------------------------------- */
.flyer-stats{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:.9rem;}
.flyer-stat{flex:1 1 8rem;background:#fff;border:1px solid var(--gray-100);border-radius:.8rem;padding:.7rem .9rem;text-align:center;}
.flyer-stat .n{font-size:1.35rem;font-weight:800;line-height:1.1;}
.flyer-stat .l{font-size:.72rem;color:var(--gray-500);font-weight:700;margin-top:.15rem;}
.flyer-stat.stat-open .n{color:#DC2626;}
.flyer-stat.stat-claimed .n{color:#D97706;}
.flyer-stat.stat-done .n{color:#16A34A;}

#page-flyer .btn-sm{min-height:2.75rem;padding:.6rem 1.1rem;}
#flyerAddressSearchForm button.btn-sm{min-width:5.5rem;}
#flyerAddressSearchInput{min-height:2.75rem;font-size:1rem;width:100%;}

/* Autocomplete-Vorschlagsliste unter dem Adressfeld (Nominatim-Treffer) */
.flyer-suggestions{position:absolute;top:calc(100% + .3rem);left:0;right:0;background:#fff;border:1px solid var(--gray-200);border-radius:.8rem;box-shadow:var(--shadow-md);max-height:15rem;overflow-y:auto;z-index:40;}
.flyer-suggestion-item{padding:.6rem .8rem;cursor:pointer;border-bottom:1px solid var(--gray-100);}
.flyer-suggestion-item:last-child{border-bottom:none;}
.flyer-suggestion-item:hover, .flyer-suggestion-item.active{background:var(--gray-50);}
.flyer-suggestion-item .fs-name{font-weight:700;font-size:.9rem;color:var(--gray-900);}
.flyer-suggestion-item .fs-full{font-size:.76rem;color:var(--gray-500);margin-top:.1rem;}

/* Leaflet-Zoombuttons sind standardmäßig zu klein für Finger - vergrößern. */
#flyerMap .leaflet-control-zoom a{width:2.4rem;height:2.4rem;line-height:2.4rem;font-size:1.15rem;}

/* WICHTIG: Leaflet vergibt intern z-index bis 1000 (Zoom-Buttons, Marker-Popups).
   Ohne eigenen Stapel-Kontext "leckt" dieser Wert über die ganze Seite nach oben
   durch und schiebt sich dann sogar über den fest angehefteten Header (z-index:100).
   isolation:isolate kapselt die Karte komplett - alles bleibt innerhalb ihrer Box. */
#flyerMap{position:relative;isolation:isolate;z-index:1;}

/* Kompaktes Popup für die Straßen-Pins: die normalen Seiten-Buttons (große
   Pillen mit Farbverlauf) sind für die kleine Popup-Box viel zu groß gebaut,
   dadurch wurde die Karte vorher zur Hälfte verdeckt. Hier eigene, kleinere
   Darstellung nur innerhalb des Popups - der Rest der Seite bleibt unangetastet. */
.leaflet-popup.flyer-map-popup .leaflet-popup-content-wrapper{border-radius:1rem;box-shadow:0 14px 32px rgba(17,24,39,.18);}
.leaflet-popup.flyer-map-popup .leaflet-popup-content{margin:.7rem .85rem;font-size:.82rem;line-height:1.55;}
.leaflet-popup.flyer-map-popup .leaflet-popup-content strong{font-size:.92rem;}
.flyer-popup-actions{display:flex;flex-direction:column;gap:.35rem;margin-top:.65rem;}
.flyer-popup-actions .btn{width:100%;justify-content:center;font-size:.76rem;padding:.5rem .7rem;box-shadow:none;}
.flyer-popup-actions .btn-primary{box-shadow:0 4px 10px rgba(124,58,237,.22);}
.leaflet-popup.flyer-map-popup .flyer-street-note{padding:.4rem .6rem;font-size:.78rem;margin-top:.4rem;}
#flyerMap .leaflet-touch .leaflet-bar a{width:2.4rem;height:2.4rem;line-height:2.4rem;}

.flyer-history-item{padding:.7rem 0;border-top:1px solid var(--gray-100);}
.flyer-history-item:first-child{border-top:none;}
.flyer-history-item .fh-top{display:flex;justify-content:space-between;gap:.6rem;font-size:.85rem;font-weight:800;}
.flyer-history-item .fh-date{font-weight:600;color:var(--gray-400);font-size:.76rem;white-space:nowrap;}
.flyer-history-item .fh-note{font-size:.82rem;color:var(--gray-600);margin-top:.2rem;}

/* Straßen-Liste: Info immer OBEN, Aktionen immer darunter in eigener Zeile -
   dadurch konkurrieren Text und Buttons nie um dieselbe Zeile (das führte
   vorher zu einer extrem schmalen, umgebrochenen Textspalte). */
.flyer-street-item{display:flex;flex-direction:column;gap:.6rem;padding:1rem 1.1rem;border:1px solid var(--gray-100);border-radius:1rem;background:#fff;}
.flyer-street-head{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;}
.flyer-street-name{font-weight:800;font-size:1rem;color:var(--gray-900);}
.flyer-street-badge{font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:1rem;white-space:nowrap;}
.flyer-street-badge.open{background:#FEE2E2;color:#B91C1C;}
.flyer-street-badge.claimed{background:#FEF3C7;color:#92400E;}
.flyer-street-badge.done{background:#DCFCE7;color:#15803D;}
.flyer-street-badge.nopos{background:var(--gray-100);color:var(--gray-600);}
.flyer-street-badge.condition-damaged{background:#FEF3C7;color:#92400E;}
.flyer-street-badge.condition-removed{background:#FEE2E2;color:#B91C1C;}
.flyer-street-badge.condition-missing,.flyer-street-badge.condition-wrong_location{background:var(--gray-100);color:var(--gray-600);}
.flyer-street-badge.condition-replace_needed{background:#DBEAFE;color:#1D4ED8;}
.flyer-street-badge.condition-other{background:#FEF3C7;color:#92400E;}
.flyer-street-type-icon{font-size:1.1rem;line-height:1;}
.flyer-street-meta{font-size:.82rem;color:var(--gray-500);line-height:1.6;}

/* Block 5: Meldungen-Bereich (einklappbar, über der Straßenliste) - eigener
   Rahmen statt einfach in der Liste mitzulaufen, damit offene Meldungen
   (roter Badge) auch beim Scrollen sofort auffallen. */
.flyer-reports-section{border:1px solid #FCA5A5;background:#FEF2F2;border-radius:1rem;margin-bottom:.9rem;overflow:hidden;}
.flyer-reports-toggle{width:100%;display:flex;align-items:center;gap:.6rem;padding:.85rem 1rem;background:none;border:none;font-weight:800;font-size:.95rem;color:#B91C1C;cursor:pointer;min-height:2.75rem;}
.flyer-reports-badge{background:#DC2626;color:#fff;font-size:.72rem;font-weight:800;padding:.15rem .55rem;border-radius:1rem;}
.flyer-reports-body{padding:0 1rem 1rem;}
.flyer-report-item{background:#fff;border:1px solid var(--gray-100);border-radius:1rem;padding:1rem 1.1rem;margin-bottom:.7rem;display:flex;flex-direction:column;gap:.55rem;}
.flyer-report-item.handled{opacity:.7;}
.flyer-report-item:last-child{margin-bottom:0;}
.flyer-report-head{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;}
.flyer-report-photo{max-width:12rem;border-radius:.8rem;overflow:hidden;cursor:pointer;border:1px solid var(--gray-100);}
.flyer-report-photo img{display:block;width:100%;height:auto;max-height:9rem;object-fit:cover;}
.flyer-report-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.2rem;}
.flyer-street-note{margin-top:.5rem;padding:.55rem .75rem;background:#FFFBEB;border:1px solid #FDE68A;border-radius:.7rem;font-size:.85rem;font-weight:700;color:#92400E;line-height:1.5;}
.flyer-street-subline{margin-top:.4rem;font-size:.76rem;color:var(--gray-400);}
.flyer-street-actions{display:flex;flex-wrap:wrap;gap:.45rem .5rem;padding-top:.15rem;border-top:1px solid var(--gray-100);margin-top:.1rem;}
.flyer-street-actions .btn-sm{min-height:2.35rem;font-size:.82rem;padding:.45rem .85rem;}

/* Materialart-Filter ("Alle/Flyer/Broschüren/Plakate") und Auswahl beim
   Anlegen - eigene, dezente Klassen statt der lauten Primärfarbe, damit die
   Leiste nicht mit den Statusfarben (Rot/Gelb/Grün) konkurriert. */
.flyer-type-btn{border-radius:2rem;border-color:var(--gray-200,#e5e7eb);color:var(--gray-600,#4b5563);background:#fff;}
.flyer-type-btn:hover{border-color:var(--violet);color:var(--violet);}
.flyer-type-btn.active{background:var(--violet);color:#fff;border-color:var(--violet);}
.flyer-type-select{border:1px solid var(--gray-200,#e5e7eb);border-radius:.7rem;padding:0 .7rem;font-size:.9rem;min-height:2.6rem;background:#fff;color:var(--gray-900);}

/* Zustands-Filter (Punkt 9): eigene, aber optisch verwandte Leiste, damit
   erkennbar bleibt, dass sie zum Materialart-Filter gehört, aber unabhängig
   davon wirkt (z.B. "nur beschädigte Plakate" = beide Filter kombiniert). */
.flyer-condition-btn{border-radius:2rem;border-color:var(--gray-200,#e5e7eb);color:var(--gray-600,#4b5563);background:#fff;}
.flyer-condition-btn:hover{border-color:#B45309;color:#B45309;}
.flyer-condition-btn.active{background:#B45309;color:#fff;border-color:#B45309;}

/* Gruppenüberschriften über den beiden Filterzeilen ("Materialart"/"Zustand"),
   damit auf einen Blick klar ist, welche Pillen zusammengehören, statt zwei
   optisch gleichwertige Reihen ohne Kontext untereinander zu zeigen. */
.flyer-filter-label{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--gray-400,#9ca3af);margin:0 0 .4rem;}

@media(max-width:640px){
  #flyerAddressSearchForm{flex-direction:column;align-items:stretch;}
  #flyerAddressSearchForm input, #flyerAddressSearchForm select, #flyerAddressSearchForm button{width:100%;}
  #flyerMap{height:18rem;}
  .flyer-stat{flex:1 1 45%;}
  .flyer-type-filter .flyer-type-btn{flex:1 1 auto;text-align:center;}
  .flyer-condition-filter .flyer-condition-btn{flex:1 1 auto;text-align:center;}
}

/* "Problem melden"-Button in der Straßen-/Material-Liste: dezent orange statt
   Alarm-Rot, damit er nicht wie ein Fehlerzustand wirkt, aber trotzdem klar
   als eigene, wichtige Aktion auffällt. */
.flyer-report-btn{background:#FFF7ED;color:#C2410C;border:1px solid #FED7AA;}
.flyer-report-btn:hover{background:#FFEDD5;}

/* Zustands-Auswahl im "Problem melden"-Formular: große, gut antippbare
   Kacheln statt kleiner Radio-Punkte - Vorgabe war ausdrücklich "wenige
   Klicks, große Buttons" für die Nutzung unterwegs auf dem Handy. */
.material-condition-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:.4rem;}
.material-condition-opt{display:flex;align-items:center;gap:.5rem;padding:.75rem .8rem;border:2px solid var(--gray-200,#e5e7eb);border-radius:.9rem;cursor:pointer;font-size:.88rem;font-weight:600;min-height:2.8rem;transition:border-color .15s,background .15s;}
.material-condition-opt input{accent-color:var(--violet);width:1.05rem;height:1.05rem;flex-shrink:0;}
.material-condition-opt:has(input:checked){border-color:var(--violet);background:#F5F3FF;}
@media(max-width:480px){
  .material-condition-grid{grid-template-columns:1fr;}
}
.donation-row{display:flex;gap:.8rem;align-items:flex-start;padding:.75rem 0;border-top:1px solid var(--gray-100,#f3f4f6);}
.donation-row:first-child{border-top:none;}
.donation-avatar{flex-shrink:0;width:2.3rem;height:2.3rem;border-radius:50%;background:linear-gradient(135deg,var(--pink-dark),var(--violet-dark));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.8rem;}
.donation-name{font-weight:800;font-size:.92rem;}
.donation-amount{color:var(--violet);font-weight:800;font-size:.85rem;margin-left:.4rem;}
.donation-msg{font-size:.88rem;color:var(--gray-600,#4b5563);margin-top:.2rem;}
.donation-date{font-size:.72rem;color:var(--gray-400,#9ca3af);margin-top:.2rem;}

/* =========================================================================
   UI-REFRESH 2026 – Anmelden/Registrieren, Admin-Login, Admin-Dashboard
   ========================================================================= */

/* ---- Auth-Karte (Anmelden / Registrieren, Konto-Modal) ------------------ */
.auth-card{background:#fff;border-radius:var(--radius-lg);overflow:hidden;position:relative;}
.auth-card-stripe{height:.4rem;background:var(--gradient-brand);background-size:200% 100%;animation:gradientShift 6s ease infinite;}
.auth-card-body{padding:2.1rem 1.9rem 1.9rem;}
.auth-icon{width:3.75rem;height:3.75rem;border-radius:50%;background:var(--gradient-brand);display:flex;align-items:center;justify-content:center;color:#fff;margin:0 auto 1rem;box-shadow:0 10px 24px rgba(124,58,237,.32);animation:authPop .45s cubic-bezier(.2,1,.3,1);}
.auth-card-body h2{text-align:center;font-size:1.35rem;margin-bottom:.3rem;}
.auth-card-body > p.auth-sub{text-align:center;color:var(--gray-500);font-size:.86rem;margin-bottom:1.5rem;}
.auth-card-body form{text-align:left;}
.auth-card-body .form-hint{text-align:left;}
@keyframes authPop{from{transform:scale(.4);opacity:0;}to{transform:scale(1);opacity:1;}}

.auth-tabs{display:flex;gap:.3rem;background:var(--gray-50);border-radius:999px;padding:.3rem;margin-bottom:1.5rem;}
.auth-tab-btn{flex:1;padding:.6rem .8rem;border-radius:999px;font-weight:800;font-size:.86rem;color:var(--gray-500);transition:all .25s;text-align:center;border:none;background:transparent;}
.auth-tab-btn.active{background:#fff;color:var(--violet-dark);box-shadow:var(--shadow-sm);}
.auth-tab-btn:hover:not(.active){color:var(--violet-dark);}

/* Eingabefelder mit Icon links ------------------------------------------ */
.field-icon{position:relative;}
.field-icon > svg{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);color:var(--gray-400);transition:color .2s;pointer-events:none;}
.field-icon input{padding-left:2.7rem !important;}
.field-icon:focus-within svg{color:var(--violet);}
.form-group input, .form-group select, .form-group textarea{border-radius:.85rem;}
.form-group input:hover, .form-group select:hover{border-color:var(--gray-300);}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{box-shadow:0 0 0 4px rgba(124,58,237,.16);}

/* Toggle "Passwort anzeigen" -------------------------------------------- */
.field-icon .pw-toggle{position:absolute;right:.6rem;top:50%;transform:translateY(-50%);padding:.35rem;color:var(--gray-400);border-radius:.5rem;transition:color .2s,background .2s;}
.field-icon .pw-toggle:hover{color:var(--violet);background:var(--gray-50);}
.field-icon.has-toggle input{padding-right:2.6rem;}


/* ---- Admin-Login: an den allgemeinen Marken-Stil angeglichen (wie auth-card) --- */
.admin-login-page{min-height:calc(100vh - 5.25rem);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1.25rem;position:relative;overflow:hidden;
  background:linear-gradient(160deg,#FAF5FF 0%,#FDF2F8 100%);
}
.admin-login-page::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(124,58,237,.07) 1px,transparent 1px);background-size:28px 28px;opacity:.7;pointer-events:none;}
.admin-login-back{position:relative;z-index:1;display:inline-flex;align-items:center;gap:.4rem;color:var(--gray-500);font-size:.83rem;font-weight:700;margin-bottom:1.4rem;transition:color .2s;}
.admin-login-back:hover{color:var(--violet-dark);}
.admin-login-card{position:relative;z-index:1;width:100%;max-width:24rem;background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 30px 70px rgba(76,29,149,.16);padding:2.5rem 2.15rem;text-align:center;color:var(--gray-900);animation:adminCardIn .5s cubic-bezier(.2,1,.3,1);}
.admin-login-card::before{content:'';display:block;position:absolute;top:0;left:0;right:0;height:.4rem;background:var(--gradient-brand);background-size:200% 100%;animation:gradientShift 6s ease infinite;}
@keyframes adminCardIn{from{opacity:0;transform:translateY(18px) scale(.98);}to{opacity:1;transform:translateY(0) scale(1);}}
.admin-login-icon{width:3.75rem;height:3.75rem;border-radius:50%;margin:.9rem auto 1.25rem;background:var(--gradient-brand);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 24px rgba(124,58,237,.32);}
.admin-login-card h2{font-size:1.35rem;color:var(--gray-900);margin-bottom:.3rem;}
.admin-login-card > p{color:var(--gray-500);font-size:.86rem;margin-bottom:1.5rem;}
.admin-login-card .form-group{text-align:left;}
.admin-login-card .form-group label{color:var(--gray-700);}
.admin-login-card .login-error{background:#FEF2F2;border:1px solid #FCA5A5;color:#B91C1C;}
.admin-login-card .login-error.show{animation:shakeX .5s;}
@keyframes shakeX{10%,90%{transform:translateX(-1px);}20%,80%{transform:translateX(2px);}30%,50%,70%{transform:translateX(-4px);}40%,60%{transform:translateX(4px);}}
.admin-login-card .btn-primary{width:100%;justify-content:center;padding:.9rem 1.7rem;}

/* ---- Admin-Dashboard: Kopfbereich --------------------------------------- */
#page-admin-dashboard .container.section{padding-top:1.9rem;}
.admin-dash-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;margin-bottom:1.1rem;}
.admin-dash-head h2{display:flex;align-items:center;gap:.55rem;}
.admin-user-badge{display:flex;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--gray-100);border-radius:999px;padding:.4rem 1.1rem .4rem .4rem;box-shadow:var(--shadow-sm);font-weight:800;font-size:.85rem;color:var(--gray-900);}
.admin-user-avatar{width:1.9rem;height:1.9rem;border-radius:50%;background:var(--gray-700);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0;}

/* ---- Admin-Dashboard: Seitenmenü mit Icons ------------------------------ */
.admin-shell{align-items:start;}
.admin-side{background:linear-gradient(160deg,#FDFBFF 0%,#FBF6FF 45%,#F6FEFC 100%);box-shadow:var(--shadow-md);border:1px solid var(--gray-100);padding:1.5rem .85rem .85rem;border-radius:var(--radius);position:relative;z-index:5;}
.admin-side::before{content:'';position:absolute;top:0;left:0;right:0;height:.45rem;border-radius:var(--radius) var(--radius) 0 0;background:var(--gradient-hero);}
.admin-tab-btn{color:var(--gray-600);border-left:3px solid transparent;border-radius:.8rem;}
.admin-tab-btn .tab-ic{display:inline-flex;align-items:center;justify-content:center;width:1.9rem;height:1.9rem;border-radius:.6rem;font-size:1.05rem;background:var(--gray-100);flex-shrink:0;transition:all .25s;}
.admin-tab-btn:hover{background:var(--gray-100);border-left-color:var(--pink);color:var(--gray-900);}
.admin-tab-btn:hover .tab-ic{background:#fff;transform:translateY(-1px);}
.admin-tab-btn.active{background:var(--gradient-brand);color:#fff;box-shadow:0 6px 16px rgba(124,58,237,.35);border-left-color:transparent;}
.admin-tab-btn.active .tab-ic{background:rgba(255,255,255,.28);}
.admin-tab-btn.logout{color:#DC2626;margin-top:.35rem;border-top:1px solid var(--gray-100);padding-top:.85rem;border-radius:0 0 .8rem .8rem;}
.admin-tab-btn.logout:hover{background:#FEE2E2;border-left-color:#DC2626;color:#B91C1C;}
.admin-tab-btn.logout .tab-ic{background:#FEE2E2;}
/* Bunter Akzent passend zum Markenlook (Logo/Buttons nutzen denselben Verlauf) */

/* ---- Admin-Dashboard: Panels mit Einblend-Animation --------------------- */
.admin-panel{border:1px solid rgba(0,0,0,.04);}
.admin-panel.active{animation:panelIn .4s cubic-bezier(.2,1,.3,1);}
@keyframes panelIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.admin-panel h3{display:flex;align-items:center;gap:.5rem;}

/* ---- Statistik-Karten: farbige Verlaeufe + gestaffelte Animation -------- */
.dashboard-stats-grid{gap:1.1rem;}
.dashboard-stat-card{background:#fff;box-shadow:var(--shadow-sm);animation:statIn .5s cubic-bezier(.2,1,.3,1) backwards;}
.dashboard-stat-card:nth-child(1){animation-delay:.02s;}
.dashboard-stat-card:nth-child(2){animation-delay:.08s;}
.dashboard-stat-card:nth-child(3){animation-delay:.14s;}
.dashboard-stat-card:nth-child(4){animation-delay:.2s;}
.dashboard-stat-card:nth-child(5){animation-delay:.26s;}
.dashboard-stat-card:nth-child(6){animation-delay:.32s;}
.dashboard-stat-card:nth-child(7){animation-delay:.38s;}
.dashboard-stat-card:nth-child(8){animation-delay:.44s;}
@keyframes statIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.dashboard-stat-card:hover{box-shadow:var(--shadow-lg);}
.dashboard-stat-icon{box-shadow:0 6px 14px rgba(17,24,39,.08);}

/* ---- "Tabellen" / Listen im Admin-Bereich -------------------------------- */
.admin-list-item{background:#fff;border-left-width:4px;transition:transform .2s,box-shadow .2s,border-color .2s;}
.admin-list-item:hover{transform:translateX(2px);box-shadow:var(--shadow-md);border-left-color:var(--violet);}
.admin-list-item .actions .btn-sm{transition:transform .15s,box-shadow .15s;}
.admin-list-item .actions .btn-sm:hover{transform:translateY(-2px);}

/* ---- Benachrichtigungen: Success / Fehler / Warnung --------------------- */
.toast-container{gap:.6rem;}
.toast{background:#111827;border-radius:.9rem;padding:.85rem 2.4rem .85rem 1rem;position:relative;overflow:hidden;box-shadow:0 16px 34px rgba(17,24,39,.28);animation:toastIn .35s cubic-bezier(.2,1,.3,1);}
.toast-ic{display:flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border-radius:50%;background:rgba(255,255,255,.12);flex-shrink:0;}
.toast.success .toast-ic{color:#4ADE80;background:rgba(74,222,128,.18);}
.toast.error{background:linear-gradient(135deg,#7F1D1D,#450a0a);}
.toast.error .toast-ic{color:#FCA5A5;background:rgba(252,165,165,.18);}
.toast.warning{background:linear-gradient(135deg,#78350F,#451a03);}
.toast.warning .toast-ic{color:#FCD34D;background:rgba(252,211,77,.18);}
.toast-msg{font-weight:700;}
.toast-bar{position:absolute;left:0;bottom:0;height:3px;width:100%;background:rgba(255,255,255,.35);transform-origin:left;animation:toastShrink 3.8s linear forwards;}
@keyframes toastShrink{from{transform:scaleX(1);}to{transform:scaleX(0);}}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}}

/* ---- Responsive Feinschliff ---------------------------------------------- */
@media(max-width:640px){
  .auth-card-body{padding:1.6rem 1.3rem 1.5rem;}
  .admin-login-card{padding:2rem 1.5rem;}
  .admin-dash-head{align-items:flex-start;}
}
@media(min-width:900px){
  .admin-side{gap:.2rem;}
}

/* ---- Admin- & Moderatorzugänge: Suche, Filter, Pagination -------------- */
.acc-list-toolbar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin:1.25rem 0 1rem;}
.acc-list-toolbar input[type="search"]{flex:1;min-width:14rem;padding:.65rem .9rem;border:1px solid var(--gray-200);border-radius:.7rem;background:#fff;}
.acc-list-toolbar input[type="search"]:focus{outline:none;border-color:#c4b5fd;box-shadow:0 0 0 3px rgba(196,181,253,.3);}
.filter-chip{padding:.5rem 1rem;border-radius:999px;background:var(--gray-100);color:var(--gray-600);font-weight:700;font-size:.82rem;border:1px solid transparent;transition:all .15s;}
.filter-chip:hover{background:var(--gray-200);}
.filter-chip.active{background:var(--gray-900);color:#fff;}
.pagination-bar{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1rem;}
.pagination-bar button{padding:.45rem .9rem;border-radius:.6rem;background:var(--gray-100);color:var(--gray-700);font-weight:700;font-size:.82rem;}
.pagination-bar button:hover:not(:disabled){background:var(--gray-200);}
.pagination-bar button:disabled{opacity:.4;cursor:default;}
.pagination-bar .pg-info{font-size:.82rem;color:var(--gray-500);}

/* ---- Status-Badges (Administrator / Moderator / Mitglied) -------------- */
.status-badge{display:inline-flex;align-items:center;gap:.35rem;font-size:.72rem;font-weight:800;padding:.2rem .6rem;border-radius:999px;margin-left:.4rem;vertical-align:middle;}
.status-badge.admin{background:#ECFDF3;color:#15803D;}
.status-badge.moderator{background:#F5F0FF;color:var(--violet-dark);}
.status-badge.member{background:var(--gray-100);color:var(--gray-600);}
.status-badge .dot{width:.45rem;height:.45rem;border-radius:50%;background:currentColor;display:inline-block;}

/* ---- Berechtigungs-Dialog: weiße Karte statt dunkles Lightbox-Theme ---- */
.perm-modal .perm-modal-card{background:#fff;border-radius:20px;max-width:34rem;width:100%;max-height:88vh;overflow-y:auto;padding:1.75rem;text-align:left;box-shadow:0 30px 70px rgba(0,0,0,.35);}
.perm-modal-head{display:flex;align-items:center;gap:.9rem;margin:.25rem 0 1.35rem;}
.toggle-row{display:flex;align-items:center;gap:.75rem;font-weight:700;color:var(--gray-900);padding:.9rem 1rem;background:var(--gray-50);border-radius:.9rem;margin-bottom:1.1rem;cursor:pointer;}
.toggle-switch{position:relative;display:inline-block;width:2.6rem;height:1.5rem;flex-shrink:0;}
.toggle-switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;z-index:1;}
.toggle-track{position:absolute;inset:0;background:var(--gray-300);border-radius:999px;transition:background .2s;}
.toggle-thumb{position:absolute;top:2px;left:2px;width:1.25rem;height:1.25rem;background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s;}
.toggle-switch input:checked ~ .toggle-track{background:var(--gradient-brand);}
.toggle-switch input:checked ~ .toggle-track .toggle-thumb{transform:translateX(1.1rem);}
.perm-select-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem;}
#permModalPermsSection.disabled{opacity:.4;pointer-events:none;}
#permModalGrid{display:grid;grid-template-columns:1fr 1fr;gap:0 1.5rem;max-height:20rem;overflow-y:auto;padding-right:.25rem;}
@media(max-width:520px){#permModalGrid{grid-template-columns:1fr;}}
.perm-modal-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--gray-100);}