/* ═══════════════════════════════════════════════════════════════════════
   vhc.de — IMPRESSUM
   Nur was ausschließlich diese Seite braucht. Die Kästen selbst kommen aus
   rechtstext.css, das vorher geladen wird.
   ═══════════════════════════════════════════════════════════════════════

   Diese Datei regelt allein die Darstellung; der Text der Seite ist
   Rechtstext und wird nicht eigenmächtig geändert.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Fensterbild ───────────────────────────────────────────────────
   Die Dorfstraße liegt fest am Fenster und füllt es bei jeder Größe ganz
   aus (`cover`), verankert UNTEN MITTIG: Dort sitzen Straße und Häuser,
   beschnitten wird an den Seiten und im leeren Himmel. Gleiches Prinzip
   wie das Raumbild der Datenschutzseite.
   Die Maske blendet das Bild nach oben aus, damit dort weiter das
   Netzwerk durchscheint. `brightness`: kleiner = dunkler. */
.fensterbild {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: url(../impressum-hg-01.webp) center bottom / cover no-repeat;
  filter: brightness(.85);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 55%);
}

/* ── 01 und 02 als Paar ────────────────────────────────────────────────
   Anbieter und Kontakt gehören zusammen, und 01 allein ließ auf voller
   Breite rechts eine große Leere. Zwei gleich breite Hälften bleiben ein
   ruhiges Raster.
   Der Zeilenabstand wandert vom Kasten auf das Paar, sonst addierte sich
   die Kastenunterkante zum Rasterabstand. `align-items: stretch` ist der
   Standard des Rasters — beide Hälften bleiben dadurch gleich hoch. */
.imp-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.imp-paar .imp-block { margin-bottom: 0; }

/* ── Angaben zum Anbieter ────────────────────────────────────────────── */
.imp-name { font-family: var(--font-head); font-weight: 700; font-size: 28px; color: #fff; letter-spacing: .01em; }
.imp-firma { color: var(--grey); font-size: 17px; margin-top: 4px; }
.imp-fuss { margin-top: 16px; font-family: var(--font-mono); font-size: 13px; color: var(--tx-dim); }

/* ── Die beiden Mailadressen ───────────────────────────────────────────
   Kein `mailto:`: Ein Klick legt die Adresse in die Zwischenablage
   und bestätigt das in der Zeile daneben. Beide Adressen sind deshalb
   <button> und kein Link — es wird nicht verwiesen, sondern etwas getan.
   (Begründung ausführlich in assets/js/zwischenablage.js.)

   Der Knopf sieht aus wie ein Link: Nur das Verhalten unterscheidet sich.
   Ein <button> bringt dafür eigene Voreinstellungen mit — Systemschrift, Innenabstand, Rahmen,
   grauer Grund —, die hier alle zurückgenommen werden. */
.imp-mail { font-size: 19px; word-break: break-word; }
.imp-mail .mail-kopieren {
  font-family: inherit; font-size: inherit; line-height: inherit;
  padding: 0 0 2px; background: none; border: 0; cursor: pointer;
  color: var(--green-h); border-bottom: 1px solid rgba(34,197,94,.4);
  transition: color .18s ease, border-color .18s ease;
}
.imp-mail .mail-kopieren:hover { color: var(--green); border-bottom-color: var(--green); }
.imp-mail .mail-kopieren:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* ── Luft im Kontaktkasten ─────────────────────────────────────────────
   Der Block sitzt tiefer unter seiner Überschrift, und der Hinweis auf den
   zweiten Kontaktweg setzt sich deutlicher von der eigenen Adresse darüber
   ab. Damit trennen sich die beiden Kontaktwege optisch, statt als eine
   dichte Liste zu erscheinen.
   Beide Regeln greifen NUR im Kontaktkasten, nicht in den übrigen Kästen
   des Impressums — dafür trägt er die Kennung `imp-kontakt`. */
#imp-kontakt .imp-kicker { margin-bottom: 26px; }
#imp-kontakt .imp-mail + p { margin-top: 26px; }

/* Der Aufruf des Kontaktfensters. Er trägt `btn btn-ghost btn-formular`
   (grund.css) — dieselbe Form wie „Zurück zur Übersicht" auf den
   Leistungsseiten, dazu die grüne Betonung wie im Kontaktbereich der
   Startseite, aber OHNE `btn-lg`: Die Größe bleibt die des Textumfelds,
   nur die Farbe wird übernommen. */
.imp-formularlink { margin-top: 14px; }

/* ── Schmale Fenster ──────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .imp-paar { grid-template-columns: 1fr; }
}