/* ==========================================================
   HR MEDIA FLOW Safe CSS Patch V1
   Zweck:
   - KEINE index.php ersetzen
   - Header Navigation stabilisieren
   - Newsletter Buttons stabilisieren
   - kaputte Icon-Bild-Ausschnitte vorerst neutralisieren
   - bestehendes Dark Neon Design nicht neu erfinden
   ========================================================== */

/* Grundvariablen, falls eine Unterseite sie nicht sauber lädt */
:root{
  --hr-bg:#020416;
  --hr-nav:#050616;
  --hr-panel:#070b2a;
  --hr-card:#090d2f;
  --hr-line:rgba(255,255,255,.14);
  --hr-text:#fff;
  --hr-muted:rgba(255,255,255,.72);
  --hr-soft:rgba(255,255,255,.55);
  --hr-orange:#ff7a18;
  --hr-violet:#8245ff;
  --hr-pink:#d84dff;
  --hr-cyan:#23d7ff;
}

/* Header und Navigation ruhiger machen */
.site-header,
header,
.header{
  background:rgba(4,5,18,.94);
  border-bottom:1px solid var(--hr-line);
  backdrop-filter:blur(14px);
}

.nav,
.header-nav,
.site-nav,
.menu,
nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  flex-wrap:nowrap;
}

.nav a,
.header-nav a,
.site-nav a,
.menu a,
nav a{
  color:rgba(255,255,255,.86);
  font-size:15.5px;
  font-weight:850;
  line-height:1;
  white-space:nowrap;
  text-decoration:none;
  letter-spacing:.1px;
}

.nav a:hover,
.header-nav a:hover,
.site-nav a:hover,
.menu a:hover,
nav a:hover{
  color:#fff;
}

.nav a.active,
.header-nav a.active,
.site-nav a.active,
.menu a.active,
nav a.active{
  color:var(--hr-orange);
}

/* Aktiver Balken etwas edler */
.nav a.active::after,
.header-nav a.active::after,
.site-nav a.active::after,
.menu a.active::after,
nav a.active::after{
  height:3px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--hr-orange),var(--hr-pink));
}

/* Button Bereiche im Header */
.nav-actions,
.header-actions,
.actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:nowrap;
}

.nav-actions .btn,
.header-actions .btn,
.actions .btn,
.site-header .btn,
header .btn,
.site-header button,
header button{
  font-size:15px;
  font-weight:900;
  white-space:nowrap;
  padding:15px 20px;
  border-radius:10px;
}

/* Logo Bereich stabilisieren */
.brand,
.logo,
.site-logo{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:max-content;
}

.brand img,
.logo img,
.site-logo img{
  max-height:52px;
  width:auto;
  object-fit:contain;
}

/* Kaputte Icon Ausschnitte neutralisieren:
   Falls aktuell falsche Bilddateien in den Kacheln stecken,
   werden sie nicht riesig/cropped dargestellt. */
.feature-card img,
.topic-card img,
.category-card img,
.card img.icon,
.card .icon img,
.icon-wrap img,
.icon-box img{
  width:86px !important;
  height:86px !important;
  object-fit:contain !important;
  object-position:center !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  display:block;
  margin:0 auto 18px auto;
}

/* Falls die Icon-Bilder weiterhin wie Screenshot-Ausschnitte wirken:
   Diese Klasse kann im HTML später gezielt genutzt werden. */
.hide-broken-icons .feature-card img,
.hide-broken-icons .topic-card img,
.hide-broken-icons .category-card img,
.hide-broken-icons .card img.icon,
.hide-broken-icons .card .icon img,
.hide-broken-icons .icon-wrap img,
.hide-broken-icons .icon-box img{
  display:none !important;
}

/* Premium Ersatzlook für Icon-Flächen, falls Bilder fehlen */
.icon,
.card-icon,
.icon-wrap,
.icon-box{
  display:grid;
  place-items:center;
  margin-left:auto;
  margin-right:auto;
}

.icon svg,
.card-icon svg,
.icon-wrap svg,
.icon-box svg{
  filter:drop-shadow(0 0 10px rgba(216,77,255,.35));
}

/* Kacheln ruhiger und einheitlicher */
.card,
.feature-card,
.topic-card,
.category-card,
.highlight-card{
  background:
    radial-gradient(circle at 50% 0%,rgba(130,69,255,.15),transparent 38%),
    linear-gradient(180deg,rgba(12,16,48,.92),rgba(6,8,28,.96));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 22px 70px rgba(0,0,0,.18);
}

/* Highlight Platzhalter nicht kaputt aussehen lassen */
.highlight-card .image,
.highlight-card .thumb,
.highlight-card figure,
.post-card .image,
.post-card .thumb,
.post-card figure{
  background:
    radial-gradient(circle at 45% 42%,rgba(216,77,255,.26),transparent 24%),
    radial-gradient(circle at 58% 58%,rgba(255,122,24,.18),transparent 18%),
    linear-gradient(135deg,rgba(45,25,110,.9),rgba(7,10,38,.96));
}

/* Newsletter Popup Lesbarkeit */
.modal-box,
.newsletter-modal,
.popup-box{
  background:
    radial-gradient(circle at top left,rgba(255,122,24,.16),transparent 35%),
    radial-gradient(circle at top right,rgba(216,77,255,.16),transparent 35%),
    linear-gradient(180deg,rgba(9,12,43,.98),rgba(5,7,29,.98));
  border:1px solid rgba(255,122,24,.45);
  box-shadow:0 40px 100px rgba(0,0,0,.65);
}

/* Tablet */
@media (max-width:1100px){
  .nav,
  .header-nav,
  .site-nav,
  .menu,
  nav{
    gap:14px;
  }

  .nav a,
  .header-nav a,
  .site-nav a,
  .menu a,
  nav a{
    font-size:14px;
  }

  .nav-actions .btn,
  .header-actions .btn,
  .actions .btn,
  .site-header .btn,
  header .btn,
  .site-header button,
  header button{
    padding:13px 16px;
    font-size:14px;
  }
}

/* Handy */
@media (max-width:760px){
  .nav,
  .header-nav,
  .site-nav,
  .menu,
  nav{
    flex-wrap:wrap;
    justify-content:flex-start;
    gap:12px 16px;
  }

  .nav a,
  .header-nav a,
  .site-nav a,
  .menu a,
  nav a{
    font-size:14px;
  }

  .nav-actions,
  .header-actions,
  .actions{
    width:100%;
    justify-content:flex-start;
    flex-wrap:wrap;
  }

  .feature-card img,
  .topic-card img,
  .category-card img,
  .card img.icon,
  .card .icon img,
  .icon-wrap img,
  .icon-box img{
    width:74px !important;
    height:74px !important;
  }
}