.center{text-align:center;}

body{
    font-family: system-ui;
    background: url(https://i.imgur.com/1YezsJh.png);
    padding: 1rem;
    background-color: rgb(237 237 237 / 80%);
    background-blend-mode: lighten;
}

p{font-size:16px;}

.wrapper{
    max-width:600px;
    margin:0 auto;
}
h1{text-align:center; margin-bottom:1.5rem;}

/* CARD */
.card{
	position:relative;
	text-align: center;
    background:#fff;
    padding:1.25rem;
    border-radius:16px;
    box-shadow:0 4px 10px rgba(0,0,0,.08);
    display:flex;
    flex-direction:column;
    margin-bottom:1.5rem;
}

label{
    display:block;
    font-weight:600;
    margin-top:1rem;
    margin-bottom:.25rem;
}

input, select, textarea{
    width:100%;
    padding:.65rem;
    border-radius:8px;
    border:1px solid #d1d5db;
    font-size:1rem;
	text-align:center;
	margin-bottom:15px;
}

textarea#description {
    width: auto;
}

input:focus, select:focus, textarea:focus{
    outline:none;
    border-color:#16a34a;
    box-shadow:0 0 0 2px rgba(22,163,74,.2);
}

button{
    width:100%;
    margin-top:1.25rem;
    padding:.8rem;
    background:#16a34a;
    color:#fff;
    border:none;
    border-radius:10px;
    font-size:1.1rem;
    font-weight:600;
    cursor:pointer;
}

button:hover{
    background:#15803d;
}

/* Spinner */
.spinner{
    width:20px;
    height:20px;
    border:6px solid #e5e7eb;
    border-top:6px solid #16a34a;
    border-radius:50%;
    animation:spin 1s linear infinite;
    margin:1rem auto;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* Grid Galerie */
.grid{
    display:grid;
    grid-template-columns:1fr;
    gap:1rem;
}
@media (min-width:600px){.grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1024px){.grid{grid-template-columns:repeat(4,1fr);}}

.card img{
    width:100%;
    height:200px;
    object-fit:cover;
    border-radius:8px;
    margin-bottom:.5rem;
    cursor:pointer;
}

/* Beschreibung */
.desc{
    background:#f9fafb;
    padding:.5rem;
    border-radius:6px;
    font-size:.9rem;
    /*white-space:pre-wrap;*/
    margin-top:.5rem;
}

/* Lightbox */
#lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.9);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
    cursor:pointer;
}
#lightbox img{
    max-width:95vw;
    max-height:95vh;
    width:auto;
    height:auto;
    object-fit:contain;
    border-radius:12px;
    box-shadow:0 0 30px rgba(0,0,0,.6);
}

/* Danke-Box */
#thankyou{
    text-align:center;
    animation:fadeIn .4s ease;
}
@keyframes fadeIn{
    from{opacity:0; transform:translateY(10px);}
    to{opacity:1; transform:none;}
}
#thankyou button{
    width:auto;
    padding:.5rem 1rem;
    margin-top:1rem;
}

/* actions */
.delete {color:red; font-weight:bold; text-decoration:none;}
.freigeben {color:green; font-weight:bold; text-decoration:none;}
.archivieren {color:brown; font-weight: bold; text-decoration: none;}

/* === ACCORDION === */
.accordion{
    width:100%;
    padding:1rem;
    margin-top:1.5rem;
    border:none;
    border-radius:10px;
    background:#e5e7eb;
    font-size:1rem;
    font-weight:600;
    cursor:pointer;
    text-align:left;
	color:#000;
}

.accordion::after{
    content:"▾";
    float:right;
    transition:.3s;
}

.accordion.active::after{
    transform:rotate(180deg);
}

.panel{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s ease;
    margin-top:.5rem;
}

/* STATISTIK */

.chart{
    display:flex;
    align-items:flex-end;
    gap:1rem;
    margin:1rem 0;
}

.bar{
    text-align:center;
    font-size:.8rem;
}

.bar-fill{
    width:40px;
    background:#16a34a;
    border-radius:6px 6px 0 0;
}

/* counter badge */
.badge{
    background:#374151;
    color:#fff;
    padding:.2rem .6rem;
    border-radius:999px;
    font-size:.8rem;
    float:right;
}

/* map funktion */
.map-link{
    display:inline-block;
    margin-top:.4rem;
    font-size:.85rem;
    color:#2563eb;
    text-decoration:none;
}
.map-link:hover{
    text-decoration:underline;
}

/* map lightbox */
.map-lightbox{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.8);
    z-index:9999;
}

.map-content{
    position:relative;
    width:90%;
    max-width:900px;
    height:80vh;
    margin:5vh auto;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
}

/* map icon */
.map-btn{
    background:none;
    border:none;
    color:#2563eb;
    cursor:pointer;
    padding:0;
    font-size:.9rem;
}
.map-btn:hover{
    background:none;
	color:#000;
}

/* map icon Ort anzeigen */
img.mappin {
    height: 17px;
    width: auto;
    position: relative;
    top: 11px;
}

/* text area zeichen counter */
#charCounter{
    text-align:right;
    font-size:.8rem;
    color:#6b7280;
    margin-top:4px;
	display:inline;
}

/* Standortwahl */
.loc-row{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-weight:600;
  margin-top:.8rem;
}

/* button manueller standort */
#pick-map{height:260px;border-radius:12px;overflow:hidden;border:1px solid #d1d5db;}
.secondary-btn{background:#e5e7eb;color:#111827;border:none;font-weight:600;cursor:pointer;padding:.7rem;border-radius:10px;}
.secondary-btn:hover{opacity:.9}

/* file input foto upload 

input#file_upload[type="file"] {
    display: none;
}
.file-upload {
    border: 1px solid #ccc;
    padding: 6px 12px;
    cursor: pointer;
    width: 300px;
text-align:center;
margin: 0 auto;
}

.file-upload img {
    object-fit:contain;
}*/

.close-map {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 28px;
    cursor: pointer;
    z-index: 1000;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 8px;
    font-size: 35px;
    font-weight: bolder;
    border: 5px solid #000;
    border-radius: 94px;
    background-color: #fff;
}

/*mehr laden button */
.secondary-btn{
  background:#e5e7eb;
  color:#111827;
  border:none;
  font-weight:600;
  cursor:pointer;
  padding:.5rem 1rem;
  border-radius:10px;
  padding-bottom: 16px;
}
.secondary-btn:hover{opacity:.9}

/* Loader unter dem Feed */
.feed-loader{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.6rem;
  margin:1rem 0 1.5rem;
  color:#6b7280;
  font-size:.9rem;
}

.spinner-sm{
  width:18px;
  height:18px;
  border:3px solid #e5e7eb;
  border-top:3px solid #16a34a;
  border-radius:50%;
  animation:spin .9s linear infinite;
}

/* Soft Fade-In für neu geladene Cards */
.fade-in{
  opacity:0;
  transform:translateY(10px);
  animation:fadeInCard .35s ease forwards;
}

@keyframes fadeInCard{
  to{opacity:1; transform:none;}
}

/* highlight */
.highlight-badge{
	text-decoration:none;
  position:absolute;
  top:10px;
  left:10px;
  background:#fde68a;
  color:#92400e;
  font-weight:bold;
  font-size:.75rem;
  padding:.3rem .5rem;
  border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  display:flex;
  align-items:center;
  gap:.25rem;
}

a.action-btn.highlight {
    text-decoration: none;
}

span.highlight_entfernen{color:red;}
span.highlight_add{color:green;}


/* FAQs*/

.faq_area{
    padding: 20px;
    text-align: center;
    background: #ffffff;
    border-radius: 20px;
	margin-top:220px;
}

.faq_area img{
    height: auto;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    object-fit: contain;
    max-width: 100%;
    margin-top: -280px;
}

.faq_image_container{
	object-fit:contain;
}

/* cleanup */
.cleanup-row{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-weight:600;
  margin-top:.6rem;
  color:#374151;
}

input[type="checkbox"]{
width:20px!important;
margin-bottom:0px;
}

label.cleanup-row {
    margin: 0 auto;
    display: flex;
    font-weight: 600;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.cleanup-badge{
text-decoration:none;
  position:absolute;
  top:10px;
  right:10px;
  background:green;
  color:#fff;
  font-weight:bold;
  font-size:.75rem;
  padding:.3rem .5rem;
  border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
  display:flex;
  align-items:center;
  gap:.25rem;
}

/* Foto hinzufügen Bereich Form Input */
.photo-picker{
	margin-top:15px;
  text-align:center;
  margin-bottom:.9rem;
}

.photo-preview{
  width:100%;
  max-width:420px;
  height:240px;
  object-fit:cover;
  border-radius:12px;
  border:2px solid #d1d5db;
  background: #fafafa;
/*background: linear-gradient(180deg,rgba(250, 250, 250, 1) 0%, rgba(222, 222, 222, 1) 100%);*/
  cursor:pointer;
}

.photo-hint{
  margin-top:.5rem;
  font-weight:700;
  color:#374151;
  cursor:pointer;
  user-select:none;
}
.photo-hint:hover{
  text-decoration:underline;
}

.photo-picker img {
    object-fit: contain;
}