/* ============================================================
   STYLES-V2.CSS
   Extends styles.css with two changes:

   1.  COLUMN WIDTH  — max-width reduced to ≈ 70 characters
       (700 px at 17 px / Roboto body-text size).
       The header/hero-label/footer pin point moves from 1250 px
       to 875 px (= 700 px ÷ 0.80).

   Everything else is inherited unchanged from styles.css.
============================================================ */
@import url('styles.css');


/* ══════════════════════════════════════════════════════════════
   1. CONTENT COLUMN — ≈ 70 characters
   Override max-width from 1000 px → 700 px on every shared
   content container. Width stays at 80% on smaller viewports.
   service-descriptions is already full-width in styles.css;
   service-card padding is overridden below in the pin block.
══════════════════════════════════════════════════════════════ */
.section-content,
.quote-block,
.qualifications,
.languages,
.kontakt-inner {
  max-width: 700px;
}


/* ══════════════════════════════════════════════════════════════
   2. HEADER / HERO-LABEL / FOOTER PIN
   700 px ÷ 0.80 = 875 px — once the viewport exceeds this, the
   80 % column would exceed 700 px, so hard-pin to centre.
   The 1250 px block also re-asserts the same values so the
   1000 px rule inherited from styles.css is superseded.
══════════════════════════════════════════════════════════════ */
@media (min-width: 875px) {
  header {
    padding-left:  calc((100% - 700px) / 2);
    padding-right: calc((100% - 700px) / 2);
  }

  .hero-label {
    left: calc((100% - 700px) / 2);
  }

  /* Service cards: match the 700 px column pin */
  .service-card {
    padding-left:  calc((100% - 700px) / 2);
    padding-right: calc((100% - 700px) / 2);
  }

  .footer-content {
    padding-left:  calc((100% - 700px) / 2);
    padding-right: calc((100% - 700px) / 2);
  }

  .footer-copy {
    padding-left:  calc((100% - 700px) / 2);
    padding-right: calc((100% - 700px) / 2);
  }
}

/* Override the 1000 px pin that styles.css fires at 1250 px */
@media (min-width: 1250px) {
  header {
    padding-left:  calc((100% - 700px) / 2);
    padding-right: calc((100% - 700px) / 2);
  }

  .hero-label {
    left: calc((100% - 700px) / 2);
  }

  /* Keep service-card padding at 700 px (overrides styles.css 1000 px rule) */
  .service-card {
    padding-left:  calc((100% - 700px) / 2);
    padding-right: calc((100% - 700px) / 2);
  }

  .footer-content {
    padding-left:  calc((100% - 700px) / 2);
    padding-right: calc((100% - 700px) / 2);
  }

  .footer-copy {
    padding-left:  calc((100% - 700px) / 2);
    padding-right: calc((100% - 700px) / 2);
  }
}