/* =========================
   BODY / GLOBAL
========================= */

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

body {
  position: relative;
  font-family: 'Unbounded', Arial, sans-serif;
  background: #eae7e0;
  color: #000;
  font-weight: 400;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}

h1, h2, h3, label, p, span {
  font-family: 'Unbounded', Arial, sans-serif;
}

:root {
  --border: #e5e7eb;
  --muted: #6b7280;
  --header-height: 100px;  /* Höhe deiner .header */
  --footer-height: 30px;   /* effektive Höhe deiner .footer (inkl. padding) */
}

/* Utility */
.hidden {
  display: none;
}


/* =========================
   MAIN CONTENT FRAME
========================= */

.frame {
  position: fixed;
  top: var(--header-height);
  bottom: var(--footer-height);
  left: 5%;
  right: 5%;
  max-width: 90%;
  overflow: hidden;          /* Scroll nur innen */
  display: flex;
  flex-direction: column;
  z-index: 15;
}


/* =========================
   CONTENT / LAYOUT
========================= */

.title {
	margin-bottom: 8px;
  border: solid red 0px;
}

.mobilelandscape{display:none;opacity:0;}


/* Zeile mit A (links) und B (rechts) */
.container-row {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;   /* wichtig für korrektes Strecken */
  gap: 0rem;
}

/* Linke Spalte (Karte / Liste) */
.container-A {
  flex: 2 1 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-width: none;
  padding: 0;
  border: solid red 0px;
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE / Edge (alt) */
}


/* Webkit-Browser (Chrome, Safari, Edge Chromium, Opera) */
.container-a::-webkit-scrollbar {
  display: none;
}


.map-wrap {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  background: #f3f4f6;
  border-radius: 20px;
  overflow: hidden;
}

#map {
  width: 100%;
  height: 100%;
}



/* Karte und Formular bleiben wie sie sind – wichtig ist die Liste */
#idea-list {
  flex: 1 1 auto;   /* nimmt den verfügbaren Platz ein */
  min-height: 0;    /* wichtig, damit flex-Child schrumpfen darf */
  display: flex;    /* damit die comment-list gestreckt werden kann */
  flex-direction: column;
  height:100%;
  right:0px;
  left:0px;
  margin-top: 0;
  border: solid green 0px;
}

/* eigentliche Liste voll in #idea-list strecken */
.comment-list {
  min-height: 0;
  overflow-y: auto; /* bei vielen Einträgen scrollbar */
  margin-top: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 0.75rem;          /* Abstand zwischen den Einträgen */
  text-align: left;
  font-size: 16px;
  padding: 0 15px 0 15px;
  font-weight: 700;
}



/* Rechte Spalte */
.container-B {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: solid blue 0px;
  overflow-y:auto;
}


/* Idee-Karte (Formular / Liste-Wrapper) */
.idea-card {
  margin-top: 0.5rem;
  border-radius: 18px;
  border: 1px solid var(--border);
  padding: 0.3rem 0.3rem 0.3rem;
  overflow-y: auto;
}


/* =========================
   DROPDOWN-FILTER
========================= */

#btn-filter-category {
  position: relative;
  z-index: 402; /* über der Karte */
}

.filter-dropdown {
  margin-top: 0.6rem;
  border-radius: 16px;
  padding: 0.9rem 1.1rem;
  z-index: 401;
  display: block;
  max-width: 260px;
}



/* vertikaler Abstand zwischen Label und Button-Gruppe */
.filter-dropdown .cat-bar-label {
  margin-bottom: 0.8rem;
}

/* vertikaler Abstand zwischen den Buttons etwas größer */
.filter-dropdown .category-bar {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}


/* =========================
   HEADER
========================= */

.header {
  position: fixed;
  box-sizing: border-box;
  top: 0;
  left: 0;
  width: 100%;
  flex-wrap: wrap;
  height: var(--header-height);
  border: solid green 0px;
  z-index: 0;
}

.logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 580px;
  height: auto;
  z-index: -10;
}

.nav {
  position: absolute;
  top: 40px;
  right: 60px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  background: none;
  justify-content: flex-end;
}

.nav button {
  border: 2px solid #333;
  padding: 12px 25px;
  border-radius: 25px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Unbounded', sans-serif;
  min-width: 120px;
  text-align: center;
  transition: background 0.2s, color 0.2s;
}

.nav button:hover {
  background: #000;
  color: #fff;
  border-color: #000;
}

.nav .active {
  background: #6abf4b;
  color: white;
  border-color: #6abf4b;
}

.nav-mobil {
  display: none;
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 500;
}

.nav-mobil img {
  width: 42px;
  background: none;
  border: none;
}

#navm_container {
  position: fixed;
  top: var(--header-height);
  left: 0; right: 0; bottom: 0;
  display: none;
  background: #eae7e0;
  padding: 12px 20px;
  z-index: 400;
}


.navm_links {
  width: 90%;
  margin: 10px auto;
  height: 56px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 20px;
}
.navm_links a,
.navm_links a.navm_text {
  display: flex;
  align-items: center;   / vertikal zentriert */
  justify-content: center;
  height: 100%;
  width: 100%;
  padding: 0 14px;
  line-height: 1;
  text-decoration: none;
  color: inherit;
  font-weight: 700;
}

#navm_container .navm_links {
  width: calc(100% - 40px);   / 2 * 20px Container-Padding ausgleichen */
  margin: 10px auto;
}



/* =========================
   FOOTER
========================= */

.footer {
  position: fixed;
  box-sizing: border-box;
  bottom: 0;
  left: 0;
  height: var(--footer-height);
  width: 100%;
  font-size: 10px;
  text-align: left;
  padding-top:10px;
  padding-left: 5%;
  z-index: 100;
  border: solid green 0px;
}


/* ---------- TITEL ---------- */

h1 {
  text-align: left;
  font-size: 30px;
  padding: 10px 15px 0 15px;
  font-weight: 700;
}

p {
  text-align: left;
  font-size: 16px;
  padding: 10px 15px 0 15px;
  font-weight: 400;
}

a { color: #000; }


/* ---------- GROSSE BOX (KARTE) ---------- */

.container {
  width: 90%;
  max-width: 1100px;
  margin: 50px auto 30px;
  background: #d9d9d9;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  height: auto;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* ---------- KLEINE BOX ---------- */

.inner-box {
  background: white;
  padding: 25px;
  border-radius: 15px;
  width: 100%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  margin-left: 40px;
}

.inner-box p {
  margin-bottom: 20px;
  font-size: 16px;
}


/* =========================
   KATEGORIEN / FILTER-BUTTONS
========================= */

.cat-0 { background: #1baf90; }
.cat-1 { background: #f4e733; }
.cat-2 { background: #f5acb2; }
.cat-3 { background: #eb5840; }
.cat-4 { background: #6763aa; }

.category-bar {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

/* Grundstil Button */
.cat-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  border: 1px solid #969696;
  padding: 0.2rem 0.6rem;
  width: 100%;
  cursor: pointer;
  background: #f9fafb;
  color: #111827;
  font-size: 0.8rem;
  font-weight: 600;
  text-align: left;
}


/* Piktogramm */
.cat-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border-radius: 999px;
  padding: 0.1rem;
}

.cat-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* Labeltext */
.cat-label {
  flex: 1;
}

/* Hintergrundfarben je Kategorie */
.cat-btn.cat-all { background: #e5e7eb; }
.cat-btn.cat-0   { background: #1baf90; color: #111827; }
.cat-btn.cat-1   { background: #f4e733; color: #111827; }
.cat-btn.cat-2   { background: #f5acb2; color: #111827; }
.cat-btn.cat-3   { background: #eb5840; color: #ffffff; }
.cat-btn.cat-4   { background: #6763aa; color: #ffffff; }



/* aktiver Filter */
.cat-btn.active,
.cat-btn-2.active {
  box-shadow: 0 0 0 2px #11182755;
  border-color: #111827;
}

/* Hover-Effekt */
.cat-btn:hover,
.cat-btn-2:hover {
  filter: brightness(0.95);
}


/* =========================
   PILLEN (Kategorie in Liste)
========================= */

.pill-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  color: #111827;
}

.pill-cat.cat-0 { background:#1baf90; }
.pill-cat.cat-1 { background:#f4e733; }
.pill-cat.cat-2 { background:#f5acb2; }
.pill-cat.cat-3 { background:#eb5840; }
.pill-cat.cat-4 { background:#6763aa; }

.pill-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pill-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}


/* =========================
   LISTEN-EINTRAG
========================= */

.comment-item {
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  cursor: pointer;
}

.comment-item:hover {
  background: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,0.06);
  border-color: #d1d5db;
}

.comment-body {
  font-size: 0.9rem;
  font-weight: 400;
  color: #111827;
  line-height: 1.4;
}

.comment-body strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
}

.comment-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: #6b7280;
  margin-bottom: 0.3rem;
}


/* Kopfzeile der Liste: Titel links, Filter rechts */
.idea-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.idea-list-head h2 {
  margin: 0;
  font-size: 1.1rem;
}

/* Filter-Buttons rechts kompakt nebeneinander */
#category-bar-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* ---------- BUTTONS ---------- */
.answer-buttons {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.answer-buttons button {
  border: none;
  padding: 10px 20px;
  border-radius: 20px;
  cursor: pointer;
  font-family: 'Unbounded', sans-serif;
  font-size: 14px;
  background: #eee;
  transition: background 0.2s, color 0.2s;
}

/* ---------- PINS  ---------- */




.map-pin-wrapper {
  margin: 0;
  padding: 0;
}

.map-pin {
  margin: 0;
  padding: 0;
  line-height: 0;
}

.map-pin-svg {
  display: block;
  transform: none;
}




/* ---------- HOVER-EFFEKT ---------- */
button:hover {
  background: #000;
  color: #fff;
}

.cat-btn:hover {
  background: #000;
  color: #fff;
}

.btn.primary {
  background: #22c55e;
  border: solid #111 1px;
  color: #111827;
  padding: 0.6rem 1.4rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
}

/* :hover schwarz */
.btn.primary:hover {
  background-color: #000000;
  color: #ffffff;
}

/* ---------- BILD ---------- */
.corner-image {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 60vw;
  max-width: 650px;
  height: auto;
  z-index: -100;
  pointer-events: none;
}

.nav-corner-image{
  display: none;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 60vw;
  max-width: 650px;
  height: auto;
  z-index: -100;
  pointer-events: none;
}

body.mitmachkarte .corner-image {
  width: 550px;      /* ca. halb so breit wie 900px */
  max-width: 30%;    /* auch prozentual kleiner */
}

/* Global-Layout nur für diese Seite neutralisieren */
body.mitmachkarte {
  display: block;
  padding: 0;
  margin: 0;
  align-items: initial;
  justify-content: initial;
}

.shell-mitmachkarte {
  width: 100%;
  max-width: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  background: transparent;
}

/* Map-Container */
.map-wrap {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  background: #f3f4f6;
  border-radius: 20px;
  overflow: hidden;
}

#map {
  width: 100%;
  height: 100%;
}

body.mitmachkarte .map-wrap {
  height: 45vh;  /* oder 40vh, Wert nach Bedarf testen */
}

/* Hinweis-Box */
.map-instructions {
  position: absolute;
  right: 1.2rem;
  top: 1.6rem;
  background: rgba(255,255,255,0.95);
  border-radius: 16px;
  padding: 0.6rem 0.9rem;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  max-width: 260px;
  z-index: 401;
}

.map-instructions-text {
  font-size: 0.9rem;
  color: #111827;
}



/* Formular-Layout in der Idea-Card */
.idea-form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.idea-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.idea-field {
  flex: 1 1 0;
  min-width: 180px;
}

.idea-field.full {
  flex-basis: 100%;
}

/* Labels */
.idea-field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 0.2rem;
}

/* Inputs & Textarea */
.idea-field input[type="text"],
.idea-field input[type="email"],
.idea-field select,
.idea-field textarea {
  width: 100%;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  border: 1px solid #d1d5db;
  font-size: 0.9rem;
  font-family: inherit;
  box-sizing: border-box;
}

/* Textarea höher und mit Resize nur vertikal */
.idea-field textarea {
  min-height: 120px;
  resize: vertical;
}

/* Fokuszustand */
.idea-field input:focus,
.idea-field select:focus,
.idea-field textarea:focus {
  outline: none;
  border-color: #111827;
  box-shadow: 0 0 0 2px rgba(17,24,39,0.1);
}

/* Checkbox-Zeile */
.consent-field {
  flex-basis: 100%;
}

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: #4b5563;
}

/* Aktionen (Buttons) unten */
.idea-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

/* Upload-Reihe */
.upload-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #6b7280;
}

.upload-btn {
  border-radius: 999px;
  border: 1px solid #111827;
  background: #111827;
  color: #fff;
  padding: 0.3rem 0.9rem;
  font-size: 0.8rem;
  cursor: pointer;
}

/* Hint unter dem Formular */
#coord-hint {
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: #6b7280;
}

    /* ---------- RESPONSIVE ---------- */





@media (max-width: 1200px) {
      .nav { display:none; }
      .nav button { font-size: 16px; padding: 10px 20px; min-width: 100px; }
      .nav-mobil { display:flex; }
      .navm_links { display:flex; }
      .nav-corner-image {display:block; width: 90%; max-width: 700px;}	
}
    
@media (max-width: 768px) {
      .inner-box { margin-left: 0; max-width: 90%; }
      .logo { width: 200px; }
      .nav { display:none; }
      .nav button { font-size: 16px; padding: 10px 20px; min-width: 100px; }
      .nav-mobil { display:flex; }
      .navm_links { display:flex; }
      .nav-corner-image {display:block; width: 90%; max-width: 700px;}
      #corner { display:none;}
      .map-instructions {display:none;}
      .filter-dropdown { display:none; }
     


      /* mobil: container-B zwischen Title und container-A */
 .container-row {
    flex-direction: column;
  }

.container-B {
    order: 1;
    height: auto;
    flex: 0 0 auto;      /* Wichtig: nicht mitwachsen, nur Inhalts-Höhe */
    border: solid green 0px;
  }



.container-A {
    order: 2;
    flex: 1 1 auto;      /* nimmt den restlichen Platz (Karte/Liste) */
    min-height: 0;
    border: solid red 0 px;
  }


    }




@media only screen and (max-device-width: 1000px) and (orientation: landscape) { 
	
.mobilelandscape{display:block;opacity:1; width:100%; z-index:2000;}

.header, .frame, .corner-image, .footer {display:none;opacity:0;}


}