@charset "UTF-8";

:root {
    /* COLORS */
    --c_base:#232221;
    --c_background:#DCDDDE;
    --c_main:cyan;
    --c_primary:magenta;
    --c_secondary:yellow;
    --c_highlight:black;
    /* TEXT */
    --t_content:Verdana,'Verdana',sans-serif;
    --t_highlight:Arial,'Arial',sans-serif;
    --t_base_lh:125%;
    --t_base_ls:0.02em;
    --t_head_lh:110%;
    /* ELEMENTS */
    --logo:2.75em;
}

@media screen and (prefers-color-scheme:dark) {
  :root {
    /* COLORS */
    --c_base:#DCDDDE;
    --c_background:#232221;
    --c_main:cyan;
    --c_primary:magenta;
    --c_secondary:yellow;
    --c_highlight:black;
  }
}

/* BASICS */

  *, *::before, *::after {
    /* display */   padding:0; margin:0;
    /* written */   color:currentColor;
    /* options */   box-sizing:border-box; 
    /* visuals */   background-repeat:no-repeat;
  }

  html {
    /* display */   block-size:100%; max-width:100%; height:100%;  
    /* written */   text-rendering:optimizeSpeed; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; font-size-adjust:100%; -webkit-font-smoothing:subpixel-antialiased; -moz-osx-font-smoothing:grayscale;
    /* options */   scroll-behavior:smooth; overflow-x:clip; overflow-y:scroll;
  }


  body {
    /* display */   position:relative; width:100%;
    /* written */   color:var(--c_base); font-family:var(--t_content); font-size:calc(12pt + 8 * ((100vw - 640px) / 1280)); line-height:100%; font-weight:lighter;
    /* visuals */   background-color:var(--c_background); 
  }

  [hidden] {
    /* display */   display:inline; width:0px; height:0px; 
    /* behaves */   position:absolute; z-index:-1; 
    /* options */   visibility:hidden; opacity:0; overflow:clip;
  }
  [noselect] {
    /* options */   user-select:none;
  }
  [nopointer] {
    /* options */   pointer-events:none;
  }
  [wrap] {
    /* display */   display:block; width:100%; max-width:90vw; margin:0 auto; padding:0;
    /* behaves */   position:relative;
  }

  a,
  p, p > *,
  button,
  label,
  h1, h2, h3, h4, h5, h6 {
    /* written */   text-decoration:none; letter-spacing:var(--t_base_ls); font-size:100%;
  }

  h1, h2, h3, h4, h5, h6 {
    /* display */   display:block;
    /* written */   line-height:var(--t_head_lh); font-family:var(--t_highlight); font-stretch:condensed; font-weight:lighter;
    /* options */   overflow-wrap:break-word;
  }

  p {
    /* written */   font-variant-numeric:proportional-nums; line-height:var(--t_base_lh);
    /* options */   text-wrap:pretty;
  }
  
  li {
    /* options */ list-style:none;
  }

  input, button, textarea, abbr, blockquote, figure, figcaption {
    /* written */   font-family:inherit; font-weight:normal; font-size:100%; line-height:100%;
    /* visuals */   background:0; outline:0; border:0;
    /* options */   appearance:unset;
  }
  
  a, button, option { user-select:none; }

/* NAVIGATION */

  nav#primary {
    /* display */   display:flex; gap:1em; width:auto; height:auto; margin:0 auto; padding:0 1em;
    /* behaves */   position:sticky; z-index:1337; top:0; left:0; right:0; align-content:space-between; 
  }
  nav#primary::after {
    /* display */   content:""; width:100vw; height:100%;
    /* behaves */   position:absolute; z-index:-1; top:0; left:50%; transform:translateX(-50%);
    /* visuals */   background:var(--c_background); background:linear-gradient(180deg,var(--c_background),color-mix(in srgb,var(--c_background) 100%,var(--c_base) 3%)); color:var(--c_base); box-shadow: 0 15px 20px -25px black;
    /* options */   border-bottom:3px solid color-mix(in srgb,var(--c_base) 4%,var(--c_background) 100%); opacity:0.25; backdrop-filter:blur(12px);
  }

  nav#primary > ul {
    /* display */   display:flex; flex:1; gap:0; justify-content:flex-end; align-items:center;
  }
  nav#primary > ul > li {
    /*display */    height:100%;
    /* behaves */   position:relative;
  }
  nav#primary > ul > li > button {
    /* display */   height:100%; padding:0 0.75em;
    /* behaves */   position:relative;
    /* options */   cursor:pointer; 
    /* written */   font-family:var(--t_highlight); font-size:0.8em; line-height:100%; font-weight:lighter; font-stretch:condensed; text-transform:uppercase;
  }
  nav#primary > ul > li > button:hover {
    /* written */   color:var(--c_background);
    /* options */   transition:color 0.4s ease-in-out 0.2s;
  }
  nav#primary > ul > li > button:not(:focus):hover::before {
    /* dynamic */   --pin:0.5em; --shadow:#33333344;
    /* display */   content:"Testinhalt aus Link-Attribut"; width:22ch; height:auto; padding:0.75em;
    /* behaves */   position:absolute; z-index:3; top:calc(100% - 1px); left:unset; right:0;
    /* options */   pointer-events:none;
    /* written */   font-family:var(--t_content); font-size:75%; text-transform:none;
    /* visuals */   color:var(--c_base); background-color:var(--c_background); border-top:var(--pin) solid #FFFFFFAA; border-right:var(--pin) solid var(--c_background); border-radius:2px 0 2px 2px; box-shadow:0 8px 12px 4px var(--shadow);
  }
  nav#primary > ul > li > button::after {
    /* display */   height:0; width:100%;
    /* behaves */   position:absolute; z-index:-1; top:-2px; left:0;
    /* options */   content:"";
    /* visuals */   background:var(--c_background); border-radius:0 0 400% 0;
  }
  nav#primary > ul > li > button:hover::after {
    /* display */   height:calc(100% + 1px); width:100%;
    /* visuals */   background:var(--c_base); border-radius:0 0 0 0;
    /* options */   transition:height 0.5s ease-in 0.1s, border-radius 0.6s ease-in;
  }

  nav#primary > ul > li > button:focus { outline:none; background-color:var(--c_highlight); color:var(--c_base); transition:none; }
  nav#primary > ul > li > .dropdown { position:absolute; top:99%; right:0; height:0; width:0; overflow:clip; }
  nav#primary > ul > li > .dropdown:focus-within,
  nav#primary > ul > li > button:focus + .dropdown { height:auto; width:auto; }

  nav#primary > ul > li > .dropdown > li > a { font-size:0.7em; white-space:nowrap; }

/* LOGO */

  nav#primary > .logo { 
    /* display */   display:grid; width:auto; height:var(--logo); 
    /* behaves */   grid-template-columns:auto 1fr; grid-template-rows: auto auto;
  }
  nav#primary > .logo > img { 
    /* display */   display:block; width:var(--logo); height:auto; padding:0.2em 0 0.2em 0.4em;
    /* behaves */   grid-row:1 / span 2; grid-column:1 / span 1;
  }
  nav#primary > .logo > strong { grid-row:1 / span 1; grid-column:2 / span 1; align-self:end; font-family:var(--t_highlight); font-size:1em; line-height:100%; text-indent:0.1em; font-stretch:condensed; text-transform:uppercase; }
  nav#primary > .logo > small { grid-row:2 / span 1; grid-column:2 / span 1; font-family:var(--t_highlight); font-size:0.54em; line-height:110%; text-indent:0.2em; font-stretch:condensed; text-transform:uppercase; }