/* =============================================================================
   INLIFT – Ergänzungen zum Webflow-Export
   -----------------------------------------------------------------------------
   Alles, was über den ursprünglichen Webflow-Export hinausgeht und auf mehreren
   Seiten gebraucht wird. Der Export selbst (inlift-media.webflow.css) bleibt
   unangetastet, damit ein erneuter Webflow-Export diese Regeln nicht überschreibt.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Überschriften-Hierarchie
   Sektionstitel sind jetzt <h2> statt <h3> (eine H1 pro Seite, darunter H2 für
   Abschnitte). Webflow definiert Basiswerte nur für h1 und h3 – h2 bekommt hier
   exakt dieselben Abstände wie h3, damit sich optisch nichts verschiebt.
   -------------------------------------------------------------------------- */
h2 {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
}

/* -----------------------------------------------------------------------------
   2. Zusatzleistungen auf der Startseite
   Das Leistungsraster bleibt bewusst bei den VIER Kernleistungen – sieben Blöcke
   nebeneinander wirkten überladen und kippten die Balance zum Foto daneben.
   Video, Webdesign und KI stehen darunter als leichte Zeile: sichtbar für
   Besucher und Suchmaschinen, ohne das Raster zu sprengen. Die ausführliche
   Beschreibung steht auf /ueber#koennen, dorthin verlinkt die Zeile auch.
   -------------------------------------------------------------------------- */
.services-more {
  border-top: 1px solid #ffffff1a;
  margin-top: 44px;
  padding-top: 30px;
}
.services-more-label {
  color: var(--red, #8b1e2d);
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 700;
}
.services-more-list {
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}
.services-more-list a {
  color: #fff;
  letter-spacing: .3px;
  border: 1px solid #ffffff26;
  border-radius: 100px;
  padding: 9px 18px;
  font-size: 15px;
  font-weight: 300;
  text-decoration: none;
  display: inline-block;
  transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.services-more-list a:hover {
  background: #ffffff0f;
  border-color: #ffffff5e;
  transform: translateY(-2px);
}
@media screen and (max-width: 767px) {
  .services-more {
    margin-top: 34px;
    padding-top: 24px;
  }
  .services-more-list a {
    font-size: 14px;
    padding: 8px 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .services-more-list a { transition: none; }
  .services-more-list a:hover { transform: none; }
}

/* -----------------------------------------------------------------------------
   3. Prozess-Abschnitt „So arbeiten wir" (Startseite)
   -------------------------------------------------------------------------- */
.pr4-grid {
  grid-column-gap: 22px;
  grid-row-gap: 22px;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 56px;
  display: grid;
}
.pr4-card {
  background: #ffffff08;
  border: 1px solid #ffffff14;
  border-radius: 22px;
  padding: 32px 26px 30px;
  transition: transform .25s ease, border-color .25s ease, background-color .25s ease;
}
.pr4-card:hover {
  background: #ffffff0d;
  border-color: #ffffff33;
  transform: translateY(-4px);
}
.pr4-num {
  color: #8b1e2d;
  letter-spacing: 3px;
  margin-bottom: 16px;
  font-size: 15px;
  font-weight: 700;
  display: block;
}
.pr4-title {
  color: #fff;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
}
.pr4-text {
  color: #ffffffb3;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
}
@media screen and (max-width: 991px) {
  .pr4-grid { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 479px) {
  .pr4-grid { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   4. Kompetenz-Block „Was wir können" (/ueber)
   -------------------------------------------------------------------------- */
.cap-grid {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  grid-template-columns: 1fr 1fr;
  margin-top: 44px;
  display: grid;
}
.cap-item {
  grid-column-gap: 16px;
  background: #ffffff08;
  border: 1px solid #ffffff14;
  border-radius: 18px;
  align-items: flex-start;
  padding: 24px;
  display: flex;
}
.cap-ico {
  flex: none;
  width: 34px;
  height: 34px;
  display: block;
}
.cap-name {
  color: #fff;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
.cap-text {
  color: #ffffffb3;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
}
@media screen and (max-width: 767px) {
  .cap-grid { grid-template-columns: 1fr; }
}

/* -----------------------------------------------------------------------------
   5. Auswahlfeld im Kontaktformular („Worum geht es?")
   Optik identisch zu .text-field-form, nur mit eigenem Pfeil statt dem
   System-Dropdown (das im dunklen Design nicht passt).
   -------------------------------------------------------------------------- */
select.text-field-form {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  background-size: 18px;
  width: 100%;
  padding-right: 26px;
}
select.text-field-form option {
  background-color: #171717;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .pr4-card { transition: none; }
  .pr4-card:hover { transform: none; }
}