/* EPIC24 – oeffentliche Startseite, 29.07.2026 */
*{ box-sizing:border-box; margin:0; padding:0; }
  :root{ --navy:#0A2A6B; --deep:#071E4D; --blue:#2563EB; --b50:#EEF3FE; --b25:#F5F8FE;
         --ink:#1F2937; --slate:#5B677A; --bd:#E5EAF2; --wrap:1180px; }
  html{ -webkit-text-size-adjust:100%; }
  body{ font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
        color:var(--ink); background:#fff; line-height:1.5; }
  img{ display:block; max-width:100%; height:auto; }
  a{ text-decoration:none; color:inherit; }
  a:focus-visible, button:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; border-radius:4px; }
  .wrap{ max-width:var(--wrap); margin:0 auto; }
  svg{ display:block; flex-shrink:0; }

  header.top{ border-bottom:1px solid var(--bd); background:#fff; }
  header.top .wrap{ display:flex; align-items:center; min-height:64px; padding:12px 24px; }
  header.top img{ height:34px; width:auto; }

  .hero{ padding:0 24px; }
  .hero-inner{ display:flex; flex-wrap:wrap; align-items:center; gap:40px; padding:46px 0 44px; }
  .hero .tx{ flex:1 1 340px; }
  .hero .pic{ flex:1 1 430px; aspect-ratio:4/3; max-height:390px; position:relative;
              border-radius:12px; overflow:hidden; }
  .hero .pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  h1{ font-size:clamp(28px,4.2vw,40px); line-height:1.18; color:var(--navy); font-weight:700;
      letter-spacing:-.02em; margin-bottom:20px; max-width:12em; }
  .hero p{ font-size:15px; line-height:1.68; color:var(--slate); margin-bottom:12px; max-width:34em; }

  /* 01.08.2026: blauer Balken unter der Ueberschrift entfernt, Ueberschrift groesser,
     Abstaende etwas enger, damit die Bloecke darunter hoeher stehen. */
  main section{ padding:32px 24px; }
  main section .wrap{ padding:0; }
  h2{ font-size:clamp(26px,3.6vw,34px); color:var(--navy); font-weight:700; letter-spacing:-.015em;
      margin-bottom:20px; }

  .c4{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:19px; }
  .cd{ border:1px solid var(--bd); border-radius:12px; padding:20px; background:#fff; }
  .cd .ic{ width:48px; height:48px; border-radius:50%; background:var(--b50);
           display:flex; align-items:center; justify-content:center; margin-bottom:15px; }
  .cd h3{ font-size:17.5px; color:var(--navy); font-weight:700; margin-bottom:12px; line-height:1.28; }
  .cd p{ font-size:13.5px; line-height:1.6; color:var(--slate); }

  .c3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:19px; }
  .pc{ border:1px solid var(--bd); border-radius:12px; overflow:hidden; background:#fff; }
  .pc .im{ aspect-ratio:4/3; max-height:205px; overflow:hidden; }
  .pc .im img{ width:100%; height:100%; object-fit:cover; }
  .pc .lb{ padding:16px 18px 18px; }
  .pc .lb .hd{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
  .pc .lb b{ font-size:16px; color:var(--navy); }
  .pc .lb span{ font-size:13px; color:var(--slate); line-height:1.55; display:block; }

  /* 30.07.2026: Breite an alle anderen Abschnitte angepasst.
     Vorher war die Box 24 px eingeruckt und 48 px schmaler als der Rest. */
  .cta{ width:calc(100% - 48px); max-width:var(--wrap); margin:0 auto 40px;
        background:var(--b25); border:1px solid #DEE7F8; border-radius:12px;
        padding:26px 32px; display:flex; flex-wrap:wrap; align-items:center; gap:24px; }
  .cta .shield{ width:62px; height:62px; border-radius:50%; background:var(--blue);
                display:flex; align-items:center; justify-content:center; }
  .cta .t{ flex:1 1 320px; }
  .cta h3{ font-size:21px; color:var(--navy); font-weight:700; margin-bottom:7px; }
  .cta p{ font-size:14px; line-height:1.6; color:var(--slate); }
  .cta .rt{ text-align:center; }
  .cta .btn{ background:var(--blue); color:#fff; font-size:15.5px; font-weight:600;
             padding:15px 34px; border-radius:8px; display:inline-flex; align-items:center; gap:10px; }
  .cta .btn:hover{ background:#1B4FD1; }
  .cta .sub{ font-size:12px; color:var(--slate); margin-top:9px; }


  @media(max-width:760px){
    .hero{ padding:0 22px; }
    .hero-inner{ padding:26px 0 30px; gap:24px; }
    .hero .pic{ order:-1; flex-basis:100%; aspect-ratio:16/10; }
    main section{ padding:26px 22px; }
    .cta{ width:calc(100% - 44px); margin:0 auto 32px; padding:24px; }
  }

.ohne-abstand{ padding-top:0; }