:root{
  /* Branding (Logo-Farben grob): */
  --c4-green: #88b820;
  --c4-green-dark: #739c1b;
  --c4-teal: #085850;
  --c4-teal-soft: #509088;
}

/* Accessibility */
.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 10px 12px;
  background: #111;
  color: #fff;
  z-index: 9999;
}
.skip-link:focus{
  left: 10px;
  top: 10px;
  border-radius: 8px;
}

/* HERO: Background Image + CI Overlay
   Tipp: Für Performance besser lokal speichern (z.B. /img/hero.jpg) und hier relativ eintragen. */
.hero-grad{
  background:
    linear-gradient(135deg,
      rgba(136,184,32,0.78),
      rgba(8,88,80,0.72)
    ),
    url("https://com4data.com/images/it-systemhaus/server-farm.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Text auf dem Hero-Bild */
.hero-text{
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
.hero-text .uk-text-lead,
.hero-text .uk-heading-medium{
  color: #fff;
}
.hero-text .hero-muted{
  color: rgba(255,255,255,0.85) !important;
}

/* Buttons auf dunklem Hero */
.hero-text .uk-button-default{
  border-color: rgba(255,255,255,0.75);
  color: #fff;
  background: rgba(255,255,255,0.06);
}
.hero-text .uk-button-default:hover,
.hero-text .uk-button-default:focus{
  border-color: rgba(255,255,255,0.95);
  background: rgba(255,255,255,0.12);
  color: #fff;
}

/* Small pill */
.pill{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.12);
  font-size: 0.9rem;
  color: #fff;
}

/* Brand accent in logo */
.brand-primary{
  color: var(--c4-green);
}

/* UIkit overrides */
.uk-text-primary{ color: var(--c4-green) !important; }

a, .uk-link{ color: var(--c4-teal); }
a:hover, .uk-link:hover{ color: var(--c4-teal-soft); }

.uk-button-primary{
  background-color: var(--c4-green);
  border-color: var(--c4-green);
  color: #fff;
}
.uk-button-primary:hover,
.uk-button-primary:focus{
  background-color: var(--c4-green-dark);
  border-color: var(--c4-green-dark);
  color: #fff;
}

/* Label styling */
.uk-label{
  background: rgba(8,88,80,0.10);
  color: var(--c4-teal);
}

/* Sticky navbar styling */
.uk-navbar-container.uk-navbar-sticky{
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* Company card accents */
.brand-top-teal{ border-top: 4px solid var(--c4-teal); }
.brand-top-green{ border-top: 4px solid var(--c4-green); }

/* Avatars */
.avatar{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.avatar-green{ background: var(--c4-green); color: #fff; }
.avatar-teal{ background: var(--c4-teal); color: #fff; }
.avatar-muted{ background: #e9ecef; color: #333; }

/* Logo Sizing */
.brand-logo{
  height: 54px;
  width: auto;
  display: block;
}

.uk-navbar-container.uk-navbar-sticky .brand-logo{
  height: 30px;
}

/* Offcanvas etwas größer */
.brand-logo--offcanvas{
  height: 32px;
}
/* Checkliste: saubere Ausrichtung + sauberer Umbruch */
.c4-checklist li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.c4-checklist .c4-check{
  flex: 0 0 auto;
  margin-top: 3px;              /* optisch auf Textlinie ausrichten */
  color: var(--c4-green);       /* CI-Grün für die Checks */
}

.c4-checklist .c4-check svg{
  width: 18px;
  height: 18px;
}
/* Baloo 2 – lokal (Variable Font) */
@font-face {
  font-family: "Baloo 2";
  src: url("../fonts/baloo2/Baloo2-VariableFont_wght.woff2") format("woff2");
  font-weight: 400 800; /* Variable Range */
  font-style: normal;
  font-display: swap;
}

/* Optional: Italic */
@font-face {
  font-family: "Baloo 2";
  src: url("../fonts/baloo2/Baloo2-Italic-VariableFont_wght.woff2") format("woff2");
  font-weight: 400 800;
  font-style: italic;
  font-display: swap;
}

/* Nur Headlines / Heading-Klassen */
:root{
  --font-head: "Baloo 2", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

h1, h2, h3,
.uk-heading-small, .uk-heading-medium, .uk-heading-large,
.uk-card-title,
.uk-logo{
  font-family: var(--font-head);
  letter-spacing: 0.2px;
}