/* ===== HYPEFLIGHT Hero (ohne Verlauf) ===== */
.hero-ufg {
    background: transparent;
    min-height: auto;
    padding: 24px 24px 16px;
    display: grid;
    place-items: center;
    color: #ffffff;
    text-align: center;
  }
  .hero-ufg__inner { width: 100%; max-width: var(--entry-width); margin: 0 auto; }
  .hero-ufg__header { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 12px; }
  .hero-ufg__badge {
    width: 56px; height: 56px; border-radius: 9999px; padding: 4px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(37,99,235,.2); border: 1px solid rgba(59,130,246,.3);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    color: #60A5FA; /* text-blue-400 */
  }
  .hero-ufg__badge--link { text-decoration: none; color: inherit; cursor: pointer; display:flex; align-items:center; justify-content:center; }
  .hero-ufg__badge--link:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
  .hero-ufg__icon { width: 28px; height: 28px; display: block; }
  .hero-ufg__title { font-size: clamp(1.75rem, 3.5vw, 2.25rem); font-weight: 700; letter-spacing: .02em; color:#fff; margin:0; }
  .hero-ufg__subtitle { font-size: 1.125rem; line-height: 1.6; max-width: 42rem; margin: .5rem auto 0; color: #9ca3af; }
  .hero-ufg + * { margin-top: 1rem; }
  
  /* Altes Theme-Hero ausblenden */
  .hero { display: none !important; }
  
  /* Seitenverlauf (gewünscht) */
  body { background: linear-gradient(135deg, #000 0%, #000 75%, #2563eb 100%) fixed; }
  
  /* Header komplett ausblenden */
 
  
  /* Abstände unter der Headline etwas reduzieren */
  .hero-ufg + .main__content { margin-top: .25rem !important; }
  .home-template .main__content { margin-top: calc(var(--magic-number) / 4) !important; }
  .home-template .main { margin-top: calc(var(--magic-number) / 3) !important; }
  
  /* Stift sicher blau + fill via currentColor */
  .hero-ufg__badge,
  .hero-ufg__badge--link { color: #60A5FA !important; }
  .hero-ufg__badge--link:link,
  .hero-ufg__badge--link:visited,
  .hero-ufg__badge--link:hover,
  .hero-ufg__badge--link:active,
  .hero-ufg__badge--link:focus { color: #60A5FA !important; }
  .hero-ufg__badge svg, .hero-ufg__icon { fill: currentColor !important; }
  
  /* Iubenda-Links (nicht sticky), direkt unter dem Footer */
  .legal-inline { margin-top: calc(var(--baseline) * 3) !important; margin-bottom: calc(var(--magic-number) / 2); }
  .legal-inline__inner {
    max-width: var(--page-width);
    margin: 0 auto;
    padding: .25rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;               /* kompakter */
    justify-content: center;
    align-items: center;
  }
  .legal-inline__link {
    color: #d1d5db;
    font-size: .875rem;
    text-decoration: none;
    transition: color .2s linear;
  }
  .legal-inline__link:hover,
  .legal-inline__link:focus { color: #fff; }
  
  /* Footer etwas kompakter, damit Legal näher rückt */
  .footer { margin-bottom: calc(var(--baseline) * 2) !important; padding-bottom: calc(var(--baseline) * 2) !important; }
  
  /* Content-Titel mittig */
  .content__title { text-align: center; margin-left: auto; margin-right: auto; width: 100%; }
  .content__title + p,
  .content__title + .content__meta { text-align: center; }
  
  /* (Legacy) Ehemalige fixed Legal-Bar endgültig deaktivieren */
  .legal-fixed, .legal-fixed__inner { display: none !important; }
  
  /* Optionales Opt-Out Icon im Footer-Block (falls benutzt) */
  .footer__optout { margin-top: calc(var(--baseline) * 4); }
  .footer__optout img {
    width: 2rem; height: auto; opacity: .9;
    transition: transform .15s ease, opacity .2s linear; vertical-align: middle;
  }
  .footer__optout a:hover img, .footer__optout a:focus img { transform: translateY(-2px); opacity: 1; }
  @media (max-width: 480px){ .footer__optout { margin-top: calc(var(--baseline) * 3); } }
  
  /* =========================
     Opt-Out FAB (frei positionierbar, außerhalb aller Container)
     ========================= */
  :root {
    --optout-size: 40px;
    --optout-offset-x: 1rem;
    --optout-offset-y: 1rem;
    --optout-z: 1100;
  }
  .optout-fab {
    position: fixed;
    z-index: var(--optout-z);
    width: var(--optout-size);
    height: var(--optout-size);
    line-height: 0;
  }
  .optout-fab img {
    display: block; width: 100%; height: 100%; opacity: .9;
    transition: transform .15s ease, opacity .2s linear, filter .2s linear;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
  }
  .optout-fab a:hover img, .optout-fab a:focus img { opacity: 1; transform: translateY(-2px); }
  
  /* Positions-Modifier */
  .optout--bl { left: var(--optout-offset-x); bottom: var(--optout-offset-y); }
  .optout--br { right: var(--optout-offset-x); bottom: var(--optout-offset-y); }
  .optout--tl { left: var(--optout-offset-x); top: var(--optout-offset-y); }
  .optout--tr { right: var(--optout-offset-x); top: var(--optout-offset-y); }
  
  @media (max-width: 480px){
    :root { --optout-size: 34px; --optout-offset-x: .75rem; --optout-offset-y: .75rem; }
  }
  /* Gleicher Top-Abstand wie Home: Tags-Template kompakter machen */
.tag-template .main {
    margin-top: calc(var(--magic-number) / 3) !important;
  }
  .tag-template .main__content {
    margin-top: calc(var(--magic-number) / 4) !important;
  }
  
  /* (Optional) Falls das tags.hbs-<div class="hero"> versteckt bleiben soll:
     sicherheitshalber auch seine Außenabstände nullen */
  .page--tags .hero {
    margin: 0 !important;
    padding: 0 !important;
  }
  /* Style für die Lupe im Header */
.search-icon-class{
    display:inline-flex;align-items:center;justify-content:center;
    color:#60A5FA;text-decoration:none;padding:.25rem;
    transition:color .2s ease, transform .15s ease;
  }
  .search-icon-class:hover,
  .search-icon-class:focus{
    color:#93C5FD;transform:scale(1.1);
  }
  .search-icon-class svg{width:22px;height:22px;stroke:currentColor}