/* MARKE — Schriften und Design-Tokens von Webschmiede24.
   ERZEUGT von 00_Marke/marke-uebernehmen.py aus dem Design System (Claude Design).
   Nicht von Hand ändern: neue ZIP nach 00_Marke/eingang/ legen und das Skript ausführen.
   Alles Seitenspezifische steht weiter in stil.css. */

/* ---- tokens/fonts.css ---- */
/* Self-hosted webfonts. Never swap these for a CDN link — the brand promise
   "Schriften auf Ihrem Server" (no visitor data leaves to Google) depends on it. */
@font-face{font-family:'Fraunces';src:url("../fonts/fraunces-latin.woff2") format("woff2");font-weight:500 800;font-style:normal;font-display:swap;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:'Fraunces';src:url("../fonts/fraunces-latin-ext.woff2") format("woff2");font-weight:500 800;font-style:normal;font-display:swap;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';src:url("../fonts/inter-latin.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;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';src:url("../fonts/inter-latin-ext.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;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}

/* ---- tokens/colors.css ---- */
/* Webschmiede24 — colour system. Dark-only (color-scheme: dark).
   German token names are the ones the production landing page ships; the
   English semantic aliases are added for consumers who need them. */
:root{
  color-scheme: dark;

  /* — base surfaces, darkest to lightest — */
  --fuss:#0F1013;          /* footer, deepest ground (also map ground) */
  --bg:#15171A;            /* page background */
  --bg-alt:#1C1F23;        /* alternating section band */
  --flaeche:#22262B;       /* card / panel surface */
  --flaeche-hoch:#2A2F35;  /* raised surface: card chrome bar, hover fill */

  /* — lines — */
  --linie:#343A42;         /* default hairline, 1px */
  --linie-stark:#4A525C;   /* stronger hairline: outline buttons, device edges */

  /* — ink — */
  --text:#F2EDE6;          /* warm off-white, primary ink */
  --text-leise:#AEB4BC;    /* secondary / body copy on dark */
  --text-still:#8A929B;    /* tertiary: placeholders, captions, disabled */

  /* — copper, the single accent — */
  --kupfer:#CF8F4C;        /* fills, rules, bullets, marks */
  --kupfer-hell:#E3A05C;   /* hover on copper fills */
  --kupfer-text:#E0A468;   /* copper AS TEXT — lighter, for contrast on dark */
  --kupfer-rand:#A9743B;   /* 1px border under a copper fill (floating button) */
  --auf-kupfer:#15171A;    /* ink on top of a copper fill */
  --glut:#F0A85E;          /* "ember": focus rings, logo sparks only */
  --schleier:rgba(207,143,76,.13); /* copper veil over the contact section */

  /* — semantic aliases (English) — */
  --surface-page:var(--bg);
  --surface-band:var(--bg-alt);
  --surface-card:var(--flaeche);
  --surface-raised:var(--flaeche-hoch);
  --surface-footer:var(--fuss);
  --border-hairline:var(--linie);
  --border-strong:var(--linie-stark);
  --border-accent:var(--kupfer);
  --text-primary:var(--text);
  --text-body:var(--text-leise);
  --text-muted:var(--text-still);
  --text-accent:var(--kupfer-text);
  --accent:var(--kupfer);
  --accent-hover:var(--kupfer-hell);
  --on-accent:var(--auf-kupfer);
  --focus-ring:var(--glut);
}

/* ---- tokens/elevation.css ---- */
/* There are no drop shadows in this brand. Depth comes from three things:
   a lighter surface, a 1px hairline, and — on the sticky header only — blur.
   These tokens exist so consumers reach for the right non-shadow instead of
   inventing a box-shadow. */
:root{
  --hoehe-0:none; /* @kind shadow */                       /* flat: page, bands */
  --hoehe-1:1px solid var(--linie); /* @kind shadow */     /* card, chip, row */
  --hoehe-2:1px solid var(--linie-stark); /* @kind shadow */ /* outline button, device */
  --hoehe-akzent:1px solid var(--kupfer); /* @kind shadow */ /* recommended / hover */
  --glas:saturate(150%) blur(12px); /* @kind other */      /* header backdrop-filter */
  --glas-bg:rgba(21,23,26,.9); /* @kind color */           /* header background */
  --fokus:2px solid var(--glut); /* @kind shadow */        /* focus outline */
  --fokus-abstand:3px; /* @kind spacing */                 /* focus outline-offset */
}

/* ---- tokens/motion.css ---- */
/* One signature curve, short durations, no bounce on UI.
   Everything respects prefers-reduced-motion by switching to no animation. */
:root{
  --kurve:cubic-bezier(.22,.68,.24,1); /* @kind other */        /* the house curve */
  --kurve-band:cubic-bezier(.77,0,.18,1); /* @kind other */     /* tape rule unrolling */
  --kurve-lang:cubic-bezier(.2,.6,.3,1); /* @kind other */      /* long pans, pulse rings */

  --t-farbe:.18s; /* @kind other */    /* colour / background hover */
  --t-linie:.22s; /* @kind other */    /* border colour, logo fill */
  --t-ui:.26s; /* @kind other */       /* underline sweep, chevron, burger */
  --t-rein:.55s; /* @kind other */     /* section reveal on scroll */
  --t-band:.85s; /* @kind other */     /* tape rule scaleX */
  --t-spur:.7s; /* @kind other */      /* carousel track */
  --t-scroll:3s; /* @kind other */     /* screenshot scroll-through on hover */
  --puls:2.8s; /* @kind other */       /* floating-call pulse ring cycle */

  --rein-weg:15px; /* @kind spacing */ /* section reveal translateY */
}

/* ---- tokens/radii.css ---- */
/* Four radii. Buttons and pills are fully round; cards are gently rounded;
   the sharpest corners (0) belong to the copper squares used as bullets. */
:root{
  --r-0:0px;        /* copper bullet squares, tape rule, section bands */
  --r-sm:8px;       /* burger button, device bezels, screenshot frames */
  --r-md:14px;      /* cards, grids, legal-text blocks */
  --r-lg:22px;      /* hero film frame — the one large radius */
  --r-pill:999px;   /* buttons, chips, markers, badges, floating buttons */
  --r-focus:4px;    /* radius applied to the focus outline */
}

/* ---- tokens/spacing.css ---- */
/* Layout rhythm. Vertical section air and the page gutter are both fluid;
   everything inside a component is a fixed pixel value copied from source. */
:root{
  --breite:1280px; /* @kind spacing */            /* max content width */
  --luft:clamp(72px,9vw,122px); /* @kind spacing */ /* section padding block */
  --rand:clamp(20px,5vw,40px); /* @kind spacing */  /* page gutter */
  --kopf-h:100px; /* @kind spacing */             /* sticky header min-height */
  --scroll-versatz:116px; /* @kind spacing */     /* scroll-margin under the header */

  --raum-1:5px;  --raum-2:8px;  --raum-3:12px; --raum-4:14px;
  --raum-5:20px; --raum-6:22px; --raum-7:26px; --raum-8:28px;
  --raum-9:32px; --raum-10:34px; --raum-11:44px; --raum-12:52px;
  --raum-13:56px; --raum-14:64px;

  --gitter-lueck:20px; /* @kind spacing */        /* card grid gap */
  --gitter-lueck-ref:22px; /* @kind spacing */    /* carousel gap */
  --karte-pad:34px 28px 30px; /* @kind spacing */ /* package card */
  --karte-pad-s:32px 28px 34px; /* @kind spacing */ /* reason card */
  --weg-pad:30px 26px 32px; /* @kind spacing */   /* contact way */
}

/* ---- tokens/typography.css ---- */
/* Two families only. Fraunces (serif) for every heading, price and name;
   Inter for everything read in prose, plus all uppercase micro-labels. */
:root{
  --schrift-h:'Fraunces', Georgia, 'Times New Roman', serif; /* @kind font */
  --schrift-b:'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; /* @kind font */
  --font-display:var(--schrift-h); /* @kind font */
  --font-body:var(--schrift-b); /* @kind font */

  /* fluid heading + body scale, exactly as shipped */
  --fs-h1:clamp(2.35rem,5.2vw + .5rem,3.9rem); /* @kind other */
  --fs-h2:clamp(1.75rem,2.6vw + .8rem,2.6rem); /* @kind other */
  --fs-h3:clamp(1.15rem,.6vw + 1rem,1.35rem); /* @kind other */
  --fs-body:clamp(1rem,.25vw + .95rem,1.0625rem); /* @kind other */
  --fs-lead:clamp(1.0625rem,.5vw + 1rem,1.1875rem); /* @kind other */

  /* fixed steps used inside components */
  --fs-preis:2.15rem; /* @kind font */      /* price on a package card, Fraunces 600 */
  --fs-name:1.42rem; /* @kind font */       /* package / contact-way name */
  --fs-nr:1.9rem; /* @kind font */          /* big copper numeral (reason cards) */
  --fs-klein:.94rem; /* @kind font */       /* card body copy */
  --fs-mini:.87rem; /* @kind font */        /* footnotes, captions */
  --fs-label:.78rem; /* @kind font */       /* section eyebrow (.vorspann) */
  --fs-label-s:.74rem; /* @kind font */     /* role / way label */
  --fs-marker:.68rem; /* @kind font */      /* pill marker on the recommended card */

  --lh-h1:1.04; /* @kind other */
  --lh-h:1.12; /* @kind other */
  --lh-h3:1.3; /* @kind other */
  --lh-body:1.65; /* @kind other */
  --lh-lang:1.75; /* @kind other */
  --ls-h1:-.025em; /* @kind other */
  --ls-h:-.015em; /* @kind other */
  --ls-preis:-.02em; /* @kind other */
  --ls-label:.16em; /* @kind other */       /* eyebrow tracking */
  --ls-label-s:.14em; /* @kind other */     /* role labels */
  --ls-claim:.19em; /* @kind other */       /* wordmark claim line */

  --fw-body:400; /* @kind other */
  --fw-med:500; /* @kind other */
  --fw-semi:600; /* @kind other */
  --fw-bold:700; /* @kind other */
  --fw-heavy:800; /* @kind other */
}