/* ============================================================
   PR DESK — site.css
   Produktionsnaher Static-Export (kein Framework, kein Build).
   Modular nach Abschnitten gegliedert; nicht minifiziert.
   Verwendbar 1:1 oder später als Basis für ein Astro-Setup
   (Tokens + Komponentenklassen lassen sich in .astro-Komponenten
   übernehmen).
   ============================================================
   INHALT
   01  Design-Tokens (:root)
   02  Lokale Fonts (@font-face)
   03  Reset / Base
   04  Layout-Helfer (Container, Section, Rhythmus)
   05  Typografie-Utilities (Eyebrow, Rail)
   06  Header / Navigation
   07  Buttons
   08  Hero
   09  Karten & Raster
   10  Pipeline-Stufen
   11  Blog (Übersicht + Artikel-Prosa)
   12  Kontaktformular
   13  Footer
   14  Bewegung (Reveal) & Reduced Motion
   15  Responsive Breakpoints
   ============================================================ */


/* ===== 01 · DESIGN-TOKENS ================================== */
:root{
  /* Farben — Blau = Prozess/Grundlage, Orange = Zielpunkt (sparsam) */
  --blue-200:#8ec4df; --blue-300:#57a8ce; --blue-400:#2693c2;
  --blue-500:#007fb5; --blue-600:#006c9c; --blue-900:#0d3346;
  --orange-300:#f6a151; --orange-400:#f48c28;
  --orange-500:#f07b00; --orange-600:#cc6800;

  --ink:#0c1620;            /* dunkler Grund (Heimat) */
  --white:#ffffff;
  --gray-100:#f4f7f9; --gray-200:#dde4eb; --gray-300:#c4cfd8;
  --gray-400:#94a4b1; --gray-500:#647280; --gray-600:#47535e; --gray-700:#323c45;
  --success-500:#1e8a5b;

  /* Textfarben auf Dunkel */
  --d-head:#f4f9fd; --d-body:#c2d3df; --d-dim:#8fa6b8; --d-mono:#6fa6cb;

  /* Radius */
  --radius-lg:18px; --radius-xl:28px; --radius-pill:999px;

  /* Bewegung — ruhig, kein Bounce */
  --ease-out:cubic-bezier(0.22,1,0.36,1);
  --ease-inout:cubic-bezier(0.65,0,0.35,1);
  --dur:220ms;

  /* Schrift (lokal, siehe 02) mit System-Fallback */
  --f-display:'Schibsted Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-body:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-mono:'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;

  /* Layout */
  --container:1180px;
  --gutter:clamp(22px, 4vw, 56px);
  --section-y:clamp(64px, 9vw, 120px);
}


/* ===== 02 · LOKALE FONTS =================================== */
/* HINWEIS: Die .woff2-Dateien sind NICHT enthalten und müssen
   nach assets/fonts/ gelegt werden (siehe assets/fonts/README.txt).
   Bis dahin greift der System-Fallback aus den --f-*-Variablen,
   das Layout bleibt funktionsfähig. Keine externen Google-Aufrufe. */
@font-face{ font-family:'Schibsted Grotesk'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/schibsted-grotesk-600.woff2') format('woff2'); }
@font-face{ font-family:'Schibsted Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/schibsted-grotesk-700.woff2') format('woff2'); }
@font-face{ font-family:'Schibsted Grotesk'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../fonts/schibsted-grotesk-800.woff2') format('woff2'); }
@font-face{ font-family:'Hanken Grotesk'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/hanken-grotesk-400.woff2') format('woff2'); }
@font-face{ font-family:'Hanken Grotesk'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../fonts/hanken-grotesk-500.woff2') format('woff2'); }
@font-face{ font-family:'Hanken Grotesk'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/hanken-grotesk-600.woff2') format('woff2'); }
@font-face{ font-family:'Hanken Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/hanken-grotesk-700.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face{ font-family:'JetBrains Mono'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../fonts/jetbrains-mono-600.woff2') format('woff2'); }


/* ===== 03 · RESET / BASE =================================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--ink); color:var(--d-body);
  font-family:var(--f-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--f-display); color:var(--d-head); letter-spacing:-0.02em; line-height:1.08; margin:0; text-wrap:balance; }
p{ margin:0 0 1em; text-wrap:pretty; }
:focus-visible{ outline:2px solid var(--orange-500); outline-offset:3px; border-radius:4px; }


/* ===== 04 · LAYOUT-HELFER ================================== */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); }
.section--light{ background:var(--white); color:var(--gray-700); }
.section--ink{ background:var(--ink); color:var(--d-body); }
/* Helle Sektion: Überschriften + Textfarben umstellen */
.section--light h1,.section--light h2,.section--light h3{ color:var(--ink); }

/* Blueprint-Raster als dekorativer Hintergrund (helle Sektionen) */
.has-blueprint{ position:relative; overflow:hidden; }
.has-blueprint > .container{ position:relative; z-index:1; }
.blueprint{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--gray-200) 1px, transparent 1px),
                   linear-gradient(90deg, var(--gray-200) 1px, transparent 1px);
  background-size:54px 54px; opacity:0.5;
  -webkit-mask-image:radial-gradient(120% 78% at 78% 0%, #000, transparent 60%);
          mask-image:radial-gradient(120% 78% at 78% 0%, #000, transparent 60%);
}
/* Aurora als dekorativer Hintergrund (dunkle Sektionen) */
.has-aurora{ position:relative; overflow:hidden; }
.has-aurora > .container{ position:relative; z-index:1; }
.aurora{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(42% 46% at 12% 4%, rgba(0,127,181,0.18), transparent 62%),
             radial-gradient(40% 44% at 92% 28%, rgba(240,123,0,0.07), transparent 66%);
}


/* ===== 05 · TYPOGRAFIE-UTILITIES =========================== */
.eyebrow{
  display:inline-flex; align-items:center; gap:13px;
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--d-mono); margin:0 0 18px;
}
.eyebrow::before{ content:""; width:30px; height:2px; background:var(--blue-900); }
.section--light .eyebrow{ color:var(--blue-500); }
.section--light .eyebrow::before{ background:var(--blue-300); }

.lead{ font-size:clamp(1.1rem,1.6vw,1.32rem); line-height:1.56; color:var(--d-body); font-weight:500; }
.section--light .lead{ color:var(--gray-600); }
.accent{ color:var(--orange-500); }

/* Blau→Orange-Rail (Markensignatur) */
.rail{ display:flex; align-items:center; height:5px; width:280px; border-radius:5px; overflow:hidden; }
.rail > span{ height:100%; }
.rail .s1{ flex:2; background:var(--blue-300); }
.rail .s2{ flex:2; background:var(--blue-500); }
.rail .s3{ flex:1.4; background:var(--orange-500); }


/* ===== 06 · HEADER / NAVIGATION ============================ */
.site-header{ position:relative; z-index:10; border-bottom:1px solid rgba(255,255,255,0.08); }
.site-header__in{ display:flex; align-items:center; gap:30px; height:78px; }
.logo{ flex:none; }
.nav{ display:flex; gap:26px; margin-left:14px; }
.nav a{ font-family:var(--f-mono); font-size:12.5px; letter-spacing:0.04em; color:var(--d-dim); transition:color var(--dur) var(--ease-out); }
.nav a:hover,.nav a[aria-current="page"]{ color:var(--d-head); }
.header-cta{ margin-left:auto; }
.nav-toggle{ display:none; margin-left:auto; width:44px; height:44px; background:none; border:1px solid rgba(255,255,255,0.18); border-radius:12px; cursor:pointer; }
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  content:""; display:block; width:18px; height:2px; background:var(--d-head); margin:0 auto; position:relative; }
.nav-toggle span::before{ position:absolute; top:-6px; } .nav-toggle span::after{ position:absolute; top:6px; }
/* Mobile-Drawer: standardmäßig überall versteckt; nur < 820px per Toggle sichtbar */
.nav-drawer{ display:none; flex-direction:column; gap:4px; padding:14px var(--gutter) 22px; border-bottom:1px solid rgba(255,255,255,0.08); }
.nav-drawer a{ font-family:var(--f-mono); font-size:14px; color:var(--d-dim); padding:10px 0; }


/* ===== 07 · BUTTONS ======================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--f-body); font-weight:700; font-size:15px;
  padding:13px 24px; border-radius:var(--radius-pill);
  border:1.5px solid transparent; cursor:pointer; white-space:nowrap;
  transition:background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out),
             color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.btn .arr{ transition:transform var(--dur) var(--ease-out); }
.btn:hover .arr{ transform:translateX(4px); }
.btn--accent{ background:var(--orange-500); color:#fff; box-shadow:0 12px 34px rgba(240,123,0,0.30); }
.btn--accent:hover{ background:var(--orange-600); transform:translateY(-2px); }
.btn--ghost{ border-color:rgba(255,255,255,0.24); color:var(--d-head); }
.btn--ghost:hover{ border-color:var(--orange-500); background:rgba(240,123,0,0.10); transform:translateY(-2px); }
.section--light .btn--ghost{ border-color:var(--gray-300); color:var(--ink); }
.section--light .btn--ghost:hover{ border-color:var(--orange-500); background:rgba(240,123,0,0.06); }


/* ===== 08 · HERO =========================================== */
.hero{ padding-block:clamp(54px,8vw,104px); }
.hero__grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(36px,5vw,72px); align-items:center; }
.hero h1{ font-weight:800; font-size:clamp(2.4rem,5.2vw,4rem); margin:18px 0 0; }
.hero h1 .accent{ color:var(--orange-500); }
.hero .lead{ margin-top:22px; max-width:42ch; }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; }
.hero .rail{ margin-top:34px; }


/* ===== 09 · KARTEN & RASTER ================================ */
.grid{ display:grid; gap:clamp(16px,2vw,26px); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }

.card{
  position:relative; display:flex; flex-direction:column;
  border-radius:var(--radius-lg); padding:26px 26px 24px;
  border:1px solid rgba(255,255,255,0.09);
  background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  transition:border-color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.card:hover{ border-color:rgba(120,190,228,0.34); transform:translateY(-3px); }
.card__index{ font-family:var(--f-mono); font-size:12px; color:var(--d-dim); }
.card h3{ font-weight:700; font-size:1.25rem; margin:14px 0 0; }
.card p{ font-size:0.97rem; line-height:1.6; color:var(--d-dim); margin:12px 0 0; }
/* Helle Variante */
.section--light .card{ background:var(--white); border-color:var(--gray-200); box-shadow:0 10px 30px rgba(12,22,32,0.05); }
.section--light .card h3{ color:var(--ink); }
.section--light .card p{ color:var(--gray-600); }
.section--light .card__index{ color:var(--gray-500); }

.chip{ display:inline-flex; font-family:var(--f-mono); font-size:11.5px; color:var(--gray-700);
  border:1px solid var(--gray-300); border-radius:var(--radius-pill); padding:6px 11px; background:var(--white); }


/* ===== 10 · PIPELINE-STUFEN ================================ */
.pipeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:clamp(28px,4vw,48px); }
.stage{ position:relative; padding-right:24px; }
.stage__bar{ position:relative; height:8px; border-radius:999px; }
.stage__node{ position:absolute; top:-5px; left:0; width:18px; height:18px; border-radius:50%;
  background:var(--white); box-shadow:0 0 0 4px var(--stage-c, var(--blue-500)); }
.stage__no{ font-family:var(--f-mono); font-size:14px; color:var(--gray-500); margin-top:22px; }
.stage__name{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.3rem,2vw,1.7rem); color:var(--ink); margin-top:8px; letter-spacing:-0.02em; }
.stage__desc{ font-size:0.95rem; line-height:1.5; color:var(--gray-600); margin-top:12px; max-width:18ch; }
.loop-note{ display:inline-flex; align-items:center; gap:12px; margin-top:26px;
  font-family:var(--f-mono); font-size:14px; color:var(--orange-600); }


/* ===== 11 · BLOG =========================================== */
.cat{ display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--d-dim); }
.cat .dot{ width:7px; height:7px; border-radius:50%; background:var(--blue-300); }
.cat[data-c="seo"] .dot{ background:var(--orange-400); }

.featured{ display:grid; grid-template-columns:1.25fr 0.75fr; gap:clamp(28px,4vw,52px); align-items:stretch;
  border:1px solid rgba(255,255,255,0.10); border-radius:var(--radius-xl); padding:clamp(28px,3.4vw,48px);
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)); }
.featured h2{ font-size:clamp(1.6rem,2.8vw,2.3rem); font-weight:800; margin:16px 0 0; }
.featured p{ color:var(--d-dim); margin:16px 0 0; }
.featured__visual{ border:1px solid rgba(255,255,255,0.08); border-radius:var(--radius-lg);
  background:rgba(8,16,24,0.5); min-height:200px; }

.article-card h3{ font-weight:700; font-size:1.18rem; margin:14px 0 0; }
.article-card .meta{ font-family:var(--f-mono); font-size:11px; color:var(--d-dim); margin-top:auto; padding-top:18px; }

/* Artikel-Prosa */
.prose{ max-width:720px; margin-inline:auto; }
.prose .article-head{ margin-bottom:36px; }
.prose h1{ font-size:clamp(2rem,4vw,3rem); font-weight:800; margin:16px 0 0; }
.prose .byline{ display:flex; align-items:center; gap:12px; margin-top:24px;
  font-family:var(--f-mono); font-size:12px; color:var(--gray-500); }
.prose .byline img{ width:40px; height:40px; border-radius:50%; }
.prose .section--light & { color:var(--gray-700); }
.prose p,.prose li{ font-size:1.12rem; line-height:1.78; color:var(--gray-700); }
/* Inline-Links im Artikel-Lauftext sichtbar machen. Der globale Reset
   a{color:inherit;text-decoration:none} (Zeile 99) nimmt sonst jede
   Auszeichnung, sodass Quellenlinks wie normaler Text aussehen. */
.prose a{ color:var(--blue-600); text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:2px; text-decoration-color:rgba(0,108,156,.45);
  transition:color var(--dur) var(--ease-out),text-decoration-color var(--dur) var(--ease-out); }
.prose a:hover{ color:var(--blue-500); text-decoration-color:var(--blue-500); }
.prose h2{ font-size:1.6rem; font-weight:700; color:var(--ink); margin:42px 0 14px; }
.prose blockquote{ margin:32px 0; padding:8px 0 8px 28px; border-left:3px solid var(--orange-500);
  font-family:var(--f-display); font-weight:600; font-size:1.3rem; color:var(--ink); }
.prose .note{ border:1px solid var(--gray-200); border-left:3px solid var(--orange-500);
  border-radius:0 14px 14px 0; background:var(--gray-100); padding:20px 24px; margin:28px 0; }
.prose figure{ margin:32px 0; }
.prose figure img{ width:100%; border-radius:var(--radius-lg); border:1px solid var(--gray-200); }
.prose figcaption{ font-family:var(--f-mono); font-size:12px; color:var(--gray-500); margin-top:10px; }


/* ===== 12 · KONTAKTFORMULAR ================================ */
.form{ display:grid; gap:18px; max-width:560px; }
.form__row{ display:grid; gap:7px; }
.form label{ font-family:var(--f-mono); font-size:12px; letter-spacing:0.04em; color:var(--d-dim); }
.form input,.form textarea{
  width:100%; background:rgba(8,16,24,0.5); border:1px solid rgba(255,255,255,0.14);
  border-radius:14px; padding:14px 16px; color:var(--d-head);
  font-family:var(--f-body); font-size:16px; transition:border-color var(--dur) var(--ease-out);
}
.form input::placeholder,.form textarea::placeholder{ color:var(--gray-500); }
.form input:focus,.form textarea:focus{ outline:none; border-color:var(--blue-400); }
.form textarea{ min-height:140px; resize:vertical; }
.form__note{ font-family:var(--f-mono); font-size:11.5px; color:var(--gray-500); }


/* ===== 13 · FOOTER ========================================= */
.site-footer{ border-top:1px solid rgba(255,255,255,0.08); }
.site-footer__in{ display:flex; align-items:center; justify-content:space-between; gap:18px 26px;
  flex-wrap:wrap; padding-block:30px 40px; }
.site-footer__links{ display:flex; gap:22px; flex-wrap:wrap; }
.site-footer__links a{ font-family:var(--f-mono); font-size:12px; color:var(--d-dim); transition:color var(--dur) var(--ease-out); }
.site-footer__links a:hover{ color:var(--d-head); }
.site-footer__copy{ font-family:var(--f-mono); font-size:11px; color:var(--gray-500); }


/* ===== 14 · BEWEGUNG (REVEAL) ============================== */
/* Sichtbarer Ruhezustand ist Basis; animiert wird AUS dem Verborgenen.
   Ohne JS / bei reduzierter Bewegung bleibt alles sichtbar (fail-open). */
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
  [data-reveal].is-in{ opacity:1; transform:none; }
}


/* ===== 15 · RESPONSIVE ===================================== */
@media (max-width:980px){
  .hero__grid{ grid-template-columns:1fr; }
  .pipeline{ grid-template-columns:repeat(2,1fr); gap:28px 0; }
  .grid--3{ grid-template-columns:repeat(2,1fr); }
  .featured{ grid-template-columns:1fr; }
}
@media (max-width:820px){
  .nav,.header-cta{ display:none; }
  .nav-toggle{ display:block; }
  .site-header__in[data-open="true"] + .nav-drawer{ display:flex; }
}
@media (max-width:560px){
  .grid--2,.grid--3,.pipeline{ grid-template-columns:1fr; }
}