/* =========================================================
   impressum.css
   ---------------------------------------------------------
   NUR FÜR DIE IMPRESSUM-SEITE
   ---------------------------------------------------------
   Diese Datei baut auf style.css auf und ergänzt nur
   die Bereiche, die speziell für das Impressum gebraucht
   werden.
   ========================================================= */


/* =========================================================
   1) HERO-BEREICH FÜR RECHTLICHE SEITEN
   ---------------------------------------------------------
   Etwas kompakter als andere Seiten, damit das Impressum
   direkt sichtbar und nicht zu weit nach unten geschoben wird.
   ========================================================= */
.hero-legal {
  padding-bottom: 6px;
}


/* =========================================================
   2) WRAPPER FÜR DEN RECHTLICHEN INHALT
   ---------------------------------------------------------
   Begrenzt die Breite, damit lange Texte angenehmer lesbar sind.
   ========================================================= */
.legal {
  max-width: 980px;
}


/* =========================================================
   3) EINZELNE KARTEN / BLÖCKE
   ---------------------------------------------------------
   Jeder Abschnitt des Impressums liegt in einer eigenen Karte.
   Das wirkt ruhiger und übersichtlicher.
   ========================================================= */
.legal-card {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  border-radius: var(--r);
  padding: 20px;
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.06);
  margin: 14px 0;
  transition:
    transform 0.14s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease;
}

/* Leichter Hover-Effekt
   - dezent
   - nicht zu verspielt
   - passt gut zum ruhigen Stil der Seite */
.legal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(15, 23, 42, 0.08);
  border-color: rgba(42, 140, 255, 0.20);
}


/* =========================================================
   4) ÜBERSCHRIFTEN IN DEN KARTEN
   ---------------------------------------------------------
   Klare, etwas kräftigere Zwischenüberschriften.
   ========================================================= */
.legal-card h2 {
  margin: 0 0 10px;
  font-size: 1.25rem;
  line-height: 1.2;
  color: rgba(15, 23, 42, 0.96);
}


/* =========================================================
   5) ABSÄTZE UND FLIESSTEXT
   ---------------------------------------------------------
   Normale Texte im Impressum.
   ========================================================= */
.legal-card p {
  margin: 0;
  color: rgba(15, 23, 42, 0.86);
  line-height: 1.75;
}

/* Wenn mehrere Absätze direkt hintereinander stehen,
   etwas Abstand dazwischen geben */
.legal-card p + p {
  margin-top: 10px;
}


/* =========================================================
   6) GEDÄMPFTE TEXTE
   ---------------------------------------------------------
   Für Hinweise, Erklärungen oder rechtlich etwas leichtere
   Nebentexte.
   ========================================================= */
.legal-muted {
  color: var(--muted);
}


/* =========================================================
   7) LINKS IM IMPRESSUM
   ---------------------------------------------------------
   Links sollen sichtbar sein, aber nicht hart hervorstechen.
   ========================================================= */
.legal-link {
  color: rgba(15, 23, 42, 0.90);
  font-weight: 950;
  text-decoration: none;
  border-bottom: 1px solid rgba(15, 23, 42, 0.18);
  transition:
    border-color 0.16s ease,
    color 0.16s ease,
    background 0.16s ease;
}

.legal-link:hover {
  color: rgba(15, 23, 42, 1);
  border-bottom-color: rgba(42, 140, 255, 0.45);
}


/* =========================================================
   8) BESONDERS SCHÖNE DARSTELLUNG FÜR DEN WEBSITE-LINK
   ---------------------------------------------------------
   Der Link zu Idea2Code Studio darf etwas edler aussehen.
   Dafür nutzen wir den Link innerhalb des Impressums,
   ohne dass du im HTML etwas ändern musst.
   ========================================================= */
.legal-card a[target="_blank"] {
  display: inline-block;
  margin-top: 6px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(16, 207, 199, 0.24);
  background: linear-gradient(
    90deg,
    rgba(16, 207, 199, 0.14),
    rgba(42, 140, 255, 0.10)
  );
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05);
  border-bottom-width: 1px;
}

.legal-card a[target="_blank"]:hover {
  border-color: rgba(42, 140, 255, 0.34);
  box-shadow: 0 14px 26px rgba(15, 23, 42, 0.08);
}


/* =========================================================
   9) STARKE TEXTE
   ---------------------------------------------------------
   Namen oder wichtige Angaben sollen etwas klarer wirken.
   ========================================================= */
.legal-card strong {
  color: rgba(15, 23, 42, 0.98);
  font-weight: 950;
}


/* =========================================================
   10) FOOTER AUF DER IMPRESSUM-SEITE
   ---------------------------------------------------------
   Etwas Abstand nach oben, damit der Abschluss luftiger wirkt.
   ========================================================= */
.footer {
  margin-top: 20px;
}


/* =========================================================
   11) RESPONSIVE ANPASSUNG
   ---------------------------------------------------------
   Auf kleineren Geräten etwas weniger Innenabstand,
   damit alles schöner passt.
   ========================================================= */
@media (max-width: 700px) {
  .legal-card {
    padding: 16px;
    margin: 12px 0;
  }

  .legal-card h2 {
    font-size: 1.14rem;
  }

  .legal-card p {
    line-height: 1.68;
  }
}