/* Archivo Black und Inter, SIL Open Font License 1.1 (OFL-*.txt).
   Quelle: @fontsource/inter 5.3.0, @fontsource/archivo-black 5.3.0.
   Nur latin und latin-ext; latin-ext laedt der Browser erst, wenn ein Zeichen daraus vorkommt. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("schriften/inter-latin-ext-400-normal.0a6ff1a7c1.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-display: swap;
  font-weight: 400;
  src: url("schriften/inter-latin-400-normal.da03732a27.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-display: swap;
  font-weight: 500;
  src: url("schriften/inter-latin-ext-500-normal.90ff4f7e8b.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-display: swap;
  font-weight: 500;
  src: url("schriften/inter-latin-500-normal.51205681a1.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-display: swap;
  font-weight: 700;
  src: url("schriften/inter-latin-ext-700-normal.aa4c26661f.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-display: swap;
  font-weight: 700;
  src: url("schriften/inter-latin-700-normal.8ca0a51552.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: italic;
  font-display: swap;
  font-weight: 400;
  src: url("schriften/inter-latin-ext-400-italic.1a1bd1109f.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: italic;
  font-display: swap;
  font-weight: 400;
  src: url("schriften/inter-latin-400-italic.abfa19127a.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: 'Archivo Black';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("schriften/archivo-black-latin-ext-400-normal.72199f7efe.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: 'Archivo Black';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("schriften/archivo-black-latin-400-normal.4b6914a69e.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;
}

/* Schriften: mitgeliefert, siehe schriften.css */
:root {
  /* Basis */
  --ink: #0A0A0A;
  --paper: #FAFAF9;
  --white: #FFFFFF;     /* Sektionen Lücke & Lösung, Datenschutz */
  --paper-2: #E9E9E4;   /* Sektionswechsel hell: Marktveränderung, Quellen, Lücke-Kasten */
  --paper-3: #DCDDD7;   /* Sektionswechsel dunkler: Produktablauf */
  --gray-900: #333333;
  --gray-700: #555555;
  --gray-500: #8A8A8A;
  --gray-300: #BBBBBB;
  --gray-200: #DDDDDD;
  --gray-150: #C9C9C3;  /* Zeilenlinie auf paper-2 (Quellen) */
  --gray-800: #2A2A2A;  /* Muster auf Schwarz */

  /* Akzente: gleiche Chroma-Klasse, drei Farbtoene */
  --accent-green: oklch(0.72 0.17 150);
  --accent-violet: oklch(0.6 0.2 300);
  --accent-orange: oklch(0.74 0.17 55);
  --accent-violet-deep: oklch(0.5 0.2 300); /* Link-Hover */

  /* Semantik */
  --bg: var(--paper);
  --bg-white: var(--white);
  --bg-alt: var(--paper-2);
  --bg-alt-2: var(--paper-3);
  --bg-inverse: var(--ink);
  --text: var(--ink);
  --text-body: var(--gray-900);
  --text-muted: var(--gray-700);
  --text-faint: var(--gray-500);
  --text-on-inverse: var(--paper);
  --text-body-on-inverse: var(--gray-200);
  --text-muted-on-inverse: var(--gray-300);
  --rule: var(--ink);
  --rule-soft: var(--gray-200);
  --rule-on-alt: var(--gray-150);
  --rule-on-inverse: #333333;
  --surface-card: var(--paper);
  --action-primary-bg: var(--ink);
  --action-primary-fg: var(--paper);
  --action-primary-hover: var(--accent-violet);
  --signal: var(--accent-green);
}

:root {
  --font-display: "Archivo Black", "Arial Black", "Inter", sans-serif;
  --font-text: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  /* Nur für Token-Beschriftungen in Doku-Karten. Auf der Website gibt es keine Monospace-Schrift. */
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  /* Display (Archivo Black, weight 400, kein Fett) */
  --text-h1: clamp(30px, 3.9vw, 52px);   --lh-h1: 1.06; /* @kind font */  --ls-h1: -0.01em; /* @kind font */
  --text-h2: clamp(30px, 3.8vw, 50px);   --lh-h2: 1.08; /* @kind font */
  --text-h3: clamp(22px, 2.4vw, 30px);   --lh-h3: 1.2; /* @kind font */
  --text-h4: clamp(22px, 2.2vw, 28px);   --lh-h4: 1.15; /* @kind font */
  --text-stat: clamp(36px, 4.2vw, 64px); --lh-stat: 1; /* @kind font */
  --text-stat-quiet: 30px;               /* Marktzahlen: bewusst leise, das Zitat trägt */
  --text-fact: clamp(28px, 3.6vw, 52px); /* Faktenzeilen unter dem Hero */
  --text-quote: clamp(26px, 3.4vw, 46px); --lh-quote: 1.18; /* @kind font */
  --text-step-number: clamp(40px, 5vw, 72px);
  --text-menu: clamp(26px, 7vw, 34px);   /* Links im mobilen Menü */

  /* Text (Inter) */
  --text-lead: 19px;   --lh-lead: 1.55; /* @kind font */
  --text-intro: 17px;  --lh-intro: 1.6; /* @kind font */
  --text-body: 16px;   --lh-body: 1.6; /* @kind font */
  --text-small: 15px;  --lh-small: 1.6; /* @kind font */
  --text-cta-question: 14px;
  --text-caption: 13px;--lh-caption: 1.5; /* @kind font */
  --text-fine: 11px;

  /* Sektions-Eyebrow: 14px, 700, Versalien, 0.16em, mit 12px-Akzentquadrat */
  --text-eyebrow-section: 14px; --ls-eyebrow-section: 0.16em; /* @kind font */
  /* Label / Nav: 10px, 700, Versalien, 0.22em */
  --text-eyebrow: 10px; --ls-eyebrow: 0.22em; /* @kind font */
  --text-table-head: 10px; --ls-table-head: 0.18em; /* @kind font */
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 36px;
  --space-9: 44px;
  --space-10: 56px;
  --space-11: 64px;
  --space-12: 96px;
  --space-13: 112px;

  --container-max: 1240px;
  --container-pad: clamp(20px, 5vw, 64px);
  /* Viel Luft: neue Sektionen sollen als solche wahrgenommen werden */
  --section-pad-top: clamp(80px, 9vw, 128px);
  --section-pad-bottom: clamp(120px, 13vw, 176px);
  --quote-gap: clamp(96px, 11vw, 152px);   /* Abstand über dem Zitatblock */
  --pattern-block-w: min(100%, 560px); /* @kind spacing */
  --pattern-block-h: 150px;
  --nav-h: 56px;
  --scroll-offset: 88px;  /* scroll-padding-top für Sprungziele */
  --bp-mobile: 820px;     /* @kind other */ /* ab hier: Hamburger, Spalten gestapelt */

  --radius: 0px;          /* keine Rundungen im ganzen System */
  --border: 1px solid var(--rule);
  --border-soft: 1px solid var(--rule-soft);
  --border-strong: 3px solid var(--rule);
  --shadow: none;         /* keine Schatten ... */
  --shadow-cta: 6px 6px 0 0 var(--accent-green); /* ... außer dem harten Versatzschatten am Floating-CTA, Farbe = Sektionsfarbe */

  --square-xs: 6px;  /* Aufzaehlungspunkt */
  --square-sm: 8px;  /* Listen-Marker, Signal im Button */
  --square-md: 10px; /* Status, Zahlmarker */
  --square-lg: 12px; /* Sektions-Eyebrow */
  --bar: 40px 10px; /* @kind spacing */  /* Farbbalken unter Nummern */
}

:root {
  --ease-out: cubic-bezier(.2,.6,.2,1); /* @kind other */
  --dur-fast: .3s; /* @kind other */
  --dur-base: .45s; /* @kind other */
  --dur-progress: .4s; /* @kind other */
  --dur-reveal: .8s; /* @kind other */      /* Faktenzeilen beim Scrollen */
  --reveal-stagger: .12s; /* @kind other */
  --reveal-distance: 28px;
  --dur-cta-in: .45s; /* @kind other */     /* Floating-CTA ein: ease-out */
  --dur-cta-out: .3s; /* @kind other */     /* Floating-CTA aus: ease-in */
}
@keyframes kuraloIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes kuraloDot { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes kuraloPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* Flache Muster (SVG, einfarbig). Als Maske: Farbe über color/currentColor steuerbar.
   Querformat 563:100 · Seitenmuster 162:541 */
.k-pattern{display:block;width:100%;background:currentColor;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;aspect-ratio:563/100}
.k-pattern--side,.k-pattern--side-white{aspect-ratio:162/541}
.k-pattern--02{-webkit-mask-image:url("img/pattern-02.14184cebd9.svg");mask-image:url("img/pattern-02.14184cebd9.svg")}
.k-pattern--03{-webkit-mask-image:url("img/pattern-03.c2eab9f397.svg");mask-image:url("img/pattern-03.c2eab9f397.svg")}
.k-pattern--04{-webkit-mask-image:url("img/pattern-04.7684c802a3.svg");mask-image:url("img/pattern-04.7684c802a3.svg")}
.k-pattern--05{-webkit-mask-image:url("img/pattern-05.764cc71060.svg");mask-image:url("img/pattern-05.764cc71060.svg")}
.k-pattern--07{-webkit-mask-image:url("img/pattern-07.ead2c047a7.svg");mask-image:url("img/pattern-07.ead2c047a7.svg")}
.k-pattern--08{-webkit-mask-image:url("img/pattern-08.657bff1df1.svg");mask-image:url("img/pattern-08.657bff1df1.svg")}
.k-pattern--09{-webkit-mask-image:url("img/pattern-09.204fa8c960.svg");mask-image:url("img/pattern-09.204fa8c960.svg")}
.k-pattern--10{-webkit-mask-image:url("img/pattern-10.3a4671bf16.svg");mask-image:url("img/pattern-10.3a4671bf16.svg")}
.k-pattern--11{-webkit-mask-image:url("img/pattern-11.62b53ba857.svg");mask-image:url("img/pattern-11.62b53ba857.svg")}
.k-pattern--12{-webkit-mask-image:url("img/pattern-12.3e3500ad06.svg");mask-image:url("img/pattern-12.3e3500ad06.svg")}
.k-pattern--13{-webkit-mask-image:url("img/pattern-13.9136b1d810.svg");mask-image:url("img/pattern-13.9136b1d810.svg")}
.k-pattern--14{-webkit-mask-image:url("img/pattern-14.bfbc3c42e2.svg");mask-image:url("img/pattern-14.bfbc3c42e2.svg")}
.k-pattern--side{-webkit-mask-image:url("img/pattern-side.b562316d8d.svg");mask-image:url("img/pattern-side.b562316d8d.svg")}
.k-pattern--side-white{-webkit-mask-image:url("img/pattern-side-white.ddd5e75841.svg");mask-image:url("img/pattern-side-white.ddd5e75841.svg")}

/* Basis-Resets für Safari und Chrome. Klein halten: nur, was sonst browserabhängig aussieht. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--scroll-offset); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* Safari färbt Buttons sonst blau und rundet sie */
button { color: inherit; font: inherit; -webkit-appearance: none; appearance: none; border-radius: 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
a { -webkit-tap-highlight-color: transparent; }
img, canvas { max-width: 100%; }
sup { line-height: 0; }



/* Laufzeit ohne React */
k-if,k-t{display:contents}
k-if[hidden]{display:none}
/* zcal nach Klick */
.zcal-embed:not(.k-zcal-geladen){min-height:0 !important}
.k-zcal-hinweis{border:1px solid #0A0A0A;background:#FFFFFF;padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:16px;max-width:560px}
.k-zcal-hinweis[hidden]{display:none}
.k-zcal-hinweis p{font-size:15px;line-height:1.6}
.k-zcal-knopf{background:#0A0A0A;color:#FAFAF9;border:0;border-radius:0;padding:14px 20px;font-weight:700;font-size:15px;cursor:pointer}
.k-zcal-knopf:hover{background:oklch(0.6 0.2 300);color:#fff}

/* style-hover aus der Vorlage */
.kh-4c40c797:hover{background:oklch(0.6 0.2 300) !important;color:#fff !important}
.kh-75e8ef0a:hover{background:oklch(0.6 0.2 300) !important}
.kh-8a73dc8b:hover{background:oklch(0.72 0.17 150) !important}
.kh-90f00fde:hover{background:#FAFAF9 !important;color:#0A0A0A !important}
.kh-a7019b21:hover{color:#FAFAF9 !important}
.kh-b94de154:hover{background:#0A0A0A !important;color:#FAFAF9 !important}
.kh-ea649842:hover{color:oklch(0.72 0.17 150) !important}
.kh-f6f0b3a2:hover{color:#0A0A0A !important}