/* /css/hero.css – Optimierte Version (konfliktfrei + layout-tightening)
=========================================================
Update (27.12):
- hero-meta 2-Spalten-Layout (Facts links / Trust rechts)
- weniger klobig: Facts als Grid, lange Badges bekommen Luft
- Trust rechts ruhiger (stacked)
- Container-Breite konsistent: hero-inner nutzt global .container
- NEW: hero-socials (referenziell, ruhig, CTA-untergeordnet) + ICON SUPPORT
  (IMG + Inline-SVG kompatibel; IMG bekommt ebenfalls size/opacity)
- NEW (2026-01): hero-top (Headline links, Socials rechts) + CTA polish (größer/aufgehübscht)
- NEW (2026-01): Social-Pills: +20% Größe, +10% Abstand, 3 oben / 3 unten (Grid 3x2)
- Safety-Mode (2026-01): px -> rem/em 1:1 (16px Basis), Layout bleibt unverändert
========================================================= */

/* ---------- Base Section ---------- */
.section.hero {
  position: relative;
  color: var(--hero-ink);
  text-align: left;
  background:
    radial-gradient(68.75rem 23.75rem at 18% -10%, rgba(92,200,255,0.16), transparent 60%),
    radial-gradient(53.75rem 17.5rem at 82% 0%, rgba(92,200,255,0.10), transparent 55%),
    var(--hero-bg);
  overflow: hidden;
}

/* Subtiles Hintergrundraster */
.section.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.08) 0.0625rem, transparent 0.0625rem); /* 1px */
  background-size: 1.625rem 1.625rem; /* 26px */
  background-position: -0.25rem -0.25rem; /* -4px */
  opacity: 0.15;
  pointer-events: none;
}

/* IMPORTANT: .hero-inner sitzt auf .container (global steuert width + gutter) */
.hero-inner {
  padding-block: clamp(1.75rem, 4.8vw, 4.5rem); /* 28px..72px */
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* ---------- Carded Surface ---------- */
.hero-surface {
  background: linear-gradient(180deg, var(--hero-surface), var(--hero-surface-soft));
  border: 1px solid var(--hero-border);
  border-radius: var(--hero-radius);
  padding: clamp(1.25rem, 3.2vw, 2.125rem); /* 20px..34px */
  box-shadow:
    0 0.5rem 1.875rem rgba(0,0,0,0.35), /* 8px 30px */
    inset 0 0.0625rem 0 rgba(255,255,255,0.06); /* 1px */
  min-width: 0;
}

/* =========================================================
   Hero Top Row (Title left, Socials right)
   ========================================================= */
.hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem; /* 16px */
  margin-bottom: 0.75rem; /* 12px */
  min-width: 0;
}

.hero-top .hero-title { margin-bottom: 0; }

/* ---------------------------------------------------------
   Socials – rechter Block
   --------------------------------------------------------- */
.hero-socials-top {
  margin: 0.125rem 0 0 0; /* 2px */
  flex: 0 0 auto;
  max-width: 48%;
  min-width: 0;
}

/* ---------------------------------------------------------
   FIXED 3×2 GRID — HARD LOCK (gegen Flex-Overrides & Flattening)
   --------------------------------------------------------- */
.hero .hero-socials.hero-socials-top .social-list{
  display: grid !important;                 /* gewinnt gegen .hero-socials .social-list { display:flex } */
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row;                      /* niemals “dicht packen” */
  gap: 0.5625rem 1.125rem;                  /* 9px 18px */

  justify-content: end;                     /* Block rechts */
  align-items: center;

  list-style: none;
  padding: 0;
  margin: 0;

  min-width: 0;
}

/* li MUSS Grid-Item bleiben (kein display: contents irgendwo) */
.hero .hero-socials.hero-socials-top .social-list > li{
  display: block !important;
  min-width: 0;
}

/* Pill füllt exakt die Zelle */
.hero .hero-socials.hero-socials-top .social-list > li > a{
  width: 100%;
  justify-content: flex-start;
}

/* Reihenfolge: 1. Reihe: X, Paragraph, Medium | 2. Reihe: LinkedIn, Reddit, GitHub */
.hero .hero-socials.hero-socials-top .social-list > li:nth-child(1){ order: 1; } /* X */
.hero .hero-socials.hero-socials-top .social-list > li:nth-child(4){ order: 2; } /* Paragraph */
.hero .hero-socials.hero-socials-top .social-list > li:nth-child(3){ order: 3; } /* Medium */
.hero .hero-socials.hero-socials-top .social-list > li:nth-child(2){ order: 4; } /* LinkedIn */
.hero .hero-socials.hero-socials-top .social-list > li:nth-child(5){ order: 5; } /* Reddit */
.hero .hero-socials.hero-socials-top .social-list > li:nth-child(6){ order: 6; } /* GitHub */

/* Labels etwas präsenter */
.hero-socials-top .social-label { font-size: 0.9rem; }

/* ---------- Text Elements ---------- */
.nowrap { white-space: nowrap; }

.hero-title {
  font-size: var(--h1-size);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 0.875rem 0; /* 14px */
  font-weight: 800;
  max-width: var(--hero-text-maxch, 70ch);
}

.lead {
  font-size: var(--lead-size);
  line-height: 1.52;
  color: var(--hero-ink);
  margin: 0 0 0.875rem 0; /* 14px */
  max-width: var(--hero-text-maxch, 70ch);
}

.muted { color: var(--hero-muted); }

.text-link {
  color: var(--hero-ink);
  text-decoration: underline;
  text-underline-offset: 0.1875rem; /* 3px */
}
.text-link:hover { color: var(--hero-accent); }

/* =========================================================
   Social / Reference Links (ruhig, nicht CTA)
   ========================================================= */
.hero-socials {
  margin: 0.875rem 0 0.375rem; /* 14px 0 6px */
}

/* Standard (falls hero-socials an anderer Stelle genutzt wird) */
.hero-socials .social-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem; /* 8px 16px */
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

/* Social-Pills: +20% größer + “aufgehübscht” */
.hero-socials .social-list a {
  display: inline-flex;
  align-items: center;

  /* +20% (gap 6 → ~7) */
  gap: 0.4375rem; /* 7px */

  /* +20% Hit-Area */
  padding: 0.4375rem 0.75rem; /* 7px 12px */
  border-radius: 999px;

  font-size: 0.92rem;
  font-weight: 750;
  line-height: 1.2;

  color: var(--hero-muted);
  text-decoration: none;

  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.03);

  transition:
    transform 0.15s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.15s ease;

  min-width: 0;
}

/* Icon support — STRONGER HIGHLIGHT +20%
   Ziel: klar sichtbar, hochwertig, nicht „neon“
*/
.hero-socials .social-icon {
  /* +20% (16 → 19.2 => 20) */
  width: 1.25rem;  /* 20px */
  height: 1.25rem; /* 20px */

  opacity: 0.95;
  flex-shrink: 0;
  margin-top: 0.03125rem; /* 0.5px */
  display: inline-block;

  filter:
    drop-shadow(0 0 0.4375rem rgba(92,200,255,0.45)) /* 7px */
    drop-shadow(0 0 1.125rem rgba(92,200,255,0.22)); /* 18px */

  transition:
    opacity 0.15s ease,
    filter 0.2s ease,
    transform 0.15s ease;
}

/* Inline-SVG: Farbe über Textfarbe steuern */
.hero-socials svg.social-icon { fill: currentColor; }

/* IMG: sauber einpassen */
.hero-socials img.social-icon {
  object-fit: contain;
  object-position: center;
}

/* Hover / Focus: deutlich stärkerer Presence-Boost */
.hero-socials .social-list a:hover,
.hero-socials .social-list a:focus-visible {
  color: var(--hero-ink);
  border-color: rgba(92,200,255,0.35);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 0.625rem 1.375rem rgba(0,0,0,0.28); /* 10px 22px */
}

.hero-socials .social-list a:hover .social-icon,
.hero-socials .social-list a:focus-visible .social-icon {
  opacity: 1;
  filter:
    drop-shadow(0 0 0.625rem rgba(92,200,255,0.75))  /* 10px */
    drop-shadow(0 0 1.625rem rgba(92,200,255,0.50))  /* 26px */
    drop-shadow(0 0 2.5rem rgba(92,200,255,0.22));   /* 40px */
  transform: translateY(-0.0625rem) scale(1.05); /* -1px */
}

.hero-socials .social-list a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* dezente “alive”-Animation nur für Icons im Top-Cluster */
@media (prefers-reduced-motion: no-preference) {
  .hero-socials-top .social-icon {
    animation: gfcIconPulse 3.2s ease-in-out infinite;
  }
  @keyframes gfcIconPulse {
    0%, 100% {
      filter:
        drop-shadow(0 0 0.4375rem rgba(92,200,255,0.45))
        drop-shadow(0 0 1.125rem rgba(92,200,255,0.22));
    }
    50% {
      filter:
        drop-shadow(0 0 0.625rem rgba(92,200,255,0.65))
        drop-shadow(0 0 1.625rem rgba(92,200,255,0.30));
    }
  }
}

/* ---------- CTA Row ---------- */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem; /* 12px */
  margin: 1rem 0 0.75rem 0; /* 16px 0 12px */
}

/* Buttons (hero-scoped) */
.hero .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem; /* 10px */

  padding: 0.875rem 1.25rem; /* 14px 20px */
  min-height: 3.25rem; /* 52px */

  border-radius: 0.875rem; /* 14px */
  font-weight: 750;
  letter-spacing: 0.0125rem; /* .2px */
  text-decoration: none;
  cursor: pointer;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    filter 0.15s ease;

  border: 1px solid transparent;
}

.hero .btn-primary {
  background: linear-gradient(180deg, var(--hero-accent), #89dbff);
  color: var(--hero-accent-ink);
  box-shadow: 0 0.625rem 1.625rem rgba(92,200,255,0.30); /* 10px 26px */
}

.hero .btn-ghost {
  background: rgba(255,255,255,0.03);
  color: var(--hero-ink);
  border: 1px solid rgba(255,255,255,0.30);
  backdrop-filter: blur(0.125rem); /* 2px */
}

@media (hover: hover) and (pointer: fine) {
  .hero .btn-primary:hover,
  .hero .btn-ghost:hover {
    transform: translateY(-0.0625rem); /* -1px */
    filter: brightness(1.03);
  }

  .hero .btn-ghost:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.38);
    box-shadow: 0 0.625rem 1.375rem rgba(0,0,0,0.28); /* 10px 22px */
  }

  .hero .btn-primary:hover {
    box-shadow: 0 0.75rem 1.875rem rgba(92,200,255,0.34); /* 12px 30px */
  }
}

.hero .btn-primary:active,
.hero .btn-ghost:active { transform: translateY(0); }

.hero .btn:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-color: var(--hero-accent);
}

/* Trust CTA (untergeordnet) */
.cta-trust { margin-top: 0; }
.hero .btn-outline.btn-small {
  padding: 0.625rem 0.875rem; /* 10px 14px */
  min-height: 2.5rem; /* 40px */
  border-radius: 0.75rem; /* 12px */
  font-weight: 650;
}

/* =========================================================
   Hero Meta Grid (Facts left / Trust right)
   ========================================================= */
.hero-meta {
  margin-top: 0.625rem; /* 10px */
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 0.875rem; /* 14px */
  align-items: start;
  max-width: var(--hero-meta-maxw, 70rem); /* 1120px */
}

.hero-meta-col { min-width: 0; }

.hero-meta-left { padding-right: 0.375rem; } /* 6px */
.hero-meta-right { padding-left: 0.375rem; } /* 6px */

/* ---------- Hero Facts / Badges ---------- */
.hero-facts {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem; /* 10px */
}

/* „lange“ Badges automatisch über volle Breite */
.hero-facts .badge:nth-child(4),
.hero-facts .badge:nth-child(6) {
  grid-column: 1 / -1;
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.4375rem 0.6875rem; /* 7px 11px */
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18);
  font-size: 0.9rem;
  color: var(--hero-ink);
  text-decoration: none;
  line-height: 1.2;
  min-width: 0;
}

.badge:hover { border-color: rgba(255,255,255,0.35); }

.badge.mono {
  cursor: pointer;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.badge:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-color: var(--hero-accent);
}

/* ---------- Trust strip (ruhiger, weniger „klobig“) ---------- */
.trust-strip {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.625rem; /* 10px */
}

.trust-strip li {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.5rem; /* 8px */
  padding: 0.625rem 0.75rem; /* 10px 12px */
  border-radius: 0.875rem; /* 14px */
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.22);
  color: var(--hero-muted);
  font-weight: 600;
  letter-spacing: 0.0125rem; /* .2px */
  font-size: 0.92rem;
  line-height: 1.35;
  min-width: 0;
}

.trust-strip li span {
  color: var(--hero-accent);
  font-weight: 800;
  line-height: 1.1;
  margin-top: 0.0625rem; /* 1px */
}

/* ---------- Note ---------- */
.hero .note {
  margin: 1rem 0 0 0; /* 16px */
  padding: 0.75rem 0.875rem; /* 12px 14px */
  border-radius: 0.75rem; /* 12px */
  background: rgba(255,189,66,0.12);
  border: 1px solid rgba(255,189,66,0.32);
  color: var(--hero-ink);
  font-size: 1rem;
  line-height: 1.52;
  max-width: 92ch;
}

/* ---------- Motion Preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero .btn { transition: none; }
  .section.hero::before { background-image: none; }
  .hero-socials-top .social-icon { animation: none !important; }
}

/* ---------- Print ---------- */
@media print {
  .section.hero {
    background: #fff !important;
    color: #000 !important;
  }
  .section.hero::before { display: none !important; }
  .hero-surface {
    background: none !important;
    border: 1px solid #000 !important;
    box-shadow: none !important;
  }
  .hero .btn,
  .trust-strip,
  .hero-socials { display: none !important; }
}

/* =========================================================
   Responsive Overrides
   ========================================================= */
@media (max-width: 56.25rem) { /* 900px */
  .hero-inner { padding-block: clamp(1.375rem, 5.5vw, 2.75rem); } /* 22..44 */

  .hero-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.625rem; /* 10px */
    margin-bottom: 0.625rem; /* 10px */
  }

  .hero-socials-top {
    max-width: none;
    width: 100%;
    margin-top: 0;
  }

  .hero-socials-top .social-list { justify-content: start; }

  .hero-title {
    font-size: clamp(1.65rem, 5.2vw, 2.05rem);
    margin-bottom: 0;
  }

  .lead { font-size: 1rem; }

  .cta-row {
    margin-top: 0.75rem; /* 12px */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem; /* 12px */
  }

  .cta-row .btn { width: 100%; }

  .hero-meta {
    grid-template-columns: 1fr;
    gap: 0.75rem; /* 12px */
    margin-top: 0.625rem; /* 10px */
    max-width: none;
  }

  .hero-meta-left,
  .hero-meta-right { padding: 0; }

  .hero-facts { grid-template-columns: 1fr; }

  .hero-facts .badge:nth-child(4),
  .hero-facts .badge:nth-child(6) { grid-column: auto; }
}

@media (max-width: 32.5rem) { /* 520px */
  .nowrap { white-space: normal; }

  /* Mobile: 2 Spalten, damit nichts gequetscht wirkt */
  .hero-socials-top .social-list {
    grid-template-columns: repeat(2, max-content);
    gap: 0.5625rem 1rem; /* 9px 16px */
    justify-content: start;
  }

  .hero .btn {
    min-height: 3.125rem; /* 50px */
    padding: 0.8125rem 1rem; /* 13px 16px */
  }
}

/* =========================================================
   Extra-small safety: <=390px (micro-fixes only)
   - Desktop + iPhone 14 Pro Max bleiben unverändert
   ========================================================= */
@media (max-width: 24.375rem) { /* 390px */
  /* Social pills: minimal weniger horizontaler Druck */
  .hero-socials .social-list a { padding: 0.375rem 0.625rem; } /* 6px 10px */
  .hero-socials .social-icon { width: 1.125rem; height: 1.125rem; } /* 18px */

  /* CTA grid kann sonst „tight“ wirken */
  .cta-row { grid-template-columns: 1fr; }
}