/* =========================================================
   Vano
   very agile – no overhead
   ========================================================= */

/* === Basis === */

@import url('/assets/uikit/uikit.min.css');

/* === Farben === */

:root {
    /* Basis */
    --color-offwhite:   #f9f8f7;
    --color-ivory:      #f5f2ed;
    --color-stone:      #bcafa7;
    --color-clay:       #897e76;
    --color-walnut:     #3f332a;
    --color-chocolate:  #211b17;

    /* Neutrale Grautöne*/
    --color-coal:       #0c0c0c;
    --color-graphite:   #222222;

    /* Akzente */
    --color-teal:       #218a86;
    --color-amber:      #da7b27;
    --color-crimson:    #c7363d;

    /* Status */
    --color-error:      #c24040;
    --color-warning:    #e47e2d;
    --color-notice:     #f2c94c;
    --color-success:    #519c3f;
    --color-info:       #2f80ed;



    /* Farb-Semantik - nur diese Werte im weiteren CSS verwenden*/
    --bg:                 var(--color-offwhite);
    --surface:            var(--color-ivory);
    --border:             var(--color-stone);

    --text-primary:       var(--color-chocolate);
    --text-secondary:     var(--color-teal);
    --text-muted:         var(--color-clay);
    --text-heading:       var(--color-walnut);

    --accent:             var(--color-crimson);
    --hover:              var(--color-crimson);
    --link:               var(--color-info);

    --surface-inverse:    var(--color-graphite);
    --text-inverse:       var(--color-ivory);
    --text-inverse-muted: var(--color-stone);

    --shadow-color:       color-mix(in srgb, var(--color-coal) 8%, transparent);

    --accent-hover:       color-mix(in srgb, var(--accent) 85%, var(--color-coal));
    --hover-bg:           color-mix(in srgb, var(--accent) 10%, transparent);
    --text-on-accent:     var(--color-offwhite);

    --shadow-card:        0 6px 24px var(--shadow-color);

    /* Text */
    --text-micro: 0.75rem;
    --text-small: 0.8rem;
    --text-normal: 15px;
    --text-large: 1.2rem;

}

/* === Typografie === */

@font-face {
    font-family: 'Inter';
    src: url('/assets/vano/fonts/InterVariable.woff2') format('woff2');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('/assets/vano/fonts/InterVariable-Italic.woff2') format('woff2');
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
}

h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6,
.uk-heading-small, .uk-heading-medium, .uk-heading-large,
.uk-heading-xlarge, .uk-heading-2xlarge, .uk-heading-3xlarge {
    font-family: inherit;
    font-weight: 400;
    color: var(--text-heading);
}

/* === Basis === */

html {
    font-family:
        'Inter',
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
    font-size: var(--text-normal);
    line-height: 1.5;
    color: var(--text-primary);
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
    overflow-y: scroll;
}

body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: inherit;
    color: inherit;
    background: inherit;
    overflow: clip;
}

/* === Seitenelemente === */

.va-page-watermark {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0 2rem;
    overflow: hidden;
    color: var(--text-primary);
    font-size: 128px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    opacity: 0.025;
    pointer-events: none;
}

/* === Inhalt === */

/* Appübergreifender Kicker – bewusst Bestandteil des Vano Core. */
.va-kicker {
    margin: 0 0 20px;
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.4;
}

/* Appübergreifende Poll-/Statusleiste – bewusst Bestandteil des Vano Core. */
.va-pollbar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 3px;
  background: var(--accent);
  transform-origin: left center;
}

/* === UIkit-Anpassungen === */

/* Text-Hilfsklassen */

.uk-text-secondary {
    color: var(--text-secondary) !important;
}

.uk-text-meta {
  color: var(--text-muted);
}

.uk-text-bold {
  font-weight: 600;
}

.uk-article-meta {
  color: var(--text-muted);
}

.uk-text-danger {
  color: var(--color-error) !important;
}

/* Cards */

.uk-card-default {
  background: var(--surface);
  color: var(--text-primary);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}

/* Formulare */

.uk-input {
  background: var(--surface);
  color: var(--text-primary);
  border-color: var(--border);
}

.uk-input:focus {
  background: var(--surface);
  color: var(--text-primary);
  border-color: var(--accent);
}

.uk-form-icon {
  color: var(--text-muted);
}

/* Buttons */

.uk-button-primary {
  background: var(--accent);
  color: var(--text-on-accent);
}

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

/* Notifications */

.uk-notification-message-primary {
  background: var(--accent);
  color: var(--text-on-accent);
}

/* Article */

.uk-article a {
  color: var(--link);
}