/* ==========================================================================
   Auftragszettel — gemeinsames Fundament für Startseite und Baukasten

   Bildwelt: Werkstatt-Blaupause. Dunkler Petrol-Grund mit feinem Raster
   (technische Zeichnung), darauf liegen Papierobjekte. Akzente aus dem
   Material des Gewerks: frisches Kupfer und die Patina, die es ansetzt.
   ========================================================================== */

@font-face{
  font-family:"Archivo Display";
  src:url("fonts/archivo-800.woff2") format("woff2");
  font-weight:800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("fonts/archivo-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Inter";
  src:url("fonts/inter-var.woff2") format("woff2");
  font-weight:400 600; font-style:normal; font-display:swap;
}
/* Nur für die Schriftwahl „Schmal“ im Zettel — wird sonst nicht geladen */
@font-face{
  font-family:"Barlow Condensed";
  src:url("fonts/barlow-condensed-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Barlow Condensed";
  src:url("fonts/barlow-condensed-700.woff2") format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  /* --- Grund: Werkbank / Blaupause --- */
  --night:#0A1A21;
  --night-2:#0F2831;
  --night-3:#173B47;          /* Trennlinien auf dunklem Grund */
  --night-text:#D2E3E7;
  --night-mute:#8AA6AE;

  /* --- Papier --- */
  --paper:#FBF9F4;
  --paper-2:#F1EDE3;
  --rule:#E4DED0;
  --rule-2:#948968;
  --ink:#0F1D22;
  --ink-2:#57686E;

  /* --- Kupfer (frisch) und Patina (gealtert) ---
     --copper-hi ist der helle Rand des Verlaufs; er bleibt dunkel genug,
     dass weiße Schrift darauf lesbar bleibt (4,6:1). */
  --copper:#B8541F;
  --copper-text:#DE8A54;   /* Kupfer als Schriftfarbe auf dunklem Grund — 6,3:1 */
  --copper-hi:#B85A22;
  --copper-dp:#8F3F14;
  --copper-tint:#F7EBE1;
  --patina:#43A697;
  --patina-dp:#26786C;

  --danger:#B3362B;

  /* --- Schrift --- */
  --display:"Archivo Display","Archivo","Archivo Black",system-ui,sans-serif;
  --label:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,Menlo,monospace;

  /* --- Form --- */
  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --r-xl:28px;

  --lift-1:0 1px 2px rgba(4,14,18,.16), 0 3px 8px rgba(4,14,18,.12);
  --lift-2:0 2px 4px rgba(4,14,18,.18), 0 10px 24px rgba(4,14,18,.24);
  --sheet-lift:0 1px 2px rgba(3,12,16,.2), 0 14px 32px rgba(3,12,16,.3), 0 44px 90px rgba(3,12,16,.34);

  --ease:cubic-bezier(.2,.7,.25,1);

  /* --- Kompatibilität mit gewachsenen Klassennamen --- */
  --bench:var(--night);
  --bench-2:var(--night-2);
  --bench-line:var(--night-3);
  --bench-text:var(--night-text);
  --paper-dim:var(--paper-2);
  --muted:var(--ink-2);
  --rule-strong:var(--rule-2);
}

/* Blaupausen-Raster + feines Korn: gibt dem dunklen Grund Material,
   ohne dass ein einziges Bild geladen werden muss. */
.ground{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(to right, rgba(67,166,151,.055) 1px, transparent 1px) 0 0/34px 34px,
    linear-gradient(to bottom, rgba(67,166,151,.055) 1px, transparent 1px) 0 0/34px 34px,
    linear-gradient(215deg, transparent 52%, rgba(23,59,71,.45));
  mask-image:linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,.55) 100%);
}
.grain{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--night);
  color:var(--night-text);
  font-family:var(--body);
  font-size:1.0625rem;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.hidden{display:none !important}
.mono{font-family:var(--mono)}

:focus-visible{
  outline:2.5px solid var(--patina);
  outline-offset:3px;
  border-radius:4px;
}
/* Auf dem hellen Papier braucht der Ring den dunkleren Patina-Ton */
.sheet :focus-visible,
.pdf-page :focus-visible{outline-color:var(--patina-dp)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    /* negativer Verzug: der Endzustand steht sofort, nichts bleibt unsichtbar */
    animation-delay:-1ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
}