/* =========================
   FEDV – ITD (IT-Dienstleistungen)
   Page-specific stylesheet
   Scope: .fedv-itd
   - Hero: global (fedv-core.css) -> nur Variablen
   - Modules: fedv-pages.css
   - Utilities: fedv-core.css
========================= */

.fedv-itd, .fedv-itd *{ box-sizing:border-box; }

.fedv-itd{
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#0f172a;
  line-height:1.65;
  margin:0;

  --brand: var(--fedv-brand, #ffffff);
  --brand2: var(--fedv-brand2, #003d8f);
  --muted: var(--fedv-muted, #4c5b66);

  --border: rgba(15,23,42,.12);

  --card: rgba(255,255,255,.92);
  --shadow: 0 24px 60px rgba(15,23,42,.14);
  --shadow2: 0 18px 44px rgba(15,23,42,.12);

  --content-max: 1560px;
  --pad-x: clamp(14px, 2.2vw, 26px);
}

.fedv-itd a{ color: inherit; }

.fedv-itd .wrap{
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* =========================
   ITD – Hero config (global fedv-hero)
   (setzt Variablen direkt am Hero -> deterministisch)
========================= */
.fedv-itd .fedv-hero{
  --fedv-hero-image: url("https://fuhr-edv.de/wp-content/uploads/2025/12/Modern-IT.jpg");
  --fedv-hero-bg-x: 70%;
  --fedv-hero-bg-y: 45%;

  /* alte ITD-Gradient-Optik */
  --fedv-hero-stop-b: 30%;
  --fedv-hero-stop-c: 48%;
  --fedv-hero-stop-d: 62%;
  --fedv-hero-stop-e: 72%;
  --fedv-hero-top-pad: clamp(56px, 6.2vw, 86px);
  --fedv-hero-bottom-pad: clamp(26px, 3.6vw, 44px);

  /* Optional: falls du ITD minimal anders willst */
  --fedv-hero-ambient-opacity: .62;
  --fedv-hero-shadow: var(--shadow);

  /* Optional: Layout-Breite der Hero-Spalten */
  --fedv-hero-left: 1.2fr;
  --fedv-hero-right: .9fr;
}

/* =========================
   Page-specific layouts (nur wenn außerhalb shared modules genutzt)
========================= */
.fedv-itd .split{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap:18px;
  align-items:start;
}

@media (max-width:1024px){
  .fedv-itd .split{ grid-template-columns: 1fr; }
}

/* Word-break safety (falls ITD lange Wörter/URLs hat) */
@media (max-width:1441px){
  .fedv-itd h1, .fedv-itd h2, .fedv-itd h3,
  .fedv-itd p, .fedv-itd li, .fedv-itd a{
    overflow-wrap:anywhere;
    word-break:break-word;
  }
}