/* Seitenstile für arkcanis-capital.com. Farben, Schriften, Abstände und Bausteine kommen ausschließlich
   aus arkcanis.css (Styleguide der Arkcanis Consulting GmbH, per tools/styleguide-holen.sh geholt);
   hier stehen nur der Reset und das Seitengerüst, ohne eigene Farbwerte.

   Diese Datei wird VOR arkcanis.css geladen und legt die Reihenfolge der Ebenen fest: Der Reset liegt
   unter den Grundstilen des Styleguides, die Seitenstile darüber. */
@layer reset, base, components, seite;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html, body, h1, h2, h3, h4, p, ul, ol { margin: 0; }
  ul, ol { padding: 0; }
}

@layer seite {
  body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
  main { flex: 1; }

  /* Startseite: Hinweis in der Bildschirmmitte */
  .start { display: flex; align-items: center; }
  .hinweis { padding-block: var(--hero-block); }
  /* Übergangsmarke bis zur Abspaltung (Uhlenborg-Bildmarke in Arkcanis-Farben) */
  .hinweis .marke { display: block; width: clamp(3.5rem, 3rem + 2vw, 4.5rem); height: auto; margin-bottom: var(--space-5); }
  .hinweis h1 { font-size: var(--fs-display); margin-bottom: var(--space-5); }

  /* Rechtstexte */
  .kopf { border-bottom: 1px solid var(--border); }
  .kopf .rahmen { display: flex; align-items: center; min-height: var(--header-height); }
  .kopf a { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-size: var(--fs-h4); font-weight: 600; color: var(--heading); text-decoration: none; }
  .kopf a:hover { color: var(--action); }
  .kopf img { width: 2rem; height: 2rem; }
  .rechtstext { padding-block: var(--hero-block-kompakt) var(--section); }
  .rechtstext h1 { margin-bottom: var(--space-6); }
  .rechtstext h2 { font-family: var(--font-text); font-size: var(--fs-h3); letter-spacing: normal; margin: 1.6em 0 0.5em; }
  .rechtstext .lead { margin-bottom: 1em; }

  /* Fußzeile */
  .fuss { padding-block: var(--space-6); font-size: var(--fs-small); }
  .fuss .rahmen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-6); }
  .fuss p { color: var(--text-2); }
  .fuss ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; }
  .fuss a { display: inline-flex; align-items: center; min-height: var(--control-height); font-weight: 600; }
}