@charset "utf-8";
/* ============================================================
   Jugendring Landkreis Görlitz e.V. – CI-Override 2026
   WICHTIG: Diese Datei muss als LETZTE im Minify-Set geladen
   werden (nach style.css / style_sven.css / responsive*.css),
   damit die Regeln greifen.
   Ziel: neue CI-Farben, keine Verläufe, neue Typografie —
   ohne das Vendor-Theme selbst zu verändern.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@500;800&family=Inter:wght@400;600&display=swap');

:root {
  --jr-primary: #1D67A3;      /* Klarblau */
  --jr-primary-dark: #164f7e;
  --jr-secondary: #64BEBE;    /* Verbindungstürkis */
  --jr-accent: #FEC60A;       /* Aktivgelb */
  --jr-accent-dark: #e0ad00;
  --jr-black: #000000;
  --jr-white: #ffffff;
}

/* ===================================
   Typografie: Nunito (Headlines) + Inter (Fließtext)
   ersetzt Roboto/Montserrat aus style.css
====================================== */
body {
  font-family: 'Inter', sans-serif;
  color: #333;
}

h1, h2, h3, h4, h5, h6,
.alt-font {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
}

/* ===================================
   Akzentfarbe: #ffbc00 -> Aktivgelb / Klarblau
   (Links, Hover, Buttons, Unterstreichungen)
====================================== */
a:hover, a:active,
.text-deep-pink, .btn.text-deep-pink {
  color: var(--jr-primary-dark); /* statt dunklem Gelb -> besserer Kontrast auf Weiß */
}

/* ===================================
   Kontrast: auf dunklen Flächen IMMER helle Schrift
   (nie schwarz/dunkelgelb auf Klarblau)
====================================== */
.bg-deep-pink, .bg-deep-pink *:not(.btn),
footer, footer *:not(.btn),
[class*="bg-extra-dark"], [class*="bg-extra-dark"] *:not(.btn),
[class*="bg-dark-blue"], [class*="bg-dark-blue"] *:not(.btn) {
  color: var(--jr-white);
}

.text-bold-underline:before {
  background-color: var(--jr-accent);
}

header .sidebar-part2 nav.navbar.bootsnav li.dropdown ul.dropdown-menu > li a:hover {
  border-bottom-color: var(--jr-accent);
}

.skillbar-bar-style3 .skillbar-bar {
  background-color: var(--jr-accent);
  background: var(--jr-accent); /* Verlauf entfernt */
}

/* ===================================
   Verläufe raus -> flache CI-Farben
====================================== */
.bg-deep-pink {
  background: var(--jr-primary); /* statt Blau->Türkis->Gelb-Diagonalverlauf */
}

.hover-option7 .grid-item figcaption {
  background: var(--jr-primary);
}

/* ===================================
   Buttons / CTAs auf CI-Farben
====================================== */
.btn-deep-pink, .btn.btn-deep-pink {
  background-color: var(--jr-accent);
  border-color: var(--jr-accent);
  color: var(--jr-black);
}
.btn-deep-pink:hover {
  background-color: var(--jr-accent-dark);
  border-color: var(--jr-accent-dark);
}

/* ===================================
   Weiche Radien statt scharfer Kanten
   (passend zum runden Logo / Nunito-Charakter)
====================================== */
.btn {
  border-radius: 999px;
}
.card, .box, .feature-box .box {
  border-radius: 16px;
}

/* Kacheln/Grid-Items (z.B. Startseiten-Übersicht, Blog-Grid ...) */
.grid-item, .grid-item figure, .grid-item img,
.grid-item figcaption, .portfolio-item, .portfolio-item img,
figure, figure img {
  border-radius: 16px;
  overflow: hidden;
}

/* Card-Texte in der (dunkelblauen) Caption-Box: Titel weiß, Subline in Türkis.
   !important nötig, da Vendor-Utility-Klassen (.text-extra-dark-gray etc.)
   direkt am Element sitzen und sonst gewinnen. */
figcaption h1, figcaption h2, figcaption h3,
figcaption h4, figcaption h5, figcaption h6,
figcaption a,
figcaption .text-extra-dark-gray, figcaption .text-dark-gray, figcaption .text-black,
.bg-extra-dark-blue h1, .bg-extra-dark-blue h2, .bg-extra-dark-blue h3,
.bg-extra-dark-blue h4, .bg-extra-dark-blue h5, .bg-extra-dark-blue h6,
.bg-extra-dark-blue .text-extra-dark-gray, .bg-extra-dark-blue .text-dark-gray, .bg-extra-dark-blue .text-black {
  color: var(--jr-white) !important;
}

figcaption p, figcaption span, figcaption small,
figcaption .text-medium-gray, figcaption .text-extra-medium-gray,
.bg-extra-dark-blue .text-medium-gray, .bg-extra-dark-blue .text-extra-medium-gray {
  color: var(--jr-secondary) !important;
}

/* Vendor-Navy raus, echtes CI-Blau rein */
.bg-extra-dark-blue {
  background: var(--jr-primary) !important;
}

/* Türkis sichtbar machen: jede 3. Kachel in Sekundärfarbe statt immer Blau */
.grid-item:nth-child(3n+2) .bg-extra-dark-blue,
.grid-item:nth-child(3n+2) figcaption {
  background: var(--jr-secondary) !important;
}

/* Gelb sichtbar machen: dünner Akzentstreifen über jeder Caption-Box */
figcaption, .bg-extra-dark-blue {
  border-top: 4px solid var(--jr-accent);
}