/* Fonts */
@import 'anahataglow-fonts.css';
@import 'tabler-icons.css';

/* ROOT */
:root {
  /* Basis */
  --olive: #666b55;
  --olive-light:  #959b81; /* heller */
  --olive-dark:   #45493a; /* dunkler */
  --olive-darker: #2a2c23; /* sehr dunkel */

  /* Skala (Tints/Shades) */
  --olive-50:  #c6c6c6;
  --olive-100: #b2b2b2;
  --olive-200: #9d9d9d;
  --olive-300: #8b8d85;
  --olive-400: #797d6c;
  --olive-500: #666b55; /* Base */
  --olive-600: #525740;
  --olive-700: #3d422c;
  --olive-800: #272b1b;
  --olive-900: #11120a;
  --olive-950: #000000;

  /* Akzente, die gut zu Olive passen */
  --accent-analog-1: #8f884b; /* wärmeres Oliv-Gelb */
  --accent-analog-2: #698f4b; /* oliv-grün */
  --accent-compl:    #513a9f; /* Komplementär (violett/indigo) */
  --accent-triad-1:  #3a889f; /* kühles Blaugrün */
  --accent-triad-2:  #9f3a88; /* Magenta-Rot */

  /* Semantik (für UI) */
  --bg:          var(--olive-50);
  --bg-soft:     #f6f7f4;
  --surface:     #ffffff;
  --border:      #d8dbd2;
  --text:        #523f2c;
  --text-muted:  #5a5e4d;
  --primary:     var(--olive-500);
  --gold: #cc9332;
  --primary-contrast: #ffffff;
  --primary-hover: var(--olive-600);
  --primary-active: var(--olive-700);

  --info:    var(--accent-triad-1);
  --success: #4a8a4f;   /* grün, harmoniert mit Oliv */
  --warning: #b08a2a;   /* gold-ocker */
  --danger:  #9c3a3a;   /* gedecktes Rot */

  /* Beispiele für Text auf farbigen Flächen */
  --on-dark:   #f2f3f0;
  --on-light:  #222;
}

/* UIKIT overrides */
.uk-text-small  {
  font-size: 0.85rem !important;
}

h1,
.uk-h1,
h2,
.uk-h2,
h3,
.uk-h3,
h4,
.uk-h4,
h5,
.uk-h5,
h6,
.uk-h6,
.uk-heading-small,
.uk-heading-medium,
.uk-heading-large,
.uk-heading-xlarge,
.uk-heading-2xlarge,
.uk-heading-3xlarge {
  margin: 0 0 20px 0;
  font-family: "Metropolis";
  font-weight: normal;
  color: var(--text);
  text-transform: none;
}
.uk-card  {
  border-radius: 25px;
}
.uk-button {
  border-radius: 25px;
  padding: 10px 30px;
  font-size: 1.15rem;
  text-transform: none;
  font-weight: 300;
}

.uk-button-primary {
  background-color: #666b55;
  color: #fff;
  border: 1px solid #666b55;
}
/* Hover */
.uk-button-primary:hover {
  background-color: #4f543f;
  color: #fff;
}
/* OnClick + Active */
.uk-button-primary:active,
.uk-button-primary.uk-active {
  background-color: #4f543f;
  color: #fff;
}

/* Primary Glass Button */
.uk-button-primary-glass {
  border: 1px solid var(--primary, #cc9332);      /* 2px Rahmen */
  color: var(--primary, #cc9332);                 /* Textfarbe = Primary */
  background-color: rgba(255, 255, 255, 0.1);     /* leichte Transparenz */
  backdrop-filter: blur(12px);                    /* Milchglas-Effekt */
  -webkit-backdrop-filter: blur(12px);            /* Safari */           /* dein Designradius */
  transition: all 0.3s ease;
}

/* Hover: keine Transparenz, kein Blur, Primary-Fill */
.uk-button-primary-glass:hover {
  background-color: var(--primary, #cc9332);      /* deckendes Primary */
  color: var(--primary-foreground, #ffffff);      /* kontrastreicher Text */
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

.uk-button-secondary-glass {
  border: 1px solid var(--surface, #ffffff);          /* Olive-Rahmen */
  color: var(--surface, #ffffff);                     /* Olive-Text */
  background-color: rgba(255, 255, 255, 0.1);      /* Weiß-Milchglas */
  backdrop-filter: blur(10px);                      /* Blur-Effekt */
  -webkit-backdrop-filter: blur(10px);              /* Safari */           /* dein Designradius */
  transition: all 0.3s ease;
}

/* Hover: volle Olive-Füllung */
.uk-button-secondary-glass:hover {
  background-color: var(--surface, #ffffff);
  color: var(--olive) !important;                                   /* Weißer Text */
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

/* HTML */
html  {
  font-family: 'Metropolis';
  font-size: 18px;
  font-weight: 300;
  color: var(--text);
  background: var(--bg-soft);
}

/* TEXT */
.text-gold  {
  color: var(--gold) !important;
}

.text-white  {
  color: var(--surface) !important;
}

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

/* HEADER */

#header {
}

#navigationbox  {
  background: var(--olive-700);
  padding: 15px 0;
  color: var(--surface);
}

/* MAIN */
.round  {
  border-radius: 25px;
}
.overlay {
  background: rgba(102, 107, 85, 0.6); /* Olive transparent */
}
main  {
  padding: 150px 0;
}

#stoerer,
#about,
#kontakt  {
  margin-top: 150px;
}

/* Footer */

footer  {
  background: var(--olive-700);
  padding: 25px 0;
  color: var(--surface);
  font-size: .75rem;
}

.footer-nav-small {
}

.uk-subnav > * > :first-child {
  font-size: 0.75rem;
  text-transform: none;
  color: var(--primary-contrast);
}

.uk-subnav > * > a:hover {
  color: var(--gold);
  text-decoration: none;
}
/* Active */
.uk-subnav > .uk-active > a {
  color: var(--gold);
}

.icon-large {
  font-size: 28px;
}

/* Hintergrundfarbe für Offcanvas */
.anahataglow-offcanvas {
  background-color: var(--olive-500); /* Dunkelgrün */
  color: white;
}

/* Schriftfarbe Menülinks */
.anahataglow-offcanvas-menu > li > a {
  color: white;
  font-size: 1.4rem;
  text-transform: none;
}

/* Hover- und Active-State */
.anahataglow-offcanvas-menu > li > a:hover,
.anahataglow-offcanvas-menu > li.uk-active > a {
  color: var(--gold); /* Gold */
}

/* Abstand / Layout */
.anahataglow-offcanvas-menu {
  margin-top: 2rem;
}

a,
.uk-link {
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}
a:hover,
.uk-link:hover,
.uk-link-toggle:hover .uk-link {
  color: var(--gold);
  text-decoration: underline;
}