/* RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  overflow-x: hidden; /* verhindert das seitliche Scrollen */
}

/* VARIABLES */
:root {
  --blue: #3f556e;
  --teal: #3a8f8a;
  --dark: #1f2933;
  --text: #334155;
  --muted: #64748b;
  --btn: #3f556e;
}

/* BASE */
body {
  font-family: 'Inter', sans-serif;
  color: var(--text);
  background: #ffffff;
}

/* ================= HEADER ================= */
.header {
  padding: 28px 96px;
}

.header-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo img {
  width: 250px;
  display: block;
}

/* BUTTONS */
.header .btn-outline {
  background-color: var(--btn);
  color: #ffffff;
  border: none;
  padding: 14px 32px;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.25s ease;
}

.header .btn-outline:hover {
  background-color: #2f7171;
}

.btn-primary {
  display: inline-block;
  margin-top: 32px;
  padding: 14px 32px;
  background: var(--btn);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}

.btn-primary:hover {
  background-color: #2f7171;
  transition: all 0.25s ease;
}

/* ================= HERO ================= */
.hero {
  padding: 120px 180px 160px;
  position: relative;   /* notwendig für overflow clipping */
  overflow: hidden;     /* schneidet Bildreste sauber ab */
}

.hero-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
}

.eyebrow {
  letter-spacing: 14px;
  font-size: 12px;
  margin-bottom: 24px;
  display: inline-block;
}

.eyebrow.muted {
  color: #3a8686;
  letter-spacing: 2px;
}

.hero h1 {
  font-size: 55px;
  line-height: 1.1;
  font-weight: 600;
  margin-bottom: 24px;
}

.highlight {
  color: var(--teal);
}

.hero p {
  max-width: 520px;
  font-size: 15px;
  line-height: 1.7;
  color: #000;
}

.hero-illustration {
  height: 420px;
  border-radius: 14px;
  overflow: hidden; /* optional, zusätzlich */
}

.hero-illustration img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* bleibt wie vorher */
  display: block;      /* entfernt kleine Inline-Spacing-Reste */
}


/* ================= PROBLEM ================= */
.problem {
  padding: 60px 180px;
}

.problem-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 60px;
}

.problem-left h2 {
  font-size: 55px;
  line-height: 1.1;
  font-weight: 600;
}

.underline {
  width: 48px;
  height: 3px;
  background: var(--teal);
  margin-top: 24px;
}

.problem-center p,
.problem-right p {
  font-size: 14px;
  line-height: 1.8;
  color: #000;
  margin-top: 24px;
}

.problem-right .result {
  max-width: 280px;
}

/* ILLUSTRATIONS */
.illustration {
  background: var(--bg-soft);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}

.illustration img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform: scale(0.88);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center center;
}

.problem .illustration img {
  transform: scale(0.9);
}

.problem .illustration:hover img {
  transform: scale(1.02);
}

/* ===== PROBLEM VERIFIED ===== */
.problem.verified .problem-inner.verified {
  align-items: center;
}

.center-text {
  display: flex;
  align-items: center;
  text-align: left;
}

.center-text p {
  max-width: 420px;
  margin: 0 auto;
}

.only-image {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Four Pillars Section ===== */
.four-pillars {
  background-color: #3a8686;
  padding: 145px 0;
}

.four-pillars__wrapper {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
}

.four-pillars__title {
  font-size: 55px;
  font-weight: 700;
  margin-bottom: 64px;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.four-pillars__grid {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.four-pillars__card {
  flex: 1;
  max-width: 260px;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  padding: 60px 35px 60px;
  transition: border-color 0.25s ease;
}

.four-pillars__card:hover {
  border-color: #0b2c4a;
}

.four-pillars__icon {
  margin-bottom: 22px;
}

.four-pillars__image {
  width: 50px;
  height: 50px;
  display: block;
  margin: 0 auto;
  object-fit: contain;
}

.four-pillars__heading {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #ffffff;
  transition: color 0.25s ease;
}

.four-pillars__card:hover .four-pillars__heading {
  color: #0b2c4a;
}

.four-pillars__text {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
}

/* ===== How PriCoh Works ===== */
.how-pricoh-works {
  background-color: #ffffff;
  padding: 60px 0;
}

.how-pricoh-works__wrapper {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
}

.how-pricoh-works__eyebrow {
  font-size: 14px;
  letter-spacing: 0.12em;
  color: #3a8686;
  font-weight: 500;
}

.how-pricoh-works__title {
  margin-top: 32px;
  font-size: 55px;
  line-height: 1.05;
  font-weight: 700;
}

.how-pricoh-works__title .teal {
  color: #3a8686;
}

.how-pricoh-works__title .dark {
  color: #3f4f68;
}

.how-pricoh-works__title .dash {
  margin-right: 8px;
}

.how-pricoh-works__line {
  width: 56px;
  height: 2px;
  background-color: #3a8686;
  margin-top: 32px;
}

.how-pricoh-works__right {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.how-pricoh-works__step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.how-pricoh-works__star {
  font-size: 18px;
  color: #3f4f68;
  line-height: 1;
  margin-top: 6px;
}

.how-pricoh-works__step h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
  color: #3f4f68;
}

.how-pricoh-works__step p {
  font-size: 16px;
  line-height: 1.6;
  color: #000;
  max-width: 520px;
}

/* ===== Precision Section ===== */
.precision-section {
  padding: 60px 0;
}

.precision-section__wrapper {
  max-width: 1180px;
  margin: 0 auto;
  padding: 20px 2px;
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 80px;

  /* WICHTIG: rechte Spalte parallel zur linken ausrichten */
  align-items: center;
}

.precision-section__stacked {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: 0.35em;
  font-weight: 600;
  color: #2f8f8b;
}

/* ===== PRECISION SECTION LIST ITEMS GETRENNT ===== */

/* Dark Section (erstes dunkles Section) */
.precision-section--dark .precision-section__list li {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 14px;
  color: #ffffff;
}

/* Light Section (helle Section) */
.precision-section--light .precision-section__list li {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 12px;
  color: #3f4f68;
}

/* Dark Section (zweites dunkles Section) */
.precision-section--dark:nth-of-type(3) .precision-section__list li {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 14px;
  color: #fff;
}

/* === Rechts in den dunklen Sections jetzt weiß === */
.precision-section--dark .precision-section__right p,
.precision-section--dark .precision-section__right .precision-section__footer {
  color: #fff;
}

.precision-section__footer {
  font-size: 16px;
  max-width: 560px;
}

/* Dark Theme */
.precision-section--dark {
  background-color: #3f526a;
}

/* Light Theme */
.precision-section--light {
  background-color: #ffffff;
}

.precision-section--light .precision-section__line {
  background-color: rgba(0,0,0,0.2);
}

.precision-section--light .precision-section__stacked {
  color: #2f8f8b;
}

.precision-section--light .precision-section__list li {
  color: #fff;
}

.precision-section--light .precision-section__footer {
  color: #5f6f86;
}

.precision-section--dark .precision-section__list li {
  color: #ffffff !important;
}

.precision-section--light .precision-section__list li {
  color: #000000 !important;
}


.precision-section--light .precision-section__right p {
  line-height: 1.8;
}

/* Letzte Dark Precision Section (die ohne Liste) */
.precision-section--dark:last-of-type .precision-section__right p {
  line-height: 2.1;
    font-size: 16px;
}


/* ===== PRICOH FOOTER ===== */
.pricoh-footer {
  background: #3f526a;
  padding: 60px 80px 0;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
}

.pricoh-footer-topline {
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
}

.pricoh-footer-topline span {
  width: 92%;
  max-width: 1400px;
  height: 1px;
  background: #3a8f8b; 
}

.pricoh-footer-inner {
  max-width: 1220px;     
  margin: 0 auto;        
  padding: 0 0px 60px;   
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}


/* LEFT */
.pricoh-left {
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}

.pricoh-logo-img img {
  width: 250px;
  max-width: 300px;
  display: block;
  margin-bottom: 0;
}

/* SOCIAL ICONS */
.pricoh-socials {
  display: flex;
  gap: 22px;
  margin: 28px 0;
}

.pricoh-socials a {
  color: #ffffff;
  font-size: 18px;
  opacity: 0.85;
  transition: all 0.25s ease;
  text-decoration: none;
}

.pricoh-socials a:hover {
  color: #3a8f8b;
  opacity: 1;
}

.pricoh-copy {
  font-size: 14px;
  opacity: 0.55;
}

/* RIGHT */
.pricoh-right {
  max-width: 520px;
  margin-top: 60px;
}

.pricoh-headline {
  font-size: 22px;
  font-weight: 400;
  opacity: 0.75;
  margin-bottom: 40px;
}

.pricoh-form {
  display: flex;
  align-items: center;
  gap: 24px;
}

.pricoh-form input {
  flex: 1;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding: 12px 0;
  font-size: 16px;
  color: white;
}

.pricoh-form input::placeholder {
  color: rgba(255,255,255,0.6);
}

.pricoh-form input:focus {
  outline: none;
  border-bottom-color: #ffffff;
}

.pricoh-form button {
  background: #3a8f8b;
  border: none;
  color: white;
  padding: 16px 36px;
  border-radius: 999px;
  border-top-right-radius: 0; /* nur diese Ecke eckig */
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 14px;
  cursor: pointer;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease;
}

/* Footer Button Hover: Text + Pfeil dunkel */
.pricoh-form button:hover {
  background-color: #ffffff;
  color: var(--btn);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}


.pricoh-form button:active {
  transform: translateY(-1px);
}

.pricoh-form button:hover svg path {
  stroke: var(--btn);
}

/* FOOTER WHITE FULL-WIDTH STRIP */
.pricoh-footer-bottom {
  background: #ffffff;
  padding: 32px 20px;
  text-align: center;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

.pricoh-footer-bottom a,
.pricoh-footer-bottom span {
  font-size: 14px;
  color: #9aa3ad;
  text-decoration: none;
  font-weight: 400;
}

.pricoh-footer-bottom span {
  margin: 0 8px;
}

.pricoh-footer-bottom a:hover {
  color: #3a8f8b;
}

/* RESPONSIVE */

/* ================= TABLET (iPad) ================= */
@media (min-width: 768px) and (max-width: 1024px) {

  /* ===== GLOBAL ===== */
  .header {
    padding: 24px 40px;
  }

  .hero {
    padding: 100px 60px 120px;
  }

  .problem,
  .how-pricoh-works,
  .precision-section {
    padding-left: 40px;
    padding-right: 40px;
  }

  /* ===== HERO ===== */
  .hero-inner {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
  }

  .hero h1 {
    font-size: 44px;
  }

  .hero p {
    font-size: 14px;
  }

  .hero-illustration {
    height: 360px;
  }

  /* ===== PROBLEM SECTIONS ===== */
  .problem-inner {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
  }

  .problem-left h2 {
    font-size: 44px;
  }

  .problem-center p,
  .problem-right p {
    font-size: 13.5px;
  }

  /* Verified Problem (Center Text) */
  .center-text p {
    max-width: 360px;
  }

  /* ===== FOUR PILLARS ===== */
  .four-pillars {
    padding: 120px 40px;
  }

  .four-pillars__title {
    font-size: 44px;
    margin-bottom: 56px;
  }

  .four-pillars__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 56px; /* row / column */
    justify-items: center;
  }

  .four-pillars__card {
    width: 100%;
    max-width: none;
    padding: 64px 48px;
    border-width: 1.5px;
  }

  .four-pillars__image {
    width: 54px;
    height: 54px;
    margin-bottom: 26px;
  }

  .four-pillars__heading {
    font-size: 23px;
    margin-bottom: 22px;
  }

  .four-pillars__text {
    font-size: 15px;
    line-height: 1.65;
  }

  /* ===== HOW PRICOH WORKS ===== */
  .how-pricoh-works__wrapper {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
  }

  .how-pricoh-works__title {
    font-size: 44px;
  }

  .how-pricoh-works__step h3 {
    font-size: 20px;
  }

  .how-pricoh-works__step p {
    font-size: 14.5px;
  }

  /* ===== PRECISION SECTIONS ===== */
  .precision-section__wrapper {
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
  }

  .precision-section__stacked {
    font-size: 24px;
    letter-spacing: 0.28em;
  }

  .precision-section__right p {
    font-size: 14.5px;
  }

  .precision-section__list li {
    font-size: 14.5px;
  }

  /* Footer spacing on tablet */
  .precision-section__footer {
    font-size: 15px;
  }

  /* ===== FOOTER ===== */
  .pricoh-footer {
    padding: 60px 40px 0;
  }

  .pricoh-footer-inner {
    gap: 40px;
  }

  .pricoh-right {
    margin-top: 40px;
  }
}


@media (max-width: 1000px) {
  .pricoh-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 60px;
  }

  .pricoh-form {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .pricoh-form input {
    width: 100%;
  }
}

/* ================= FEINABSTÄNDE PRECISION SECTIONS ================= */

/* 1️⃣ Helle Section: mehr Abstand zwischen Text (p) und Liste */
.precision-section--light .precision-section__right > p {
  margin-bottom: 32px;
}

/* 2️⃣ Letzte dunkle Section: Footer-Text weiter nach unten */
.precision-section--dark:last-of-type .precision-section__footer {
  margin-top: 40px;
}


@media (max-width: 600px) {
  .hero-inner,
  .problem-inner,
  .how-pricoh-works__wrapper,
  .precision-section__wrapper {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .four-pillars__grid {
    flex-direction: column;
    gap: 40px;
  }

  .header {
    padding: 20px;
  }

  .hero {
    padding: 80px 20px 100px;
  }

  .problem {
    padding: 40px 20px;
  }

  .how-pricoh-works {
    padding: 40px 20px;
  }

  .precision-section {
    padding: 40px 20px;
  }

  .pricoh-footer {
    padding: 40px 20px 0;
  }
		

  .pricoh-footer-right {
    margin-top: 40px;
  }

  .four-pillars__card {
    max-width: 100%;
  }
	
}

@media (max-width: 600px) {
	
	 .header .btn-outline {
    display: none;
  }

  
  .precision-section--light .precision-section__list {
    padding-left: 0;
    margin: 0 auto;
    max-width: 320px;
  }

  .precision-section--light .precision-section__list li {
    padding-left: 12px;
  }

	
	
	  .precision-section--light .precision-section__list {
    padding-left: 0;
    margin: 0 auto;
    max-width: 320px;
  }
	
	
	
	  .precision-section__right .precision-section__list {
    padding-left: 0;
    margin: 0 auto;
    max-width: 320px;
  }

  .precision-section__right .precision-section__list li {
    padding-left: 1px;
  }

	
	
	  .precision-section__right .precision-section__list {
    padding-left: 0;
    margin: 0 auto;
    max-width: 320px;
  }
}

@media (max-width: 600px) {
  /* Dunkle Section Liste mittig */
  .precision-section--dark .precision-section__right {
    padding: 0 20px; /* Abstand zu den Rändern */
    text-align: center; /* Zentriert Text und Listen */
  }

  .precision-section--dark .precision-section__right ul {
    display: inline-block; /* block bleibt, aber zentriert */
    text-align: left; /* Listenpunkte bleiben linksbündig */
   
    margin: 0 auto 0; /* mittig setzen */
  }
}