/* Ergänzende Bildsprache für CoreHQ, Angebot, Beispiele und Kontakt. */

.core-flow-section {
  background: #0b2131;
  color: #f4fbff;
  overflow: hidden;
}

.core-flow-section .wrap { position: relative; }
.core-flow-heading { max-width: 850px; }
.core-flow-heading h2 { color: #f4fbff; }
.core-flow-heading p { color: #c6dbe5; }
.core-flow-heading .section-kicker { color: #80e8e9; }

.core-flow {
  overflow: hidden;
  border: 1px solid #3d6475;
  border-radius: 22px;
  background: #0d2231;
  box-shadow: 0 28px 68px rgba(3, 14, 24, .32);
}

.core-flow-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1672 / 941;
  object-fit: cover;
}

.core-flow-steps {
  gap: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #294c5e;
}

.core-flow-step,
.core-flow-center {
  border: 0;
  border-right: 1px solid #294c5e;
  border-radius: 0;
  background: #102c3b;
  color: #f4fbff;
  box-shadow: none;
  padding: 25px 28px;
}

.core-flow-step:last-child { border-right: 0; }
.core-flow-step:not(:last-child)::after { display: none; }
.core-flow-step h3 { color: #f4fbff; font-size: 24px; }
.core-flow-center h3 { color: #91eef1; font-size: 28px; }
.core-flow-step p,
.core-flow-center ul,
.core-flow-detail { color: #c7dce5; }
.core-flow-label { color: #91c9d4; }
.core-flow-number { margin-bottom: 15px; background: #1c5060; color: #b9f6f6; }
.core-flow-tags span { background: #1b4051; color: #d1edf0; }
.core-flow-caption {
  margin: 0;
  padding: 22px 28px;
  border-top: 1px solid #294c5e;
  border-radius: 0;
  background: #0c2635;
}
.core-flow-caption strong { color: #dffafa; }
.core-flow-caption span { color: #bfd4de; }

.visual-hero-art {
  min-width: 0;
  margin: 0;
  border: 1px solid rgba(142, 229, 238, .36);
  border-radius: 20px;
  overflow: hidden;
  background: #0d2231;
  box-shadow: 0 26px 70px rgba(2, 12, 21, .32);
}
.visual-hero-art img { display: block; width: 100%; height: auto; }
.visual-hero-art figcaption {
  display: grid;
  gap: 4px;
  padding: 17px 20px;
  border-top: 1px solid rgba(142, 229, 238, .2);
  background: #122e3c;
  color: #c6dce5;
  font-size: 13px;
  line-height: 1.5;
}
.visual-hero-art figcaption strong { color: #e6fcfd; font-size: 16px; }

.examples-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 48px;
  align-items: center;
}
.examples-intro-copy { min-width: 0; }
.examples-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}
.examples-preview a {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(142, 229, 238, .38);
  border-radius: 13px;
  background: #153747;
  text-decoration: none;
  box-shadow: 0 14px 32px rgba(2, 12, 21, .22);
  transition: border-color .2s, transform .2s;
}
.examples-preview a:hover { border-color: #9af1f3; transform: translateY(-2px); }
.examples-preview a:focus-visible { outline: 3px solid #9af1f3; outline-offset: 4px; }
.examples-preview img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: contain;
  object-position: center;
  background: #f4f8fa;
}
.examples-preview span {
  display: block;
  padding: 10px 11px;
  color: #e6fafa;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.4;
}
.examples-preview p {
  grid-column: 1 / -1;
  margin: 3px 0 0;
  color: #b7cbd6;
  font-size: 12px;
  line-height: 1.5;
}

.contact-hero .mini-shell {
  padding: 12px;
  border-color: rgba(142, 229, 238, .42);
  border-radius: 20px;
  background: #102a3a;
}
.contact-hero .mini-shell::after { display: none; }
.contact-hero .browser-bar {
  padding: 16px;
  border-color: #315668;
  background: #0c2232;
  color: #d0f4f6;
  font-weight: 750;
}
.contact-hero .mini-list {
  border: 1px solid #315668;
  border-radius: 0 0 12px 12px;
  background: #102a3a;
}
.contact-hero .mini-list > div { border-color: #315668; }
.contact-hero .mini-list span { color: #b9d7e0; }
.contact-hero .mini-list strong { color: #e9fbfd; }

@media (max-width: 980px) {
  .examples-intro { grid-template-columns: minmax(0, 1fr); gap: 35px; }
  .examples-preview { max-width: 760px; }
  .core-flow-steps { grid-template-columns: minmax(0, 1fr); }
  .core-flow-step { border-right: 0; border-bottom: 1px solid #294c5e; }
  .core-flow-step:last-child { border-bottom: 0; }
}
@media (max-width: 680px) {
  .core-flow { border-radius: 16px; }
  .core-flow-image { aspect-ratio: 1672 / 941; object-fit: contain; }
  .core-flow-step { padding: 22px; }
  .core-flow-caption { padding: 20px 22px; }
  .visual-hero-art { border-radius: 16px; }
  .visual-hero-art figcaption { padding: 16px; }
  .examples-preview { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .examples-preview img { height: 180px; }
  .examples-preview span { font-size: 12px; padding: 9px 11px; }
}