/* ==========================================================================
   DER FINANZINGENIEUR — Designsystem
   Leitbild: technisches Zeichenblatt trifft moderne Fintech-Klarheit
   ========================================================================== */

/* Selbst gehostet, keine Verbindung zu Servern Dritter. SIL Open Font License. */
@font-face { font-family:'Space Grotesk'; src:url('assets/fonts/SpaceGrotesk-500.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Space Grotesk'; src:url('assets/fonts/SpaceGrotesk-600.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('assets/fonts/Inter-400.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('assets/fonts/Inter-500.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Inter'; src:url('assets/fonts/Inter-600.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('assets/fonts/IBMPlexMono-400.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('assets/fonts/IBMPlexMono-500.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }

:root {
  /* --- Tinte & Papier --- */
  --ink:        #12171b;
  --ink-2:      #3c454b;
  --ink-3:      #5b646a;
  --paper:      #fbfaf7;
  --surface:    #f2efe7;
  --surface-2:  #e9e4d8;
  --white:      #ffffff;
  --line:       #ddd8cc;
  --line-2:     #c4bdad;

  /* --- Petrol: Primärfarbe --- */
  --p-50:  #e9f5f3;
  --p-100: #c6e6e2;
  --p-300: #4aa8a0;
  --p-500: #0f6b66;
  --p-700: #0a4f4b;
  --p-900: #062e2c;
  --p-glow:#5fd3c4;

  /* --- Signalfarben (sparsam) --- */
  --amber:    #b8801f;
  --amber-bg: #fdf6e6;

  /* --- Raster --- */
  --grid-fine: rgba(18, 23, 27, 0.038);
  --grid-bold: rgba(15, 107, 102, 0.070);

  /* --- Typografie --- */
  --f-display: 'Space Grotesk','Segoe UI Variable Display',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  --f-body:    'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI Variable Text','Segoe UI',system-ui,Roboto,sans-serif;
  --f-mono:    'IBM Plex Mono',ui-monospace,'SF Mono','Cascadia Mono','Segoe UI Mono',Consolas,monospace;

  /* --- Raum --- */
  --max-w: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --sect-y: clamp(68px, 9vw, 128px);

  /* --- Tiefe --- */
  --sh-sm: 0 1px 2px rgba(18,23,27,.05);
  --sh-md: 0 6px 24px -12px rgba(18,23,27,.16);
  --sh-lg: 0 18px 48px -24px rgba(10,79,75,.42);

  --r: 3px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

body {
  margin: 0;
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16.5px;
  line-height: 1.62;
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid-bold) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-bold) 1px, transparent 1px),
    linear-gradient(var(--grid-fine) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-fine) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 2.5px solid var(--p-500); outline-offset: 3px; border-radius: 2px; }

h1,h2,h3,h4 { font-family: var(--f-display); font-weight: 600; line-height: 1.08; margin: 0; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
h3 { font-size: 1.22rem; letter-spacing: -0.01em; }
p  { margin: 0 0 1em; color: var(--ink-2); }
strong { color: var(--ink); font-weight: 600; }

.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: var(--sect-y) 0; position: relative; }
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Flächen */
.bg-surface { background: linear-gradient(180deg, rgba(242,239,231,.75), rgba(233,228,216,.55)); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.bg-dark {
  background-color: var(--p-900);
  background-image:
    radial-gradient(1100px 460px at 12% -8%, rgba(15,107,102,.55), transparent 62%),
    radial-gradient(760px 420px at 92% 108%, rgba(95,211,196,.16), transparent 60%),
    linear-gradient(rgba(95,211,196,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(95,211,196,.055) 1px, transparent 1px);
  background-size: auto, auto, 24px 24px, 24px 24px;
  color: #eef3f2;
}
.bg-dark h2, .bg-dark h3 { color: #fff; }
.bg-dark p { color: #b8c7c5; }

/* Eyebrow */
.eyebrow {
  font-family: var(--f-mono); font-size: .705rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--p-500);
  display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow::before { content:''; width:7px; height:7px; background: currentColor; flex-shrink:0; }
.bg-dark .eyebrow { color: var(--p-glow); }

/* Buttons */
.btn {
  font-family: var(--f-mono); font-size: .845rem; letter-spacing: .02em;
  text-decoration: none; display: inline-flex; align-items: center; justify-content:center; gap: 10px;
  padding: 16px 28px; min-height: 52px; border: 1.5px solid var(--ink);
  background: var(--ink); color: var(--paper); cursor: pointer; border-radius: var(--r);
  transition: transform .16s cubic-bezier(.2,.8,.3,1), background .2s, border-color .2s, box-shadow .2s;
}
.btn:hover { background: var(--p-500); border-color: var(--p-500); transform: translateY(-2px); box-shadow: var(--sh-lg); }
.btn:active { transform: translateY(0); }
.btn .ar { transition: transform .16s ease; }
.btn:hover .ar { transform: translateX(4px); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn.bright { background: var(--p-500); border-color: var(--p-500); color:#fff; }
.btn.bright:hover { background: var(--p-glow); border-color: var(--p-glow); color: var(--p-900); }

/* Eckmarken */
.frame { position: relative; border: 1px solid var(--line); }
.frame::before, .frame::after, .frame > .c1, .frame > .c2 {
  content:''; position:absolute; width:15px; height:15px; border:2px solid var(--p-500); pointer-events:none;
}
.frame::before { top:-1px; left:-1px; border-right:none; border-bottom:none; }
.frame::after  { bottom:-1px; right:-1px; border-left:none; border-top:none; }
.frame > .c1 { top:-1px; right:-1px; border-left:none; border-bottom:none; }
.frame > .c2 { bottom:-1px; left:-1px; border-right:none; border-top:none; }

.dim { font-family: var(--f-mono); font-size:.7rem; letter-spacing:.05em; color: var(--ink-3); }