/* =========================================================
   =====
   ===== FONTS — lokale Schriften der Subpages
   =====
   ========================================================= */

@font-face {
  font-family: "Inter";
  src: url("../../assets/fonts/inter/inter-v19-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../../assets/fonts/inter/inter-v19-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../../assets/fonts/source-sans-3/source-sans-3-v19-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("../../assets/fonts/source-sans-3/source-sans-3-v19-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bruno Ace SC";
  src: url("../../assets/fonts/bruno-ace-sc/bruno-ace-sc-v7-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Michroma";
  src: url("../../assets/fonts/michroma/michroma-v21-latin-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   =====
   ===== ROOT TOKENS — Stellschrauben für Subpages
   =====
   ========================================================= */

:root {
  --font-page-title: "Bruno Ace SC", sans-serif;      /* große Seitenüberschrift oben */
  --font-section-title: "Michroma", sans-serif;       /* Überschriften im Fließtext */
  --font-body: "Source Sans 3", sans-serif;           /* Leseschrift für den juristischen Text */

  --color-text-main: #f3efe3;                          /* Hauptschriftfarbe */
  --color-text-soft: rgba(243, 239, 227, 0.82);        /* weichere Schriftfarbe */
  --color-link: #9fdbe4;                               /* Linkfarbe */
  --color-link-hover: #d8c18a;                         /* Linkfarbe bei Hover */

  --page-padding-x: clamp(24px, 5vw, 72px);            /* linker/rechter Seitenabstand */
  --page-padding-top: clamp(34px, 5vw, 56px);          /* oberer Seitenabstand */
  --page-padding-bottom: clamp(44px, 6vw, 72px);       /* unterer Seitenabstand */
  --content-max-width: 920px;                          /* maximale Breite des Inhaltsblocks */

  --page-title-size: clamp(1.4rem, 1.05rem + 1vw, 2.2rem); /* Größe der Hauptüberschrift */
  --page-title-letter-spacing: 0.06em;                 /* Laufweite der Hauptüberschrift */
  --page-title-gap-bottom: 18px;                       /* Abstand unter der Hauptüberschrift */

  --gold-line-width: min(420px, 100%);                /* Breite der goldenen Linie */
  --gold-line-height: 1px;                            /* Höhe der goldenen Linie */
  --gold-line-gap-bottom: 34px;                       /* Abstand unter der goldenen Linie */

  --card-bg: rgba(6, 22, 33, 0.34);                   /* dezenter Glas-Hintergrund des Inhaltsblocks */
  --card-border: rgba(151, 208, 221, 0.10);           /* Rahmenfarbe des Inhaltsblocks */
  --card-radius: 18px;                                /* Rundung des Inhaltsblocks */
  --card-padding: clamp(20px, 3vw, 36px);             /* Innenabstand des Inhaltsblocks */
  --card-shadow: 0 14px 38px rgba(0, 0, 0, 0.16);     /* Schatten des Inhaltsblocks */

  --section-gap: 30px;                                /* Abstand zwischen Inhaltssektionen */
  --section-title-size: clamp(0.86rem, 0.75rem + 0.32vw, 1.02rem); /* Größe der Zwischenüberschriften */
  --section-title-gap: 12px;                          /* Abstand unter Zwischenüberschriften */
  --section-title-letter-spacing: 0.05em;             /* Laufweite der Zwischenüberschriften */

  --body-size: clamp(1.02rem, 0.98rem + 0.14vw, 1.08rem); /* Fließtextgröße */
  --body-line-height: 1.58;                           /* Zeilenhöhe des Fließtexts */
  --body-paragraph-gap: 12px;                         /* Abstand zwischen Absätzen */

  --back-link-gap-bottom: 18px;                       /* Abstand unter dem Zurück-Link */
  --small-note-size: 0.96rem;                         /* Größe kleiner Hinweise unten */
}

/* =========================================================
   =====
   ===== RESET & BASE — Grundlayout der Subpages
   =====
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  color: var(--color-text-main);
  font-family: var(--font-body);
  background: linear-gradient(
    180deg,
    #0F2027 0%,
    #12252D 25%,
    #2C5364 100%
  );
}

/* =========================================================
   =====
   ===== SUBPAGE LAYOUT — Außenrahmen und Inhaltsbreite
   =====
   ========================================================= */

.subpage {
  width: min(100%, calc(var(--content-max-width) + (var(--page-padding-x) * 2)));
  margin: 0 auto;
  padding: var(--page-padding-top) var(--page-padding-x) var(--page-padding-bottom);
}

.subpage__backlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--back-link-gap-bottom);
  color: var(--color-text-soft);
  text-decoration: none;
  font-family: "Inter", sans-serif;
  font-size: 0.96rem;
  transition: color 180ms ease;
}

.subpage__backlink:hover {
  color: var(--color-link-hover);
}

.subpage__title {
  margin: 0 0 var(--page-title-gap-bottom) 0;
  font-family: var(--font-page-title);
  font-size: var(--page-title-size);
  line-height: 1.05;
  letter-spacing: var(--page-title-letter-spacing);
  color: rgba(199, 235, 241, 0.96);
}

.subpage__title-line {
  display: block;
  background: linear-gradient(
    90deg,
    #B3DFE5 0%,
    #4AB2C1 36%,
    #276871 86%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.subpage__gold-line {
  width: var(--gold-line-width);
  height: var(--gold-line-height);
  margin-bottom: var(--gold-line-gap-bottom);
  background: linear-gradient(
    90deg,
    rgba(223, 197, 126, 0.88) 0%,
    rgba(223, 197, 126, 0.45) 32%,
    rgba(44, 83, 100, 0.00) 100%
  );
  box-shadow: 0 0 10px rgba(223, 197, 126, 0.10);
}

.subpage__content {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-padding);
  backdrop-filter: blur(4px);
}

/* =========================================================
   =====
   ===== CONTENT TYPOGRAPHY — Lesesatz für Impressum und Datenschutz
   =====
   ========================================================= */

.legal-copy {
  font-size: var(--body-size);
  line-height: var(--body-line-height);
  color: var(--color-text-soft);
}

.legal-copy section + section {
  margin-top: var(--section-gap);
}

.legal-copy h2,
.legal-copy h3 {
  margin: 0 0 var(--section-title-gap) 0;
  font-family: var(--font-section-title);
  font-size: var(--section-title-size);
  line-height: 1.35;
  letter-spacing: var(--section-title-letter-spacing);
  color: rgba(227, 244, 248, 0.96);
}

.legal-copy p,
.legal-copy address,
.legal-copy ul {
  margin: 0 0 var(--body-paragraph-gap) 0;
}

.legal-copy address {
  font-style: normal;
}

.legal-copy ul {
  padding-left: 1.2rem;
}

.legal-copy li + li {
  margin-top: 0.45rem;
}

.legal-copy strong {
  color: var(--color-text-main);
  font-weight: 700;
}

.legal-copy a {
  color: var(--color-link);
  text-decoration: none;
  border-bottom: 1px solid rgba(159, 219, 228, 0.28);
  transition:
    color 180ms ease,
    border-color 180ms ease;
}

.legal-copy a:hover {
  color: var(--color-link-hover);
  border-color: rgba(216, 193, 138, 0.45);
}

.legal-copy .small-note {
  font-size: var(--small-note-size);
  color: rgba(243, 239, 227, 0.68);
}

/* =========================================================
   =====
   ===== RESPONSIVE — mobile Anpassungen für die Subpages
   =====
   ========================================================= */

@media (max-width: 680px) {
  .subpage__gold-line {
    width: 100%;
  }

  .subpage__content {
    backdrop-filter: none;
  }
}