/* ===========================================================================
   IMPRESSUM, DATENSCHUTZ UND AGB — nur was diese eine Seite braucht
   ===========================================================================

   Diese Datei ersetzt die drei Dateien, mit denen die Seite frueher kam:
   unterseiten.css, sgp-system.css und seite-impressum.css. Von deren
   201 Regeln waren 87 tote Fracht (nachgemessen im Browser), und
   sgp-system.css war vollstaendig ueberfluessig, weil seite-impressum.css
   jede benutzte Regel daraus ohnehin neu definierte.

   Das Grundgeruest kommt jetzt wie bei allen anderen Unterseiten aus
   grundlagen.css (Zuruecksetzen, Schrift, Fusszeile) und subpages.css
   (Kopfleiste). Hier steht nur noch der Seiteninhalt.

   Farben kommen aus den Variablen von grundlagen.css. Die Seite brachte
   frueher ein eigenes Orange mit (#ff6b35), das neben dem Orange der
   uebrigen Seiten (#ff6600) sichtbar danebenlag — jetzt ist es dasselbe.

   Alle Klassen tragen das Praefix "impressum". Frueher hiessen sie "sgp"
   nach einem Design-System, das im Projekt nicht mehr verwendet wird.
   =========================================================================== */

.impressum {
  /* Orange in verschiedenen Deckkraft-Stufen. Einmal hier definiert,
     damit unten nicht zwanzigmal dieselbe color-mix-Zeile steht. */
  --hauch:   color-mix(in srgb, var(--orange)  6%, transparent);
  --schimmer:color-mix(in srgb, var(--orange)  8%, transparent);
  --schleier:color-mix(in srgb, var(--orange) 13%, transparent);
  --rand:    color-mix(in srgb, var(--orange) 25%, transparent);
  --rand-akt:color-mix(in srgb, var(--orange) 38%, transparent);
  --schatten:color-mix(in srgb, var(--orange) 25%, transparent);

  background: var(--dunkel);
  color: #FFFFFFD9;
  line-height: 1.7;
  width: 100%;
  overflow: hidden;
}

/* Nur die Standard-Abstaende des Browsers abraeumen.
   ACHTUNG, hier steckte im Original ein Fehler: die Regel setzte zusaetzlich
   "color: inherit". Weil ".impressum h2" spezifischer ist als ".impressum-h2",
   schlug sie die Farbangabe der Klasse — die Abschnitts-Ueberschriften waren
   deshalb weiss statt orange, obwohl die CSS-Datei sie orange faerben wollte.
   Ohne "color" greifen die Klassenregeln jetzt wie beabsichtigt. */
.impressum h1,
.impressum h2,
.impressum h3,
.impressum h4,
.impressum p        { margin: 0; }
.impressum section  { padding: 4.5rem 2rem; }

/* --- Kopfbereich der Seite ------------------------------------------------ */

.impressum-hero {
  text-align: center;
  padding: 6rem 2rem 4rem;
  background: linear-gradient(160deg, var(--karte) 0%, var(--dunkel) 100%);
  position: relative;
  overflow: hidden;
}
.impressum-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 20%, var(--schimmer) 0%, transparent 50%);
  pointer-events: none;
}
.impressum-h1 {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -0.02em;
  position: relative;
}
.impressum-orange { color: var(--orange); }
.impressum-div {
  width: 80px;
  height: 3px;
  background: var(--orange);
  margin: 1.5rem auto;
  position: relative;
}
.impressum .impressum-lead {
  font-size: 1.2rem;
  color: #FFFFFFB3;
  max-width: 760px;
  margin: 1rem auto 0;
  line-height: 1.5;
  position: relative;
}

/* --- Abschnitte und Fliesstext -------------------------------------------- */

.impressum-alt   { background: var(--karte); }
.impressum-wrap  { max-width: 1000px; margin: 0 auto; }
.impressum-doc   { max-width:  900px; margin: 0 auto; }

.impressum-h2 {
  font-size: clamp(1.6rem, 2.8vw, 2.2rem);
  font-weight: 700;
  color: var(--orange);
  line-height: 1.2;
  margin-bottom: 1.5rem;
}
.impressum-h2-c { text-align: center; margin-bottom: 0.75rem; }
.impressum-h3 {
  font-size: 1.12rem;
  font-weight: 700;
  color: #fff;
  margin: 1.9rem 0 0.6rem;
}
.impressum .impressum-sub {
  text-align: center;
  color: #FFFFFFA6;
  margin: 0 auto 3rem;
  max-width: 700px;
}
.impressum-p            { margin-bottom: 1.1rem; font-size: 1rem; }
.impressum-p:last-child { margin-bottom: 0; }
.impressum-ul           { margin: 0 0 1.1rem 1.3rem; }
.impressum-ul li        { margin-bottom: 0.5rem; font-size: 1rem; color: #FFFFFFC8; }

/* --- Inhaltsverzeichnis --------------------------------------------------- */

.impressum-toc {
  background: #FFFFFF08;
  border: 1px solid #FFFFFF14;
  border-left: 3px solid var(--orange);
  border-radius: 6px;
  padding: 2rem;
}
.impressum-toc-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
}
.impressum-toc-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.4rem 2rem;
}
.impressum-toc-list li a {
  color: #FFFFFFB3;
  text-decoration: none;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.2s;
}
.impressum-toc-list li a:hover    { color: var(--orange); }
.impressum-toc-list li a::before  { content: "→"; color: var(--orange); font-size: 0.8rem; flex-shrink: 0; }

/* --- Angaben-Boxen (Anschrift, Vertretung, Registereintrag ...) ----------- */

.impressum-infobox {
  background: #FFFFFF08;
  border: 1px solid #FFFFFF14;
  border-radius: 6px;
  padding: 1.5rem 2rem;
  margin: 1.25rem 0;
}
.impressum-infobox-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: baseline;
  margin-bottom: 0.35rem;
}
.impressum-infobox-row:last-child { margin-bottom: 0; }
.impressum-infobox-label { color: #FFFFFFA6; font-size: 0.88rem; min-width: 170px; flex-shrink: 0; }
.impressum-infobox-val   { color: #fff; font-weight: 500; }

/* --- Karten --------------------------------------------------------------- */

.impressum-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}
.impressum-card {
  background: #FFFFFF0A;
  border: 1px solid #FFFFFF14;
  border-left: 3px solid var(--orange);
  padding: 2rem;
  border-radius: 6px;
  transition: transform 0.2s, background 0.2s;
}
.impressum-card:hover { transform: translateY(-3px); background: #FFFFFF12; }
.impressum-card-i     { font-size: 1.75rem; margin-bottom: 0.5rem; }
.impressum-card-h     { font-size: 1.1rem; font-weight: 700; color: #fff; margin-bottom: 0.75rem; }
.impressum-card-p     { color: #FFFFFFB3; font-size: 0.95rem; line-height: 1.6; }

/* --- Kennzeichnung („Vorlage", „Anlage 3" ...) ---------------------------- */

.impressum-badge {
  display: inline-block;
  background: var(--schleier);
  color: var(--orange);
  border: 1px solid var(--rand);
  border-radius: 4px;
  padding: 0.2rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}

/* Sprungziele nicht direkt an die Fensterkante setzen. */
.impressum-anchor { scroll-margin-top: 20px; }

/* --- Vertragstexte im Volltext -------------------------------------------- */

.impressum-doc-intro {
  background: var(--hauch);
  border-left: 3px solid var(--orange);
  border-radius: 0 4px 4px 0;
  padding: 1rem 1.5rem;
  margin: 0 0 2rem;
  font-size: 0.92rem;
  color: #FFFFFFC8;
}
.impressum-doc h4 {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--orange);
  margin: 2rem 0 0.5rem;
}
.impressum-doc p  { font-size: 0.95rem; color: #FFFFFFB3; margin-bottom: 0.85rem; line-height: 1.65; }
.impressum-doc .impressum-ul li { font-size: 0.95rem; color: #FFFFFFB3; }
.impressum-doc-sub { font-weight: 700; color: #fff; margin-top: 1.2rem; margin-bottom: 0.4rem; }

/* Noch auszufuellende Stelle in einer Vertragsvorlage. */
.impressum-ph { color: #FFFFFF80; font-style: italic; }

/* --- Hinweiskasten -------------------------------------------------------- */

.impressum-note {
  background: var(--hauch);
  border-left: 3px solid var(--orange);
  border-radius: 0 4px 4px 0;
  padding: 1rem 1.5rem;
  margin: 1.5rem 0;
  font-size: 0.95rem;
  color: #FFFFFFD9;
}

/* --- Dokumente zum Herunterladen ------------------------------------------ */

.impressum-dl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
}
.impressum-dl-btn {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #FFFFFF0A;
  border: 1px solid #FFFFFF20;
  border-radius: 6px;
  padding: 1.25rem 1.5rem;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.impressum-dl-btn:hover {
  background: #FFFFFF18;
  border-color: var(--rand-akt);
  transform: translateY(-2px);
}
.impressum-dl-icon {
  width: 44px;
  height: 44px;
  background: var(--schleier);
  border: 1px solid var(--rand);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}
.impressum-dl-info  { flex: 1; min-width: 0; }
.impressum-dl-name  { color: #fff; font-weight: 700; font-size: 0.95rem; line-height: 1.3; display: block; margin-bottom: 0.2rem; }
.impressum-dl-meta  { color: #FFFFFFA6; font-size: 0.8rem; }
.impressum-dl-arrow { color: var(--orange); font-size: 1.2rem; flex-shrink: 0; }

/* --- Abschliessender Hinweis mit Schaltflaeche ---------------------------- */

.impressum-cta {
  background: linear-gradient(160deg, #1e2436 0%, var(--karte) 100%);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.impressum-cta::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--schleier) 0%, transparent 60%);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.impressum-cta > div { position: relative; }
.impressum-cta-h     { font-size: 2rem; color: #fff; margin-bottom: 1rem; font-weight: 700; }
.impressum-cta-p     { color: #FFFFFFBF; margin-bottom: 2rem; font-size: 1.05rem; }

.impressum-btn {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  padding: 1rem 2.5rem;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  border-radius: 4px;
  transition: background 0.2s, transform 0.2s;
  box-shadow: 0 8px 24px var(--schatten);
}
.impressum-btn:hover { background: var(--orange-tief); color: #fff; transform: translateY(-2px); }

/* --- Preisliste: bewusst unauffaellig, klein, grau, kein Orange ------------ */

.impressum-fine {
  background: #101319;
  padding: 3rem 2rem;
  border-top: 1px solid #FFFFFF0F;
}
.impressum-fine-wrap { max-width: 820px; margin: 0 auto; }
.impressum-fine h2   { font-size: 1.05rem; font-weight: 500; color: #FFFFFF70; margin-bottom: 1rem; }
.impressum-fine h3   { font-size: 0.82rem; font-weight: 600; color: #FFFFFF66; margin: 1.4rem 0 0.4rem; }
.impressum-fine p    { font-size: 0.78rem; color: #FFFFFF55; line-height: 1.6; margin-bottom: 0.7rem; }
.impressum-fine table { border-collapse: collapse; width: 100%; margin: 0.4rem 0 0.8rem; }
.impressum-fine th,
.impressum-fine td {
  border: 1px solid #FFFFFF14;
  padding: 0.35rem 0.6rem;
  text-align: left;
  font-size: 0.76rem;
  font-weight: 400;
  color: #FFFFFF55;
  vertical-align: top;
}
.impressum-fine th { font-weight: 600; color: #FFFFFF66; background: #FFFFFF06; }

/* --- Schmales Fenster ------------------------------------------------------ */

@media (max-width: 768px) {
  .impressum section          { padding: 3.5rem 1.25rem; }
  .impressum-hero             { padding: 4rem 1.25rem 3rem; }
  .impressum-toc-list         { grid-template-columns: 1fr; }
  .impressum-infobox-label    { min-width: 120px; }
}