/* ==========================================================================
   Sicherheit & Compliance
   ========================================================================== */

/* --- Hero ---------------------------------------------------------------- */
.se-hero { position: relative; background: transparent; clip-path: inset(0); }
.se-hero__inner {
  position: relative;
  z-index: 1;
  padding-block: 80px 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}
/* the copy wraps at the headline width, as in the Figma frame */
.se-hero__inner .lead { width: 890px; max-width: 100%; }
.se-hero__title { display: flex; gap: 24px; align-items: center; justify-content: center; flex-wrap: wrap; }
.se-hero__title .h1 { white-space: nowrap; }

/* --- Sicherheits-Karten -------------------------------------------------- */
.se-cards { position: relative; background: transparent; }
.se-cards__inner { position: relative; z-index: 1; padding-block: 49px 70px; }
.se-cards .eyebrow { margin-bottom: 24px; }
.se-cards__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.se-card {
  background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
  border-radius: 24px;
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .25));
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.se-card h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 16px;
  line-height: normal;
  text-transform: uppercase;
}
.se-card ul { display: flex; flex-direction: column; gap: 16px; padding: 10px; }
.se-card li { display: flex; gap: 16px; align-items: center; }
.se-card .dot {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 1000px;
  background: var(--blue-light);
  filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .25));
}
.se-card .dot img { width: 16px; height: 16px; }
.se-card p { font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: normal; }
.se-cards__glow {
  position: absolute;
  left: 74.66%;
  top: 340px;
  width: 727.5px;
  height: 818.2px;
  --glow-scale: .85;
  --glow-rot: 30deg;
  --glow-flip-y: -1;
  --glow-dur: 30s;
  --glow-delay: -13s;
}
@media (max-width: 980px) { .se-cards__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .se-card ul { padding: 0; } }

/* --- Deployment ---------------------------------------------------------- */
.se-dep { background: var(--blue-dark-2); color: var(--white); position: relative; height: 1105px; }
.se-dep .shead { position: absolute; left: var(--gutter); top: 82px; width: 738px; max-width: calc(100% - 2 * var(--gutter)); }
.se-dep .shead .lead { width: 628px; max-width: 100%; }
.se-dep__cards {
  position: absolute;
  left: 50%;
  top: 344px;
  transform: translateX(-50%);
  display: flex;
  gap: 40px;
  align-items: stretch;
}
.dep {
  width: 354px;
  flex: none;
  background: var(--white);
  color: var(--black);
  border-radius: 8px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 40px;
  text-align: center;
}
.dep__head { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 100%; }
.dep__title { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 234px; max-width: 100%; }
.dep__title h3 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 24px;
  line-height: normal;
  text-transform: uppercase;
  color: var(--blue-main);
}
.dep__claim { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: normal; color: var(--blue-main); }
.dep--plum h3, .dep--plum .dep__claim { color: var(--plum-main); }
.dep__text { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: normal; }
.dep__list { list-style: disc; padding-left: 24px; text-align: left; width: 100%; }
.dep__list li { font-family: var(--font-body); font-weight: 300; font-size: 16px; line-height: normal; }
.dep__foot { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 207px; max-width: 100%; margin: 0 auto; }
.dep__price { font-family: var(--font-body); font-weight: 500; font-size: 16px; line-height: normal; text-transform: uppercase; color: var(--blue-main); }
.dep__foot .btn { width: 100%; min-width: 0; height: 40px; min-height: 40px; padding-inline: 24px; font-weight: 400; }

/* Nebeneinander stehen Icon, Titel, Beschreibung, Liste und Preis der drei
   Karten jeweils auf einer Linie: gemeinsames Raster, jede Karte übernimmt
   dessen Zeilen (subgrid), der Kopf gibt seine zwei Teile direkt ab. */
@media (min-width: 1241px) {
  .se-dep__cards { display: grid; grid-template-columns: repeat(3, 354px); grid-template-rows: repeat(4, auto); column-gap: 40px; }
  .dep { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 14px; }
  .dep__head { display: contents; }
  .dep__title { margin-inline: auto; }
  .dep__list { margin-top: 26px; }
  .dep__foot { margin-top: 26px; align-self: end; }
}
.dep__title img { width: 64px; height: 64px; object-fit: scale-down; }

@media (max-width: 1240px) {
  .se-dep { height: auto; padding: 48px var(--gutter); }
  .se-dep .shead { position: static; width: 100%; max-width: 100%; }
  .se-dep__cards { position: static; transform: none; flex-wrap: wrap; justify-content: center; margin-top: 48px; gap: 24px; }
  .dep { width: 100%; max-width: 354px; }
}

/* --- Legal --------------------------------------------------------------- */
.se-legal { position: relative; background: transparent; height: 487px; clip-path: inset(0); }
.se-legal .shead { position: absolute; left: var(--gutter); top: 82px; width: 738px; max-width: calc(100% - 2 * var(--gutter)); z-index: 1; }
.se-legal__cta { position: absolute; left: var(--gutter); top: 359px; z-index: 1; }
.se-legal__ill { position: absolute; left: calc(58.33% + 51px); top: 72px; width: 357px; height: 357px; }

@media (max-width: 1100px) {
  .se-legal { height: auto; padding: 48px var(--gutter); }
  .se-legal .shead, .se-legal__cta { position: static; width: 100%; max-width: 100%; }
  .se-legal__cta { margin-top: 32px; }
  .se-legal__ill { position: static; margin: 32px auto 0; width: 240px; height: 240px; }
}

/* --- Karten-Icons ------------------------------------------------------- */
.se-card__head { display: flex; align-items: center; gap: 12px; }
.se-card .icon-badge { background: var(--blue-light); }

/* --- Nachweise ----------------------------------------------------------- */
.se-trust { position: relative; background: var(--blue-very-light); }
.se-trust__inner { padding-block: 72px 80px; }
.se-trust .shead { width: 738px; max-width: 100%; }
.se-trust__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.se-tcard {
  background: var(--white);
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 4px 4px rgba(0, 0, 0, .06);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}
.se-tcard .icon-badge { background: var(--blue-light); }
.se-tcard h3 { font-family: var(--font-head); font-weight: 700; font-size: 18px; line-height: 1.3; }
.se-tcard p { font-family: var(--font-body); font-weight: 300; font-size: 15px; line-height: 1.55; flex: 1; }
.se-tcard__link { font-family: var(--font-head); font-weight: 600; font-size: 15px; color: var(--blue-main); text-decoration: none; }
.se-tcard__link:hover { text-decoration: underline; }
@media (max-width: 980px) { .se-trust__grid { grid-template-columns: 1fr; } .se-trust__inner { padding-block: 48px; } }

/* größere Icon-Badges auf den Sicherheits- und Nachweis-Karten */
.se-card .icon-badge, .se-tcard .icon-badge { width: 56px; height: 56px; }
.se-card .icon-badge img, .se-tcard .icon-badge img { width: 30px; height: 30px; }
.se-card__head { gap: 16px; }
.se-tcard .icon-badge { margin-bottom: 4px; }