/* ---------------------------------------------
   Freshpoint – Landingpage "Automat aufstellen"

   Only automat-aufstellen.html loads this file, on top of style.css.
--------------------------------------------- */

/* Same two plates the homepage alternates between — the dark texture from
   .trouble/.contact and the light paper from .rent/.gallery-section — with the
   torn strips in between. Nothing here restyles the shared chrome; the buttons,
   tears, kickers, gallery cards and the stacked paper form are the homepage's. */

.lp-hero {
  position: relative;
  background-image:
    linear-gradient(90deg, rgba(6, 14, 46, 0.9) 30%, rgba(6, 14, 46, 0.1) 100%),
    url("../images/HeroAutomat.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: clamp(100px, 10vh, 130px) 32px clamp(88px, 11vh, 120px);
  overflow: hidden;
  /* the illustration is far wider than it is tall, so unlike .trouble it can't
     be pinned into a corner — it gets a column of its own and the copy keeps
     the rest. Both children are capped, and the pair is centred as a unit. */
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(0, 540px);
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 4vw, 60px);
}

/* mirrored so the delivery cart heads toward the copy, not off the page */
.lp-hero-illustration {
  order: 2;
  height: 100%;
  width: auto;
  transform: scaleX(-1);
  pointer-events: none;
  filter: drop-shadow(0 24px 44px rgba(6, 14, 46, 0.4));
}

.lp-hero-inner {
  order: 1;
  position: relative;
  z-index: 2;
}

.lp-inner {
  position: relative;
  z-index: 2;
  max-width: 1180px;
  margin: 0 auto;
}

/* the dark-plate counterpart to .gallery-kicker, which carries the light ones */
.lp-kicker {
  font-family: var(--font-script);
  font-size: 2rem;
  line-height: 1;
  color: var(--mustard-bright);
  margin-bottom: 8px;
}

.lp-hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 4.3vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.25);
}

.lp-hero-text {
  margin-top: 22px;
  max-width: 52ch;
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
}

.lp-hero-actions,
.lp-actions {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* bounded like .trouble-subtitle, so the row wraps instead of running under
   the illustration pinned to the right */
.lp-hero-facts {
  margin-top: 30px;
  max-width: 620px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  list-style: none;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.72);
}

/* the small blue tick in front of each fact, drawn rather than an icon file */
.lp-hero-facts li::before {
  content: "✓";
  margin-right: 8px;
  font-weight: 700;
  color: var(--mustard-bright);
}

/* --- the two section plates --- */

.lp-light {
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.15)),
    url("../images/backgroundWhite.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 96px 32px;
  /* the tears hang past the top and bottom edges, so only the sides clip */
  overflow-x: clip;
  overflow-y: visible;
}

.lp-dark,
.lp-form-section {
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(6, 14, 46, 0.32), rgba(6, 14, 46, 0.5)),
    url("../images/background.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 96px 32px;
  overflow: hidden;
}

.lp-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}

.lp-light .lp-h2 {
  color: var(--blue);
}

.lp-dark .lp-h2,
.lp-form-section .lp-h2 {
  color: #fff;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.25);
}

/* second heading inside the same plate — needs the air a new section would
   otherwise have given it */
.lp-h2-sub {
  margin-top: 88px;
}

.lp-lead {
  margin-top: 18px;
  max-width: 62ch;
  font-size: 1.02rem;
  line-height: 1.65;
}

.lp-light .lp-lead {
  color: rgba(13, 85, 208, 0.86);
}

.lp-dark .lp-lead,
.lp-form-section .lp-lead {
  color: rgba(255, 255, 255, 0.86);
}

/* --- cards --- */

/* section intro beside its illustration — the cards below still span the full
   width, so only this block is split */
.lp-intro-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}

.lp-intro-illustration {
  width: 100%;
  height: auto;
}

/* --- #kosten -------------------------------------------------------------
   The plate carries two benefit groups. The illustration stays beside the
   intro copy only (the shared .lp-intro-split), so the lists keep the full
   column width and the second group reads as its own block rather than one
   long stack squeezed next to a picture. */

/* the copy is two short lists, not a wall of text — it reads better on a
   narrower measure and at a smaller size than the other plates.
   56vw keeps the column clear of the illustration pinned to the right; the
   two never overlap because the artwork is capped at 19vw plus its offset. */
#kosten .lp-inner {
  max-width: min(960px, 56vw);
  /* left-anchored instead of centred — the artwork owns the right half */
  margin-left: clamp(24px, 5vw, 110px);
  margin-right: auto;
}

#kosten .lp-h2 {
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
}

#kosten .lp-lead {
  font-size: 0.92rem;
  line-height: 1.6;
}

#kosten .lp-benefits li {
  font-size: 0.9rem;
  line-height: 1.58;
}

/* pinned to the plate's right edge and centred over its full height — out of
   the text flow, so nothing can run across it */
.kosten-illustration {
  position: absolute;
  right: clamp(30px, 4.5vw, 100px);
  top: 50%;
  transform: translateY(-50%);
  width: clamp(200px, 25vw, 490px);
  height: auto;
  z-index: 1;
  pointer-events: none;
}

/* both groups share one two-column rhythm, so the four items of the second
   list line up under the two of the first instead of breaking 3 + 1 */
#kosten .lp-benefits {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: none;
  gap: 26px 48px;
}

/* the sub-group gets a hairline instead of pure whitespace — the two halves
   answer different questions */
#kosten .lp-h2-sub {
  margin-top: 56px;
  padding-top: 44px;
  border-top: 1px solid rgba(13, 85, 208, 0.16);
}

.lp-cards {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px 26px;
}

/* the same paper card as .gallery-card, minus the photo — including the slight
   tilt, so the row doesn't read as a stock feature grid */
.lp-card {
  background: #fffdf8;
  padding: 30px 26px 32px;
  box-shadow: 0 14px 26px rgba(50, 42, 28, 0.18);
  transition: transform 260ms ease;
}

.lp-card:nth-child(odd) {
  transform: rotate(-0.9deg);
}

.lp-card:nth-child(even) {
  transform: rotate(0.7deg);
}

.lp-card:hover {
  transform: rotate(0deg) translateY(-8px);
}

.lp-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blue);
}

.lp-card p {
  margin-top: 12px;
  font-size: 0.98rem;
  line-height: 1.62;
  color: var(--ink-soft);
}

/* On the dark plate the cards are torn paper sheets — the same 9-slice scan the
   mobile contact form is built on, so the four corners stay ragged while the
   edges repeat to whatever height the card grows to. */
.lp-cards-dark .lp-card {
  background: transparent;
  border: 26px solid transparent;
  border-image-source: url("../images/SqarePaper_rgba.webp");
  border-image-slice: 80 fill;
  /* sideways the tear tiles cleanly; vertically it has to stretch, or the
     repeat leaves a seam straight across the sheet */
  border-image-repeat: round stretch;
  border-radius: 0;
  padding: 6px 8px 12px;
  box-shadow: none;
  filter: drop-shadow(0 18px 30px rgba(6, 14, 46, 0.38));
}

/* --- #einsatzgebiet ------------------------------------------------------
   Second block on the same dark plate as the target-group cards, so it carries
   its own top margin instead of a section of its own. The towns sit on three
   taped-up paper notes, cut from the same scan as the cards above. */

.lp-region {
  position: relative;
  margin-top: clamp(72px, 9vw, 110px);
  padding-top: clamp(48px, 5vw, 64px);
}

.lp-region > .lp-inner {
  position: relative;
  z-index: 2;
}

/* short mustard rule above the kicker — the seam that separates this block
   from the cards above without introducing a second paper tear. It hangs on
   the inner column, not the full-bleed plate, so it lines up with the copy. */
.lp-region > .lp-inner::before {
  content: "";
  position: absolute;
  top: calc(-1 * clamp(24px, 2.6vw, 34px));
  left: 0;
  width: clamp(90px, 12vw, 150px);
  height: 3px;
  border-radius: 2px;
  background: var(--mustard-bright);
}

.lp-region-groups {
  margin-top: 52px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
  gap: 44px 34px;
}

/* the same 9-slice paper scan the cards above are cut from, so both blocks on
   this plate are made of the same material */
.lp-region-group {
  position: relative;
  border: 26px solid transparent;
  border-image-source: url("../images/SqarePaper_rgba.webp");
  border-image-slice: 80 fill;
  border-image-repeat: round stretch;
  padding: 10px 10px 18px;
  filter: drop-shadow(0 18px 30px rgba(6, 14, 46, 0.38));
  transition: transform 260ms ease;
}

/* each note hangs at its own angle, like the gallery photos */
.lp-region-group:nth-child(1) { transform: rotate(-1.1deg); }
.lp-region-group:nth-child(2) { transform: rotate(0.8deg); }
.lp-region-group:nth-child(3) { transform: rotate(-0.6deg); }

.lp-region-group:hover {
  transform: rotate(0deg) translateY(-6px);
}

/* the tape sits above the note's own paper edge, so it needs to clear the
   26px border box the border-image is drawn into */
.lp-region-group .gallery-tape {
  top: -10px;
  width: 96px;
  margin-left: -48px;
}

.lp-region-group:nth-child(2) .gallery-tape {
  transform: rotate(2.5deg);
}

.lp-region-group h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.22rem;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--blue);
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(13, 85, 208, 0.32);
}

.lp-places {
  margin-top: 16px;
  list-style: none;
}

.lp-places li {
  position: relative;
  padding: 5px 0 5px 24px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* a small map pin per town, drawn from a circle and its point rather than an
   icon file — the round head is the ::before, the tip the rotated ::after */
.lp-places li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.62em;
  width: 9px;
  height: 9px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--blue);
  opacity: 0.55;
}

/* our own town gets the full-strength pin and the ink colour */
.lp-places .lp-place-home {
  font-weight: 600;
  color: var(--ink);
}

.lp-places .lp-place-home::before {
  opacity: 1;
  background: var(--mustard-bright);
  box-shadow: 0 0 0 2px rgba(13, 85, 208, 0.35);
}

.lp-region-note {
  margin-top: 44px;
  font-size: 0.98rem;
  line-height: 1.62;
  color: rgba(255, 255, 255, 0.72);
}

/* the handwritten opener, same treatment the kickers get elsewhere */
.lp-region-note-hand {
  font-family: var(--font-script);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--mustard-bright);
  margin-right: 8px;
}

.lp-region-note a {
  color: #fff;
  text-decoration-color: var(--mustard-bright);
  text-underline-offset: 4px;
}

.lp-region-note a:hover {
  color: var(--mustard-bright);
}

/* --- benefit list --- */

.lp-benefits {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 22px 40px;
  list-style: none;
  max-width: 1000px;
}

.lp-benefits li {
  position: relative;
  padding-left: 26px;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--ink-soft);
}

.lp-benefits li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 10px;
  border-radius: 3px 2px 4px 2px;
  background: var(--blue);
}

.lp-benefits strong {
  display: block;
  color: var(--blue);
  font-weight: 700;
}

/* --- steps --- */

/* --- #ablauf -------------------------------------------------------------
   Unlike #kosten (one illustration, one side) this plate is framed diagonally:
   artwork in the top-left and bottom-right corners, the steps centred between
   them. The column stays clear of both because 58vw leaves 21vw per side and
   the artwork is capped at 18vw plus its offset. */

/* the only plate without the paper texture — flat white, so the two
   illustrations sit on clean ground instead of competing with the grain */
#ablauf {
  background-image: none;
  background-color: #fff;

  /* the artwork geometry lives here so the arrow can be anchored to the
     pictures instead of to the plate's own edges */
  --art-gap-x: clamp(20px, 2.5vw, 70px);
  --art-gap-y: clamp(40px, 6vw, 120px);
  --art-w: clamp(170px, 18vw, 360px);
}

#ablauf .lp-inner {
  max-width: min(860px, 58vw);
}

.ablauf-illustration {
  position: absolute;
  width: var(--art-w);
  height: auto;
  z-index: 1;
  pointer-events: none;
}

.ablauf-illustration-1 {
  left: var(--art-gap-x);
  top: var(--art-gap-y);
}

.ablauf-illustration-2 {
  right: var(--art-gap-x);
  bottom: var(--art-gap-y);
}

/* The corners of this box ARE the arrow's two ends: the top-left one sits in
   the lower-right quadrant of picture 1, the bottom-right one at the upper-left
   corner of picture 2. The offsets are fractions of --art-w because both images
   are roughly 4:3, so their height tracks their width.
   It has to be a div, not the <svg> itself: an svg is a replaced element, so
   left+right+top+bottom do NOT size it — it would fall back to its intrinsic
   size and the arrow would end nowhere near picture 2.
   z-index 0 keeps the curve under the copy (2) and under the artwork (1). */
.ablauf-arrow {
  position: absolute;
  left: calc(var(--art-gap-x) + var(--art-w) * 0.5);
  right: calc(var(--art-gap-x) + var(--art-w) * 0.9);
  top: calc(var(--art-gap-y) + var(--art-w) * 0.6);
  bottom: calc(var(--art-gap-y) + var(--art-w) * 0.55);
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
}

.ablauf-arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* The box above has to stretch to the plate's height, which would squash an
   SVG marker along with it — vector-effect saves the stroke width and the dash
   rhythm, but not a filled arrowhead. So the head is its own element, sized in
   px and parked on the curve's end point (same right/bottom offsets), tip
   first. Its angle is fixed rather than tangent-derived; the curve leaves at a
   shallow down-right slope across the whole range, so ~18deg reads as flush. */
.ablauf-arrow-head {
  position: absolute;
  right: calc(var(--art-gap-x) + var(--art-w) * 0.9);
  bottom: calc(var(--art-gap-y) + var(--art-w) * 0.55);
  width: clamp(16px, 1.7vw, 28px);
  height: auto;
  transform-origin: 100% 50%;
  transform: translateY(50%) rotate(10deg);
  /* above the artwork, so it stays readable where it meets picture 2 */
  z-index: 2;
  pointer-events: none;
  opacity: 0.55;
}

.lp-steps {
  margin-top: 48px;
  display: grid;
  gap: 26px;
  max-width: 860px;
  list-style: none;
}

.lp-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 22px;
  align-items: start;
}

/* the number is the handwritten accent — Caveat on a drawn blue circle */
.lp-step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  color: #fff;
  background: var(--blue);
  border-radius: 52% 48% 55% 45%;
  box-shadow: 0 10px 20px rgba(13, 85, 208, 0.22);
}

.lp-step-copy h3 {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blue);
}

.lp-step-copy p {
  margin-top: 8px;
  font-size: 1rem;
  line-height: 1.62;
  color: var(--ink-soft);
}

/* --- FAQ ----------------------------------------------------------------
   Each question is a torn paper sheet on the dark plate — the same 9-slice
   scan as .lp-cards-dark .lp-card and the mobile contact form, so the answers
   read like the rest of the page instead of a generic accordion. */

.lp-faq {
  margin-top: 44px;
  display: grid;
  gap: 18px;
  max-width: 860px;
}

.lp-faq details {
  border: 26px solid transparent;
  border-image-source: url("../images/SqarePaper_rgba.webp");
  border-image-slice: 80 fill;
  /* sideways the tear tiles cleanly; vertically it has to stretch, or the
     repeat leaves a seam across the sheet as the answer opens */
  border-image-repeat: round stretch;
  padding: 4px 10px 8px;
  filter: drop-shadow(0 16px 26px rgba(6, 14, 46, 0.36));
  transition: transform 260ms ease, filter 260ms ease;
}

/* the same slight tilt the paper cards carry, so the stack looks laid down
   rather than stamped out */
.lp-faq details:nth-child(odd) {
  transform: rotate(-0.5deg);
}

.lp-faq details:nth-child(even) {
  transform: rotate(0.4deg);
}

/* the sheet you are reading lies flat */
.lp-faq details:hover,
.lp-faq details[open] {
  transform: rotate(0deg);
  filter: drop-shadow(0 20px 32px rgba(6, 14, 46, 0.44));
}

.lp-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.12rem;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--blue);
  cursor: pointer;
  list-style: none;
}

.lp-faq summary::-webkit-details-marker {
  display: none;
}

/* the toggle is the small sibling of .lp-step-num — a drawn blue blob rather
   than a circle, carrying a Caveat plus that becomes a minus when open */
.lp-faq summary::after {
  content: "+";
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
  color: #fff;
  background: var(--blue);
  border-radius: 52% 48% 55% 45%;
  box-shadow: 0 6px 14px rgba(13, 85, 208, 0.26);
  transition: background 200ms ease;
}

.lp-faq details[open] summary::after {
  content: "–";
  background: var(--mustard-bright);
  color: var(--ink);
}

.lp-faq summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 6px;
}

/* hairline under the question, like the rule that splits the two #kosten
   groups — it keeps the answer from crowding the heading */
.lp-faq p {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(13, 85, 208, 0.16);
  max-width: 62ch;
  font-size: 0.97rem;
  line-height: 1.65;
  color: var(--ink-soft);
  animation: lp-faq-open 240ms ease both;
}

@keyframes lp-faq-open {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lp-faq details,
  .lp-faq p {
    transition: none;
    animation: none;
  }
}

/* --- Über uns --- */

.lp-about {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(32px, 5vw, 70px);
  align-items: center;
}

.lp-about-photo {
  max-width: 460px;
  justify-self: end;
  width: 100%;
}

/* --- Formular --- */

.lp-form-inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(32px, 4vw, 60px);
}

/* .paper-form-mobile is display:none until 720px on the homepage, where the
   artwork sheet covers the wide layout. This page has no artwork twin, so the
   stacked sheet is the form at every width — two columns while there's room. */
.lp-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
  align-items: start;
}

.lp-form-wide {
  grid-column: 1 / -1;
}

.lp-form .pfm-submit {
  justify-self: end;
}

/* fields the operator still has to supply before going live — same highlight
   the legal pages use */
.todo {
  background: rgba(255, 198, 26, 0.35);
  box-shadow: 0 0 0 2px rgba(255, 198, 26, 0.35);
  border-radius: 3px;
  color: var(--ink);
  font-weight: 600;
}

.lp-dark .todo,
.lp-faq .todo {
  color: var(--ink);
}

@media (max-width: 980px) {
  .lp-hero {
    display: flex;
    flex-direction: column;
    padding: 64px 24px 80px;
  }

  /* above the copy rather than beside it, exactly like .trouble-illustration */
  .lp-hero-illustration {
    order: -1;
    width: min(80%, 340px);
    margin: 0 auto 28px;
  }

  .lp-light,
  .lp-dark,
  .lp-form-section {
    padding: 80px 24px;
  }

  .lp-h2-sub {
    margin-top: 64px;
  }

  /* above the copy rather than beside it, like the hero illustration */
  .lp-intro-split {
    grid-template-columns: 1fr;
  }

  .lp-intro-illustration {
    order: -1;
    width: min(80%, 420px);
    margin: 0 auto 8px;
  }

  /* no room for a right rail — back into the flow, above the copy */
  .kosten-illustration {
    position: static;
    transform: none;
    display: block;
    width: min(70%, 300px);
    margin: 0 auto 24px;
  }

  #kosten .lp-inner {
    max-width: 1180px;
    margin-left: auto;
  }

  #kosten .lp-h2-sub {
    margin-top: 48px;
    padding-top: 36px;
  }

  /* no room for the diagonal frame — both drop into the flow, one above the
     steps and one below (the source order already puts them there) */
  .ablauf-illustration {
    position: static;
    display: block;
    width: min(70%, 320px);
    margin: 0 auto;
  }

  .ablauf-illustration-1 {
    margin-bottom: 28px;
  }

  .ablauf-illustration-2 {
    margin-top: 28px;
  }

  #ablauf .lp-inner {
    max-width: 1180px;
  }

  /* the two illustrations are stacked now — there is no diagonal left to trace */
  .ablauf-arrow,
  .ablauf-arrow-head {
    display: none;
  }

  .lp-about {
    grid-template-columns: 1fr;
  }

  .lp-about-photo {
    justify-self: center;
    order: -1;
  }

  .lp-form-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .lp-form {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .lp-hero {
    padding: 52px 18px 68px;
    background-position: 70% center;
  }

  .lp-hero-illustration {
    width: min(86%, 280px);
    margin-bottom: 22px;
  }

  .lp-light,
  .lp-dark,
  .lp-form-section {
    padding: 64px 18px;
  }

  .lp-hero-actions,
  .lp-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .lp-hero-facts {
    display: none;
  }

  .lp-step {
    grid-template-columns: 46px 1fr;
    gap: 16px;
  }

  .lp-step-num {
    width: 42px;
    height: 42px;
    font-size: 1.6rem;
  }

  .lp-benefits,
  #kosten .lp-benefits {
    grid-template-columns: 1fr;
  }

  /* the 26px torn border eats a lot of a narrow screen — smaller question and
     toggle keep the sheet from going three lines deep */
  .lp-faq details,
  .lp-region-group {
    border-width: 20px;
    padding: 2px 4px 6px;
  }

  /* stacked notes at an angle collide with each other, so they straighten up */
  .lp-region-group:nth-child(1),
  .lp-region-group:nth-child(2),
  .lp-region-group:nth-child(3) {
    transform: none;
  }

  .lp-region-groups {
    gap: 38px 24px;
  }

  .lp-faq summary {
    gap: 14px;
    font-size: 1rem;
  }

  .lp-faq summary::after {
    width: 28px;
    height: 28px;
    font-size: 1.5rem;
  }
}