/* === Grundlayout === */
body {
  font-family: "Segoe UI", Arial, sans-serif;
  margin: 0;
  background: #f3f5f7;
  color: #222;
}
h2 {
  color: #007c91;
  font-size: 1.8em;
  margin-bottom: 15px;
}
h3 {
  color: #00acc1;
  font-size: 1.3em;
  margin: 12px 0;
}
p { margin: 6px 0; }
.hidden { display:none; }

/* === Karten === */
.card {
  background: #fff;
  padding: 16px;
  margin: 10px 0;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.section {
  margin-top: 20px;
}

/* === Login === */
.login {
  max-width: 400px;
  margin: 100px auto;
  text-align: center;
}
.login input {
  width: 100%;
  padding: 14px;
  margin: 10px 0;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 1.1em;
}
.login button {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 8px;
  background: #4caf50;
  color: #fff;
  font-size: 1.2em;
  cursor: pointer;
}
.login button:hover { background: #45a049; }

/* === Buttons allgemein === */
button {
  padding: 8px 14px;
  margin-top: 6px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: #007c91;
  color: #fff;
}
button:hover { background: #006070; }
.btn-logout {
  background: #e74c3c;
}
.btn-logout:hover {
  background: #c0392b;
}

/* === WhatsApp Link === */
a {
  color: #25D366;
  text-decoration: none;
  font-weight: bold;
}
a:hover { text-decoration: underline; }

/* === Terminfarben === */
.termin {
  margin: 4px 0;
  padding: 8px;
  border-radius: 6px;
}
.termin.soon { background: rgba(255,200,0,0.15); }
.termin.later { background: rgba(0,200,255,0.15); }
.termin.past { background: rgba(200,200,200,0.2); color:#777; }

/* === Kleine rote Lösch-Icons === */
.delete-icon {
  display: inline-block;
  background: #e74c3c;
  color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  margin-left: 6px;
  user-select: none;
}
.delete-icon:hover {
  background: #c0392b;
}

/* === Admin-Layout === */
.flex-columns {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}
.flex-col {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  padding: 16px;
}
.flex-col:first-child { flex: 0 0 30%; }
.flex-col:last-child { flex: 1; }

/* === Responsive: Handy optimieren === */
@media (max-width: 900px) {
  body { background: #1c2e1c; color:#fff; }
  .card { background: rgba(0,0,0,0.2); color:#fff; box-shadow:none; }
  .flex-columns { flex-direction: column; }
  h2 { color:#fff; }
  h3 { color:#b8e6b8; }
  button { width: 100%; margin-top: 10px; }
}