/* Dolce Vita — Design System tokens, bundled for the freebie landingpage mockups. */

/* Schriften selbst gehostet statt live von fonts.googleapis.com geladen —
   das Nachladen von Google Fonts zur Laufzeit überträgt die Besucher-IP an
   Google, ohne dass eine Einwilligung eingeholt wird (in DE mehrfach
   abgemahnt, u. a. LG München 2022). Dateien liegen unter assets/fonts/,
   nur die tatsächlich genutzten Schnitte/Subsets (latin reicht für
   deutschsprachige Inhalte inkl. ä/ö/ü/ß). Jost ist eine Variable-Font-
   Datei, die alle Schnitte 300–700 in einer einzigen Datei abdeckt. */
@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('fonts/jost-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Caslon Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/libre-caslon-display-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Pinyon Script';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/pinyon-script-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Blau */
  --blu-950: #081C38;
  --blu-900: #0D2C56;
  --blu-700: #17508F;
  --blu-500: #4C86C6;
  --blu-300: #A6C7E5;
  --blu-100: #DDEAF6;

  /* Gelb / Zest */
  --limone-500: #F4BE1B;
  --limone-400: #F8D25C;
  --limone-300: #FBE49A;
  --limone-200: #FCF0C8;
  --zest-600:   #E28A16;
  --zest-700:   #8F4C05;

  /* Beige / Neutrals */
  --crema:      #FDF9EF;
  --sabbia-200: #F2E7D2;
  --sabbia-300: #E4D6BC;
  --sabbia-400: #D3C2A2;
  --white:      #FFFFFF;
  --ink-600:    #2E4A6B;

  --foglia-700: #4E6144;

  --color-brand:        var(--blu-900);
  --color-brand-hover:  var(--blu-950);
  --color-secondary:    var(--blu-700);
  --color-accent:       var(--limone-500);
  --color-accent-hover: var(--zest-600);
  --color-accent-deep:  var(--zest-700);

  --color-bg:           var(--crema);
  --color-bg-deep:      var(--blu-900);
  --color-bg-sun:       var(--limone-300);
  --color-bg-sky:       var(--blu-100);

  --text-primary:       var(--blu-900);
  --text-secondary:     var(--ink-600);
  --text-accent:        var(--zest-700);
  --text-on-dark:       var(--crema);
  --text-on-dark-muted: #A9BFD8;

  --surface-card:       var(--limone-200);
  --surface-soft:       var(--sabbia-200);

  --border-subtle:      var(--sabbia-300);
  --border-strong:      var(--blu-900);
  --border-on-dark:     rgba(253, 249, 239, 0.24);

  --font-display:   'Libre Caslon Display', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:      'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-signature: 'Pinyon Script', 'Snell Roundhand', cursive;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --text-display:   88px;
  --text-h1:        48px;
  --text-h2:        32px;
  --text-h3:        27px;
  --text-body:      21px;
  --text-small:     16px;
  --text-eyebrow:   15px;
  --text-signature: 44px;

  --lh-tight:   1.12;
  --lh-heading: 1.22;
  --lh-body:    1.55;

  --ls-display:  0.06em;
  --ls-tight:   -0.01em;
  --ls-normal:   0;
  --ls-eyebrow:  0.18em;
  --ls-caps:     0.04em;

  --space-1:  4px;  --space-2:  8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px; --space-8: 64px;
  --space-9: 96px;  --space-10:128px;

  --page-margin: 96px;
  --content-max: 1120px;

  --radius: 0;
  --hairline: 1px;
  --rule: 2px;
  --rule-thick: 4px;
  --border-hairline: 1px solid var(--border-subtle);
  --border-rule:     2px solid var(--border-strong);
  --border-accent:   4px solid var(--color-accent);

  --ease: cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
}

* { box-sizing: border-box; }
/* overflow-x:hidden auf html — die absichtlich über den Viewport-Rand
   hinausragenden .motif-fixed-Elemente (Bleed-Effekt) würden sonst je
   nach Fensterbreite einen horizontalen Scrollbalken erzeugen. Das
   Bleed-Motiv bleibt sichtbar, nur das Scrollen dahin wird verhindert. */
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--blu-700); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--blu-900); }
::selection { background: var(--limone-300); color: var(--blu-900); }

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }

.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 40px; }

.eyebrow {
  display: inline-block; font-family: var(--font-body); font-weight: 600;
  font-size: var(--text-eyebrow); letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}
.eyebrow--accent { color: var(--color-accent-deep); }
.eyebrow--deep { color: var(--blu-900); }
.eyebrow--onDark { color: var(--limone-300); }

.heading {
  /* Libre Caslon Display gibt es auf Google Fonts nur in Regular (400) —
     ein höheres font-weight würde der Browser nur synthetisch (unscharf)
     nachbilden. */
  margin: 0; font-family: var(--font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: var(--ls-display);
  color: var(--blu-900); text-wrap: balance;
  font-size: var(--text-h1); line-height: var(--lh-tight);
}
.heading--onDark { color: var(--crema); }
.heading--display { font-size: var(--text-display); }

.subhead {
  margin: 0; font-family: var(--font-body); font-weight: 700;
  color: var(--blu-900); font-size: var(--text-h2); line-height: var(--lh-heading);
}
.subhead--onDark { color: var(--crema); }

.signature {
  font-family: var(--font-signature); font-weight: 400;
  font-size: var(--text-signature); line-height: 1.1; color: var(--color-accent-deep);
}
.signature--onDark { color: var(--limone-300); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: 600; line-height: 1;
  letter-spacing: var(--ls-caps); text-decoration: none; cursor: pointer;
  border-radius: 0; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  padding: 19px 44px; font-size: 18px; border: 2px solid transparent;
}
.btn--sm { padding: 10px 20px; font-size: 14px; }
.btn--md { padding: 15px 32px; font-size: 16px; }
/* Kurzer "wird gesendet"-Zustand nach dem Absenden eines kt-form, bis der
   Redirect auf die Danke-Seite greift — sichtbar deaktiviert statt aktiv
   klickbar. */
.btn:disabled { opacity: 0.6; cursor: default; }
.btn--primary { background: var(--blu-900); color: var(--crema); border-color: var(--blu-900); }
.btn--primary:hover { background: var(--blu-950); border-color: var(--blu-950); }
.btn--accent { background: var(--limone-500); color: var(--blu-900); border-color: var(--limone-500); }
.btn--accent:hover { background: var(--zest-600); border-color: var(--zest-600); }
.btn--ghost { background: transparent; color: var(--blu-900); border-color: var(--blu-900); }
.btn--ghost:hover { background: var(--blu-900); color: var(--crema); }
.btn--ghostOnDark { background: transparent; color: var(--crema); border-color: var(--crema); }
.btn--ghostOnDark:hover { background: var(--crema); color: var(--blu-900); }

.divider--accent { border: 0; width: 56px; height: 4px; background: var(--color-accent); }
.divider--rule { border: 0; width: 100%; height: 2px; background: var(--blu-900); }
.divider--hairline { border: 0; width: 100%; height: 1px; background: var(--border-subtle); }

.tag {
  display: inline-block; padding: 6px 12px; border-radius: 0;
  font-family: var(--font-body); font-weight: 600; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.tag--sun { background: var(--limone-200); color: var(--color-accent-deep); }
.tag--deep { background: var(--blu-900); color: var(--crema); }
.tag--accent { background: var(--color-accent-deep); color: var(--crema); }
.tag--outline { background: transparent; color: var(--blu-900); border: 1.5px solid var(--blu-900); }

.callout { padding: 28px 32px; border-radius: 0; }
.callout--sun { background: var(--limone-200); color: var(--blu-900); }
.callout--sand { background: var(--sabbia-200); color: var(--blu-900); }
.callout--deep { background: var(--blu-900); color: var(--crema); }
.callout--accentbar-sun { border-left: 4px solid var(--color-accent-deep); }
.callout--accentbar-deep { border-left: 4px solid var(--blu-900); }
.callout__label {
  display: block; font-family: var(--font-body); font-weight: 600;
  font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-accent-deep); margin-bottom: 10px;
}
.callout--deep .callout__label { color: var(--limone-300); }
.callout__body { font-family: var(--font-body); font-size: 17px; line-height: 1.5; }

blockquote.quote {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  letter-spacing: var(--ls-display); color: var(--color-accent-deep); line-height: 1.18;
  font-size: 46px;
}
blockquote.quote--onDark { color: var(--crema); }
blockquote.quote--deep { color: var(--blu-900); }
figcaption.quote-cite {
  font-family: var(--font-body); font-weight: 400; font-size: 18px; color: var(--ink-600); margin-top: 28px;
}
figcaption.quote-cite--onDark { color: var(--text-on-dark-muted); }

.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.checklist li { display: flex; gap: 14px; align-items: flex-start; }
.checklist .dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; margin-top: 7px; flex: 0 0 auto; color: var(--color-accent-deep); }
.checklist--onDark .dot { color: var(--limone-300); }
.checklist .txt { font-family: var(--font-body); font-size: 17px; line-height: 1.45; color: var(--blu-900); }
.checklist--onDark .txt { color: var(--crema); }

.statnum { font-family: var(--font-body); font-weight: 700; font-size: 56px; line-height: 1; color: var(--blu-900); letter-spacing: -0.01em; }
.statnum--accent { color: var(--color-accent-deep); }
.statnum--onDark { color: var(--crema); }
.statlabel { font-family: var(--font-body); font-weight: 600; font-size: 17px; color: var(--blu-900); margin-top: 12px; }
.statlabel--onDark { color: var(--crema); }
.statsub { font-family: var(--font-body); font-weight: 400; font-size: 14px; color: var(--ink-600); margin-top: 4px; line-height: 1.45; }
.statsub--onDark { color: var(--text-on-dark-muted); }

/* Lange Versalien-Wörter dürfen nie über den Rand laufen. */
.heading, blockquote.quote { overflow-wrap: break-word; }

/* Mobil: Display-Typo skaliert mit. Überschreibt bewusst die
   Inline-Größen der Mockups (deshalb !important) — sonst schneidet
   ein Wort wie "INVESTIEREN" auf schmalen Screens rechts ab. */
@media (max-width: 700px) {
  .heading            { font-size: clamp(26px, 8vw, 44px) !important; }
  .heading--display   { font-size: clamp(32px, 11vw, 64px) !important; }
  blockquote.quote    { font-size: clamp(23px, 6.6vw, 34px) !important; }
  .statnum            { font-size: clamp(36px, 11vw, 56px) !important; }
  .signature          { font-size: clamp(26px, 8vw, 40px) !important; }
  .subhead            { font-size: clamp(19px, 5.4vw, 26px) !important; }
}

input[type="email"], input[type="text"], input[type="tel"], select.field-input {
  font-family: var(--font-body); font-size: 16px; color: var(--blu-900);
  background: var(--crema); border: 2px solid var(--crema); border-radius: 0; outline: none;
  max-width: 100%;
}
input[type="email"]:focus, input[type="text"]:focus, input[type="tel"]:focus, select.field-input:focus { border-color: var(--limone-500); }
input::placeholder { color: var(--ink-600); opacity: 0.7; }
select.field-input { -webkit-appearance: none; appearance: none; cursor: pointer; }

/* Honeypot: für Menschen unsichtbar, Bots füllen es oft trotzdem aus */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

.phone-row { display: flex; gap: 12px; }
.phone-row select.field-input { flex: 0 0 96px; }
.phone-row input[type="tel"] { flex: 1; min-width: 0; }
@media (max-width: 460px) {
  .phone-row { flex-direction: column; }
  .phone-row select.field-input { width: 100%; }
}

/* --- extra utilities for the landingpage mockups --- */
.checklist .dash { width: 16px; height: 2px; background: currentColor; margin-top: 11px; flex: 0 0 auto; color: var(--color-accent-deep); }
.checklist--onDark .dash { color: var(--limone-300); }

.icon-line { width: 40px; height: 40px; }
.icon-line svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.block-card { padding: 32px 28px; min-height: 240px; display: flex; flex-direction: column; justify-content: space-between; }

.field-label {
  display: block; font-family: var(--font-body); font-weight: 600; font-size: 12px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-on-dark-muted); margin-bottom: 8px;
}
.field-label--dark { color: var(--ink-600); }
.field-input { width: 100%; height: 56px; padding: 0 18px; }

.success-box {
  display: inline-flex; align-items: center; gap: 14px; background: var(--limone-200);
  color: var(--blu-900); padding: 22px 30px; font-family: var(--font-body); font-weight: 600; font-size: 17px;
}
.success-box svg { width: 24px; height: 24px; stroke: var(--color-accent-deep); fill: none; stroke-width: 2; flex: 0 0 auto; }

.framed-photo { border: 1px solid var(--border-subtle); }
.no-radius { border-radius: 0; }

.microcopy { font-family: var(--font-body); font-size: 13px; }
.microcopy--onDark { color: var(--text-on-dark-muted); }
.microcopy--light { color: var(--ink-600); }

/* --- Dolce Vita: mitscrollende Aquarell-Zitronen ---
   Bleiben beim Scrollen am Viewport-Rand "kleben" (position:fixed),
   hängen bewusst halb aus dem Bild heraus, liegen über den
   Sektionsflächen (wie in den Ecken des Freebie-PDFs), aber nie
   über Text: sie sitzen im äußeren Rand und sind nicht klickbar.
   Auf schmalen Screens ausgeblendet, dort ist kein Platz. */
.motif-fixed {
  position: fixed;
  z-index: 5;
  pointer-events: none;
  user-select: none;
  display: block;
  height: auto;
}
.motif-fixed--tl { top: -3vw;    left: -4vw;  }
.motif-fixed--tr { top: -3vw;    right: -4vw; }
.motif-fixed--bl { bottom: -4vw; left: -7vw;  }
.motif-fixed--br { bottom: -4vw; right: -7vw; }
.motif-fixed--l  { top: 50%; left: -6vw;  transform: translateY(-50%); }
.motif-fixed--r  { top: 50%; right: -6vw; transform: translateY(-50%); }

/* Ruhige Variante: liegt HINTER den Inhalten, scheint nur auf
   Crema-Flächen durch. Für sehr zurückhaltende Layouts. */
.motif-fixed--behind { z-index: 0; }

@media (max-width: 1180px) { .motif-fixed { display: none; } }

/* Nicht-fixiertes Motiv, das am Rand einer Sektion angeschnitten sitzt. */
.motif-edge { position: absolute; pointer-events: none; user-select: none; display: block; height: auto; z-index: 1; }

/* Text gewinnt immer: alle Inhaltsspalten liegen über den fixierten
   Motiven. Die Zitronen bleiben in den Außenrändern voll sichtbar,
   verdecken aber nie eine Zeile. */
.wrap, .col, .above-motif { position: relative; z-index: 6; }

/* --- Foto ohne harte Kante: Rand federt weich aus, das Motiv
   "schwebt" auf der Fläche statt im Rechteck zu sitzen.
   Fällt ohne mask-composite-Support sauber auf ein Foto mit
   leicht weichem Rand zurück — nie auf einen Fehler. --- */
.photo-feather {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 86%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 7%,  #000 93%, transparent 100%);
          mask-image:
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 86%, transparent 100%),
    linear-gradient(to right,  transparent 0%, #000 7%,  #000 93%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* Echtes freigestelltes PNG (transparenter Hintergrund): kein Beschnitt,
   keine Maske — die Silhouette steht frei auf der Fläche. */
.jenny--cutout {
  object-fit: contain !important;
  object-position: center bottom !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
}
/* Nur unten ausfedern — Kopf bleibt klar, Beine lösen sich auf. */
.photo-feather--bottom {
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-composite: add;
}

footer.site-footer { background: var(--crema); border-top: 1px solid var(--border-subtle); }
.footer-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; padding: 48px 40px; }
.footer-links { display: flex; gap: 28px; font-family: var(--font-body); font-size: 14px; color: var(--ink-600); flex-wrap: wrap; }
.footer-address { font-family: var(--font-body); font-size: 13px; color: var(--ink-600); }