/* ============================================================
   mahnbescheid - Impressum und Kontakt (/impressum/)

   Seit dem 04.10.2026 (page-impressum.php).
   Das Blatt ist das von page.php (.page-section, .page-prose in
   landing.css); hier steht nur, was darin neu ist.

   Eine Skala für die ganze Seite, damit nichts von Hand gesetzt wird:
     Abstände      8 · 12 · 16 · 24 · 32 · 48 px
     Schrift       26 h1 (landing.css) · 22 h2 (.page-prose-body)
                   17 Werte (Nachweise, Kontaktwege)
                   16 Fließtext und Eingaben
                   15 Beschriftungen, Tabelle, Unterzeilen
                   14 Hinweise unter Feldern und Nachweisen
                   11.5 Etiketten in Versalien
   Flächen aus Ratgeber und Startseite: Nachweise wie die Punkte auf
   /erfahrungen/, runde Zeichen wie das Modul „Über uns", das Formular als
   Karte wie .hero-card, das Impressum unter der Tintenlinie wie .rg-toc.
   ============================================================ */

.imp-nowrap{ white-space: nowrap; }
.imp-et{
  display: block;
  font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  line-height: 1.4; color: var(--c-muted);
}

/* --- Kopf: „Wer wir sind" und die drei Nachweise ------------------------ */

/* Ohne den Strich des Blatts: zwischen den Karten und „Auftragsstatus
   prüfen" trennt der Abstand. */
.imp .page-prose-head{ margin-bottom: 48px; padding-bottom: 0; border-bottom: 0; }

/* Drei Karten, kantig, Rahmen in --c-line, wie die Bewertungskarten auf
   /erfahrungen/; Zeichen auf grüner Fläche wie dort .erf-mv-zeichen. Bis
   zum 05.10.2026 eine graue Fläche mit Trennlinien, die im weißen Blatt
   herausfiel. */
.imp-nachweise{
  list-style: none; margin: 24px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
}
.imp-nachweis{
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  border: 1px solid var(--c-line); padding: 24px;
  font-size: 14px; line-height: 1.5; color: var(--c-ink-soft);
}
.imp-nachweis-kopf{ display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
/* Zeichen als Maske aus tokens.css, Fläche wie .erf-mv-zeichen. */
.imp-nachweis-zeichen{
  position: relative; flex: none;
  width: 30px; height: 30px; border-radius: var(--r-md);
  background: var(--c-primary-050);
}
.imp-nachweis-zeichen::after{
  content: ""; position: absolute; inset: 6px;
  background: var(--c-primary);
  -webkit-mask: var(--imp-icon) center / contain no-repeat;
          mask: var(--imp-icon) center / contain no-repeat;
}
.imp-nachweis-haus{   --imp-icon: var(--icon-haus); }
.imp-nachweis-schild{ --imp-icon: var(--icon-schild); }
.imp-nachweis-waage{  --imp-icon: var(--icon-waage); }
.imp-nachweis .imp-et{ color: var(--c-primary-700); }
.imp-nachweis strong{ font-size: 17px; line-height: 1.35; font-weight: 600; color: var(--c-ink); }
.imp-nachweis-zeile{ overflow-wrap: anywhere; }

/* --- Kontakt ------------------------------------------------------------ */

/* Formular links, rechts angedeutet die anderen Wege. Den Auftragsstatus
   zeigt das Formular selbst, sobald „Mein laufender Auftrag" gewählt ist
   (.imp-statushinweis); bis zum 05.10.2026 ein eigener Abschnitt darüber. */
.imp-kontakt{
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px 48px; align-items: start;
}
/* Auf der Höhe von „Schreiben Sie uns" (Kante 4 px, Innenabstand 28 px der
   Karte), kleiner als sie: der zweite Weg, nicht der erste. */
.imp-direkt{ padding-top: 32px; }
.page-prose-body .imp-kontakt .imp-direkt h2{ font-size: 17px; line-height: 1.35; margin: 0 0 6px; }
.page-prose-body .imp-direkt > p{ font-size: 15px; color: var(--c-ink-soft); }
.page-prose-body .imp-kontakt h2{ margin: 0 0 12px; }
.page-prose-body .imp-kontakt p{ margin: 0; }

.imp-wege{ list-style: none; margin: 20px 0 0 !important; padding: 0 !important; border-top: 1px solid var(--c-line-soft); }
.imp-wege li{
  display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; align-items: center;
  padding: 14px 0; margin: 0 !important; border-bottom: 1px solid var(--c-line-soft);
}
.imp-zeichen{
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--c-primary-050); color: var(--c-primary-700);
}
.imp-zeichen svg{ width: 18px; height: 18px; }
.imp-wege .imp-et{ margin-bottom: 2px; }
.imp-wege a,
.imp-wert{
  display: block;
  color: var(--c-ink) !important; text-decoration: none;
  font-size: 17px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere;
}
.imp-wege a:hover{ color: var(--c-primary-700) !important; text-decoration: underline; }


/* Formular als Karte wie der Antragskasten der Startseite (.hero-card,
   landing.css), Felder wie die Bewerbung (bewerbung.css). */
.imp-formular{ border: 1px solid var(--c-line); border-top: 4px solid var(--c-primary); padding: 28px 28px 24px; }
/* 22 px wie „Kontakt“ daneben: zwei Überschriften derselben Ebene, Seite an Seite. */
.page-prose-body .imp-kontakt .imp-formular h2{ margin: 0 0 4px; }
.page-prose-body .imp-formular .imp-formular-sub{ font-size: 15px; color: var(--c-muted); margin: 0 0 24px; }
.imp-formular fieldset{ border: 0; margin: 0 0 24px; padding: 0; min-width: 0; }
.imp-feld{ margin: 0 0 16px; min-width: 0; }
.imp-feld > label,
.imp-formular legend{
  display: block; margin: 0 0 8px; padding: 0;
  font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--c-ink);
}
.imp-optional{ font-weight: 400; color: var(--c-muted); }
.page-prose-body .imp-feldhinweis{ margin: 8px 0 0; font-size: 14px; line-height: 1.5; }
.imp-eingabe{
  width: 100%; box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
  background: #fff; color: var(--c-ink); /* @festeFarbe: Weiß der Eingabefelder wie in bewerbung.css */
  font: inherit; font-size: 16px; line-height: 1.4;
  transition: border-color 120ms, box-shadow 120ms;
}
.imp-eingabe:focus{ outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-100); }
textarea.imp-eingabe{ resize: vertical; min-height: 144px; }
.imp-zusatz[hidden]{ display: none; }
.imp-statushinweis{ margin: -8px 0 24px; padding: 12px 16px; background: var(--c-primary-050); }
.page-prose-body .imp-statushinweis p{ font-size: 15px; line-height: 1.55; color: var(--c-ink-soft); }
.imp-statushinweis strong{ color: var(--c-ink); }
.page-prose-body .imp-statushinweis a{ color: var(--c-primary-700); font-weight: 600; }
.imp-reihe{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }

.imp-anliegen{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.imp-anliegen label{
  position: relative; display: flex; align-items: center; gap: 12px;
  min-height: 48px; box-sizing: border-box;
  padding: 8px 12px; border: 1px solid var(--c-line); border-radius: var(--r-sm);
  font-size: 15px; line-height: 1.35; color: var(--c-ink); cursor: pointer;
  background: #fff; /* @festeFarbe: Weiß der Eingabefelder wie in bewerbung.css */
  transition: border-color 120ms, background-color 120ms;
}
.imp-anliegen label:hover{ border-color: var(--c-primary); }
.imp-anliegen input{ position: absolute; opacity: 0; pointer-events: none; }
.imp-punkt{
  width: 18px; height: 18px; flex: none; box-sizing: border-box;
  border: 1.5px solid var(--c-muted); border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; /* @festeFarbe: Weiß der Eingabefelder wie in bewerbung.css */
}
.imp-anliegen input:checked + .imp-punkt{ border-color: var(--c-primary); }
.imp-anliegen input:checked + .imp-punkt::after{ content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); }
.imp-anliegen label:has(input:checked){ border-color: var(--c-primary); background: var(--c-primary-050); }
.imp-anliegen label:has(input:focus-visible){ border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-100); }

.imp-absenden{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
.page-prose-body .imp-absenden p{ flex: 1 1 240px; font-size: 14px; line-height: 1.5; color: var(--c-muted); }
.imp-turnstile{ min-height: 65px; margin: 0 0 16px; }
/* Mit dem unsichtbaren Testschlüssel (Vorschau) zeigt Cloudflare nichts. */
.imp-turnstile.is-test{ min-height: 0; margin: 0; }
/* Honigtopf: aus dem Blick, nicht display:none - manche Maschinen
   überspringen versteckte Felder (wie .bw-hp). */
.imp-hp{ position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* Meldung nach dem Absenden, wie .bw-meldung: Status mit Wort, nie mit Farbe allein. */
.imp-meldung{ margin: 0 0 24px; padding: 16px; border: 1px solid var(--c-line); background: var(--c-surface); }
.imp-meldung.is-ok{ border-color: var(--c-ok); }
.imp-meldung.is-fehler{ border-color: var(--c-accent); background: var(--c-accent-050); }
.imp-meldung:focus{ outline: none; }
/* Der Dank steht allein in der Karte: ohne zweiten Rahmen, die Karte rahmt schon. */
.imp-formular .imp-meldung.is-ok{ margin: 0; padding: 0; border: 0; background: none; }
.page-prose-body .imp-meldung p{ margin: 0; font-size: 15px; color: var(--c-ink); }
.page-prose-body .imp-meldung p + p{ margin-top: 8px; }

/* --- Impressum ---------------------------------------------------------- */

.imp-pflicht{ margin-top: 48px; padding-top: 12px; border-top: 2px solid var(--c-ink); }
.page-prose-body .imp-pflicht h2{
  margin: 0 0 4px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--c-muted);
}
/* p.imp-unter: .page-prose-body p:last-of-type (landing.css) nahm den
   Abstand sonst auf null, und die Zeile klebte an der Tabelle. */
.page-prose-body p.imp-unter{ margin: 0 0 16px; color: var(--c-ink-soft); font-size: 15px; }
.page-prose-body .imp-akte{ border-top: 1px solid var(--c-line-soft); margin: 0; font-size: 15px; }
.page-prose-body .imp-akte th,
.page-prose-body .imp-akte td{ padding: 16px 12px; line-height: 1.6; }
.page-prose-body .imp-akte th{ width: 260px; padding-left: 0; }
.page-prose-body .imp-akte td{ padding-right: 0; }
/* Die zweite Zeile einer Angabe in derselben Schrift wie die erste: Es ist
   dieselbe Angabe, kein Kleingedrucktes (04.10.2026). */
.imp-akte td small{ display: block; font-size: inherit; color: inherit; margin-top: 2px; }
.page-prose-body .imp-akte td p{ margin: 0; }
.page-prose-body .imp-akte td p + p{ margin-top: 8px; }
/* Die Zeile „Geschäftsführer" kommt aus einem eigenen Dokument mit noindex
   (inc/impressum.php); eine Zeile hoch, gesetzt wie die Zelle. */
.imp-vertretung{ display: block; width: 100%; height: 24px; border: 0; }
/* Die letzte Zeile endet am Rand des Blatts, nicht an einer Linie davor. */
.page-prose-body .imp-akte tr:last-child th,
.page-prose-body .imp-akte tr:last-child td{ border-bottom: 0; padding-bottom: 0; }

/* --- Schmal ------------------------------------------------------------- */

@media (max-width: 1024px){
  .imp-kontakt{ grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .imp-direkt{ padding-top: 0; }
}
@media (max-width: 900px){
  /* Schmal eine Liste in einem Rahmen statt drei Karten untereinander. */
  .imp-nachweise{ grid-template-columns: minmax(0, 1fr); gap: 0; }
  .imp-nachweis{ padding: 12px 16px; gap: 2px; }
  .imp-nachweis + .imp-nachweis{ border-top: 0; }
  .imp-nachweis-kopf{ margin-bottom: 4px; }
  .imp-nachweis-zeichen{ width: 24px; height: 24px; }
  .imp-nachweis-zeichen::after{ inset: 5px; }
  .imp-nachweis strong{ font-size: 16px; }
}
@media (max-width: 768px){
  .imp .page-prose-head{ margin-bottom: 32px; }
  .imp-anliegen, .imp-reihe{ grid-template-columns: minmax(0, 1fr); }
  .imp-absenden .btn{ width: 100%; justify-content: center; }
  .imp-pflicht{ margin-top: 32px; }
  .imp-formular{ padding: 20px 16px 16px; }
  .page-prose-body .imp-akte,
  .page-prose-body .imp-akte tbody,
  .page-prose-body .imp-akte tr,
  .page-prose-body .imp-akte th,
  .page-prose-body .imp-akte td{ display: block; width: auto; }
  .page-prose-body .imp-akte th{ padding: 16px 0 0; border-bottom: 0; }
  .page-prose-body .imp-akte td{ padding: 4px 0 16px; }
}
@media (prefers-reduced-motion: reduce){
  .imp-eingabe, .imp-anliegen label{ transition: none; }
}