/* Hinweis zum Zwischenspeicher: Der Server liefert Stylesheets mit
   cache-control: max-age=604800 aus. Damit eine Aenderung nicht erst
   nach bis zu sieben Tagen ankommt, tragen die <link>-Verweise in
   index.html und header.php einen Versionsanhang (?v=JJJJMMTT, bei mehreren Aenderungen
   am selben Tag mit angehaengtem Buchstaben).
   Diesen Anhang bei jeder Aenderung an custom.css oder startseite.css
   mit hochziehen. */

/* ============================================================
   custom.css – eigene Regeln, wird NACH Bootstrap geladen
   Alle Farben und Radien laufen ueber CSS-Variablen, damit sie
   an einer Stelle geaendert werden koennen.
   ============================================================ */

:root {
  /* ── Markenfarben ── */
  --ngdb-navy:   #0d1b3e;
  --ngdb-navy-2: #162347;
  --ngdb-navy-3: #1e2f5a;
  --ngdb-gold:   #c9a84c;
  --ngdb-gold-2: #e8c96a;
  --ngdb-cream:  #faf8f3;
  --ngdb-white:  #ffffff;
  --ngdb-border: #e5e3dc;
  --ngdb-text:   #1a1a2e;
  --ngdb-muted:  #6b7280;
  --ngdb-footer: #080f22;

  /* ── Schriften ── */
  --ngdb-font-body:    'Outfit', system-ui, -apple-system, sans-serif;
  --ngdb-font-display: 'Playfair Display', Georgia, serif;

  /* ── Form ── */
  --ngdb-radius:    14px;
  --ngdb-radius-lg: 24px;
  /* Zwei Ebenen: eine feine Kante und ein weicher, weit gestreuter
     Schatten. Das traegt eine Karte, ohne sie schwer wirken zu lassen. */
  --ngdb-shadow-sm: 0 1px 2px rgba(13, 27, 62, 0.04),
                    0 6px 20px rgba(13, 27, 62, 0.05);
  --ngdb-shadow:    0 1px 2px rgba(13, 27, 62, 0.04),
                    0 12px 36px rgba(13, 27, 62, 0.07);
  --ngdb-shadow-lg: 0 2px 4px rgba(13, 27, 62, 0.05),
                    0 24px 56px rgba(13, 27, 62, 0.11);

  /* ── Senkrechter Rhythmus: ein Wert fuer alle Abschnitte ── */
  --ngdb-section-y: clamp(72px, 9vw, 132px);

  /* ── Bootstrap-Variablen auf die Marke umstellen ── */
  --bs-primary:            var(--ngdb-navy);
  --bs-primary-rgb:        13, 27, 62;
  --bs-body-font-family:   var(--ngdb-font-body);
  --bs-body-color:         var(--ngdb-text);
  --bs-body-bg:            var(--ngdb-cream);
  --bs-secondary-color:    var(--ngdb-muted);
  --bs-border-color:       var(--ngdb-border);
  --bs-link-color:         var(--ngdb-navy);
  --bs-link-hover-color:   var(--ngdb-gold);
  --bs-border-radius:      var(--ngdb-radius);
  --bs-border-radius-lg:   var(--ngdb-radius-lg);
}

body {
  font-family: var(--ngdb-font-body);
  background: var(--ngdb-cream);
  color: var(--ngdb-text);
}

h1, h2, h3, .ngdb-display {
  font-family: var(--ngdb-font-display);
  font-weight: 800;
  color: var(--ngdb-navy);
  letter-spacing: -0.02em;
}

/* Der WhatsApp-Abschnitt bringt seine eigene Typografie mit und haelt alle
   Regeln auf .ngdb-elda begrenzt (Quelle: web/whatsapp-services-section.html).
   Seine Ueberschriften-Klassen setzen Farbe, Gewicht und Laufweite selbst,
   nur die Schriftart erben sie — die darf die Regel oben nicht ueberschreiben. */
.ngdb-elda h1, .ngdb-elda h2, .ngdb-elda h3 { font-family: inherit; }

/* ── Kopfzeile ── */
.ngdb-header {
  background: rgba(13, 27, 62, 0.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(201, 168, 76, 0.2);
}
.ngdb-header .navbar { min-height: 68px; }

.ngdb-logo {
  font-family: var(--ngdb-font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ngdb-white);
}
.ngdb-logo:hover, .ngdb-logo:focus { color: var(--ngdb-white); }
.ngdb-logo span { color: var(--ngdb-gold); }

.ngdb-back-link {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: color 0.2s;
}
.ngdb-back-link:hover, .ngdb-back-link:focus { color: var(--ngdb-gold-2); }

/* ── Wiederkehrende Bausteine ── */
.ngdb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ngdb-gold);
}
/* Kurze Goldlinie als Auftakt — setzt den Abschnitt ab, ohne Gewicht. */
.ngdb-eyebrow::before {
  content: '';
  width: 26px; height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.text-center .ngdb-eyebrow::after {
  content: '';
  width: 26px; height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.ngdb-card {
  background: var(--ngdb-white);
  border: 1px solid rgba(229, 227, 220, 0.8);
  border-radius: var(--ngdb-radius-lg);
  box-shadow: var(--ngdb-shadow);
}

.ngdb-required { color: var(--ngdb-gold); }

/* ── Formularfelder (Bootstrap-Grundlage, eigene Optik) ── */
.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ngdb-navy);
  margin-bottom: 0.45rem;
}
.form-control {
  padding: 13px 17px;
  border: 1px solid var(--ngdb-border);
  border-radius: 12px;
  font-size: 15px;
  color: var(--ngdb-text);
  background: var(--ngdb-cream);
}
.form-control::placeholder { color: #b0aea6; }
.form-control:focus {
  border-color: var(--ngdb-navy);
  box-shadow: 0 0 0 3px rgba(13, 27, 62, 0.08);
  background: var(--ngdb-white);
}
textarea.form-control { resize: none; }

/* ── Schaltflaechen ── */
.btn-ngdb {
  background: var(--ngdb-navy);
  color: var(--ngdb-white);
  border: none;
  border-radius: 100px;
  font-weight: 600;
  font-size: 15px;
  padding: 15px 34px;
  box-shadow: 0 6px 18px rgba(13, 27, 62, 0.18);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn-ngdb:hover, .btn-ngdb:focus {
  background: var(--ngdb-navy-3);
  color: var(--ngdb-white);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(13, 27, 62, 0.24);
}
.btn-ngdb:active { transform: translateY(0); }

/* ── Erfolgsmeldung ── */
.ngdb-success-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(201, 168, 76, 0.12);
  border: 2px solid var(--ngdb-gold);
  color: var(--ngdb-gold);
  font-size: 34px;
  animation: ngdb-pop 0.5s cubic-bezier(0.36, 1.8, 0.5, 1) both;
}
@keyframes ngdb-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .ngdb-success-icon { animation: none; }
  .btn-ngdb:hover { transform: none; }
}

/* ── Info-Kacheln ── */
.ngdb-info-item {
  background: var(--ngdb-white);
  border: 1.5px solid var(--ngdb-border);
  border-radius: var(--ngdb-radius);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--ngdb-muted);
}
.ngdb-info-item a {
  color: var(--ngdb-navy);
  text-decoration: none;
  font-weight: 500;
}
.ngdb-info-item a:hover { color: var(--ngdb-gold); }

/* ── Fusszeile ── */
.ngdb-footer {
  background: var(--ngdb-footer);
  color: rgba(255, 255, 255, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12px;
}
.ngdb-footer a { color: var(--ngdb-gold); text-decoration: none; }
.ngdb-footer a:hover { color: var(--ngdb-gold-2); }

/* ============================================================
   Gemeinsame Bausteine, die mehrere Seiten nutzen
   ============================================================ */

/* ── Abschnittskopf ── */
.ngdb-section-title {
  font-family: var(--ngdb-font-display);
  font-size: clamp(32px, 4.6vw, 56px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ngdb-navy);
}
.ngdb-section-sub {
  font-size: 18px;
  color: var(--ngdb-muted);
  line-height: 1.75;
  max-width: 620px;
}

/* Ein Abschnitt bekommt seinen Abstand aus einer Stelle, damit alle
   Abschnitte denselben Rhythmus haben. */
.ngdb-section { padding-block: var(--ngdb-section-y); }
.ngdb-section-header { margin-bottom: clamp(44px, 5vw, 72px); }

/* ── Goldene Schaltflaeche (Gegenstueck zu .btn-ngdb) ── */
.btn-gold {
  background: var(--ngdb-gold);
  color: var(--ngdb-navy);
  border: none;
  border-radius: 100px;
  font-weight: 700;
  font-size: 15px;
  padding: 15px 32px;
  box-shadow: 0 6px 20px rgba(201, 168, 76, 0.28);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.btn-gold:hover, .btn-gold:focus {
  background: var(--ngdb-gold-2);
  color: var(--ngdb-navy);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(201, 168, 76, 0.35);
}
.btn-gold:active { transform: translateY(0); }

/* ── Helle Schaltflaeche auf dunklem Grund ── */
.btn-ngdb-outline {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ngdb-white);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 100px;
  font-weight: 600;
  font-size: 15px;
  padding: 15px 32px;
  transition: background 0.2s, border-color 0.2s;
}
.btn-ngdb-outline:hover, .btn-ngdb-outline:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--ngdb-white);
}

@media (prefers-reduced-motion: reduce) {
  .btn-gold:hover { transform: none; }
}