/* =========================
   FEDV – MSCE
   Seite: Maschinensicherheit / CE-Kennzeichnung
   Zweck:
   - Seitenspezifische Styles für die Übersichtsseite
   - baut auf fedv-core.css + fedv-pages.css auf
========================= */

.fedv-msce{
  --fedv-msce-bg: #f7faff;
  --fedv-msce-surface: rgba(255,255,255,.94);
  --fedv-msce-border: rgba(15,23,42,.10);
  --fedv-msce-shadow: 0 14px 34px rgba(15,23,42,.08);
  --fedv-msce-shadow-soft: 0 10px 24px rgba(15,23,42,.06);
  --fedv-msce-radius: 20px;
  --fedv-msce-link: var(--fedv-brand, #1B47DA);
  --fedv-msce-link-hover: var(--fedv-brand2, #003d8f);

  --fedv-msce-hero-overlay-a: rgba(238,243,255,.96);
  --fedv-msce-hero-overlay-b: rgba(238,243,255,.90);
  --fedv-msce-hero-overlay-c: rgba(238,243,255,.56);
  --fedv-msce-hero-overlay-d: rgba(238,243,255,.18);
  --fedv-msce-hero-overlay-e: rgba(238,243,255,0);

  background: var(--fedv-msce-bg);
}

/* =========================
   Hero
========================= */

.fedv-msce .fedv-hero{
  --fedv-hero-image: url('https://fuhr-edv.de/wp-content/uploads/2025/11/2e30870f-71cc-49e0-97d5-182097ac1483.png');
  --fedv-hero-min-h: clamp(420px, 52vw, 620px);

  --fedv-hero-bg-x: var(--fedv-msce-hero-bg-x, 50%);
  --fedv-hero-bg-y: var(--fedv-msce-hero-bg-y, 50%);

  --fedv-hero-grad-a: var(--fedv-msce-hero-overlay-a);
  --fedv-hero-grad-b: var(--fedv-msce-hero-overlay-b);
  --fedv-hero-grad-c: var(--fedv-msce-hero-overlay-c);
  --fedv-hero-grad-d: var(--fedv-msce-hero-overlay-d);
  --fedv-hero-grad-e: var(--fedv-msce-hero-overlay-e);

  --fedv-hero-stop-b: 34%;
  --fedv-hero-stop-c: 49%;
  --fedv-hero-stop-d: 62%;
  --fedv-hero-stop-e: 76%;

  --fedv-hero-left: 1.2fr;
  --fedv-hero-right: .78fr;

  --fedv-hero-top-pad: clamp(74px, 8vw, 112px);
  --fedv-hero-bottom-pad: clamp(34px, 4vw, 56px);
  --fedv-hero-ambient-opacity: .58;
  --fedv-hero-topfade: 34px;

  background-color: #f4f8ff;
}

.fedv-msce .fedv-hero__content{
  position: relative;
  z-index: 1;
}

.fedv-msce .fedv-hero__grid{
  align-items: center;
}

.fedv-msce__hero-main{
  max-width: 760px;
}

.fedv-msce .fedv-hero h1{
  margin: 0 0 14px 0;
  max-width: 12ch;
  font-size: clamp(2rem, 4.6vw, 4rem);
  line-height: .98;
  letter-spacing: -.035em;
  color: #13213a;
}

.fedv-msce .fedv-hero p:not(.fedv-lead){
  max-width: 72ch;
  margin: 0 0 18px 0;
  color: #223046;
}

.fedv-msce .fedv-lead{
  max-width: 65ch;
  color: #1f2a44;
}

.fedv-msce__hero-side{
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
}

.fedv-msce__hero-card{
  border: 1px solid rgba(15,23,42,.10);
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 44px rgba(15,23,42,.10);
}

.fedv-msce__hero-card strong{
  display: block;
  margin: 0 0 10px 0;
  color: #10203a;
  font-size: 15px;
}

.fedv-msce__hero-card p{
  margin: 0;
}

.fedv-msce__checklist{
  margin: 0;
  padding-left: 18px;
  color: #1f2a44;
}

.fedv-msce__checklist li + li{
  margin-top: 6px;
}

/* =========================
   Intro / legal / context / routing
========================= */

.fedv-msce h2{
  margin: 0 0 12px 0;
  font-size: clamp(1.5rem, 2.3vw, 2.1rem);
  line-height: 1.14;
  letter-spacing: -.02em;
  color: #13213a;
}

.fedv-msce .fedv-section > .fedv-lead,
.fedv-msce .fedv-section .fedv-lead{
  max-width: 78ch;
}

.fedv-msce__card{
  border-color: var(--fedv-msce-border);
  background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(249,251,255,.94) 100%);
  box-shadow: var(--fedv-msce-shadow-soft);
}

.fedv-msce__card h3{
  margin-bottom: 10px;
  font-size: 17px;
  color: #13213a;
}

.fedv-msce__card p + p{
  margin-top: 10px;
}

.fedv-msce__intro-grid,
.fedv-msce__context-grid,
.fedv-msce__routing-grid{
  align-items: stretch;
}

.fedv-msce__intro-note{
  margin-top: 16px;
  border: 1px solid rgba(27,71,218,.14);
  border-left: 4px solid var(--fedv-brand);
  background: linear-gradient(180deg, rgba(238,243,255,.86) 0%, rgba(255,255,255,.96) 100%);
  box-shadow: var(--fedv-msce-shadow-soft);
}

.fedv-msce__intro-note p{
  color: #1f2a44;
}

/* =========================
   Verordnung 2027
========================= */

.fedv-msce__update{
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(27,71,218,.16);
  background:
    radial-gradient(680px 280px at 0% 0%, rgba(27,71,218,.12), transparent 56%),
    linear-gradient(180deg, rgba(238,243,255,.92) 0%, rgba(255,255,255,.98) 100%);
  box-shadow: 0 16px 38px rgba(15,23,42,.08);
}

.fedv-msce__update::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, var(--fedv-brand) 0%, var(--fedv-brand2) 100%);
}

.fedv-msce__update h2{
  margin-left: 2px;
}

.fedv-msce__update p{
  color: #203047;
}

.fedv-msce__update p + p{
  margin-top: 10px;
}

/* =========================
   Links
========================= */

.fedv-msce a:not(.fedv-btn){
  color: var(--fedv-msce-link);
  font-weight: 700;
  text-decoration: none;
  transition: color .15s ease, opacity .15s ease;
}

.fedv-msce a:not(.fedv-btn):hover{
  color: var(--fedv-msce-link-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.fedv-msce__readmore{
  margin-top: 12px !important;
}

.fedv-msce__readmore a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fedv-msce__readmore a::after{
  content: "→";
  transition: transform .15s ease;
}

.fedv-msce__readmore a:hover::after{
  transform: translateX(2px);
}

/* =========================
   Routing
========================= */

.fedv-msce__route-card{
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.fedv-msce__route-card p{
  color: var(--fedv-muted);
}

.fedv-msce__route-card .fedv-msce__readmore{
  margin-top: auto !important;
  padding-top: 12px;
}

.fedv-msce__route-card--wide{
  grid-column: span 2;
}

/* =========================
   Final CTA
========================= */

.fedv-msce__final-card{
  border: 1px solid rgba(27,71,218,.14);
  background:
    radial-gradient(720px 360px at 18% 20%, rgba(27,71,218,.16), transparent 60%),
    linear-gradient(180deg, #eef3ff 0%, #ffffff 72%);
  box-shadow: 0 18px 44px rgba(15,23,42,.10);
}

.fedv-msce__final-card h2{
  margin-bottom: 10px;
}

.fedv-msce__final-card p{
  max-width: 74ch;
  color: #1f2a44;
}

/* =========================
   Responsive
========================= */

@media (max-width: 1024px){
  .fedv-msce .fedv-hero{
    --fedv-hero-left: 1fr;
    --fedv-hero-right: 1fr;

    --fedv-hero-grad-a: rgba(238,243,255,.88);
    --fedv-hero-grad-b: rgba(238,243,255,.82);
    --fedv-hero-grad-c: rgba(238,243,255,.58);
    --fedv-hero-grad-d: rgba(238,243,255,.24);
    --fedv-hero-grad-e: rgba(238,243,255,.06);
  }

  .fedv-msce__hero-main{
    max-width: none;
  }

  .fedv-msce .fedv-hero h1{
    max-width: none;
  }

  .fedv-msce__route-card--wide{
    grid-column: auto;
  }
}

@media (max-width: 640px){
  .fedv-msce .fedv-hero{
    --fedv-hero-top-pad: 64px;
    --fedv-hero-bottom-pad: 30px;
    --fedv-hero-bg-x: 64%;
  }

  .fedv-msce .fedv-cta-row{
    flex-direction: column;
    align-items: stretch;
  }

  .fedv-msce .fedv-btn{
    width: 100%;
  }
}