/*
 * Bausteine für Landingpages (erstmals: Rechtskataster, 10/2026)
 * Handgeschrieben, nicht aus src/scss kompiliert.
 * Farben: Primary #009D8A (Flächen), Secondary #115858 (Text), Light #f1f4f8
 */

/* Kleine Überschrift über Titeln */
.nuc-eyebrow {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #009D8A;
}
.text-contrast .nuc-eyebrow,
.nuc-eyebrow.text-contrast,
.bg-primary .nuc-eyebrow {
  color: rgba(255, 255, 255, .8);
}

/* Schlagwort-Chips (Rechtsquellen, Branchen) */
.nuc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.nuc-chips > li {
  background: #f1f4f8;
  color: #115858;
  border-radius: 999px;
  padding: .3rem .85rem;
  font-size: .9rem;
}
.nuc-chips-outline > li {
  background: #fff;
  border: 1px solid #d9e2ef;
}
/* Chips auf dunklem Hintergrund (z. B. gradient-blue-dark) */
.nuc-chips-on-dark > li {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
}

/* Grafik "Rechtsquellen -> Einzelpflichten" */
.nuc-derive {
  overflow: hidden;
}
.nuc-derive-result {
  background: #009D8A;
  color: #fff;
  border-radius: .5rem;
  padding: 1.25rem 1.5rem;
}
.nuc-derive-num {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.1;
}
.nuc-derive-foot {
  background: #f1f4f8;
  border-top: 1px solid #d9e2ef;
  padding: .75rem 1.5rem;
  font-size: .85rem;
}

/* Hervorgehobene Kernleistung */
.nuc-card-core p {
  color: rgba(255, 255, 255, .85);
}

/* Zusätzliches Icon: fontawesome_custom.css enthält nur eine Auswahl,
   die Pro-Schriftdateien haben aber alle Glyphen */
.fa-triangle-exclamation::before {
  content: "\f071";
}

/* Liste mit Pfeil (abgeleitete Pflichten) */
ul.nuc-arrows {
  list-style: none;
  padding-left: 0;
}
ul.nuc-arrows > li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: .25rem;
}
ul.nuc-arrows > li::before {
  content: "\f061";
  font-family: 'Font Awesome 6 Pro';
  font-weight: 300;
  color: #009D8A;
  position: absolute;
  left: 0;
}

/* Beispielbox in den Bereichskarten */
.nuc-example {
  background: #f1f4f8;
  border-radius: .5rem;
  padding: 1rem 1.25rem;
}

/* Schrittnummer */
.nuc-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #009D8A;
  color: #fff;
  font-weight: 700;
  margin-bottom: 1rem;
}

/* FAQ-Akkordeon */
.nuc-faq .accordion-button {
  font-weight: 600;
  color: #115858;
}
.nuc-faq .accordion-button:not(.collapsed) {
  background: #fff;
  color: #009D8A;
  box-shadow: none;
}

/* Ansprechpartner-Karte neben dem Kontaktformular:
   so hoch wie das Formular, Inhalt mittig */
.nuc-kontakt-card {
  height: 100%;
  text-align: center;
}
/* Gleicher Schatten für beide Karten; der zarte shadow-sm ist auf Grün kaum sichtbar */
.nuc-kontakt-card,
.nuc-kontakt-form {
  border: 0;
  box-shadow: 0 .5rem 1.5rem rgba(22, 28, 45, .12);
}
.nuc-kontakt-card > .card-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.nuc-kontakt-foto {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgba(255, 255, 255, .6);
  margin-bottom: 1.5rem;
}
.nuc-kontakt-card p {
  color: rgba(255, 255, 255, .85);
}

/* Kontaktformular (alle Seiten): Labels "Kategorie" und "Thema" gleich breit */
.form-contact .input-group > .input-group-text {
  min-width: 6.5rem;
}

/* Buttonreihe im Einstieg (3 Buttons): auf dem Handy untereinander in voller Breite,
   bei 992-1199px (schmale Spalte) etwas kompakter, damit alle in eine Zeile passen */
@media (max-width: 575.98px) {
  .nuc-btn-row {
    flex-direction: column;
  }
  .nuc-btn-row > .btn {
    width: 100%;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .nuc-btn-row {
    gap: .75rem !important;
  }
  .nuc-btn-row > .btn {
    padding-left: .875rem;
    padding-right: .875rem;
  }
}

/* Button "Angebot anfordern" in der Hauptnavigation */
.nuc-nav .nuc-cta-angebot {
  white-space: nowrap;
}

/* Mitlaufender Button auf dem Handy */
.nuc-cta-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1020;
  padding: .625rem 1rem;
  background: #fff;
  border-top: 1px solid #d9e2ef;
  box-shadow: 0 -.25rem 1rem rgba(0, 0, 0, .06);
  transition: transform .25s ease;
}
.nuc-cta-sticky.is-hidden {
  transform: translateY(110%);
}
@media (max-width: 991.98px) {
  body:has(.nuc-cta-sticky) {
    padding-bottom: 4.5rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nuc-cta-sticky {
    transition: none;
  }
}

/* LinkedIn-Icon (Brands-Schrift ist vorhanden, die Klasse fehlt in fontawesome_custom.css) */
.fa-linkedin::before {
  content: "\f08c";
}