/* =========================================================
   BRG14 QUICKLINKS
   ---------------------------------------------------------
   Schnellzugriffe / Linkkarten

   Zuständig für:
   - Quicklink-Wrapper
   - Quicklink-Abschnitte
   - Quicklink-Grids
   - Quicklink-Karten
   - Quicklink-Icons
   - Titel und Beschreibungen
   - responsive Spalten

   Verwendet globale Systeme aus:
   - base.css
   - typography.css

   NICHT zuständig für:
   - globale Seitenabstände
   - Footer-Abstände
   - globale Typografie
   - globale Kartenbasis
   - Standardseiten-Hero
   ========================================================= */


/* =========================================================
   WRAPPER
   ---------------------------------------------------------
   Kapselt die Quicklink-Komponente.
   ========================================================= */

.ql-wrap,
.ql-wrap * {
  box-sizing: border-box;
}

.ql-wrap {
  width: 100%;
}


/* =========================================================
   ABSCHNITTE
   ---------------------------------------------------------
   Ein Abschnitt besteht aus:
   - Kategorienüberschrift
   - Quicklink-Grid
   ========================================================= */

.ql-section {
  margin-bottom: 28px;
}

.ql-section:last-child {
  margin-bottom: 0;
}


/* =========================================================
   KATEGORIENÃœBERSCHRIFT
   ---------------------------------------------------------
   Quicklink-Gruppen sind Inhaltsabschnitte, keine kleinen
   Rollen-/Kontext-Kicker. Deshalb nutzen sie den groesseren
   Info-Heading-Stil.
   ========================================================= */

.ql-wrap .brg14-kicker-divider,
.ql-wrap .ql-divider {
  display: block;

  margin-bottom: 12px;
  padding-bottom: 8px;

  border-bottom: 1px solid var(--brg14-border);

  color: #071E42;

  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.35;

  letter-spacing: 0;
  text-transform: none;
}


/* =========================================================
   GRID
   ---------------------------------------------------------
   Desktop: 4 Spalten
   Tablet:  3 Spalten
   Mobile:  2 Spalten
   ========================================================= */

.ql-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}


/* =========================================================
   LINKKARTE
   ---------------------------------------------------------
   Bewusst eigene kompakte Kartenlogik:
   Diese Quicklink-Karten sind kleiner und ikonzentrierter
   als normale .brg14-card-Karten.
   ========================================================= */

.ql-item {
  display: flex;
  flex-direction: column;
  align-items: center;

  min-width: 0;

  padding: 20px 12px 14px;

  border: 1px solid var(--brg14-border);
  border-radius: var(--brg14-card-radius);

  background: var(--brg14-white);
  color: inherit;

  text-align: center;
  text-decoration: none !important;

  box-shadow: var(--brg14-card-shadow);

  transition:
    border-color 0.17s ease,
    box-shadow 0.17s ease,
    transform 0.17s ease;
}

.ql-item:hover {
  transform: none;

  border-color: #8FA0B4;
  background: #FBFCFE;

  box-shadow:
    0 8px 22px rgba(7, 30, 66, 0.11);

  text-decoration: none !important;
}

.ql-item:hover svg {
  stroke: #2D5A31;
}


/* =========================================================
   ICONS
   ---------------------------------------------------------
   SVGs sind direkt im HTML eingebettet.

   !important bleibt bewusst, weil WordPress/Kadence/SVG-
   Attribute teilweise eigene Größen mitbringen können.
   ========================================================= */

.ql-item svg {
  display: block !important;

  width: 32px !important;
  height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;

  flex-shrink: 0;

  fill: none;

  stroke: #6F7F91;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;

  transition:
    stroke 0.15s ease;
}



/* =========================================================
   TITEL
   ========================================================= */

.ql-title {
  display: block;

  margin-top: 8px;

  color: #071E42;

}

.ql-item:hover .ql-title {
  color: #071E42;
}


/* =========================================================
   BESCHREIBUNG
   ========================================================= */

.ql-desc {
  margin-top: 3px;

  color: #5A6070;

}

.ql-item:hover .ql-desc {
  color: #5A6070;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 768px) {

  .ql-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 480px) {

  .ql-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ql-item {
    padding: 16px 10px 12px;
  }

  .ql-item svg {
    width: 26px !important;
    height: 26px !important;
    max-width: 26px !important;
    max-height: 26px !important;
  }

  .ql-title {
  }

  .ql-desc {
  }
}