/*! (c) Copyright 2026 Brinkhoff Consulting GmbH. Alle Rechte vorbehalten. Diese Website wurde NC Coffee Roastery GmbH zur Nutzung am 29.10.2026 erstmals zur Verfügung gestellt. */
@font-face {
  font-family: "Proforma";
  src: url("../fonts/proforma-book.woff") format("woff");
  font-weight: 100 450;
  font-display: swap;
}
@font-face {
  font-family: "Proforma";
  src: url("../fonts/proforma-medium.woff") format("woff");
  font-weight: 451 900;
  font-display: swap;
}
@font-face {
  font-family: "Inconsolata";
  src: url("../fonts/inconsolata-vf.woff") format("woff");
  font-weight: 200 900;
  font-stretch: 50% 200%;
  font-display: swap;
}

:root {
  --kraft: #b5a594;
  --kraft-deep: #a39282;
  --ink: #21201f;
  --ink-70: rgba(33, 32, 31, .7);
  --ink-12: rgba(33, 32, 31, .12);
  --white: #fff;
  --illu: #c5c2c1;
  --draft: #ec008c;

  --serif: "Proforma", Georgia, "Times New Roman", serif;
  --mono: "Inconsolata", ui-monospace, Menlo, Consolas, monospace;

  --radius: 18px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .12 0 0 0 0 .1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--kraft) var(--grain);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

button, input, select { font: inherit; color: inherit; }

a { color: inherit; text-underline-offset: 3px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 24px;
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease-out), opacity .2s, background-color .2s;
  touch-action: manipulation;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.btn--ghost { --btn-bg: transparent; --btn-fg: var(--ink); }
.btn--block { width: 100%; }
.btn .icon { width: 20px; height: 20px; }

.link-btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 15px;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.link-btn:disabled { text-decoration: none; opacity: .6; cursor: default; }

[data-draft] {
  position: relative;
  outline: 1.5px dashed var(--draft);
  outline-offset: 5px;
  border-radius: 4px;
}
[data-draft]::after {
  content: "Entwurf";
  position: absolute;
  top: -14px;
  right: -8px;
  z-index: 2;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--draft);
  color: #fff;
  font: 700 10px/1.3 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
}
html.hide-drafts [data-draft] { outline: none; }
html.hide-drafts [data-draft]::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}