@charset "UTF-8";
/* =====================================================================
   Pappe & Papier — page stylesheet
   Mobile design canvas 430px  ·  Desktop design canvas 1536px
   Every desktop value is calc(N * var(--s)) with N = raw px from design.

   Die Masse sind bewusst aus schrott.css und reifen.css uebernommen, nicht
   neu erfunden: Seitenabstand 75, Abschnittsabstand 110, H1 66, H2 41,
   Karten 150 hoch mit 8px Radius. Wer zwischen den drei Leistungsseiten
   wechselt, soll keinen Bruch sehen.

   Bildausschnitte: jedes Foto hat eine eigene object-position, und zwar
   getrennt fuer Mobil und Desktop. Die Flaechen haben dort sehr
   unterschiedliche Seitenverhaeltnisse (Hero quer-flach auf dem Telefon,
   hochkant-breit am Rechner), ein gemeinsamer Wert wuerde auf einer der
   beiden Seiten das Motiv anschneiden.
   ===================================================================== */

.pp-nl { display: none; }

/* ========================= 1 HERO ================================= */
.pp-hero {
  position: relative;
  background: #f2f0ed;
  overflow: hidden;
}

.pp-hero__media { position: relative; height: 250px; }
.pp-hero__media img {
  width: 100%; height: 250px;
  object-fit: cover; display: block;
  /* Ballenstapel liegt rechts der Mitte, unten ist nasser Boden ohne
     Motiv - deshalb der Ausschnitt leicht nach oben verschoben. */
  object-position: 55% 42%;
}
.pp-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(242, 240, 237, 0) 55%, #f2f0ed 98%);
}

.pp-hero__body { position: relative; z-index: 1; padding: 4px var(--gx) 44px; }

.pp-crumb {
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: #5a5751;
  text-transform: none;
}
.pp-crumb a { color: #5a5751; }
.pp-crumb a:hover { color: var(--o); }
.pp-crumb strong { color: var(--ink-2); font-weight: 700; }

.pp-hero__h1 {
  margin-top: 18px;
  font-size: 40px;
  line-height: 1.12;
  letter-spacing: .5px;
  color: var(--ink-2);
}
.pp-hero__h1 .accent { color: var(--o); }

.pp-hero__lead {
  margin-top: 18px;
  font-size: 14.5px;
  line-height: 1.7;
  font-weight: 500;
  color: var(--tx);
}

/* Die drei Nutzenpunkte aus der Vorlage. */
.pp-usp {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 14px 24px;
}
.pp-usp li { display: flex; align-items: center; gap: 10px; }
.pp-usp svg { width: 28px; height: 28px; flex: none; }
.pp-usp span {
  font-size: 12.5px; line-height: 1.35; font-weight: 600; color: var(--tx-2);
}

.pp-hero__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.pp-hero__cta {
  width: 100%;
  gap: 14px;
  padding: 17px 0;
  border-radius: 6px;
  font-size: 13px;
  letter-spacing: .8px;
}
/* Zweitknopf nur als Kontur, damit er den Hauptknopf nicht ueberstimmt. */
.pp-hero__cta--ghost {
  background: transparent;
  border: 1.5px solid #cfccc7;
  color: var(--ink-2);
}
.pp-hero__cta--ghost:hover { border-color: var(--o); color: var(--o); }

/* ======================= 2 WIR NEHMEN AN ========================== */
.pp-mat {
  background: #f2f0ed;
  border-top: 1px solid #e6e3df;
  padding: 56px 0 0;
}
.pp-mat__head { padding: 0 var(--gx); }
.pp-mat__h2 {
  font-size: 29px;
  line-height: 1.2;
  letter-spacing: .5px;
  color: var(--ink-2);
}
.pp-mat__rule {
  display: block;
  width: 56px; height: 4px;
  background: var(--o);
  margin-top: 14px;
}

.pp-mat__grid { gap: 14px; padding: 28px var(--gx) 8px; }
.pp-card {
  flex: none;
  width: 250px;
  background: var(--d-2);
  border-radius: 8px;
  overflow: hidden;
}
/* opacity .9 auf dunklem Grund: dieselbe Abdunklung wie bei Reifen und
   Schrott, damit die weisse Beschriftung darunter sicher traegt. */
.pp-card__img {
  width: 100%; height: 130px;
  object-fit: cover; display: block;
  opacity: .9;
}
.pp-card__body { padding: 14px 22px 28px; }
.pp-card__top { display: flex; align-items: center; gap: 10px; }
.pp-card__icon { width: 30px; height: 26px; flex: none; }
.pp-card__title {
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: .5px;
  color: #ffffff;
}
.pp-card__txt {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 500;
  color: #c9c9c9;
  /* Zwei Zeilen reserviert - sonst stehen die Karten mit ein- und
     zweizeiligem Text nebeneinander aus dem Takt. Gilt so auch im
     Desktop-Block. */
  min-height: 3.1em;
}

/* Bildausschnitte je Karte, Mobil. Flaeche 250x130 (Verhaeltnis 1,92),
   Quellen liegen bei 2,0 - es wird also kaum beschnitten.            */
.pp-card--wellpappe    .pp-card__img { object-position: 50% 55%; }
.pp-card--kartonagen   .pp-card__img { object-position: 50% 58%; }
.pp-card--papier       .pp-card__img { object-position: 42% 50%; }
.pp-card--papiersaecke .pp-card__img { object-position: 48% 52%; }
.pp-card--mischpapier  .pp-card__img { object-position: 52% 48%; }

/* ========================= 3 WICHTIG ============================== */
.pp-hinweis {
  position: relative; overflow: hidden;
  margin: 28px var(--gx) 0;
  padding: 24px 22px 26px;
  background: var(--d-2);
  border-radius: 8px;
  display: flex; gap: 18px; align-items: flex-start;
}
.pp-hinweis__icon { width: 46px; height: 46px; flex: none; }
.pp-hinweis__label {
  font-size: 12px; letter-spacing: 1.4px; font-weight: 700;
  text-transform: uppercase; color: var(--o);
}
.pp-hinweis__txt {
  margin-top: 10px;
  font-size: 13px; line-height: 1.65; font-weight: 500; color: #b4b2ae;
}
/* Wasserzeichen ist reine Dekoration und braucht Platz, den es auf dem
   Telefon nicht gibt. */
.pp-hinweis__mark { display: none; }

/* ======================== 4 VORTEILE ============================== */
.pp-nutzen {
  margin: 16px var(--gx) 56px;
  padding: 28px 22px 30px;
  background: var(--d-2);
  border-radius: 8px;
}
.pp-nutzen__h2 {
  font-size: 24px; letter-spacing: .5px; color: #ffffff; line-height: 1.18;
}
.pp-nutzen__h2 .accent { color: var(--o); }
.pp-nutzen__grid {
  margin-top: 24px;
  display: grid; grid-template-columns: 1fr; gap: 24px;
}
.pp-nutzen__top { display: flex; align-items: center; gap: 12px; }
.pp-nutzen__icon { width: 30px; height: 30px; flex: none; }
.pp-nutzen__t {
  font-size: 13px; letter-spacing: 1px; font-weight: 700;
  text-transform: uppercase; color: #ffffff;
}
.pp-nutzen__txt {
  margin-top: 10px;
  font-size: 13px; line-height: 1.6; font-weight: 500; color: #c9c9c9;
}

/* ========================= 5 ABLAUF =============================== */
.pp-ablauf { position: relative; background: #f2f0ed; padding: 56px 0 60px; overflow: hidden; }
.pp-ablauf__head { padding: 0 var(--gx); }
.pp-ablauf__h2 {
  font-size: 29px; line-height: 1.2; letter-spacing: .5px; color: var(--ink-2);
}
.pp-ablauf__h2 .accent { color: var(--o); }

.pp-steps {
  margin-top: 28px;
  padding: 0 var(--gx);
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px 14px;
}
.pp-step__ring {
  width: 62px; height: 62px; border-radius: 50%;
  border: 1.6px solid #d5d2cd;
  display: flex; align-items: center; justify-content: center;
}
.pp-step__ring svg { width: 28px; height: 28px; }
.pp-step__t {
  margin-top: 14px;
  font-size: 13px; letter-spacing: 1px; font-weight: 700;
  text-transform: uppercase; color: var(--ink-2);
}
.pp-step__txt {
  margin-top: 8px;
  font-size: 13px; line-height: 1.55; font-weight: 500; color: var(--tx-3);
}
/* Die gestrichelten Pfeile verbinden die Schritte nur in der einreihigen
   Desktop-Anordnung. Im zweispaltigen Mobilraster zeigten sie ins Leere. */
.pp-steps__arrow { display: none; }

/* Auf dem Telefon laeuft das Verwertungsbild als Band unter den Schritten
   statt daneben - eigener Ausschnitt, weil die Flaeche viel breiter und
   flacher ist als am Rechner. */
.pp-ablauf__media { position: relative; margin: 32px var(--gx) 0; border-radius: 8px; overflow: hidden; }
.pp-ablauf__media img {
  width: 100%; height: 190px;
  object-fit: cover; display: block;
  object-position: 55% 52%;
}
.pp-ablauf__fade { display: none; }

/* ========================= 6 ANFRAGE ============================== */
.pp-anfrage { background: var(--sand); padding: 56px 0 60px; }
.pp-anfrage__inner { padding: 0 var(--gx); }
.pp-anfrage__h2 {
  font-size: 29px; line-height: 1.2; letter-spacing: .5px; color: var(--ink-2);
}
.pp-anfrage__h2 .accent { color: var(--o); }
.pp-anfrage__lead {
  margin-top: 14px;
  font-size: 14px; line-height: 1.7; font-weight: 500; color: var(--tx);
}

.pp-form { margin-top: 26px; display: grid; grid-template-columns: 1fr; gap: 16px; }
.pp-form .fld--wide { grid-column: 1 / -1; }
.pp-form textarea { min-height: 108px; resize: vertical; }
.pp-form__btn { width: 100%; gap: 14px; padding: 17px 0; border-radius: 6px; font-size: 13px; letter-spacing: .8px; }

/* ===================================================================
   DESKTOP
   =================================================================== */
@media (min-width: 1024px) {
  .pp-nl { display: inline; }

  /* ---- Hero ---- */
  .pp-hero__media {
    position: absolute; right: 0; top: 0;
    width: calc(888 * var(--s));
    height: 100%;
  }
  .pp-hero__media img {
    height: 100%;
    /* Am Rechner ist die Flaeche deutlich hoeher als breit im Vergleich
       zur Quelle. Weiter nach rechts, damit die Ballenreihe traegt und
       nicht der leere Himmel links. */
    object-position: 62% 46%;
  }
  .pp-hero__veil {
    background: linear-gradient(90deg, #f2f0ed 0%, rgba(242, 240, 237, 0) 42%);
  }
  .pp-hero__body {
    width: calc(635 * var(--s));
    padding: calc(40 * var(--s)) 0 calc(110 * var(--s)) calc(75 * var(--s));
  }
  .pp-crumb { gap: calc(10 * var(--s)); font-size: max(12px, calc(13 * var(--s))); }
  .pp-hero__h1 { margin-top: calc(60 * var(--s)); font-size: calc(66 * var(--s)); line-height: 1.1; }
  .pp-hero__lead {
    margin-top: calc(36 * var(--s));
    font-size: max(13px, calc(15.5 * var(--s)));
    line-height: 1.75;
    width: calc(470 * var(--s));
  }
  .pp-usp { margin-top: calc(38 * var(--s)); gap: calc(34 * var(--s)); flex-wrap: nowrap; }
  .pp-usp svg { width: calc(34 * var(--s)); height: calc(34 * var(--s)); }
  .pp-usp span { font-size: max(11px, calc(13 * var(--s))); }
  .pp-hero__actions { flex-direction: row; align-items: center; margin-top: calc(52 * var(--s)); gap: calc(26 * var(--s)); }
  .pp-hero__cta {
    width: auto;
    padding: calc(17 * var(--s)) calc(28 * var(--s));
    font-size: max(11px, calc(13 * var(--s)));
  }

  /* ---- Wir nehmen an ---- */
  .pp-mat { padding: calc(110 * var(--s)) 0 0; }
  .pp-mat__head { padding: 0 calc(75 * var(--s)); }
  .pp-mat__h2 { font-size: calc(41 * var(--s)); }
  .pp-mat__rule { width: calc(66 * var(--s)); height: calc(4 * var(--s)); margin-top: calc(16 * var(--s)); }
  .pp-mat__grid {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: calc(20 * var(--s));
    padding: 0 calc(75 * var(--s));
    margin-top: calc(60 * var(--s));
    overflow: visible;
  }
  .pp-card { width: auto; border-radius: calc(8 * var(--s)); }
  .pp-card__img { height: calc(150 * var(--s)); }
  .pp-card__body { padding: calc(14 * var(--s)) calc(26 * var(--s)) calc(34 * var(--s)); }
  .pp-card__icon { width: calc(34 * var(--s)); height: calc(30 * var(--s)); }
  .pp-card__title { font-size: calc(22 * var(--s)); }
  .pp-card__txt {
    margin-top: calc(12 * var(--s));
    font-size: max(12px, calc(14 * var(--s)));
    line-height: 1.6;
    min-height: 3.2em;
  }

  /* Ausschnitte am Rechner. Die Karte ist hier flacher (Verhaeltnis rund
     1,6 statt 1,92), es wird also seitlich mehr weggeschnitten.        */
  .pp-card--wellpappe    .pp-card__img { object-position: 50% 58%; }
  .pp-card--kartonagen   .pp-card__img { object-position: 55% 60%; }
  .pp-card--papier       .pp-card__img { object-position: 40% 50%; }
  .pp-card--papiersaecke .pp-card__img { object-position: 48% 55%; }
  .pp-card--mischpapier  .pp-card__img { object-position: 55% 45%; }

  /* ---- Wichtig ---- */
  .pp-hinweis {
    margin: calc(60 * var(--s)) calc(75 * var(--s)) 0;
    padding: calc(32 * var(--s)) calc(40 * var(--s));
    gap: calc(32 * var(--s));
    align-items: center;
    border-radius: calc(8 * var(--s));
  }
  .pp-hinweis__icon { width: calc(70 * var(--s)); height: calc(70 * var(--s)); }
  .pp-hinweis__label { font-size: max(10px, calc(12 * var(--s))); }
  .pp-hinweis__txt {
    margin-top: calc(10 * var(--s));
    font-size: max(12px, calc(14 * var(--s)));
    width: calc(820 * var(--s));
  }
  .pp-hinweis__mark {
    display: block;
    position: absolute;
    right: calc(-24 * var(--s)); top: 50%;
    transform: translateY(-50%);
    width: calc(240 * var(--s)); height: auto;
    opacity: .06;
    pointer-events: none;
  }

  /* ---- Vorteile ---- */
  .pp-nutzen {
    margin: calc(20 * var(--s)) calc(75 * var(--s)) calc(90 * var(--s));
    padding: calc(40 * var(--s)) calc(40 * var(--s)) calc(44 * var(--s));
    border-radius: calc(8 * var(--s));
  }
  .pp-nutzen__h2 { font-size: calc(30 * var(--s)); }
  .pp-nutzen__grid { margin-top: calc(34 * var(--s)); grid-template-columns: repeat(4, 1fr); gap: 0; }
  /* Trennlinien nur zwischen den Spalten, aussen keine. */
  .pp-nutzen__item { padding: 0 calc(30 * var(--s)); }
  .pp-nutzen__item + .pp-nutzen__item { border-left: 1px solid var(--line-dark); }
  .pp-nutzen__item:first-child { padding-left: 0; }
  .pp-nutzen__item:last-child { padding-right: 0; }
  .pp-nutzen__icon { width: calc(32 * var(--s)); height: calc(32 * var(--s)); }
  .pp-nutzen__t { font-size: max(10.5px, calc(13 * var(--s))); }
  .pp-nutzen__txt { margin-top: calc(12 * var(--s)); font-size: max(11px, calc(13.5 * var(--s))); }

  /* ---- Ablauf ---- */
  .pp-ablauf { padding: calc(110 * var(--s)) 0 calc(110 * var(--s)); }
  .pp-ablauf__head { padding: 0 calc(75 * var(--s)); }
  .pp-ablauf__h2 { font-size: calc(41 * var(--s)); }
  .pp-steps {
    margin-top: calc(60 * var(--s));
    padding: 0 calc(75 * var(--s));
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    width: calc(1010 * var(--s));
    position: relative; z-index: 1;
  }
  .pp-step { padding-right: calc(28 * var(--s)); position: relative; }
  .pp-step__ring { width: calc(80 * var(--s)); height: calc(80 * var(--s)); }
  .pp-step__ring svg { width: calc(34 * var(--s)); height: calc(34 * var(--s)); }
  .pp-step__t { margin-top: calc(20 * var(--s)); font-size: max(10.5px, calc(13 * var(--s))); }
  .pp-step__txt { margin-top: calc(10 * var(--s)); font-size: max(11px, calc(13.5 * var(--s))); width: calc(160 * var(--s)); }
  /* Pfeil sitzt auf Hoehe der Kreismitte, zwischen zwei Schritten. */
  .pp-steps__arrow {
    display: block;
    position: absolute;
    top: calc(40 * var(--s));
    left: calc(92 * var(--s));
    transform: translateY(-50%);
    width: calc(80 * var(--s)); height: calc(10 * var(--s));
  }
  .pp-step:last-child .pp-steps__arrow { display: none; }

  /* Das Bild fuellt die rechte Haelfte des Abschnitts ueber die volle
     Hoehe - vorher sass es als 250px hoher Streifen mittig darin und
     liess oben wie unten graue Flaeche stehen. top/bottom statt height,
     damit es jeder Abschnittshoehe folgt. */
  .pp-ablauf__media {
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: calc(560 * var(--s)); height: auto;
    margin: 0; border-radius: 0;
  }
  .pp-ablauf__media img {
    height: 100%;
    /* Flaeche 440x250 (1,76) gegen Quelle 2,0 - der Haufen sitzt rechts
       der Mitte, deshalb der Ausschnitt dorthin.                       */
    object-position: 58% 50%;
  }
  /* Weiche Kante links, damit das Foto nicht hart gegen den Text stoesst. */
  .pp-ablauf__fade {
    display: block;
    position: absolute; inset: 0;
    background: linear-gradient(90deg, #f2f0ed 0%, rgba(242, 240, 237, 0) 38%);
  }

  /* ---- Anfrage ---- */
  .pp-anfrage { padding: calc(110 * var(--s)) 0 calc(110 * var(--s)); }
  .pp-anfrage__inner {
    padding: 0 calc(75 * var(--s));
    display: grid;
    grid-template-columns: calc(360 * var(--s)) 1fr;
    gap: calc(60 * var(--s));
    align-items: start;
  }
  .pp-anfrage__h2 { font-size: calc(41 * var(--s)); }
  .pp-anfrage__lead { margin-top: calc(20 * var(--s)); font-size: max(12.5px, calc(15 * var(--s))); line-height: 1.75; }
  .pp-form {
    margin-top: 0;
    grid-template-columns: 1fr 1fr;
    gap: calc(20 * var(--s)) calc(24 * var(--s));
  }
  .pp-form textarea { min-height: calc(130 * var(--s)); }
  /* Upload links, Absenden rechts - gemeinsame Schlusszeile wie in der
     Vorlage. align-items:end haelt den Knopf auf der Unterkante.       */
  .pp-form__send { display: flex; justify-content: flex-end; align-items: flex-end; }
  .pp-form__btn { width: auto; padding: calc(16 * var(--s)) calc(32 * var(--s)); font-size: max(11px, calc(13 * var(--s))); }
}