/* YourDigiCards Marketing – gemeinsames Design-System (hell, Logo-Welt + Farbe)
   Genutzt von: marketing.html, so-funktionierts.html, preise.html, anfrage.html */

/* Farbwelt „Hell + Gold" – bewusst ZWEITÖNIG: warmes Papierweiß als Grund,
   Champagner-Gold als einziger Akzent (alle Akzent-Variablen zeigen auf Gold). */
:root {
  --paper: #fbf9f4;        /* warmes Papierweiß */
  --paper-2: #f1ecdf;      /* Karton für Bänder */
  --card: #ffffff;
  --ink: #171310;
  --ink-soft: #453d2f;
  --muted: #6f6754;
  --brown: #a8853f;        /* Gold – Marke, Eyebrows, DIGI */
  --terra: #c49a45;        /* Gold – CTAs, Highlights */
  --terra-dark: #a37d2f;
  --sage: #a8853f;         /* Gold – Checks */
  --sky: #a8853f;          /* Gold – Akzente */
  --gold-1: #f3e3a8; --gold-2: #cda865; --gold-3: #7a5e2e;
  --line: rgba(23, 19, 13, 0.15);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', -apple-system, sans-serif;
  background: var(--paper); color: var(--ink);
  font-size: 17px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* Edle Gold-Schrift: Metall-Verlauf mit Lichtstreif statt Flachfarbe.
   --gold-ink = für helle Hintergründe (tiefer, lesbar auf Creme)
   --gold-foil = für dunkle Flächen (heller, wie poliertes Gold) */
:root {
  /* Der Lichtstreif lag bei #d8b258 und misst auf dem Papierweiss 1,91:1. Fuer
     die Ueberschriften, die diesen Verlauf tragen, verlangt WCAG 1.4.3 als
     Grosstext 3:1; der hellste Punkt riss das um mehr als die Haelfte. Auf
     einem fast weissen Grund ist heller Glanz und Lesbarkeit nicht beides zu
     haben: alles ueber einer Helligkeit von 0,283 faellt unter 3:1, und das ist
     bereits ein sattes Gold. Der Verlauf laeuft deshalb dunkler und der Glanz
     ist ein schmaler Streif statt einer breiten hellen Mitte, damit die Schrift
     weiter nach Metall aussieht und nicht nach flachem Braun.
     Gemessen ueber die ganze Rampe: 6,65 zu 4,08 zu 3,20 zu 4,08 zu 6,65. */
  --gold-ink: linear-gradient(96deg, #6f5526 0%, #96762c 42%, #a68842 50%, #96762c 58%, #6f5526 100%);
  --gold-foil: linear-gradient(96deg, #b89152 0%, #e7cf98 34%, #fbeec0 50%, #d9b877 66%, #b89152 100%);
}
.gold-ink, .gold-foil {
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.gold-ink { background-image: var(--gold-ink); }
.gold-foil { background-image: var(--gold-foil); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--terra); outline-offset: 3px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ── NAV ── */
nav.site {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 239, 228, 0.92); backdrop-filter: blur(12px);
  border-bottom: 1.5px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 15px; padding-bottom: 15px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand svg { width: 40px; height: 27px; }
.brand-name { font-family: 'Oswald'; font-weight: 700; font-size: 19px; letter-spacing: .09em; color: var(--ink); }
.brand-name em { font-style: normal; background-image: var(--gold-ink);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a.plain {
  color: var(--ink-soft); text-decoration: none; font-size: 15px; font-weight: 700;
  padding-bottom: 3px; border-bottom: 2.5px solid transparent;
}
.nav-links a.plain:hover { color: var(--ink); }
.nav-links a.plain.active { color: var(--ink); border-bottom-color: var(--terra); }
.nav-cta {
  background: linear-gradient(180deg, #dcbf82 0%, #bb9552 100%); color: #241c08; font-weight: 800; font-size: 14.5px;
  padding: 12px 24px; border-radius: 100px; text-decoration: none; letter-spacing: .01em;
  transition: background .15s, transform .1s; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(196,154,69,.4);
}
.nav-cta:hover { filter: brightness(1.05); transform: translateY(-1px); }
@media (max-width: 720px) {
  .nav-links a.plain { display: none; }
  .brand-name { font-size: 16px; }
}

/* ── TYPO ── */
.eyebrow {
  display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: .26em;
  text-transform: uppercase;
  /* KEIN Verlauf, obwohl er hier bis zum 28.07. stand. Der Verlauf ist auf
     Grosstext gestimmt (3:1); dieses Schild ist mit 12,5 Pixeln Fliesstext und
     braucht 4,5:1, und mit .26em Sperrung stehen die Buchstaben so duenn, dass
     jeder Millimeter Kontrast zaehlt. Flaches --gold-3 misst 5,75:1. */
  color: var(--gold-3);
  border: 1px solid rgba(122, 94, 46, .55);
  padding: 8px 18px; border-radius: 100px;
}
h1 {
  font-family: 'Oswald'; font-weight: 700; text-transform: uppercase;
  font-size: clamp(46px, 7.4vw, 84px); line-height: 1.0; letter-spacing: .004em;
  margin-top: 22px;
}
h1 .hl { background-image: var(--gold-ink); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }
h2 {
  font-family: 'Oswald'; font-weight: 700; text-transform: uppercase;
  font-size: clamp(34px, 5vw, 52px); line-height: 1.05; letter-spacing: .006em;
}
h2 .hl { background-image: var(--gold-ink); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }
h3 { font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.lead { font-size: clamp(18px, 2.2vw, 21px); line-height: 1.6; color: var(--ink-soft); }
.lead b, .lead strong { color: var(--ink); }

section { padding: 88px 0; }
.sec-head { max-width: 720px; margin-bottom: 48px; }
.sec-head p { margin-top: 16px; }

/* ── BUTTONS ── */
.btn-primary {
  display: inline-block; background: linear-gradient(180deg, #dcbf82 0%, #bb9552 100%);
  color: #241c08; font-weight: 800; font-size: 17px;
  padding: 18px 38px; border-radius: 100px; text-decoration: none;
  box-shadow: 0 10px 26px -10px rgba(168, 133, 63, .6), inset 0 1px 0 rgba(255,255,255,.45);
  transition: filter .15s, transform .1s;
}
.btn-primary:hover { filter: brightness(1.05); transform: translateY(-2px); }
.btn-ghost {
  display: inline-block; border: 1.5px solid rgba(23,19,13,.35); color: var(--ink); font-weight: 700; font-size: 17px;
  padding: 16px 36px; border-radius: 100px; text-decoration: none; transition: border-color .15s, background .15s;
}
.btn-ghost:hover { border-color: var(--ink); background: rgba(23, 19, 13, .04); }

/* ── KARTEN / PANELS ── */
.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 22px 44px -28px rgba(23, 19, 13, .35);
}

/* ── CTA-BANNER (dunkler Block) ── */
.cta-band { background: var(--ink); color: #f4efe4; border-radius: 26px; padding: 56px 48px; text-align: center; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(244, 239, 228, .75); margin-top: 14px; font-size: 18px; }
.cta-band .btn-primary { margin-top: 28px; }
@media (max-width: 640px) { .cta-band { padding: 40px 24px; } }

/* ── FOOTER ── */
footer.site { background: var(--ink); color: rgba(244, 239, 228, .78); margin-top: 40px; padding: 44px 0; }
.foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 14.5px; }
.foot a { color: #f4efe4; text-decoration: underline; text-underline-offset: 3px; margin-left: 18px; }
.foot a:first-child { margin-left: 0; }
.foot .brandline { font-family: 'Oswald'; letter-spacing: .08em; font-weight: 600; color: #f4efe4; }