/* assets/css/site.css */

/* ====== Basis / Theme ====== */
:root {
  --brand: #0ea5a4;
  --brand-2: #15b8b6;
  --dark: #0f172a;
}

body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--dark);
}

a { text-decoration: none; }
.meta { color: #64748b; }

.navbar { box-shadow: 0 10px 30px rgba(0,0,0,.06); }

.btn-brand {
  background: var(--brand);
  color: #fff;
  border: none;
}
.btn-brand:hover { background: var(--brand-2); color: #fff; }

.section-title { font-weight: 800; letter-spacing: -.01em; }

/* ====== Layout Bausteine ====== */
.hero {
  background:
    radial-gradient(1000px 400px at 10% 10%, rgba(14,165,164,.15), transparent),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  padding: 6rem 0 4rem;
}
.hero h1 { font-weight: 800; letter-spacing: -0.02em; }

.footer { background: #0b1220; color: #cbd5e1; }

.card {
  border: 1px solid #e5e7eb;
  border-radius: 1rem;
}
.card img {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}

.badge-soft { background: rgba(14,165,164,.12); color: var(--brand); }
.list-check li { margin-bottom: .5rem; }
.list-check li::marker { color: var(--brand); }

details summary { cursor: pointer; }
.callout {
  border-left: 4px solid var(--brand);
  background: #f0fbfb;
  padding: 1rem 1.25rem;
  border-radius: .5rem;
}

/* ====== Spezifisch: Formular Highlight (index.html) ====== */
.highlight-form {
  border: 3px solid #dc3545 !important;
  border-radius: 0.75rem;
  box-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
  transition: border 0.3s ease, box-shadow 0.3s ease;
}
/* Fallback wenn #termin angesprungen wird */
#termin:target #contactCard {
  border: 3px solid #dc3545 !important;
  border-radius: 0.75rem;
  box-shadow: 0 0 10px rgba(220, 53, 69, 0.4);
}

/* ====== Spezifisch: Hero image blur->clear (index) ====== */
.hero-image {
  filter: blur(10px);
  opacity: 0.7;
  transition: filter 1.2s ease, opacity 1.2s ease;
  will-change: filter, opacity;
}
.hero-image.is-clear { filter: blur(0); opacity: 1; }

/* ====== Spezifisch: Maps Placeholder (index) ====== */
.map-placeholder {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  min-height: 380px;
  border: 1px solid #e5e7eb;
}

/* ====== Mobile Optimierung (für ALLE Seiten) ====== */
@media (max-width: 768px) {
  .hero {
    padding: 3rem 0 2rem !important;
    text-align: center;
  }

  .hero h1 { font-size: 1.8rem !important; line-height: 1.2; }
  .hero .lead { font-size: 1rem !important; }
  .hero img { max-width: 95% !important; height: auto; margin-bottom: 1rem; }

  .navbar { padding-top: .4rem !important; padding-bottom: .4rem !important; }
  .navbar-brand span { font-size: 1.25rem !important; }

  .btn, .btn-lg { padding: 0.75rem 1.1rem !important; font-size: 1.05rem !important; }

  section { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .container { padding-left: 1rem !important; padding-right: 1rem !important; }

  .card { margin-bottom: 1.5rem; }
  .card img { width: 100% !important; height: auto !important; object-fit: cover; border-radius: 1rem; }

  .map-placeholder { min-height: 260px !important; }

  body { font-size: 1rem; }
}