/* Allgemein */
body { 
  background: #f5f6fa; 
  font-family: "Segoe UI", sans-serif; 
  margin: 20px; 
  font-size: 1rem;
}

h2 { 
  text-align: center; 
  margin-bottom: 25px; 
  font-size: 2rem; 
}

/* ============ GRID / KANTONE ============ */
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  max-width: 1200px;
  margin: 0 auto;
}

.kanton {
  border-radius: 10px;
  padding: 25px;
  color: #fff;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}

.kanton:hover { 
  transform: scale(1.03); 
  box-shadow: 0 6px 10px rgba(0,0,0,0.2); 
}

.kanton h4 { font-size: 1.4rem; margin-bottom: 10px; }
.warntext { font-size: 1.05rem; margin-top: 5px; }
.gueltig { font-size: 0.95rem; color: rgba(255,255,255,0.85); margin-top: 5px; }

.details { 
  display: none; 
  margin-top: 10px; 
  text-align: left; 
  background: rgba(255,255,255,0.1); 
  padding: 15px; 
  border-radius: 6px; 
  max-height: 350px; 
  overflow: auto; 
  font-size: 0.95rem;
}

.toggle-btn { 
  position: absolute; 
  top: 10px; 
  right: 10px; 
  background: rgba(255,255,255,0.2); 
  border: none; 
  color: #fff; 
  border-radius: 50%; 
  width: 32px; 
  height: 32px; 
  cursor: pointer; 
  font-size: 1.2rem; 
}

/* Legende */
.legend {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 25px;
}
.legend div {
  padding: 6px 12px;
  border-radius: 6px;
  color: white;
  font-size: 0.9rem;
}

/* ============ ADMIN-FORMULAR ============ */
form.card .form-label { font-size: 1.1rem; }
form.card input, form.card select, form.card textarea { font-size: 1rem; }
form.card button { font-size: 1.1rem; }

.table th, .table td { font-size: 1rem; }

/* ============ RESPONSIVE DESIGN ============ */
@media (max-width: 2500px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 2000px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
  body { font-size: 0.95rem; }
  h2 { font-size: 1.8rem; }
  .kanton h4 { font-size: 1.3rem; }
}

@media (max-width: 1800px) {
  .grid { grid-template-columns: 1fr; }
  .kanton { padding: 20px; }
  .kanton h4 { font-size: 1.2rem; }
  .warntext { font-size: 1rem; }
  .gueltig { font-size: 0.9rem; }
  .details { font-size: 0.9rem; }
  form.card button { font-size: 1rem; padding: 10px; }
  select.form-select, input.form-control, textarea.form-control { font-size: 1rem; }
  table.table { font-size: 0.9rem; }
}

/* Mobile Buttons größer */
button, .btn {
  touch-action: manipulation;
  min-height: 44px;
  font-size: 1rem;
}