/* ==========================================================================
   Arztbewertungsschutz – Template-Stylesheet
   --------------------------------------------------------------------------
   Klinisch-ruhiges Design. Eine zentrale CSS-Datei, wächst Sektion für
   Sektion mit. Alle projektbezogenen Klassen/IDs mit Präfix "abs-".
   DSGVO-freundlich: keine externen Fonts/Tracker/CDNs.

   AUFBAU
   1) Schriften (lokales Inter, optional)
   2) Design-Tokens (CSS-Variablen)
   3) Reset / Grundlagen
   4) Typografie
   5) Layout: Container, Sektionen, Grid
   6) Buttons
   7) Hilfsklassen
   --------------------------------------------------------------------------
   Ab hier folgen später die sektionsspezifischen Blöcke (Hero, Leistungen …).
   ========================================================================== */


/* 1) SCHRIFTEN ============================================================ */
/* Inter wird DSGVO-konform LOKAL eingebunden (kein Google-Fonts-CDN).
   So aktivieren:
   - Inter-woff2-Dateien ins Template legen, z.B.
     /templates/<dein-template>/fonts/
   - die Pfade unten anpassen, dann den Block einkommentieren.
   Ohne lokale Dateien greift automatisch der System-Font-Stack (siehe
   --abs-font weiter unten) – die Seite sieht dann ebenfalls sauber aus. */

/*
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/Inter-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/Inter-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/Inter-Bold.woff2") format("woff2");
}
*/


/* 2) DESIGN-TOKENS ======================================================== */
:root {
  /* Markenfarben */
  --abs-blue:        #1A3590;  /* Tiefblau – Hauptfarbe, Vertrauen/Medizin */
  --abs-blue-dark:   #142a73;  /* abgeleitet: Hover/aktiv für Blau         */
  --abs-blue-tint:   #eef1fb;  /* abgeleitet: sehr helle Blau-Fläche       */
  --abs-green:       #16A34A;  /* Akzentgrün – Erfolg, Häkchen, CTA        */
  --abs-green-dark:  #12823b;  /* abgeleitet: Hover/aktiv für Grün         */
  --abs-green-tint:  #e9f7ee;  /* abgeleitet: sehr helle Grün-Fläche       */
  --abs-gold:        #F5B400;  /* Stern/Akzent aus dem Logo (sparsam)      */

  /* Neutrale Töne */
  --abs-ink:         #374151;  /* Anthrazit – Fließtext                    */
  --abs-ink-soft:    #6b7280;  /* abgeleitet: gedämpfter Text/Captions     */
  --abs-bg:          #FFFFFF;  /* Weiß                                     */
  --abs-bg-alt:      #F8FAFC;  /* Hellgrau – Sektions-Hintergrund (Wechsel)*/
  --abs-border:      #e5e7eb;  /* dezente Linien/Kartenrahmen              */

  /* Schrift */
  --abs-font: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --abs-fs-base: 1.0625rem;        /* 17px Fließtext                       */
  --abs-lh-base: 1.6;
  --abs-fw-normal: 400;
  --abs-fw-semibold: 600;
  --abs-fw-bold: 700;

  /* Abstände (ruhiges, großzügiges Raster) */
  --abs-space-1: 0.5rem;
  --abs-space-2: 1rem;
  --abs-space-3: 1.5rem;
  --abs-space-4: 2rem;
  --abs-space-5: 3rem;
  --abs-space-6: 4rem;
  --abs-space-7: 6rem;             /* vertikaler Sektions-Abstand          */

  /* Layout */
  --abs-container: 1140px;         /* maximale Inhaltsbreite               */
  --abs-gutter: 1.25rem;           /* seitlicher Innenabstand mobil        */
  --abs-radius: 12px;
  --abs-radius-sm: 8px;

  /* Dezente Schatten (klinisch-ruhig, nicht knallig) */
  --abs-shadow:    0 1px 2px rgba(16,24,40,0.04), 0 4px 16px rgba(16,24,40,0.06);
  --abs-shadow-lg: 0 2px 6px rgba(16,24,40,0.06), 0 12px 32px rgba(16,24,40,0.10);

  /* Höhe des (späteren) Sticky-Headers – steuert Anker-Offset */
  --abs-header-h: 76px;
}


/* 3) RESET / GRUNDLAGEN =================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--abs-font);
  font-size: var(--abs-fs-base);
  line-height: var(--abs-lh-base);
  font-weight: var(--abs-fw-normal);
  color: var(--abs-ink);
  background: var(--abs-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg { max-width: 100%; height: auto; display: block; }

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}


/* 4) TYPOGRAFIE =========================================================== */
.abs h1, .abs h2, .abs h3, .abs h4,
.abs-section h1, .abs-section h2, .abs-section h3, .abs-section h4 {
  color: var(--abs-blue);
  font-weight: var(--abs-fw-bold);
  line-height: 1.2;
  margin: 0 0 var(--abs-space-3);
  letter-spacing: -0.01em;
  /* Lange deutsche Komposita auf schmalen Displays sauber umbrechen */
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Headlines kräftig, aber nicht riesig */
.abs h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem); }
.abs h2 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.1rem); }
.abs h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.4rem); }
.abs h4 { font-size: 1.0625rem; }

.abs p { margin: 0 0 var(--abs-space-3); }
.abs p:last-child { margin-bottom: 0; }

.abs a {
  color: var(--abs-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.abs a:hover { color: var(--abs-blue-dark); }

.abs strong { font-weight: var(--abs-fw-semibold); color: inherit; }

/* Optionale Vorzeile über einer Headline (z.B. Sektions-Label) */
.abs-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: var(--abs-fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--abs-green-dark);
  margin: 0 0 var(--abs-space-2);
}

/* Einleitungstext unter einer Sektions-Überschrift */
.abs-lead {
  font-size: 1.1875rem;
  color: var(--abs-ink);
  max-width: 60ch;
}

/* Zentrierter Sektions-Kopf */
.abs-section__head {
  max-width: 64ch;
  margin: 0 auto var(--abs-space-5);
  text-align: center;
}
.abs-section__head .abs-lead { margin-left: auto; margin-right: auto; }


/* 5) LAYOUT: CONTAINER, SEKTIONEN, GRID =================================== */
.abs-container {
  width: 100%;
  max-width: var(--abs-container);
  margin-inline: auto;
  padding-inline: var(--abs-gutter);
}

/* Vertikaler Rhythmus + abwechselnde Hintergründe */
.abs-section {
  padding-block: var(--abs-space-7);
  /* Anker landen nicht unter dem Sticky-Header */
  scroll-margin-top: var(--abs-header-h);
}
.abs-section--alt { background: var(--abs-bg-alt); }
.abs-section--tight { padding-block: var(--abs-space-6); }

/* Einfaches, responsives Auto-Grid für Karten/Spalten */
.abs-grid { display: grid; gap: var(--abs-space-3); }
@media (min-width: 600px)  { .abs-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 860px)  { .abs-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px)  { .abs-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }


/* 6) BUTTONS ============================================================== */
.abs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: var(--abs-fw-semibold);
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--abs-radius-sm);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Primär = grüner CTA (z.B. „Kostenlose Erstberatung“) */
.abs-btn--primary {
  background: var(--abs-green);
  border-color: var(--abs-green);
  color: #fff;
}
.abs-btn--primary:hover {
  background: var(--abs-green-dark);
  border-color: var(--abs-green-dark);
  color: #fff;
}

/* Sekundär = blauer Umriss (z.B. „Leistungen ansehen“) */
.abs-btn--secondary {
  background: transparent;
  border-color: var(--abs-blue);
  color: var(--abs-blue);
}
.abs-btn--secondary:hover {
  background: var(--abs-blue);
  color: #fff;
}

/* Blau gefüllt (Alternative für dunkle/helle Flächen) */
.abs-btn--solid {
  background: var(--abs-blue);
  border-color: var(--abs-blue);
  color: #fff;
}
.abs-btn--solid:hover {
  background: var(--abs-blue-dark);
  border-color: var(--abs-blue-dark);
  color: #fff;
}

.abs-btn--lg { padding: 0.95rem 1.9rem; font-size: 1.0625rem; }


/* 7) HILFSKLASSEN ========================================================= */
.abs-text-center { text-align: center; }
.abs-mt-0 { margin-top: 0; }
.abs-mb-0 { margin-bottom: 0; }
.abs-mt-4 { margin-top: var(--abs-space-4); }

/* Sichtbar nur für Screenreader (z.B. Sektions-Überschriften ohne Optik) */
.abs-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* Deutlich sichtbarer Tastatur-Fokus (Barrierefreiheit) */
.abs a:focus-visible,
.abs-btn:focus-visible,
.abs-section :focus-visible {
  outline: 3px solid var(--abs-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Inline-SVG-Icons erben Textfarbe und skalieren mit der Schrift */
.abs-icon {
  display: inline-block;
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  vertical-align: middle;
}


/* ==========================================================================
   SEKTIONSSPEZIFISCHE BLÖCKE
   ========================================================================== */


/* HEADER / NAVIGATION ===================================================== */
/* Hinweis: In Joomla liegt der Header i.d.R. im Template. Dieses Markup ist
   so gebaut, dass es auch als Custom-HTML-Modul in der Header-Position läuft.
   Mobiles Menü ohne JavaScript: versteckter Checkbox-Toggle. */
.abs-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--abs-border);
}
.abs-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abs-space-3);
  min-height: var(--abs-header-h);
}
.abs-header__logo { display: flex; align-items: center; }
.abs-header__logo img { height: 44px; width: auto; }

.abs-nav-toggle, .abs-nav-toggle-label { display: none; }

.abs-nav { display: flex; align-items: center; gap: var(--abs-space-3); }
.abs-nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: var(--abs-space-1);
}
.abs-nav__list a {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  color: var(--abs-ink);
  text-decoration: none;
  font-weight: var(--abs-fw-semibold);
  font-size: 0.95rem;
  border-radius: var(--abs-radius-sm);
}
.abs-nav__list a:hover { color: var(--abs-blue); background: var(--abs-blue-tint); }

@media (max-width: 880px) {
  .abs-nav-toggle-label {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; cursor: pointer; color: var(--abs-blue);
    border: 1px solid var(--abs-border); border-radius: var(--abs-radius-sm);
  }
  .abs-nav {
    position: absolute; left: 0; right: 0; top: var(--abs-header-h);
    flex-direction: column; align-items: stretch; gap: var(--abs-space-2);
    background: #fff; border-bottom: 1px solid var(--abs-border);
    padding: var(--abs-space-3) var(--abs-gutter);
    box-shadow: var(--abs-shadow);
    display: none;
  }
  .abs-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .abs-nav__list a { padding: 0.75rem 0.5rem; border-bottom: 1px solid var(--abs-border); }
  .abs-nav .abs-btn { width: 100%; }
  .abs-nav-toggle:checked ~ .abs-nav { display: flex; }
}


/* HERO ==================================================================== */
.abs-hero {
  position: relative;
  background: linear-gradient(180deg, var(--abs-blue-tint) 0%, #ffffff 70%);
  overflow: hidden;
}
/* Optionales Hintergrundbild (Higgsfield). Per Klasse aktivierbar. */
.abs-hero--image {
  /* Pfad ist relativ zu DIESER CSS-Datei. Im Joomla-Template ggf. anpassen,
     z.B. url("../images/hero-bg.webp"). */
  --abs-hero-image: url("images/hero-bg.webp");
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.72) 45%, rgba(255,255,255,0.25) 100%),
    var(--abs-hero-image, none);
  background-size: cover;
  background-position: center right;
}
.abs-hero__inner {
  display: grid;
  gap: var(--abs-space-4);
  padding-block: clamp(3rem, 2rem + 6vw, 6rem);
  max-width: 50rem;
}
.abs-hero h1 { margin-bottom: var(--abs-space-3); }
.abs-hero__sub {
  font-size: 1.1875rem;
  color: var(--abs-ink);
  max-width: 46ch;
  margin-bottom: var(--abs-space-3);
}
/* Dezenter Vertrauens-Hook (Referenz) */
.abs-hero__proof {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--abs-green-tint);
  color: var(--abs-green-dark);
  font-weight: var(--abs-fw-semibold);
  font-size: 0.95rem;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  margin-bottom: var(--abs-space-4);
}
.abs-hero__proof .abs-icon { color: var(--abs-green); }
.abs-hero__cta { display: flex; flex-wrap: wrap; gap: var(--abs-space-2); }


/* VERTRAUEN / WARUM SPEZIALISIERT ======================================== */
.abs-trust__points {
  list-style: none; margin: var(--abs-space-4) 0 0; padding: 0;
  display: grid; gap: var(--abs-space-3);
}
.abs-trust__point {
  display: flex; gap: var(--abs-space-2); align-items: flex-start;
}
.abs-trust__point .abs-icon {
  color: var(--abs-green); width: 1.6em; height: 1.6em; margin-top: 0.1em;
}
.abs-trust__point h3 { margin: 0 0 0.25rem; color: var(--abs-blue); }
.abs-trust__point p { color: var(--abs-ink); }


/* KARTEN (allgemein, u.a. Leistungen) ==================================== */
.abs-card {
  background: #fff;
  border: 1px solid var(--abs-border);
  border-radius: var(--abs-radius);
  padding: var(--abs-space-4);
  box-shadow: var(--abs-shadow);
  height: 100%;
  display: flex; flex-direction: column;
}
.abs-card__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px;
  border-radius: var(--abs-radius-sm);
  background: var(--abs-blue-tint);
  color: var(--abs-blue);
  margin-bottom: var(--abs-space-3);
}
.abs-card__icon .abs-icon { width: 26px; height: 26px; }
.abs-card h3 { margin-bottom: 0.5rem; }
.abs-card p { color: var(--abs-ink); }
.abs-card__tag {
  align-self: flex-start;
  margin-top: var(--abs-space-3);
  font-size: 0.8125rem; font-weight: var(--abs-fw-semibold);
  color: var(--abs-green-dark); background: var(--abs-green-tint);
  padding: 0.3rem 0.7rem; border-radius: 999px;
}


/* SO FUNKTIONIERT ES (3 SCHRITTE) ======================================== */
.abs-steps { counter-reset: abs-step; }
.abs-step { position: relative; padding-top: var(--abs-space-3); }
.abs-step__num {
  counter-increment: abs-step;
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--abs-blue); color: #fff;
  font-weight: var(--abs-fw-bold); font-size: 1.1rem;
  margin-bottom: var(--abs-space-2);
}
.abs-step__num::before { content: counter(abs-step); }
.abs-step h3 { margin-bottom: 0.4rem; }
.abs-step p { color: var(--abs-ink); }


/* PREISE ================================================================= */
.abs-price-grid { align-items: stretch; }
.abs-price {
  background: #fff; border: 1px solid var(--abs-border);
  border-radius: var(--abs-radius); padding: var(--abs-space-4);
  display: flex; flex-direction: column; height: 100%;
  box-shadow: var(--abs-shadow);
}
.abs-price--featured {
  border-color: var(--abs-blue);
  box-shadow: var(--abs-shadow-lg);
  position: relative;
}
.abs-price__badge {
  position: absolute; top: -0.85rem; left: 50%; transform: translateX(-50%);
  background: var(--abs-blue); color: #fff;
  font-size: 0.78rem; font-weight: var(--abs-fw-semibold);
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 0.35rem 0.9rem; border-radius: 999px;
}
.abs-price h3 { margin-bottom: 0.25rem; }
.abs-price__desc { color: var(--abs-ink-soft); font-size: 0.95rem; margin-bottom: var(--abs-space-3); }
.abs-price__amount {
  font-size: 2.25rem; font-weight: var(--abs-fw-bold); color: var(--abs-blue);
  line-height: 1.1; margin-bottom: 0.25rem;
}
.abs-price__amount small { font-size: 1rem; font-weight: var(--abs-fw-normal); color: var(--abs-ink-soft); }
.abs-price__note { font-size: 0.875rem; color: var(--abs-ink-soft); margin-bottom: var(--abs-space-3); }
.abs-price__list {
  list-style: none; margin: 0 0 var(--abs-space-4); padding: 0;
  display: grid; gap: 0.6rem;
}
.abs-price__list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.95rem; }
.abs-price__list .abs-icon { color: var(--abs-green); width: 1.25em; height: 1.25em; margin-top: 0.15em; }
.abs-price .abs-btn { margin-top: auto; }


/* REFERENZ =============================================================== */
.abs-referenz__card {
  background: #fff; border: 1px solid var(--abs-border);
  border-left: 4px solid var(--abs-green);
  border-radius: var(--abs-radius);
  padding: var(--abs-space-5);
  box-shadow: var(--abs-shadow);
  max-width: 56rem; margin-inline: auto;
}
.abs-referenz__rating {
  display: flex; align-items: baseline; gap: var(--abs-space-3);
  flex-wrap: wrap; margin-bottom: var(--abs-space-3);
}
.abs-referenz__from { color: var(--abs-ink-soft); font-size: 1.5rem; font-weight: var(--abs-fw-semibold); }
.abs-referenz__arrow { color: var(--abs-ink-soft); }
.abs-referenz__to { color: var(--abs-green-dark); font-size: 2.25rem; font-weight: var(--abs-fw-bold); }
.abs-referenz__stars { color: var(--abs-gold); display: inline-flex; gap: 2px; }
.abs-referenz__meta { color: var(--abs-ink-soft); font-size: 0.9rem; margin-top: var(--abs-space-3); }


/* FAQ (natives <details>, ohne JavaScript) =============================== */
.abs-faq { max-width: 52rem; margin-inline: auto; }
.abs-faq__item {
  background: #fff; border: 1px solid var(--abs-border);
  border-radius: var(--abs-radius-sm);
  margin-bottom: var(--abs-space-2);
  overflow: hidden;
}
.abs-faq__item summary {
  list-style: none; cursor: pointer;
  padding: var(--abs-space-3) var(--abs-space-4);
  font-weight: var(--abs-fw-semibold); color: var(--abs-blue);
  display: flex; align-items: center; justify-content: space-between; gap: var(--abs-space-2);
}
.abs-faq__item summary::-webkit-details-marker { display: none; }
.abs-faq__item summary::after {
  content: "+"; font-size: 1.4rem; color: var(--abs-green); line-height: 1; flex: none;
}
.abs-faq__item[open] summary::after { content: "–"; }
.abs-faq__item .abs-faq__body { padding: 0 var(--abs-space-4) var(--abs-space-4); color: var(--abs-ink); }


/* KONTAKT / FORMULAR ===================================================== */
.abs-contact { display: grid; gap: var(--abs-space-5); }
@media (min-width: 860px) { .abs-contact { grid-template-columns: 1fr 1.2fr; align-items: start; } }
.abs-contact__info p { color: var(--abs-ink); }
.abs-contact__info ul { list-style: none; padding: 0; margin: var(--abs-space-3) 0 0; display: grid; gap: var(--abs-space-2); }
.abs-contact__info li { display: flex; gap: 0.6rem; align-items: center; }
.abs-contact__info .abs-icon { color: var(--abs-green); }

.abs-form {
  background: #fff; border: 1px solid var(--abs-border);
  border-radius: var(--abs-radius); padding: var(--abs-space-4);
  box-shadow: var(--abs-shadow);
  display: grid; gap: var(--abs-space-3);
}
.abs-field { display: grid; gap: 0.4rem; }
.abs-field label { font-weight: var(--abs-fw-semibold); font-size: 0.95rem; color: var(--abs-ink); }
.abs-field input, .abs-field textarea {
  font-family: inherit; font-size: 1rem; color: var(--abs-ink);
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--abs-border); border-radius: var(--abs-radius-sm);
  background: #fff; width: 100%;
}
.abs-field input:focus, .abs-field textarea:focus {
  outline: none; border-color: var(--abs-blue);
  box-shadow: 0 0 0 3px var(--abs-blue-tint);
}
.abs-field textarea { resize: vertical; min-height: 130px; }
.abs-form__consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.9rem; color: var(--abs-ink-soft); }
.abs-form__consent input { margin-top: 0.2rem; }


/* FOOTER ================================================================= */
.abs-footer {
  background: var(--abs-blue);
  color: #cdd6f5;
  padding-block: var(--abs-space-5);
}
.abs-footer a { color: #fff; }
.abs-footer__grid {
  display: grid; gap: var(--abs-space-4);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .abs-footer__grid { grid-template-columns: 2fr 1fr 1fr; } }
.abs-footer h4 { color: #fff; margin: 0 0 var(--abs-space-2); font-size: 1rem; }
.abs-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.abs-footer__brand p { color: #cdd6f5; max-width: 40ch; font-size: 0.95rem; }
.abs-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.18);
  margin-top: var(--abs-space-4); padding-top: var(--abs-space-3);
  font-size: 0.85rem; color: #aab6e6;
  display: flex; flex-wrap: wrap; gap: var(--abs-space-2); justify-content: space-between;
}