/* ==========================================================================
   SPAGNOLO DIGITAL — Designsystem "Cinematic Organic Tech"
   Referenz: Mockup vom 2026-10-08 (Desktop\Business & Projekte\Spagnolo-Digital).
   Farben 1:1 aus dem Auftrag; --moss und --light-gold sind aus dem Mockup gemessen (Pixelprobe)
   und zur Bestätigung markiert. Gold ist ausschliesslich Lichtakzent.
   Breakpoints (Media Queries können keine Variablen): 640 / 900 / 1100 / 1440.
   ========================================================================== */

/* Schriften: lokal, kein externer Request (CSP 'self'). Cormorant Garamond ist variabel (400 bis 700). */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("../assets/fonts/cormorant-normal-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("../assets/fonts/cormorant-normal-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;font-display:swap;
  src:url("../assets/fonts/cormorant-italic-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;font-display:swap;
  src:url("../assets/fonts/cormorant-italic-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../assets/fonts/inter-latin.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:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  /* ---- Farben (Auftrag) ---- */
  --forest-deep:#051D19;
  --forest:#0C332B;
  --forest-dark:#071F1A;
  --graphite:#111513;
  --cream:#F2EEE5;
  --cream-light:#F8F5EF;
  --sage:#AEBAB1;
  --white:#FFFFFF;
  /* ---- Aus dem Mockup gemessen, zur Bestätigung ---- */
  --moss:#94A687;          /* kursives Akzentwort in Headlines */
  --light-gold:#E2A872;    /* nur Lichtlinien, Glanzkanten, Sonne */

  /* ---- Abgeleitet (nur aus Tokens) ---- */
  --ink-on-cream:#14231F;                         /* Text auf Cream, Kontrast > 12:1 */
  --text-dim:rgba(248,245,239,.74);               /* Fliesstext auf Dunkel */
  --text-faint:rgba(248,245,239,.56);
  --line:rgba(248,245,239,.14);
  --line-strong:rgba(248,245,239,.26);
  --glass:linear-gradient(150deg,rgba(248,245,239,.10),rgba(248,245,239,.025));
  --glass-border:rgba(248,245,239,.16);
  --gold-glow:rgba(226,168,114,.55);
  --shadow-deep:0 30px 70px rgba(0,0,0,.5),0 6px 18px rgba(0,0,0,.35);

  /* ---- Schrift ---- */
  --font-serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --font-sans:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;

  --fs-display:clamp(3rem,1.4rem + 6vw,6.25rem);
  --fs-h1:clamp(2.9rem,1.5rem + 5.2vw,5.75rem);
  --fs-h2:clamp(2.1rem,1.3rem + 2.8vw,3.75rem);
  --fs-h3:clamp(1.35rem,1.2rem + .5vw,1.65rem);
  --fs-lead:clamp(1.05rem,.98rem + .4vw,1.25rem);
  --fs-text:1.0625rem;
  --fs-small:.875rem;
  --fs-label:.72rem;

  /* ---- Abstände ---- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:72px; --space-9:112px;
  --section-y:clamp(72px,9vw,140px);

  /* ---- Container ---- */
  --container:1280px;
  --container-wide:1480px;
  --gutter:20px;

  /* ---- Radien ---- */
  --radius-sm:8px; --radius-md:16px; --radius-lg:28px; --radius-pill:999px;

  /* ---- Bewegung ---- */
  --dur-fast:180ms; --dur-base:320ms; --dur-slow:700ms; --dur-hero:1100ms;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-soft:cubic-bezier(.33,1,.68,1);

  /* ---- Ebenen ---- */
  --z-bg:-3; --z-bg-fx:-2; --z-content:1; --z-screens:2; --z-header:50; --z-menu:60; --z-skip:100;

  --header-h:76px;
}
@media(min-width:900px){ :root{ --gutter:40px; --header-h:88px; } }
@media(min-width:1440px){ :root{ --gutter:56px; } }

/* Logo: Wortmarke + drei Balken + Claim, als Vektor und Text (Original: "Spagnolo Digital mit Balkenlogo.png") */
.logo{display:inline-flex;flex-direction:column;gap:5px;color:var(--cream-light);text-decoration:none;line-height:1;white-space:nowrap}
.logo-zeile{display:inline-flex;align-items:baseline;gap:.28em;font:600 clamp(1.3rem,1.15rem + .5vw,1.65rem)/1 var(--font-sans);letter-spacing:-.03em}
.logo-zeile b{font-weight:600;color:#fff}
.logo-zeile>span{font-weight:400;color:var(--sage)}
.logo-balken{align-self:flex-end;width:.62em;height:.68em;margin-left:.45em;fill:var(--sage);flex:none}
.logo-claim{font:500 .6rem/1 var(--font-sans);letter-spacing:.3em;text-transform:uppercase;color:var(--sage)}
.logo-fuss{margin:0}
.logo-fuss .logo-zeile{font-size:1.7rem}
.logo-fuss .logo-claim{font-size:.6rem}
@media(max-width:420px){.logo-claim{letter-spacing:.2em;font-size:.58rem}}
.logo:hover .logo-balken{fill:var(--light-gold)}