/* ==========================================================================
   Section patterns shared across several pages
   ========================================================================== */

/* --- Section heading block (eyebrow + 2-line title + lead) --------------- */
.shead { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.shead__title { display: flex; flex-direction: column; align-items: flex-start; }
.shead--gap18 { gap: 18px; }

/* --- Customer logo strip ------------------------------------------------- */
.logos { background: var(--white); }
.logos__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding-block: 48px;
}
.logos__label {
  font-family: var(--font-head);
  font-size: 16px;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
}
.logos__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  width: 767px;
  max-width: 100%;
  height: 40px;
}
.logos__row img { object-fit: contain; }

/* dark variant stacks label above the row, full width */

@media (max-width: 1100px) {
  .logos__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .logos__row { width: 100%; }
}
@media (max-width: 700px) {
  .logos__row { flex-wrap: wrap; justify-content: flex-start; gap: 24px 32px; height: auto; }
  .logos__row img { height: 28px !important; width: auto !important; }
  .logos__label { white-space: normal; font-size: 14px; }
}

/* --- Closing teaser (dark, centred) -------------------------------------- */
.teaser { background: var(--blue-dark-2); color: var(--white); }
.teaser__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  padding-block: 64px;
  text-align: center;
}
.teaser__title {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(32px, 3.75vw, 54px);
  line-height: 1.074;
  letter-spacing: .369px;
}
.teaser__sub { font-family: var(--font-head); font-size: 16px; line-height: normal; }
.teaser__head { display: flex; flex-direction: column; gap: 24px; }
.teaser__actions { display: flex; gap: 32px; align-items: flex-start; }
.teaser__actions .btn { width: 286px; }
@media (max-width: 700px) {
  .teaser__actions { flex-direction: column; gap: 16px; width: 100%; max-width: 320px; }
  .teaser__actions .btn { width: 100%; }
}

/* --- FAQ section (home, pricing, sicherheit) ----------------------------- */
.faq { position: relative; background: transparent; clip-path: inset(0); }
.faq__inner { padding-block: 48px 38px; position: relative; z-index: 1; }
.faq__head { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.faq .faq-panel { margin: 18px auto 0; width: 1062px; max-width: 100%; }
.faq__glow {
  left: 82%;
  top: 40%;
  width: 727.5px;
  height: 818.2px;
  --glow-scale: .8;
  --glow-rot: 150deg;
  --glow-dur: 34s;
  --glow-delay: -16s;
}
.faq-item__a a { color: var(--blue-main); text-decoration: underline; text-underline-offset: 3px; }

/* --- FAQ accordion ------------------------------------------------------- */
.faq-panel {
  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: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.faq-item {
  background: var(--blue-very-light);
  box-shadow: inset 0 0 0 1px var(--blue-medium);
  border-radius: 8px;
  padding: 24px;
}
.faq-item__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  text-align: left;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: normal;
  color: var(--text-body);
}
.faq-item__chev {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 10000px;
  background: var(--blue-main);
  transition: transform .25s ease;
}
.faq-item__chev img { width: 16px; height: 16px; transform: rotate(90deg); }
.faq-item.is-open .faq-item__chev { transform: rotate(180deg); }
.faq-item__a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.faq-item.is-open .faq-item__a { grid-template-rows: 1fr; }
.faq-item__a > div { overflow: hidden; }
.faq-item__a p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-body);
  padding-top: 16px;
}
@media (max-width: 700px) {
  .faq-panel { padding: 20px; border-radius: 16px; gap: 16px; }
  .faq-item { padding: 16px; }
  .faq-item__q { gap: 12px; font-size: 15px; }
}

/* --- Industry tiles ------------------------------------------------------ */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tiles__row2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  width: calc(66.666% - 8px);
  margin: 24px auto 0;
}
/* Jede Kachel ist eine Karte mit Vorder- und Rückseite: beim Hover (oder
   Tastaturfokus) dreht sie sich um die senkrechte Achse und zeigt eine kurze
   Vorschau der Branche. Die Faces tragen Radius und Clipping selbst — auf dem
   drehenden Element würde overflow:hidden die 3D-Darstellung abschalten. */
.tile {
  position: relative;
  display: block;
  height: 240px;
  perspective: 1200px;
  color: var(--white);
}
.tile__card {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.tile:hover .tile__card,
.tile:focus-visible .tile__card { transform: rotateY(180deg); }
.tile:focus-visible { outline: 2px solid var(--blue-main); outline-offset: 4px; border-radius: 16px; }
.tile__front, .tile__back {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.tile__front { background: var(--blue-dark); }
.tile img.tile__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
}
/* crop offsets taken from the Figma frames */
.tile--crop-bottom img.tile__bg { object-position: center 98%; }
.tile--crop-top img.tile__bg { object-position: center 10%; }
.tile__front::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 23, 62, .8);
  z-index: -1;
}
.tile__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  color: var(--white);
}
.tile__label p {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 24px;
  line-height: normal;
  text-transform: uppercase;
}
.tile__back {
  transform: rotateY(180deg);
  flex-direction: column;
  gap: 14px;
  padding: 24px 28px;
  text-align: center;
  background: linear-gradient(160deg, var(--blue-dark-2) 0%, var(--blue-dark) 100%);
}
.tile__back p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.45;
}
.tile__more {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--plum-light);
}
@media (prefers-reduced-motion: reduce) {
  .tile__card { transition: none; }
}
@media (max-width: 900px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .tiles__row2 { width: 100%; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .tiles, .tiles__row2 { grid-template-columns: 1fr; }
  .tile { height: 200px; }
  .tile__back p { font-size: 14px; }
}

/* --- Page hero (short, for sub pages) ------------------------------------ */
.phero { position: relative; background: transparent; }
.phero__inner { padding-block: 48px; display: flex; flex-direction: column; gap: 16px; }

/* Zweizeilige Abschnittstitel stehen in EINER Überschrift: die zweite Zeile
   ist ein Block-Span, kein eigenes <h2>. Vorher ergab jede Sektion zwei
   Überschriften, und die maschinell gelesene Gliederung bestand aus
   Halbsätzen. width:fit-content, damit background-clip:text bei den
   Verlaufszeilen weiterhin nur die eigene Textbreite füllt. */
.shead__line { display: block; width: fit-content; }