/* =================================================================
   Beratung Seger — Stylesheet
   Konzept: "Maßarbeit" — Beratung als Präzisionsarbeit, nicht von
   der Stange. Leitmotiv ist die Maßlinie aus technischen Zeichnungen
   (kurzer Steg, Linie, Steg), die im Hero den Abstand zwischen
   Status quo und Ziel markiert und als Trenner durch die Seite läuft.
   ================================================================= */

/* ---------- Fonts (selbst gehostet, kein externer Request) ------- */
@font-face {
  font-family: 'Fraunces';
  src: url('/static/fonts/fraunces-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/static/fonts/fraunces-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/static/fonts/fraunces-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/static/fonts/fraunces-latin-600-italic.woff2') format('woff2');
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/static/fonts/fraunces-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/static/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/static/fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans';
  src: url('/static/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/static/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('/static/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---------- Tokens ------------------------------------------------ */
:root{
  --graphit: #1B1E21;
  --papier: #F7F4EE;
  --papier-dunkel: #EFEAE0;
  --tiefblau: #243B53;
  --tiefblau-dunkel: #16222F;
  --messing: #B8842B;
  --stein: #6E6A60;
  --linie: #DBD4C4;
  --weiss: #FFFFFF;

  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --maxw: 1120px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
}

/* ---------- Reset / base ------------------------------------------ */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *{ animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body{
  margin: 0;
  background: var(--papier);
  color: var(--graphit);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
:focus-visible{
  outline: 2px solid var(--messing);
  outline-offset: 3px;
}
h1, h2, h3{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
  color: var(--tiefblau-dunkel);
}
h1{ font-size: clamp(2.4rem, 5vw, 3.6rem); }
h2{ font-size: clamp(1.6rem, 3vw, 2.2rem); }
h3{ font-size: 1.25rem; font-weight: 600; }
p{ margin: 0 0 1.1em; max-width: 38em; }
.lead{
  font-size: 1.2rem;
  color: var(--graphit);
  max-width: 34em;
}
.eyebrow{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--messing);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.9em;
}

.wrap{
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- Buttons / links ---------------------------------------- */
.btn{
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  padding: 0.85em 1.5em;
  border-radius: 2px;
  border: 1px solid var(--tiefblau-dunkel);
  transition: background 0.15s ease, color 0.15s ease, border-color .15s ease;
}
.btn--primary{
  background: var(--tiefblau-dunkel);
  color: var(--papier);
}
.btn--primary:hover{ background: var(--messing); border-color: var(--messing); color: var(--graphit); }
.btn--ghost{
  background: transparent;
  color: var(--tiefblau-dunkel);
}
.btn--ghost:hover{ border-color: var(--messing); color: var(--messing); }
.btn--on-dark{ border-color: rgba(247,244,238,0.4); color: var(--papier); }
.btn--on-dark:hover{ background: var(--messing); border-color: var(--messing); color: var(--graphit); }

.textlink{
  font-family: var(--font-mono);
  font-size: 0.92rem;
  border-bottom: 1px solid var(--messing);
  padding-bottom: 0.1em;
}
.textlink:hover{ color: var(--messing); }

/* ---------- Header / Nav -------------------------------------------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(247,244,238,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--linie);
}
.site-header .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
}
.brand{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--tiefblau-dunkel);
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}
.brand small{
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stein);
  font-weight: 400;
}
.nav{
  display: flex;
  gap: clamp(1rem, 2vw, 2rem);
  font-family: var(--font-mono);
  font-size: 0.88rem;
}
.nav a{
  position: relative;
  padding: 0.3em 0;
  color: var(--graphit);
}
.nav a:hover, .nav a[aria-current="page"]{ color: var(--tiefblau-dunkel); }
.nav a[aria-current="page"]::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; background: var(--messing);
}
.nav-toggle{ display: none; }

@media (max-width: 720px){
  .nav{
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--papier);
    flex-direction: column;
    padding: 1rem var(--gutter) 1.5rem;
    border-bottom: 1px solid var(--linie);
    gap: 0.9rem;
  }
  .nav.is-open{ display: flex; }
  .nav-toggle{
    display: inline-flex;
    border: 1px solid var(--linie);
    background: none;
    padding: 0.5em 0.7em;
    font-family: var(--font-mono);
    font-size: 0.8rem;
  }
}

/* ---------- Maßlinie — signature dimension-line motif --------------- */
.massline{
  display: flex;
  align-items: center;
  gap: 0.9rem;
  color: var(--stein);
}
.massline__tick{
  width: 1px; height: 14px;
  background: var(--messing);
  flex: 0 0 auto;
}
.massline__bar{
  flex: 1 1 auto;
  height: 1px;
  background: var(--linie);
}
.massline__label{
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--stein);
}

.massline--divider{ margin: 3.5rem 0; }

/* Hero variant: bigger, sits under the H1, brass bar */
.massline--hero{
  margin-top: 2.2rem;
  max-width: 30rem;
}
.massline--hero .massline__bar{ background: var(--messing); height: 1.5px; }
.massline--hero .massline__label{ color: var(--tiefblau-dunkel); font-weight: 500; }

/* ---------- Hero ----------------------------------------------------- */
.hero{
  padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid var(--linie);
}
.hero__grid{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}
@media (max-width: 860px){
  .hero__grid{ grid-template-columns: 1fr; }
}
.hero h1{ max-width: 16ch; }

/* Title block — nod to the title block (Schriftfeld) of a technical
   drawing: who drew it, where, at what scale. One quiet flourish. */
.titleblock{
  border: 1px solid var(--linie);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--stein);
  align-self: end;
}
.titleblock dl{ margin: 0; display: grid; grid-template-columns: auto 1fr; }
.titleblock div{
  display: contents;
}
.titleblock dt, .titleblock dd{
  margin: 0;
  padding: 0.55em 0.8em;
  border-top: 1px solid var(--linie);
}
.titleblock div:first-child dt, .titleblock div:first-child dd{ border-top: none; }
.titleblock dt{ color: var(--stein); border-right: 1px solid var(--linie); white-space: nowrap; }
.titleblock dd{ color: var(--graphit); text-align: right; }

/* ---------- Sections / layout ---------------------------------------- */
section{ padding: clamp(3rem, 7vw, 5rem) 0; }
.section--dark{
  background: var(--tiefblau-dunkel);
  color: var(--papier);
}
.section--dark h2, .section--dark h3{ color: var(--papier); }
.section--dark p{ color: rgba(247,244,238,0.82); }
.section--dark .massline__bar{ background: rgba(247,244,238,0.25); }
.section--dark .massline__label{ color: rgba(247,244,238,0.6); }
.section--papier-dunkel{ background: var(--papier-dunkel); }

.grid{ display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid--3{ grid-template-columns: repeat(3, 1fr); }
.grid--2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px){
  .grid--3, .grid--2{ grid-template-columns: 1fr; }
}

.card{
  border-top: 2px solid var(--messing);
  padding-top: 1.3rem;
}
.card h3{ margin-bottom: 0.4em; }
.card p{ color: var(--stein); margin-bottom: 0; }

/* Ablauf / process — genuine sequence, numbered as drawing call-outs */
.steps{ display: flex; flex-direction: column; }
.step{
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 1.5rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--linie);
}
.step:first-child{ border-top: none; }
.step__num{
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--messing);
  padding-top: 0.2em;
}
.step h3{ margin-bottom: 0.35em; }
.step p{ color: var(--stein); margin-bottom: 0; max-width: 42em; }

/* ---------- CTA band --------------------------------------------------- */
.cta-band{
  background: var(--tiefblau-dunkel);
  color: var(--papier);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
}
.cta-band .wrap{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.cta-band h2{ color: var(--papier); margin: 0; max-width: 22ch; }

/* ---------- Footer ------------------------------------------------------ */
.site-footer{
  border-top: 1px solid var(--linie);
  padding: 2.5rem 0;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--stein);
}
.site-footer .wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.2rem;
}
.site-footer nav{ display: flex; gap: 1.2rem; flex-wrap: wrap; }
.site-footer a:hover{ color: var(--messing); }

/* ---------- Blog --------------------------------------------------------- */
.post-list{ display: flex; flex-direction: column; }
.post-item{
  padding: 1.8rem 0;
  border-top: 1px solid var(--linie);
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 1.5rem;
}
.post-item:first-child{ border-top: none; }
.post-item time{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--stein);
}
.post-item h3{ margin-bottom: 0.35em; }
.post-item p{ color: var(--stein); margin-bottom: 0.5em; }
@media (max-width: 600px){
  .post-item{ grid-template-columns: 1fr; }
}

article.post{ max-width: 38em; }
article.post .eyebrow time{ color: var(--stein); }
article.post h2{ margin-top: 1.6em; }
article.post .highlight-box{
  border-left: 2px solid var(--messing);
  padding: 0.2rem 1.4rem;
  margin: 2rem 0;
  background: var(--papier-dunkel);
}
article.post .cta-box{
  border: 1px solid var(--linie);
  padding: 1.6rem;
  margin: 2.5rem 0 0;
}
article.post .cta-box .eyebrow{ margin-bottom: 0.6em; }

/* ---------- Legal pages --------------------------------------------------- */
.legal{ max-width: 42em; }
.legal h2{ margin-top: 2em; font-size: 1.3rem; }
.legal p, .legal li{ color: var(--graphit); }