/* ===========================================================================
   MIRACLEAN Austria – Impressum
   ---------------------------------------------------------------------------
   Wird ausschliesslich von impressum.html geladen. Alle Klassen tragen das
   Praefix "imp-", damit Aenderungen hier keine andere Seite beruehren.

   Aufbau:  1 Hero
            2–4 Unternehmen, rechtliche Angaben, Geschaeftsfuehrung (Tafeln)
            5–7 Offenlegung, Verantwortung, Vertrieb (Textbloecke)
            8–10 Haftung, externe Links, Urheberrecht (ruhige Textzeile)
   Flaechen: Navy, Hellgrau mit weissen Tafeln, Weiss. Gelb nur als Akzent.
   =========================================================================== */

/* --- Block 1: Impressum-Hero -----------------------------------------------------
   Kompakt und ohne Bild: Einordnung, Ueberschrift, ein Satz. */
.imp-hero {
  background: var(--navy);
  color: #fff;
  padding-block: var(--sp-5) var(--sp-7);
}
@media (min-width: 900px) { .imp-hero { padding-block: var(--sp-6) var(--sp-7); } }
.imp-hero .eyebrow { color: var(--signal); margin-bottom: var(--sp-3); }
.imp-hero__title {
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.06;
  margin-bottom: var(--sp-4);
}
.imp-hero__lead {
  margin: 0;
  max-width: 62ch;
  font-size: var(--fs-base);
  line-height: 1.7;
  color: #c9d6ec;
}

/* --- Inhaltsbereich -------------------------------------------------------------- */
.imp-section { padding-block: var(--sp-7); }
@media (min-width: 900px) { .imp-section { padding-block: 4.5rem; } }
.imp-mist { background: var(--mist); }

.imp-row + .imp-row { margin-top: var(--sp-7); }

/* Zwei Spalten ab Desktop, mobil untereinander */
.imp-pair { display: grid; gap: var(--sp-7); align-items: start; }
@media (min-width: 900px) { .imp-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.imp-heading {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  margin-bottom: var(--sp-4);
  text-wrap: balance;
}
.imp-subheading {
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.35;
  color: var(--navy);
  margin-bottom: var(--sp-3);
}

/* --- Tafeln fuer Unternehmensdaten und Geschaeftsfuehrung ---------------------------
   Weiss mit feiner Linie, ohne Schatten. Jede Tafel ist ein Container:
   Ist sie breit genug, stehen Bezeichnung und Wert nebeneinander. */
.imp-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  font-style: normal;
  container-type: inline-size;
}
@media (min-width: 640px) { .imp-panel { padding: var(--sp-5) var(--sp-6); } }

.imp-company { margin: 0 0 var(--sp-2); font-size: var(--fs-lg); font-weight: 800; color: var(--ink); }
.imp-address { margin: 0; line-height: 1.6; color: var(--ink); }
.imp-address + .imp-facts {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.imp-sublabel {
  margin: var(--sp-5) 0 var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.imp-person { margin-bottom: var(--sp-3); font-size: var(--fs-lg); font-weight: 800; }

/* Geschaeftsfuehrung: mobil untereinander, auf dem Tablet nebeneinander,
   ab Desktop untereinander in der linken Spalte */
.imp-people { display: grid; gap: var(--sp-4); }
@media (min-width: 640px) and (max-width: 899px) {
  .imp-people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Bezeichnung und Wert: schmal untereinander, breit zweispaltig */
.imp-facts { margin: 0; }
.imp-facts > div { display: grid; gap: .15rem var(--sp-4); padding-block: var(--sp-3); }
.imp-facts > div + div { border-top: 1px solid var(--line); }
.imp-facts > div:first-child { padding-top: 0; }
.imp-facts > div:last-child { padding-bottom: 0; }
.imp-address + .imp-facts > div:first-child { padding-top: 0; }
.imp-facts dt { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-muted); }
.imp-facts dd { margin: 0; font-size: var(--fs-sm); line-height: 1.55; color: var(--ink); overflow-wrap: anywhere; }
@container (min-width: 15rem) {
  .imp-facts--short > div { grid-template-columns: 5.5rem minmax(0, 1fr); }
}
@container (min-width: 24rem) {
  .imp-facts:not(.imp-facts--short) > div { grid-template-columns: 12.5rem minmax(0, 1fr); }
}

/* Telefon und E-Mail: ohne dauerhafte Unterstreichung, beim Ueberfahren
   dezent unterstrichen. Innenabstand und gleich grosser negativer
   Aussenabstand vergroessern die Tippflaeche, ohne das Layout zu verschieben. */
.imp-link {
  display: inline-block;
  padding-block: .7rem;
  margin-block: -.7rem;
  text-decoration: none;
}
.imp-link:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

/* --- Block 5–7: Offenlegung, Verantwortung, Vertrieb -------------------------------
   Ruhige Textbloecke mit feiner Linie statt weiterer Tafeln. */
.imp-text { border-top: 1px solid #d3dbe6; padding-top: var(--sp-4); }
.imp-text + .imp-text { margin-top: var(--sp-6); }
.imp-text p { margin: 0 0 var(--sp-3); font-size: var(--fs-sm); line-height: 1.6; color: var(--ink); }
.imp-text p:last-child { margin-bottom: 0; }
.imp-list { margin: 0; }
.imp-list dt { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-muted); }
.imp-list dd { margin: .15rem 0 var(--sp-4); font-size: var(--fs-sm); line-height: 1.6; color: var(--ink); }
.imp-list dd:last-child { margin-bottom: 0; }

/* --- Block 8–10: Haftung, externe Links, Urheberrecht ------------------------------
   Kleinere, gedaempfte Schrift; ab Desktop drei Spalten. */
.imp-fine { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) { .imp-fine { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-7); } }
.imp-fine p { margin: 0; font-size: var(--fs-sm); line-height: 1.65; color: var(--ink-muted); }