/* Header volle Breite */
body, html { margin:0; padding:0; font-family:sans-serif; background:#f1f5f9; }
.navbar { padding:10px 20px; background:#fff; box-shadow:0 2px 5px rgba(0,0,0,0.1); width:100%; }

/* Hero volle Breite */
.hero * {
  position: relative;
  z-index: 1;
}
.hero { 
  	width: 100%;
  	min-height: 500px;
	background-image: url("/images/hero banner.png"); 
  	background-size: cover;
  	background-position: center;
  	background-repeat: no-repeat;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	text-align: center;
	padding: 40px 20px;
}

/* Container für Text */
.hero-content {
  	background: rgba(0, 0, 0, 0.45); /* 👉 Overlay nur hinter Text */
  	padding: 20px 30px;
  	border-radius: 12px;
  	color: white;
  	max-width: 700px;
}

/* Container 80% */
.container { max-width:80%; margin:0 auto; padding:20px 0; }

/* Werbebanner */
.banner { width:100%; margin-bottom:20px; display:flex; justify-content:center; }
.banner img { width:100%; border-radius:12px; }

/* Redaktioneller Content 2 Spalten nebeneinander */
.content-row-two {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

/* Jede Spalte */
.content-col {
  flex: 0 0 45%;
  display: flex;
  flex-direction: column;
  align-items: center;     /* 👉 horizontale Zentrierung */
  text-align: center;      /* 👉 Text zentriert */
}

/* Bild */
.content-col .content-img {
  width: 100%;
  display: flex;
  justify-content: center; /* 👉 Bild zentrieren */
}

.content-col .content-img img {
  max-width: 40%;
  border-radius: 10px;
}

/* Text */
.content-col .content-text {
  max-width: 500px;
}

.content-col .content-text h2 {
  margin-top: 10px;
}

/* Layout Categories + Map */
.layout { display:flex; gap:20px; height:600px; /* Kann anpassen */ }
.sidebar { width:300px; background:#fff; overflow-y:auto; padding:15px; border-right:1px solid #ddd; }

/* Kategorien Buttons */
.menu { display:flex; flex-direction:column; gap:8px; margin-bottom:15px; }
.menu .category { padding:8px 12px; border-radius:8px; background:#f1f5f9; cursor:pointer; transition:0.2s; border:1px solid #ccc; }
.menu .category:hover { background:#22c55e; color:white; }

/* POIs */
.place { background:#f9fafb; padding:10px; margin-bottom:10px; border-radius:8px; }
.place img { width:100%; border-radius:8px; }
.tag { background:#e2e8f0; padding:2px 6px; border-radius:6px; font-size:12px; margin:2px; display:inline-block; }

/* Map */
#map-container { flex:1; height:100%; position:relative; }
#map { height:100%; width:100%; border-radius:0; }

/* Admin */
input, select, textarea, button {
  display:block;
  width:100%;
  margin:8px 0;
  padding:8px;
}

textarea {
  height:200px;
}

/* Places */
#results {
  display:flex;
  flex-wrap:wrap;
  gap:15px;
}

#results .place {
  width:250px;
  background:#fff;
  padding:10px;
  border-radius:10px;
}

textarea {
  width:100%;
  height:120px;
  margin-top:10px;
}

/* FOOTER */
.footer {
  background:#111;
  color:#fff;
  margin-top:40px;
  padding:20px 0;
}

.footer-content {
  max-width:80%;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}

.footer-links {
  display:flex;
  gap:20px;
}

.footer-links a {
  color:#fff;
  text-decoration:none;
  font-size:14px;
  opacity:0.8;
}

.footer-links a:hover {
  opacity:1;
  text-decoration:underline;
}

.footer-copy {
  font-size:13px;
  opacity:0.6;
}