@font-face {
  font-family: "Source Sans Pro Light";
  font-display: swap;
  src: url("/fonts/source-sans-pro-v12-latin-300.woff2") format("woff2"),
       url("/fonts/source-sans-pro-v12-latin-300.woff") format("woff") }

@font-face {
  font-family: "Source Sans Pro Bold";
  font-display: swap;
  src: url("/fonts/source-sans-pro-v12-latin-700.woff2") format("woff2"),
       url("/fonts/source-sans-pro-v12-latin-700.woff") format("woff") }

@font-face {
  font-family: "Source Sans Pro Regular";
  font-display: swap;
  src: url("/fonts/source-sans-pro-v12-latin-regular.woff2") format("woff2"),
       url("/fonts/source-sans-pro-v12-latin-regular.woff") format("woff") }

@font-face {
  font-family: "Ruda Bold";
  font-display: swap;
  src: url("/fonts/rudabold.woff2") format("woff2"),
       url("/fonts/rudabold.woff") format("woff") }

/* ===== Velometrik Basis-Theme (Grün) + Design-Tokens ===== */
:root{
  /* Primärpalette */
  --primary-light:  #67cf50;
  --primary:        #5cbc40;
  --primary-dark:   #4d9f30;

  --hover-menu: rgba(47,240,30,.329);
  --glas-effect: rgba(255,255,255,.78);

  --primary-text:   #151515;
  --secondary-text: #ffffff;

  --primary-back:   #ffffff;
  --secondary-back: #151515;

  --primary-SideMenu: #f0f0f0;

  /* Graustufen */
  --light-1: #dcdcdc;
  --light-2: #b0b0b0;
  --light-3: #9d9d9d;
  --light-4: #717171;

  /* Statusfarben */
  --warn:    #e17a0c;
  --error:   #ee395b;
  --success: #5cbc40;
  --neutral: #c0c0c0;

  /* Fonts */
  --normal-font: Source Sans Pro Regular, Helvetica Neue, Helvetica, Arial, sans-serif;
  --header-font: Ruda Bold, Helvetica Neue, Helvetica, Arial, sans-serif;
  --light-font:  Source Sans Pro Light, Helvetica Neue, Helvetica, Arial, sans-serif;
  --mono-font:   SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Font sizes */
  --XL:  2.5em;
  --L:   1.3em;
  --M:   1.0em;
  --S:   0.9em;
  --XS:  0.5em;

  /* ===== Zusatz-Tokens für Komponenten & System ===== */

  /* Spacing & Größen */
  --space-0: 0;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  /* Radien/Elevation */
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.15);
  --shadow-2: 0 4px 12px rgba(0,0,0,.25);
  --shadow-3: 0 10px 30px rgba(0,0,0,.35);

  --border-color: #dedede;
  --border: 1px solid var(--border-color);

  /* Motion */
  --easing: cubic-bezier(.2,.7,.2,1);
  --t-fast: .15s;
  --t-med:  .3s;
  --t-slow: .6s;

  /* Glass/Frosted */
  --blur: 8px;
  --glass-back: var(--glas-effect);
  --glass-border: 1px solid rgba(255,255,255,.3);

  /* Fokus & Links */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent);
  --link: var(--primary);
  --link-hover: var(--primary-dark);

  /* Scrollbar (optional) */
  --scrollbar-track: rgba(0,0,0,.06);
  --scrollbar-thumb: rgba(0,0,0,.2);
  --scrollbar-thumb-hover: rgba(0,0,0,.35);

  /* Tabellen/Zeilen */
  --row-hover: var(--hover-menu);
  --row-alt: rgba(0,0,0,.03);

  /* Komponenten-Tokens */

  /* Buttons */
  --btn-bg: var(--primary);
  --btn-fg: var(--primary-text);
  --btn-hover-bg: var(--primary-text);
  --btn-hover-fg: var(--primary-back);
  --btn-radius: var(--radius-2);
  --btn-shadow: var(--shadow-1);

  /* Inputs */
  --input-bg: var(--primary-SideMenu);
  --input-fg: #222;
  --input-bg-focus: var(--light-1);
  --input-fg-focus: var(--secondary-back);
  --input-border: 1px solid var(--light-2);
  --input-radius: var(--radius-1);

  /* Cards/Panels */
  --card-bg: var(--primary-back);
  --card-fg: var(--primary-text);
  --card-radius: var(--radius-2);
  --card-shadow: var(--shadow-2);
  --card-hover-bg: var(--primary);
  --card-hover-fg: var(--secondary-text);

  /* Sidebar/Nav */
  --side-bg: rgba(255,255,255,.75);
  --side-hover-bg: var(--hover-menu);
  --side-active-bg: var(--primary);
  --side-active-fg: var(--primary-text);
  --side-radius: var(--radius-3);

  /* Navbar/Footer */
  --bar-bg: var(--primary-SideMenu);
  --bar-fg: var(--primary-text);
}

html,body {
    font-family: var(--normal-font);
    background: var(--primary-SideMenu);
    color: var(--primary-text);
}

h1, h2, h3, h4,
.uk-heading-medium,
.uk-card-title {
    font-family: var(--header-font);
}

.uk-container {
    max-width: 1200px;
}

.uk-button {
    border-radius: var(--btn-radius);
    transition: background var(--t-fast) var(--easing),
                color var(--t-fast) var(--easing),
                box-shadow var(--t-fast) var(--easing);
}

.uk-button-primary {
    background: var(--primary);
    color: var(--primary-text);
    border: 1px solid var(--primary-dark);
    box-shadow: var(--btn-shadow);
}

.uk-button-primary:hover,
.uk-button-primary:focus {
    background: var(--primary-dark);
    color: var(--secondary-text);
}

.uk-button-default {
    background: var(--primary-back);
    color: var(--primary-text);
    border: var(--border);
}

.uk-button-default:hover,
.uk-button-default:focus {
    background: var(--primary);
    color: var(--primary-text);
    border-color: var(--primary-dark);
}

.uk-card {
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    background: var(--card-bg);
    color: var(--card-fg);
}

.uk-input,
.uk-textarea {
    /*background: var(--input-bg);*/
    color: var(--input-fg);
    border: var(--input-border);
    border-radius: var(--input-radius);
    font-family: var(--normal-font);
}

.uk-input:focus,
.uk-textarea:focus {
    /*background: var(--input-bg-focus);*/
    color: var(--input-fg-focus);
    border-color: var(--primary);
    box-shadow: var(--focus-ring);
}

.uk-button-danger {
    background: var(--error);
    color: white;
    border: 1px solid color-mix(in srgb, var(--error) 80%, black);
}

.uk-button-danger:hover,
.uk-button-danger:focus {
    background: color-mix(in srgb, var(--error) 80%, black);
    color: white;
}

a {
    color: var(--link);
}

a:hover {
    color: var(--link-hover);
}

.uk-list-divider > :nth-child(n+2) {
    border-top: var(--border);
}

.uk-alert-primary {
    background: color-mix(in srgb, var(--primary) 18%, white);
    color: var(--primary-text);
    border-left: 4px solid var(--primary);
}

.doku-card {
    min-height: 150px;
}

.doku-card:hover {
    background: color-mix(in srgb, var(--primary) 8%, white);
}

.doku-content {
    font-family: var(--normal-font);
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--primary-text);
}

.doku-content h1,
.doku-content h2,
.doku-content h3,
.doku-content h4 {
    font-family: var(--header-font);
    color: var(--primary-text);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.doku-content h1 {
    font-size: 2.2rem;
    border-bottom: 3px solid var(--primary);
    padding-bottom: .4rem;
}

.doku-content h2 {
    font-size: 1.6rem;
    border-left: 6px solid var(--primary);
    padding-left: .75rem;
}

.doku-content p {
    margin-bottom: 1rem;
}

.doku-content strong {
    font-family: var(--header-font);
}

.doku-content a {
    color: var(--primary-dark);
    text-decoration: underline;
}

.doku-content ul,
.doku-content ol {
    margin-top: .5rem;
    margin-bottom: 1rem;
    padding-left: 1.8rem;
}

.doku-content li {
    margin-bottom: .35rem;
}

.doku-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    background: var(--primary-back);
    box-shadow: var(--shadow-1);
    border-radius: var(--radius-2);
    overflow: hidden;
}

.doku-content th,
.doku-content td {
    border: 1px solid var(--border-color);
    padding: .65rem .85rem;
    vertical-align: top;
}

.doku-content th {
    background: var(--primary);
    color: var(--primary-text);
    font-family: var(--header-font);
}

.doku-content tr:nth-child(even) td {
    background: var(--row-alt);
}

.doku-content tr:hover td {
    background: color-mix(in srgb, var(--primary) 12%, white);
}

.doku-content blockquote {
    border-left: 6px solid var(--primary);
    padding: .75rem 1rem;
    background: color-mix(in srgb, var(--primary) 10%, white);
    margin: 1.5rem 0;
    font-style: italic;
}

.doku-content code {
    font-family: var(--mono-font);
    background: #eef0ee;
    padding: .15rem .35rem;
    border-radius: var(--radius-1);
}

.doku-content pre {
    background: #151515;
    color: #f0f0f0;
    padding: 1rem;
    border-radius: var(--radius-2);
    overflow-x: auto;
}

.doku-content pre code {
    background: transparent;
    color: inherit;
    padding: 0;
}

.doku-content img {
    max-width: 100%;
    border-radius: var(--radius-2);
    box-shadow: var(--shadow-1);
    margin: 1rem 0;
}

.vmk-navbar {
    background: var(--bar-bg);
    color: var(--bar-fg);
    border-bottom: 3px solid var(--primary);
    box-shadow: var(--shadow-1);
}

.uk-navbar-item.uk-logo {
    font-family: var(--header-font);
    color: var(--primary-text);
}

.uk-navbar-nav > li > a {
    font-family: var(--header-font);
    color: var(--primary-text);
}

.uk-navbar-nav > li > a:hover {
    color: var(--primary-dark);
}

.vmk-card {
    min-height: 160px;
    transition: transform var(--t-fast) var(--easing),
                box-shadow var(--t-fast) var(--easing);
}

.vmk-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-3);
}

.vmk-empty {
    max-width: 600px;
    margin: 0 auto;
}

.vmk-footer {
    padding: 1rem 0;
    border-top: var(--border);
    background: var(--bar-bg);
}

.vmk-sidebox {
    position: sticky;
    top: 90px;
}

.vmk-sidebox .uk-nav > li > a {
    border-radius: var(--radius-1);
    color: var(--primary-text);
}

.vmk-sidebox .uk-nav > li > a:hover {
    background: color-mix(in srgb, var(--primary) 12%, white);
    color: var(--primary-text);
}

.vmk-sidebox .uk-nav > li.uk-active > a {
    background: var(--primary);
    color: var(--primary-text);
    font-family: var(--header-font);
}