/* Wolfcoded – gemeinsame Basis: Schriften (lokal gehostet), Farben, Grundstil */

@font-face{font-family:"Gugi";src:url("../fonts/gugi-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-var-latin.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-400-latin.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-500-latin.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --blue:#094faa;          /* Logo-Blau */
  --blue-deep:#063a7e;
  --paper:#ffffff;
  --tint:#adc4e3;          /* aus der Kantenglättung des Logos */
  --line:rgba(255,255,255,.09);
  --line-strong:rgba(255,255,255,.28);
  --muted:rgba(255,255,255,.72);
  --f-display:"Gugi","Chakra Petch",system-ui,sans-serif;
  --f-body:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --gutter:clamp(16px,4vw,64px);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;background:var(--blue);color:var(--paper)}
body{font-family:var(--f-body);min-height:100%;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--paper);outline-offset:4px}
::selection{background:var(--paper);color:var(--blue)}

/* Blaupausen-Raster */
.grid-bg{position:relative;isolation:isolate}
.grid-bg::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    linear-gradient(var(--line) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(var(--line) 1px,transparent 1px) 0 0/12px 12px,
    linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/12px 12px;
}

/* Passermarken in den Ecken */
.crop{position:absolute;width:18px;height:18px;border:0 solid var(--line-strong);z-index:-1;pointer-events:none}
.crop.tl{top:14px;left:14px;border-top-width:1px;border-left-width:1px}
.crop.tr{top:14px;right:14px;border-top-width:1px;border-right-width:1px}
.crop.bl{bottom:14px;left:14px;border-bottom-width:1px;border-left-width:1px}
.crop.br{bottom:14px;right:14px;border-bottom-width:1px;border-right-width:1px}

.mono{font-family:var(--f-mono)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}