/* Shared base styles: fonts, color tokens, reset, nav & footer components.
   Used by index.html, impressum.html and datenschutz.html. */

@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/fraunces-variable.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:'Fraunces';font-style:normal;font-weight:600;font-display:swap;
  src:url(fonts/fraunces-variable.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:'Fraunces';font-style:normal;font-weight:700;font-display:swap;
  src:url(fonts/fraunces-variable.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:'IBM Plex Sans';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;
  src:url(fonts/ibm-plex-sans-variable.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:'IBM Plex Sans';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;
  src:url(fonts/ibm-plex-sans-variable.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:'IBM Plex Sans';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;
  src:url(fonts/ibm-plex-sans-variable.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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(fonts/ibm-plex-mono-500.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;
}

:root{
  --bg:#F6F4EF; --ink:#1C1B19; --dark:#1F3A34; --dark-line:#33403A;
  --muted:#4A473F; --muted-2:#676455; --line:#E4DFD3; --card:#EFEADE;
  --badge-bg:#EAE4D3; --badge-ink:#5C5836; --accent:#C9622A; --accent-text:#A04E21;
  --dark-fg:#F6F4EF; --dark-muted:#C9C6BC; --dark-muted-2:#B9C4B8;
  --footer-muted:#9FABA5;
}
*{box-sizing:border-box}
/* Always reserve the vertical scrollbar's width, even on pages short
   enough not to need it. .wrap is centered with margin:0 auto, so on any
   viewport wider than its 1440px max-width, a page that needs to scroll
   sits a few px narrower than one that doesn't (the scrollbar eats into
   the available width) - centering it differently and shifting the whole
   layout sideways on every navigation between a long and a short page. */
html{overflow-y:scroll}
body{margin:0;font-family:'IBM Plex Sans',sans-serif;background:var(--bg);color:var(--ink)}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Fraunces',serif;margin:0}
::selection{background:var(--dark);color:var(--bg)}
img{max-width:100%;display:block}

.wrap{max-width:1440px;margin:0 auto;background:var(--bg);display:flex;flex-direction:column;overflow-x:hidden}

/* NAV */
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px 96px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.nav-logo{font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:500;letter-spacing:0.02em;color:var(--dark);transition:color 0.15s ease}
.nav-logo:hover{color:var(--muted)}
.nav-tagline{display:flex;gap:40px;font-size:15px;color:var(--muted)}

/* shared eyebrow label */
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:13px;letter-spacing:0.03em;margin-bottom:16px;color:var(--muted-2)}

/* shared buttons */
.btn-primary{font-size:16px;font-weight:600;padding:16px 30px;border-radius:10px;background:var(--accent);color:var(--dark-fg);display:inline-block}

/* the → glyph sits visibly low relative to the cap-height of bold text in
   this font, so nudge it up a touch to look optically centered */
.arrow{display:inline-block;position:relative;top:-2px}

/* API hint box (MCP-server / GraphQL), own full-width section on some
   pages, sits between the main content and the closing footer/CTA. Default
   bg is --card; the --bg variant is for when the section right before it
   already uses --card (e.g. the retainer section), so the two don't blend
   into one block. */
.mcp-note{padding:90px 96px;display:flex;background:var(--card)}
.mcp-note.mcp-note--bg{background:var(--bg)}
.mcp-note-inner{display:flex;flex-direction:column;gap:18px;align-items:flex-start;max-width:720px}
.mcp-note h2{font-size:28px}
.mcp-note p{font-size:16px;line-height:1.7;color:var(--muted);margin:0}
.mcp-url{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:15px;font-weight:500;padding:10px 20px;border-radius:100px;background:var(--bg);border:1px solid var(--line);color:var(--dark);white-space:nowrap}
a.mcp-url:hover{border-color:var(--dark)}

/* footer row (nav-like row used at the bottom of the CTA / legal pages) */
.footer-row{display:flex;justify-content:space-between;gap:12px;width:100%;margin-top:64px;padding-top:32px;border-top:1px solid var(--dark-line);font-size:14px;color:var(--footer-muted);flex-wrap:wrap}
.footer-row a{text-decoration:underline;text-underline-offset:2px}

@media (max-width: 900px){
  .mcp-note{padding-left:48px;padding-right:48px}
}

@media (max-width: 640px){
  .nav{padding-left:24px;padding-right:24px;padding-top:20px;padding-bottom:20px;gap:14px}
  .nav-tagline{display:none}
  .mcp-note{padding:48px 24px}
  .mcp-note-inner{gap:14px}
  .mcp-note h2{font-size:24px}
  .footer-row{flex-direction:column;gap:8px;margin-top:48px}
}