/* ==========================================================================
   QRTasse – Base (Tokens, Baseline, Utilities)
   ========================================================================== */

/* ---------- Design Tokens ---------- */
:root{
  /* Farben */
  --black:#0c0c0d;
  --ink:#121315;
  --white:#ffffff;
  --warm:#f6f5f2;
  --gold:#C9A548;
  --gold-300:#E2C574;
  --gold-500:#D6B260;
  --gold-700:#A98A3F;
  --muted:#666a73;

  /* Radii */
  --r-s:10px;
  --r-m:14px;
  --r-l:20px;

  /* Spacings */
  --space-1:.5rem;
  --space-2:.75rem;
  --space-3:1rem;
  --space-4:1.5rem;
  --space-5:2rem;
  --space-6:3rem;
  --space-7:5rem;

  /* Shadows & Timing */
  --shadow-soft:0 8px 28px rgba(0,0,0,.08);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Base ---------- */
html, body {
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body {
  color: var(--ink);
  background: var(--warm);
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Elements ---------- */
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
  transition: color .2s var(--ease), opacity .2s var(--ease);
}
a:hover {
  color: var(--gold);
}

/* ---------- Grid Container (global) ---------- */
.wrap {
  width: 100%;
  max-width: 1280px; /* Einheitlich für alle Bereiche */
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  box-sizing: border-box;
}

/* Variante für sehr enge Bereiche (Header, Footer) */
.wrap--narrow {
  max-width: 1280px;
  padding-inline: clamp(0.75rem, 3vw, 1.8rem);
}

/* Full-Width ohne Padding */
.wrap--wide {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

/* Headline-Varianten */
h1, h2, h3 {
  margin: .25rem 0 .6rem;
  line-height: 1.15;
  font-weight: 600;
}

h1 {
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  color: var(--ink);
}

h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  color: var(--ink);
}

h3 {
  font-size: clamp(1.2rem, 1.6vw, 1.35rem);
  color: var(--ink);
}

/* Neue Variante für weiße Headlines (z. B. auf dunklem BG) */
h1.white, h2.white, h3.white {
  color: var(--white);
}

p {
  margin: .3rem 0 1rem;
  color: var(--ink);
  max-width: 70ch;
}

.muted {
  color: var(--muted);
}

/* Listen */
ul, ol {
  padding-left: 1.2rem;
  margin: .4rem 0 1rem;
}
li {
  margin-bottom: .4rem;
}

/* Buttons inline-reset */
button {
  font-family: inherit;
  font-size: 1rem;
  background: none;
  border: none;
  cursor: pointer;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  body {
    font-size: 15px;
    line-height: 1.65;
  }
  h1 {
    font-size: clamp(1.8rem, 5.4vw, 2.4rem);
  }
  h2 {
    font-size: clamp(1.4rem, 4.2vw, 1.8rem);
  }
  .wrap {
    padding-inline: clamp(1rem, 5vw, 1.8rem);
  }
}

@media (max-width: 640px) {
  body {
    font-size: 14.5px;
    line-height: 1.7;
  }
  .wrap {
    padding-inline: 1rem;
  }
  p {
    max-width: none;
  }
}

/* ==========================================================================
   QRTasse – Gold Divider (global, CI)
   ========================================================================== */

/* Base: smooth gradient, no edges, garantiert sichtbar im Flow */
.gold-divider{
  --divider-top-gap: 2px;
  --divider-bottom-gap: 2px;
  --divider-height: 160px;
  --divider-fade: 100px;

  display: block;                 /* wichtig: Element ist sicher sichtbar */
  width: 100%;
  height: calc(var(--divider-top-gap) + var(--divider-height) + var(--divider-bottom-gap));
  margin: var(--space-6) 0;       /* default vertical spacing */
  background: linear-gradient(
    to bottom,
    rgba(201,165,72,0) 0%,
    rgba(201,165,72,0.02) 10%,
    rgba(201,165,72,0.08) 35%,
    rgba(201,165,72,0.10) 50%,
    rgba(201,165,72,0.08) 65%,
    rgba(201,165,72,0.02) 90%,
    rgba(201,165,72,0) 100%
  );
  /* Sicherheitsnetz bei exotischen Layouts mit Overlays */
  position: relative;
  z-index: 0;
}

/* Spacing utilities */
.gold-divider.is-tight   { margin: var(--space-4) 0; }
.gold-divider.is-loose   { margin: var(--space-7) 0; }
.gold-divider.no-margin  { margin: 0; }

/* Size variants */
.gold-divider.is-sm{
  --divider-height: 120px;
  --divider-fade: 80px;
}
.gold-divider.is-lg{
  --divider-height: 200px;
  --divider-fade: 120px;
}
.gold-divider.is-xl{
  --divider-height: 260px;
  --divider-fade: 160px;
}

/* Context variants */
.gold-divider.on-warm{
  /* minimal kräftiger auf hellem Warm-Ton */
  background: linear-gradient(
    to bottom,
    rgba(201,165,72,0) 0%,
    rgba(201,165,72,0.04) 10%,
    rgba(201,165,72,0.12) 35%,
    rgba(201,165,72,0.14) 50%,
    rgba(201,165,72,0.12) 65%,
    rgba(201,165,72,0.04) 90%,
    rgba(201,165,72,0) 100%
  );
}
.gold-divider.on-dark{
  /* noch etwas kräftiger für sehr dunkle Hintergründe */
  background: linear-gradient(
    to bottom,
    rgba(201,165,72,0) 0%,
    rgba(201,165,72,0.03) 10%,
    rgba(201,165,72,0.11) 35%,
    rgba(201,165,72,0.14) 50%,
    rgba(201,165,72,0.11) 65%,
    rgba(201,165,72,0.03) 90%,
    rgba(201,165,72,0) 100%
  );
}

/* Mobile tune */
@media (max-width:980px){
  .gold-divider{
    --divider-height: 120px;
    --divider-fade: 80px;
    margin: var(--space-5) 0;
  }
  .gold-divider.is-xl { --divider-height: 200px; --divider-fade: 120px; }
}