/* ============================================================
   DEMO / KANZLEI BERGMANN & KRAUS

   FARBE   Tiefes Marineblau, Pergament, ein gedecktes
           Messington. Kein Schwarz-Gold: das wirkt wie ein
           Notariat aus einem Katalog von 1998.
   SCHRIFT Libre Baskerville. Eine klassische Antiqua aus der
           Buchtradition. Recht ist ein Gewerbe, in dem
           Bestaendigkeit verkauft wird, nicht Neuheit.
   AUFBAU  Rechtsgebiete als eigene Bloecke, jedes mit der
           Frage, die Mandanten in dieser Lage stellen. Keine
           Aufzaehlung von "Taetigkeitsschwerpunkten": danach
           sucht niemand.
   ============================================================ */

:root {
  --grund:      #FBFAF7;
  --grund-2:    #F1EFE9;
  --text:       #1B2A3A;
  --text-2:     #5A6876;
  --akzent:     #1B4965;
  --akzent-2:   #123449;
  --auf-akzent: #FBFAF7;
  --linie:      #DDD9CF;

  --tit: "Libre Baskerville", Georgia, serif;
  --txt: "Inter", system-ui, sans-serif;
  --r: 2px;
  --tit-spacing: -0.005em;
  --maxw: 70rem;

  --fuss-grund: #1B2A3A;
  --fuss-text:  #FBFAF7;
}

h1, h2, h3 { font-weight: 700; }
.gross { font-size: clamp(1.7rem, 3.8vw, 2.5rem); line-height: 1.2; }

/* Libre Baskerville laeuft breit. Fuer die Schlagzeile deshalb
   weniger Grad als bei den anderen Demos, sonst bricht jede
   Zeile nach drei Woertern. */
.hero { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.hero .wrap { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: center; }
@media (min-width: 62rem) { .hero .wrap { grid-template-columns: 1.15fr 0.85fr; } }
.hero h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.16; margin-bottom: 1.1rem; }
.hero__lead { font-size: 1.125rem; color: var(--text-2); margin-bottom: 1.75rem; }

.beleg {
  border-left: 3px solid var(--akzent);
  background: var(--grund-2);
  padding: 1.1rem 1.25rem;
  display: grid; gap: 0.55rem;
}
.beleg div { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.9375rem; }
.beleg svg { width: 18px; height: 18px; flex: none; color: var(--akzent); margin-top: 0.15rem; }

/* --- Rechtsgebiete ------------------------------------------ */
.gebiete { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); }
@media (min-width: 46rem) { .gebiete { grid-template-columns: repeat(2, 1fr); } }
.gebiet { background: var(--grund); padding: clamp(1.3rem, 3vw, 1.8rem); }
.gebiet h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.gebiet p { font-size: 0.9375rem; color: var(--text-2); margin: 0 0 0.75rem; max-width: none; }
.gebiet em {
  display: block; font-style: normal;
  font-family: var(--tit); font-size: 0.9375rem; color: var(--akzent);
  border-top: 1px solid var(--linie); padding-top: 0.7rem;
}

/* --- Ablauf -------------------------------------------------- */
.ablauf { counter-reset: schritt; display: grid; gap: 1.1rem; max-width: 44rem; }
.ablauf li { list-style: none; display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem; }
.ablauf li::before {
  counter-increment: schritt; content: counter(schritt);
  font-family: var(--tit); font-size: 1.2rem; color: var(--akzent);
  border: 1px solid var(--linie); border-radius: 50%;
  width: 2.4rem; height: 2.4rem; display: grid; place-items: center;
}
.ablauf b { display: block; font-size: 1.05rem; margin-bottom: 0.2rem; }
.ablauf span { font-size: 0.9375rem; color: var(--text-2); }

/* --- Formular ------------------------------------------------ */
.feld { display: grid; gap: 0.35rem; margin-bottom: 0.9rem; }
.feld label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.feld input, .feld select, .feld textarea {
  font: inherit; font-size: 1rem; min-height: 48px;
  padding: 0.7rem 0.85rem; border: 1px solid var(--linie);
  border-radius: var(--r); background: #fff; color: var(--text);
}
.feld textarea { min-height: 5.5rem; resize: vertical; }
.hinweis { font-size: 0.8125rem; color: var(--text-2); margin-top: 0.75rem; }