/* ====================================================================
   start.css — nur das, was ausschliesslich auf der Startseite vorkommt.
   Alles andere steht in assets/sg.css: .rechner, .feldblock, .frage,
   .ankreuz, .feld und die Eingabefelder. Hier wird nichts davon
   wiederholt.
   ==================================================================== */

/* Das Pflichtfeld nach § 356 Abs. 4 BGB. Es steht optisch abgesetzt,
   weil es rechtlich etwas anderes ist als der Huellen-Haken darueber:
   eine Erklaerung des Kunden, kein Zusatzartikel. */
.ankreuz--recht{border-left:2px solid var(--cyan);padding-left:14px;
  margin-top:4px}
.ankreuz--recht i{line-height:1.55}

/* Der VIP-Hinweis unter dem E-Mail-Feld, sobald die Adresse erkannt
   wurde. Ruhig, kein Alarm - es ist eine gute Nachricht. */
#vipHinweis{color:var(--cyan)}

/* Urlaubshinweis und Grenzmeldung. Beide benutzen .hinweiskasten aus
   sg.css und bekommen hier nur ihre Farbe. */
.lage{margin:0 0 26px}
.lage--urlaub{border-color:var(--cyan)}
.lage--grenze{border-color:var(--magenta)}

/* --- Rueckmeldung der Verarbeitung -------------------------------
   Die sieben Fehlermeldungen kommen als <div class="alert error"> aus
   der Verarbeitung. Deren HTML wird nicht angefasst - nur das Aussehen
   kommt hier dazu, im selben Zuschnitt wie .meldung in sg.css. */
.rueckmeldung{margin:0 0 24px}
.rueckmeldung .alert{font-size:15px;line-height:1.6;margin:0 0 14px;
  padding:16px 20px;border:1px solid var(--rand);background:var(--karte)}
.rueckmeldung .alert.error{color:#FF8A8A;border-color:#FF8A8A;
  background:rgba(255,138,138,.08)}
.rueckmeldung .alert.success{color:#7BE495;border-color:#7BE495;
  background:rgba(123,228,149,.08)}
.rueckmeldung .alert b,.rueckmeldung .alert strong{font-weight:600}

/* --- Erfolgs-Overlay nach der Anfrage -----------------------------
   Kasten, Ueberschrift und Knopf kommen aus sg.css. Hier steht nur,
   was die Aufstellung der Angaben zusaetzlich braucht. */
.ueberlagerung--erfolg .ueberlagerung__kasten{max-width:560px;text-align:left}
.ueberlagerung--erfolg h2{text-align:center}
.ueberlagerung--erfolg > .ueberlagerung__kasten > p:first-of-type{text-align:center;
  color:var(--cyan)}
.erfolg__angaben{margin:24px 0 0}
/* .angabe dd aus sg.css ist spezifischer als eine einzelne Klasse -
   deshalb hier mit dem Elternteil davor, statt mit !important. */
.angabe dd.erfolg__frist{color:var(--magenta)}
.angabe dd.erfolg__summe{color:var(--cyan)}
.erfolg__brutto{margin:8px 0 0;text-align:right}
.erfolg__urlaub,.erfolg__wichtig{margin:18px 0 0;font-size:14px}
.erfolg__wichtig strong{color:var(--cyan)}
.ueberlagerung--erfolg .knopf{display:block;margin-top:24px;text-align:center}

/* Annahmestopp. Steht an der Stelle, an der sonst das Formular waere -
   waehrend eines Stopps nimmt die Seite nichts entgegen, wie bisher. */
.pausiert{border:1px solid var(--magenta);background:var(--karte);
  padding:34px 32px;text-align:center}
.pausiert h3{font-family:var(--sg);font-size:22px;font-weight:700;
  line-height:1.25;color:var(--magenta);margin:0 0 14px}
.pausiert p{font-size:16px;line-height:1.65;color:var(--weiss);margin:0}

/* --- Die drei Dialoge ---------------------------------------------
   Kasten, Ueberschrift und Knoepfe kommen aus sg.css (.ueberlagerung).
   Hier steht nur, was der Regeltext und das Entfernungsergebnis
   zusaetzlich brauchen. */
.ueberlagerung__kasten--breit{max-width:720px;text-align:left}

/* Sieben Abschnitte aus dem Cockpit - sie muessen rollen koennen, ohne
   dass der Dialog aus dem Bild waechst. */
.regelrolle{max-height:min(48vh,420px);overflow-y:auto;margin-top:18px;
  padding:18px 20px;border:1px solid var(--linie);background:var(--grund);
  text-align:left}
.regelrolle h3{font-family:var(--sg);font-size:15px;font-weight:700;
  letter-spacing:.04em;color:var(--magenta);margin:22px 0 6px}
.regelrolle h3:first-child{margin-top:0}
.regelrolle p{font-size:14px;line-height:1.65;color:var(--neben);margin:0}
.regelrolle strong{color:var(--weiss);font-weight:600}
/* Der Zahlungsabschnitt war schon in der alten Fassung hervorgehoben. */
.regelrolle__zahlung{color:var(--cyan) !important}

.knopfreihe--mitte{justify-content:center;margin-top:22px}

/* Das Ergebnis der Entfernungssuche. Die Zahl traegt die Marke, das
   Wort davor bleibt ruhig. */
.kmErgebnis{margin:16px 0 0;font-size:15px;color:var(--neben);text-align:left}
.kmErgebnis b{display:block;font-family:var(--sg);font-size:40px;
  font-weight:700;line-height:1.1;color:var(--cyan);margin-top:4px}