/* assets/css/style.css */

/* Font (Outfit) + ggf. deine Form-Styles, wenn du sie auf anderen Seiten brauchst */
@import url(outfitthin.css);
/* @import url(form-elements.css);  -> nur falls du es wirklich brauchst */

/* =========================================================
   Tokens / Basics
   ========================================================= */
:root{
  --bg: #131313;
  --fg: #f3f3f3;
  --muted: rgba(250,243,241,.72);
  --accent: #003d3d;

  /* Footer safe-area spacing */
  --bottom-gap: max(1.5rem, env(safe-area-inset-bottom));

  /* Fluid font sizes */
  --fs-0:  clamp(1rem, 0.94rem + 0.25vw, 1.125rem);   /* body 16->18 */
  --fs-1:  clamp(1rem, 0.95rem + 0.3vw, 1.125rem);    /* footer links */
  --logo-social-gap: clamp(1.5rem, 1.1rem + 2.2vw, 3.5rem);
}

*{ box-sizing: border-box; }

html, body{
  height: 100%;
}

body{
  margin: 0;
  min-height: 100vh;

  font-family: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 200;
  font-size: var(--fs-0);
  line-height: 1.55;
  color: var(--fg);

  /* Fullscreen Background Image */
  background:
    url("/assets/img/bg.png") center / cover no-repeat fixed,
    var(--bg);
}

.logo{
  width: clamp(260px, 86vw, 500px);
  height: auto;
}

/* =========================================================
   Links (global)
   ========================================================= */
a{
  color: var(--fg);
  text-decoration: none;
  font-weight: 500;
  transition: color .2s ease, transform .2s ease;
}
a:hover{
  color: var(--fg);
}

a:focus-visible{
  outline: 2px solid var(--fg);
  outline-offset: 2px;
  border-radius: .4rem;
}

/* =========================================================
   Landing helpers (Logo + Footer + Social)
   ========================================================= */
.nudge-up{
  transform: translateY(-2vh);
}

.bottom-gap{
  padding-bottom: var(--bottom-gap);
}

/* Social bar: plain icons */
.social-bar{
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: var(--logo-social-gap);
}

/* Link ist nur “klickbarer Bereich”, aber ohne Deko */
.social-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  color: var(--fg);
  text-decoration: none;

  /* optional: vernünftige Tap-Fläche ohne sichtbare Box */
  padding: .35rem;
  border-radius: .5rem;

  background: transparent;
  border: none;
  box-shadow: none;

  transition: color .2s ease, transform .2s ease;
}

.social-link:hover{
  color: var(--fg);
  transform: translateY(-1px);
}

.social-link i{
  font-size: 20px;
  line-height: 1;
}

/* Fokus sichtbar, aber ohne “Deko-Box” */
.social-link:focus-visible{
  outline: 2px solid var(--fg);
  outline-offset: 3px;
}

/* Footer legal links */
.legal-links{
  margin: 0;
  font-size: var(--fs-1);
  line-height: 1.4;
  text-align: center;

  /* von dir gewünscht */
  font-weight: 100;
}

.legal-links a{
  display: inline-block;
  padding: .35rem .5rem;  /* besser klickbar */
  font-weight: 100;       /* auch auf dem Link */
}

/* Optional: Punkt/Separator im Footer etwas dezenter */
.legal-links .sep{
  color: rgba(250,243,241,.5);
  padding-inline: .25rem;
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  a, .social-link{
    transition: none;
  }
  .social-link:hover{
    transform: none;
  }
}

/* =========================================================
   Legal pages (Imprint + Privacy) – clean, no cards
   ========================================================= */

.legal-container{
  width: min(100%, 58rem); /* angenehme Lesebreite */
}

.legal-header{
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(250,243,241,.14);
}

.legal-title{
  font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 650;
}

.legal-meta{
  color: rgba(250,243,241,.72);
  font-weight: 200; /* oder 100, falls deine Font-Datei das hat */
}

/* Typo & Rhythmus */
.legal h2{
  margin-top: 1.6rem;
  margin-bottom: .6rem;
  font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.4rem);
  font-weight: 600;
}

.legal p{
  margin-bottom: 1rem;
  line-height: 1.7;
  color: rgba(250,243,241,.88);
  font-weight: 200;
}

.legal ul{
  margin-bottom: 1rem;
  padding-left: 1.2rem;
}

.legal li{
  margin-bottom: .35rem;
  color: rgba(250,243,241,.88);
}

/* Address block clean (nicht kursiv) */
.legal address,
.legal .legal-address{
  font-style: normal;
  margin-bottom: 1rem;
  line-height: 1.7;
  color: rgba(250,243,241,.88);
}

/* Links im Legal-Text */
.legal a{
  color: var(--fg);
  text-decoration: none;
  font-weight: 300;
}

.legal a:hover{
  color: var(--fg);
  text-decoration: none;
  text-decoration-color: rgba(237,110,43,.55);
  text-underline-offset: 3px;
}

/* Back link (clean) */
.legal-back{
  display: inline-flex;
  align-items: center;
  gap: .5rem;

  color: rgba(250,243,241,.72);
  font-weight: 300;
  text-decoration: none;

  margin-bottom: 1rem;
}

.legal-back i{
  font-size: 1rem;
  line-height: 1;
}

.legal-back:hover{
  color: var(--fg);
  text-decoration: none !important;
}