@charset "UTF-8";
/* ==========================================================================
   Losaro Holding Ltd · site.css
   Ein dunkles Theme · keine externen Ressourcen · kein JavaScript
   ========================================================================== */

/* --- Schriften (selbst gehostet, SIL OFL) -------------------------------- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/montserrat-latin-600-normal.woff2") format("woff2");
}

/* --- Tokens ---------------------------------------------------------------- */
:root {
  --navy:        #101A2D;                 /* Hintergrund überall */
  --navy-2:      #16233B;                 /* Flächen, Hover (Text darauf nur Cream) */
  --cream:       #F1EDDE;                 /* Text, Logo */
  --cream-muted: rgba(241,237,222,.72);   /* Sekundärtext */
  --gold:        #A0814A;                 /* Labels, Linien, Fokus (nur auf --navy) */
  --line:        rgba(160,129,74,.40);    /* Haarlinien, Rahmen */

  --serif: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  --sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gutter: 20px;

  color-scheme: dark;
}

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

html {
  background: var(--navy);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  background: var(--navy);
  color: var(--cream);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  display: block;
  flex: 1 0 auto;
}

h1, h2, h3, p, ul, dl, dd, address {
  margin: 0;
}

h1, h2, h3 {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

address {
  font-style: normal;
}

strong {
  font-weight: 600;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --- Links und Fokus -------------------------------------------------------- */
a {
  color: var(--cream);
  text-decoration-line: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

a:hover {
  text-decoration-color: currentColor;
}

a[href^="tel:"],
a[href^="mailto:"],
.nw {
  white-space: nowrap;
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--cream);
  color: var(--navy);
  font-size: .8125rem;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-160%);
}

.skip:focus {
  transform: none;
}

/* --- Typografie -------------------------------------------------------------- */
.label {
  --ls: .32em;
  color: var(--gold);
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: var(--ls);
  text-transform: uppercase;
}

.title {
  --ls: .06em;
  color: var(--cream);
  font-family: var(--serif);
  font-size: clamp(2rem, 1.3rem + 3vw, 3rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: var(--ls);
  text-transform: uppercase;
}

/* Zentrierte Kompositionen; die Laufweite nach dem letzten Zeichen wird
   optisch ausgeglichen, damit Text und Goldlinie auf einer Achse liegen. */
.center {
  --ls: 0em;
  text-align: center;
  text-wrap: balance;
}

.center :is(.label, .title, .lt__name, .lt__company) {
  padding-inline-start: var(--ls);
}

/* Goldlinie 48 × 1 px */
.rule-below::after,
.rule-above::before {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  margin-inline: auto;
  background: var(--gold);
}

.rule-below::after {
  margin-top: 1rem;
}

.rule-above::before {
  margin-bottom: 1.25rem;
}

.title.rule-below::after {
  margin-top: 1.5rem;
}

.center .rule-below::after,
.center .rule-above::before {
  position: relative;
  left: calc(var(--ls) / -2);
}

/* --- Buttons -------------------------------------------------------------------- */
.btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  min-height: 52px;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .16em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.btn--primary {
  border-color: var(--cream);
  background: var(--cream);
  color: var(--navy);
}

.btn--primary:hover {
  border-color: var(--gold);
}

.btn--secondary {
  border-color: var(--line);
  background: transparent;
  color: var(--cream);
}

.btn--secondary:hover {
  border-color: var(--gold);
  background: var(--navy-2);
}

.btn__value {
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
}

.btn--inline {
  display: inline-flex;
  width: auto;
  padding-inline: 32px;
}

/* --- Startseite ------------------------------------------------------------------ */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 64px var(--gutter);
}

.hero__logo {
  width: min(420px, 72vw);
  margin-inline: auto;
}

.hero__tagline {
  margin-top: 44px;
}

.section {
  padding: clamp(64px, 10vw, 120px) var(--gutter);
}

.section:first-child {
  padding-top: clamp(24px, 5vw, 56px);
}

.section > .label {
  margin-bottom: 28px;
}

.section__text {
  max-width: 34rem;
  margin-inline: auto;
}

.contact {
  font-weight: 500;
}

.contact__addr {
  margin-top: 20px;
  color: var(--cream-muted);
}

/* --- Rechtsseiten -------------------------------------------------------------------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
  padding: 18px var(--gutter);
}

.topbar__home {
  display: block;
  flex: none;
  padding-block: 4px;
}

.topbar__home img {
  width: 80px;
}

.jump {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.jump a {
  display: inline-block;
  padding-block: 6px;
}

.doc {
  width: 100%;
  max-width: 44rem;
  margin-inline: auto;
  padding: clamp(32px, 6vw, 72px) var(--gutter) clamp(72px, 10vw, 120px);
}

.doc__part {
  scroll-margin-top: 24px;
}

.doc__part + .doc__part {
  margin-top: clamp(72px, 10vw, 112px);
  padding-top: clamp(72px, 10vw, 112px);
  border-top: 1px solid var(--line);
}

.doc__head {
  margin-bottom: clamp(40px, 6vw, 56px);
}

.doc__meta {
  margin-top: 20px;
  color: var(--cream-muted);
  font-size: .875rem;
}

/* Legal Notice: Angaben als zentrierte Liste */
.facts__entity {
  color: var(--cream-muted);
}

.facts__entity strong {
  color: var(--cream);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.facts__list {
  display: grid;
  gap: 32px;
  margin-top: 40px;
}

.facts__list dt {
  margin-bottom: 6px;
}

/* Privacy Policy: Fließtext */
.prose {
  text-wrap: pretty;
}

.prose > * + * {
  margin-top: 1rem;
}

.prose > h2,
.prose > h3 {
  margin-top: 2.75rem;
}

.prose > :first-child {
  margin-top: 0;
}

.prose > h2 + *,
.prose > h3 + * {
  margin-top: .75rem;
}

.prose ul {
  padding-inline-start: 1.25rem;
}

.prose li + li {
  margin-top: .25rem;
}

.prose li::marker {
  color: var(--gold);
}

/* --- 404 ------------------------------------------------------------------------------- */
.nf {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 96px var(--gutter);
}

.nf__emblem {
  width: 120px;
  margin-bottom: 40px;
}

.nf .title {
  margin-bottom: 44px;
}

/* --- Link-Tree (mobile-first, max. 440 px) ------------------------------------------- */
.lt {
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
  padding: 56px var(--gutter) 48px;
}

.lt__emblem {
  width: 120px;
  margin: 0 auto 32px;
}

.lt__name {
  --ls: .06em;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.2rem + 2.6vw, 2.125rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: var(--ls);
  text-transform: uppercase;
}

.lt__role {
  margin-top: 12px;
}

.lt__company {
  --ls: .24em;
  margin-top: 18px;
  color: var(--cream-muted);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: var(--ls);
  text-transform: uppercase;
}

.lt__actions {
  display: grid;
  gap: 12px;
  margin-top: 40px;
}

.lt__card {
  margin-top: 64px;
}

.lt__card-img {
  width: 100%;
  max-width: 280px;
  margin: 28px auto 0;
  border: 1px solid var(--line);
  border-radius: 20px;
}

.lt__open {
  margin-top: 18px;
  font-size: .875rem;
  font-weight: 500;
}

.lt__open a {
  display: inline-block;
  padding-block: 4px;
}

.lt__hint {
  margin-top: 4px;
  color: var(--cream-muted);
  font-size: .8125rem;
}

/* --- Footer (jede Seite) ----------------------------------------------------------- */
.site-footer {
  padding: 32px var(--gutter) 40px;
  border-top: 1px solid var(--line);
  color: var(--cream-muted);
  font-size: .75rem;
  line-height: 1.7;
}

.site-footer__nav {
  font-size: .8125rem;
}

.site-footer__nav a {
  display: inline-block;
  padding-block: 4px;
}

.site-footer__reg {
  max-width: 60rem;
  margin: 12px auto 0;
}

.sep {
  color: var(--gold);
}

.site-footer--compact {
  padding-block: 24px 32px;
}

/* --- Schmale Bildschirme: Trennpunkte werden zu Zeilenumbrüchen ----------------------- */
@media (max-width: 639.98px) {
  .sep--br {
    display: block;
    height: 0;
    overflow: hidden;
  }
}

@media (max-width: 419.98px) {
  .sep--br-xs {
    display: block;
    height: 0;
    overflow: hidden;
  }
}

/* --- Größere Bildschirme ------------------------------------------------------------- */
@media (min-width: 640px) {
  :root {
    --gutter: 32px;
  }
}

/* --- Bewegung: nur dezentes Fade-in, reduzierte Bewegung wird respektiert ------------- */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .fade-in {
    animation: fade-in .9s ease-out both;
  }

  .fade-in--delay {
    animation-delay: .25s;
  }

  a,
  .btn {
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, text-decoration-color .2s ease;
  }
}

/* --- Druck (Rechtstexte lesbar auf weißem Papier) ------------------------------------ */
@media print {
  :root {
    --navy: #fff;
    --navy-2: #fff;
    --cream: #000;
    --cream-muted: #333;
    --gold: #000;
    --line: #999;
    color-scheme: light;
  }

  .skip,
  .topbar {
    display: none;
  }
}