/* ---------------------------------------------
   Freshpoint – Hero / Header
   Style reference: SunMall (Anton / Caveat / Poppins)
--------------------------------------------- */

:root {
  --cream: #fcfaf4;
  --ink: #151310;
  --ink-soft: #55524a;
  --mustard-bright: #ffc61a;
  --teal: #0e6b58;
  --green-lime: #8bc34a;
  --blue: #0d55d0;

  --font-display: "Anton", "Impact", sans-serif;
  --font-script: "Caveat", cursive;
  --font-body: "Poppins", ui-sans-serif, system-ui, sans-serif;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ---------------------------------------------
   Header
--------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(13, 85, 208, 0.12);
}

.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.logo-fresh {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.logo-point {
  font-family: var(--font-script);
  font-weight: 700;
  font-size: 1.9rem;
  color: var(--blue);
  transform: rotate(-3deg);
  display: inline-block;
  margin-left: 2px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.main-nav a {
  color: var(--ink-soft);
  transition: color 0.2s ease;
  position: relative;
  padding: 8px 4px;
  white-space: nowrap;
}

.main-nav a:hover {
  color: var(--ink);
}

.main-nav a.active {
  color: var(--blue);
}

.main-nav a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
}

.main-nav .nav-page-link {
  color: var(--ink);
  font-weight: 700;
  letter-spacing: 0.045em;
}

.main-nav .nav-page-link + .nav-page-link {
  margin-left: -12px;
}

.main-nav .nav-page-link + .nav-page-link::before {
  content: "";
  position: absolute;
  left: -14px;
  top: 50%;
  width: 1px;
  height: 16px;
  background: rgba(13, 85, 208, 0.22);
  transform: translateY(-50%);
}

.main-nav .nav-page-link.active {
  color: var(--blue);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.contact-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  /* same pill treatment as .btn-solid, just at header scale */
  background: var(--blue);
  color: #fff;
  transition: transform 0.2s ease, background 0.2s ease;
}

.contact-bar svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.contact-bar:hover {
  background: #0a45ab;
  transform: translateY(-1px);
}

.whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  /* outlined blue rather than a second solid pill, so the phone number stays
     the primary action — mirrors .btn-outline-blue in the rent section */
  background: transparent;
  border: 1.6px solid rgba(13, 85, 208, 0.55);
  color: var(--blue);
  flex-shrink: 0;
  transition: transform 0.2s ease, background 0.2s ease;
}

.whatsapp-btn svg {
  width: 20px;
  height: 20px;
}

.whatsapp-btn:hover {
  background: rgba(13, 85, 208, 0.1);
  border-color: var(--blue);
  transform: translateY(-1px) rotate(-6deg);
}

/* the checkbox itself stays off-screen rather than display:none, so it keeps
   its place in the tab order and Space still opens the menu */
.nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  margin: 0;
}

/* Burger — hidden until the nav collapses at 980px. Driven by the
   #nav-toggle checkbox so the legal pages get the menu without any JS. */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px;
  height: 42px;
  padding: 0 9px;
  border-radius: 50%;
  border: 1.6px solid rgba(13, 85, 208, 0.55);
  cursor: pointer;
  flex-shrink: 0;
}

.nav-burger span {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--blue);
  transition: transform 0.22s ease, opacity 0.16s ease;
}

/* the two outer bars meet in the middle and cross, the middle one fades */
.nav-toggle:checked ~ .header-actions .nav-burger span:first-child {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle:checked ~ .header-actions .nav-burger span:nth-child(2) {
  opacity: 0;
}

.nav-toggle:checked ~ .header-actions .nav-burger span:last-child {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-toggle:focus-visible ~ .header-actions .nav-burger {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* ---------------------------------------------
   Hero — split: paper copy panel + photo
--------------------------------------------- */

.hero {
  /* single source of truth for the seam — the torn strip tracks it too */
  --hero-split: 43%;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, var(--hero-split)) minmax(0, 1fr);
  align-items: stretch;
  min-height: calc(100vh - 79px);
  overflow: hidden;
}

.hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* side padding shrinks by the same 4vw the panel lost, so the text
     column keeps the width it had at --hero-split: 54% */
  padding: 88px clamp(40px, 6vw, 100px);
  /* hand-drawn Herrsching map, washed out under a soft white gradient so the
     copy stays readable — the map reads strongest near the torn seam */
  background-image:
    linear-gradient(
      100deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.78) 55%,
      rgba(255, 255, 255, 0.62) 100%
    ),
    url("../images/map-background.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* nudge the whole copy block down without disturbing the signs, which are
   absolutely positioned and excluded here */
.hero-copy > :not(.hero-sign) {
  transform: translateY(25px);
}

/* Hand-lettered signs. Each is positioned on its own — set bottom/right
   per sign below to move them independently.

   Each is a scan with its own paper backing — near-identical in tone
   to the panel texture, so multiply alone would double-darken it into a
   visible rectangle. contrast+brightness first clips that backing to pure
   white (where multiply is a no-op) and deepens the ink; the mask then
   feathers the crop edges so no hard boundary survives. */
.hero-sign {
  position: absolute;
  height: auto;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(
    ellipse 82% 82% at 50% 50%,
    #000 60%,
    transparent 100%
  );
  mask-image: radial-gradient(
    ellipse 82% 82% at 50% 50%,
    #000 60%,
    transparent 100%
  );
}

.hero-sign-place {
  top: clamp(0px, 2vh, 30px);
  left: clamp(10px, 8vw, 40px);
  width: clamp(230px, 23vw, 340px);
  transform: rotate(-2deg);
  /* warmer, darker backing (down to rgb(233)) needs a harder lift than
     the hours sign to clip clean */
  filter: contrast(1.25) brightness(1.06) saturate(1.05);
}

.hero-sign-hours {
  bottom: clamp(130px, 9vh, 170px);
  /* clears the torn strip, which reaches ~70px back from the seam */
  right: clamp(0px, 7vw, 20px);
  width: clamp(200px, 20vw, 300px);
  filter: contrast(1.2) brightness(1.03) saturate(1.05);
}

/* Doodles — cleaner scans (backing rgb(246–249)) so they need less lift
   than the lettered signs to clip white. Placed on the free diagonal:
   drinks top-right, snacks bottom-left. */

.hero-sign-snacks {
  top: clamp(70px, 10vh, 130px);
  right: clamp(30px, 4vw, 60px);
  width: clamp(140px, 14vw, 240px);
  transform: rotate(-6deg);
  filter: contrast(1.15) brightness(1.04) saturate(1.05);
}

/* sits 20% of its own height higher than the rest of the copy block —
   the 25px carries over from the .hero-copy nudge this overrides */
.hero-copy > .hero-elements {
  transform: translateY(-30px);
}

.hero-title {
  margin-top: 22px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 4.6vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--ink);
}

.hero-text {
  margin-top: 26px;
  max-width: 34ch;
  font-size: 1.05rem;
  line-height: 1.62;
  color: var(--ink-soft);
}

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

.btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  padding: 16px 34px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  color: #fff;
  background: var(--blue);
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn-solid:hover {
  background: #0a45ab;
  transform: translateY(-2px);
}

.btn-icon {
  width: 20px;
  height: 33px;
  flex: 0 0 auto;
  display: block;
  object-fit: contain;
}

.hero-address {
  margin-top: 22px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.hero-stats {
  margin-top: 34px;
  display: flex;
  gap: 40px;
  list-style: none;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.hero-stats strong {
  color: var(--ink);
  font-weight: 700;
}

.hero-media {
  position: relative;
  overflow: hidden;
}

/* torn paper edge straddling the seam between copy panel and photo */
.hero-tear {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  /* the white body of the strip sits on the paper side, the ragged
     edge bites into the photo */
  left: var(--hero-split);
  transform: translateX(-45%);
  width: clamp(100px, 10vw, 150px);
  height: 100%;
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  /* left third fades in from fully transparent so the strip blends
     into the paper panel instead of ending on a hard edge */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 33%);
  mask-image: linear-gradient(to right, transparent 0%, #000 33%);
}

/* absolutely positioned so the media's own aspect ratio never drives the
   hero's height — the row is sized by the copy column, the media just fills
   whatever box that leaves and crops the overflow */
.hero-media img,
.hero-media video {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------------------------------------------
   Section tears — horizontal counterparts to .hero-tear

   Each strip lives in the *light* section and hangs past its bottom edge, so
   the paper body stays continuous with the section it belongs to while the
   ragged edge bites into the dark section underneath. The top of the strip is
   masked out so the near-white paper (rgb 243) dissolves into the section's
   own texture instead of meeting it on a hard line.
--------------------------------------------- */

.section-tear {
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 100%;
  /* a third of the strip rides back up over the light section — that part is
     what the mask fades out */
  transform: translateY(-35%);
  width: 100%;
  height: clamp(60px, 7vw, 120px);
  max-width: none;
  object-fit: fill;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 35%);
}

/* The rent section is light with a dark section above it, so its tear runs the
   other way: flipped on its head and hung off the top edge. The mask is applied
   before the transform, so the same fade still lands on the paper side — which
   after the flip is the strip's visual bottom, inside .rent. */
.tear-section-top,
.tear-rent-top {
  top: auto;
  bottom: 100%;
  transform: translateY(35%) scaleY(-1);
}

/* ---------------------------------------------
   Products — two snack rows filling the full width
--------------------------------------------- */

.products {
  position: relative;
  display: grid;
  /* the two snack rows have different aspect ratios (1805x671 and 1616x556),
     so a 50/50 split would render them at different heights. weighting each
     column by its image's ratio makes both come out exactly W/(sum) tall
     while still filling the full width together */
  grid-template-columns: 2.69fr 2.91fr;
  align-items: end;
  /* the bottom padding is the room the tear's faded top needs — without it
     the strip would wash over the feet of the snack rows */
  padding: 5rem 2rem 2.75rem;
  background-image: url("../images/backgroundWhite.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* spans both columns so the snack rows keep sharing the row below it */
.products-title {
  grid-column: 1 / -1;
  /* stretched vertically only — the glyphs get taller while the line keeps
     the width font-size alone would give it. the extra 30% of height is
     invisible to layout, so margin-bottom pays it back */
  transform: scaleY(1.7);
  transform-origin: top center;
  margin-bottom: calc(2rem + 0.3em);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  /* 100px as specced, scaling down on narrow viewports so it never
     overflows the section */
  font-size: clamp(2.7rem, 7vw, 110px);
  line-height: 1.02;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  /* the same blue as .rent-title below, fading out toward the baseline —
     painted as a gradient and clipped to the glyphs, so `color` only
     survives as the fallback */
  background-image: linear-gradient(
    180deg,
    var(--blue) 45%,
    rgba(13, 85, 208, 0) 90%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* sits between the title and the snack rows, spanning both columns so the
   rows below keep sharing their row */
.products-intro {
  grid-column: 1 / -1;
  max-width: 62ch;
  margin: 0 auto 3rem;
  text-align: center;
  font-size: 1.05rem;
  line-height: 1.62;
  color: var(--ink-soft);
}

/* each fills its column and scales to whatever height that width gives it,
   so the two rows meet edge to edge with no seam */
.products img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------------------------
   Trouble / Störung — textured background section
--------------------------------------------- */

.trouble {
  position: relative;
  background-image:
    linear-gradient(180deg, rgba(6, 14, 46, 0.18), rgba(6, 14, 46, 0.3)),
    url("../images/background.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 100px 32px;
  overflow: hidden;
}

.trouble-illustration {
  position: absolute;
  z-index: 1;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 75%;
  width: auto;
  max-width: none;
  pointer-events: none;
  filter: drop-shadow(0 24px 44px rgba(6, 14, 46, 0.4));
  margin-right: 5rem;
}

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

.trouble-title {
  margin-top: 6px;
  max-width: 620px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.25);
}

.trouble-subtitle {
  margin-top: 20px;
  max-width: 480px;
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
}

.phone-display {
  margin-top: 40px;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  color: #fff;
  text-shadow: 0 6px 26px rgba(0, 0, 0, 0.35);
  transition: color 0.2s ease, transform 0.2s ease;
}

.phone-display:hover {
  color: var(--mustard-bright);
  transform: translateY(-2px);
}

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

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  padding: 14px 26px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.btn-outline svg {
  width: 18px;
  height: 18px;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  transform: translateY(-2px);
}

/* ---------------------------------------------
   Renting 
--------------------------------------------- */

.rent {
  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;
  /* clips the illustration sideways as `overflow: hidden` did, but leaves the
     vertical axis open so the tear can hang into the contact section */
  overflow-x: clip;
  overflow-y: visible;
  min-height: 60vh;
}

.rent-illustration {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 70%;
  width: auto;
  max-width: none;
  pointer-events: none;
  margin-left: 7rem;
}

.rent-inner {
  position: relative;
  z-index: 2;
  margin: 0 auto;
}

.rent-copy {
  max-width: 50vw;
  margin-left: auto;
}

.rent-title {
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.7rem, 5vw, 3.7rem);
  line-height: 1.06;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  color: var(--blue);
}

.rent-text {
  margin-top: 20px;
  max-width: 680px;
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(13, 85, 208, 0.86);
}

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

.btn-outline-blue {
  color: var(--blue);
  border-color: rgba(13, 85, 208, 0.55);
}

.btn-outline-blue:hover {
  background: rgba(13, 85, 208, 0.1);
  border-color: var(--blue);
}

/* ---------------------------------------------
   Kontakt — closing form on the dark texture
--------------------------------------------- */

.contact {
  position: relative;
  /* same plate as .trouble, a touch darker so the pale form card carries
     the section instead of competing with the texture */
  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;
}

.contact-inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  /* the intro column rides the middle of the taller form card */
  align-items: center;
  gap: clamp(32px, 4vw, 60px);
}

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

.contact-subtitle {
  margin-top: 20px;
  max-width: 42ch;
  font-size: 1.02rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
}

.contact-facts {
  margin-top: 36px;
  list-style: none;
  display: grid;
  gap: 18px;
}

.contact-facts li {
  display: grid;
  gap: 2px;
  font-size: 1rem;
  color: #fff;
}

.contact-fact-label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.contact-facts a {
  transition: color 0.2s ease;
}

.contact-facts a:hover {
  color: var(--mustard-bright);
}

.paper-form {
  container-type: inline-size;
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  aspect-ratio: 1304 / 1206;
  justify-self: center;
  background: url("../images/paper-form.webp") center / contain no-repeat;
  filter: drop-shadow(0 18px 30px rgba(60, 50, 35, 0.22));
  font-family: "Patrick Hand", cursive;
  font-size: 1.5cqw;
}

.paper-form input,
.paper-form select,
.paper-form textarea {
  position: absolute;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  color: #24499b;
  box-sizing: border-box;
  padding: 0 2%;
}

.paper-form input:focus,
.paper-form select:focus,
.paper-form textarea:focus {
  outline: none;
}

.paper-form ::placeholder {
  color: #8ea0c9;
}

.pf-name {
  left: 11.66%;
  top: 16.92%;
  width: 36.5%;
  height: 7.96%;
}

.pf-email {
  left: 51.38%;
  top: 16.92%;
  width: 35.66%;
  height: 7.96%;
}

.pf-phone {
  left: 11.66%;
  top: 32.5%;
  width: 36.5%;
  height: 7.8%;
}

.pf-subject {
  left: 51.38%;
  top: 32.5%;
  width: 35.66%;
  height: 7.8%;
  appearance: none;
  cursor: pointer;
  padding-right: 8%;
}

.pf-message {
  left: 11.66%;
  top: 46.6%;
  width: 75.4%;
  height: 22.9%;
  padding: 1.6% 2%;
  resize: none;
  line-height: 1.4;
}

.pf-consent {
  position: absolute;
  left: 11.2%;
  top: 70.4%;
  width: 74%;
  height: 7.2%;
  display: block;
  cursor: pointer;
}

.pf-consent input {
  position: absolute;
  opacity: 0;
  width: 4%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.pf-consent svg {
  position: absolute;
  left: 01%;
  top: 17%;
  width: 4.05%;
  height: auto;
  overflow: visible;
  pointer-events: none;
}

.pf-consent path {
  fill: none;
  stroke: #1f3f8f;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 52 300;
  stroke-dashoffset: 52;
  transition: stroke-dashoffset 340ms cubic-bezier(.2, .9, .3, 1.4);
}

.pf-consent input:checked ~ svg path {
  stroke-dashoffset: 0;
}

.pf-consent input:focus-visible ~ svg {
  outline: 2px solid #24499b;
  outline-offset: 3px;
}

.pf-submit {
  position: absolute;
  left: 60.93%;
  top: 78.77%;
  width: 27.61%;
  height: 9.95%;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
  transition: transform 200ms ease;
}

.pf-submit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/pill.webp") center / 100% 100% no-repeat;
}

.pf-plane {
  position: absolute;
  left: 19.4%;
  top: 0;
  width: 13.9%;
  height: 100%;
  background: url("../images/plane.webp") center / 100% 100% no-repeat;
  transition: transform 1.35s cubic-bezier(.22, .72, .18, 1);
  will-change: transform;
}

.pf-label {
  position: absolute;
  left: 35%;
  top: 0;
  width: 38.9%;
  height: 100%;
  background: url("../images/senden.webp") center / 100% 100% no-repeat;
  opacity: 1;
  transition:
    transform 1.05s cubic-bezier(.22, .72, .18, 1),
    opacity 700ms ease;
  will-change: transform, opacity;
}

.pf-submit:hover .pf-plane {
  transform: translateX(130%) rotate(45deg) scale(1.1);
  animation: pf-fly 1.8s ease-in-out 1.35s infinite alternate;
}

.pf-submit:hover .pf-label {
  transform: translateX(160%);
  opacity: 0;
}

.pf-submit:active {
  transform: scale(0.96);
}

.pf-submit:focus-visible {
  outline: 2px solid #24499b;
  outline-offset: 4px;
}

@keyframes pf-fly {
  from {
    transform: translateX(130%) rotate(45deg) scale(1.1) translateY(2px);
  }
  to {
    transform: translateX(130%) rotate(45deg) scale(1.1) translateY(-2px);
  }
}

/* ---------------------------------------------
   Kontaktformular, schmale Screens

   Same paper, same blue pencil, same paper-plane button as .paper-form — but
   the sheet is a blank torn scan (SqarePaper) carried as a 9-slice border-image
   instead of a fixed-ratio artwork, so it grows with the stacked fields and the
   ragged edge keeps its bite at any height.
--------------------------------------------- */

.paper-form-mobile {
  display: none;
  width: 100%;
  justify-self: center;
  gap: 16px;
  /* the slice keeps the four torn corners intact and repeats the ragged edges
     between them; `fill` paints the sheet's own paper texture behind the fields */
  border: 26px solid transparent;
  border-image-source: url("../images/SqarePaper_rgba.webp");
  border-image-slice: 80 fill;
  /* horizontally the tear repeats cleanly; vertically it has to stretch, or the
     tiling leaves a visible seam straight across the sheet */
  border-image-repeat: round stretch;
  padding: 6px 4px 10px;
  filter: drop-shadow(0 18px 30px rgba(60, 50, 35, 0.22));
  font-family: "Patrick Hand", cursive;
  color: #24499b;
}

.pfm-field {
  display: grid;
  gap: 6px;
}

.pfm-label {
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #24499b;
}

.pfm-label em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.75;
}

.paper-form-mobile input[type="text"],
.paper-form-mobile input[type="email"],
.paper-form-mobile input[type="tel"],
.paper-form-mobile select,
.paper-form-mobile textarea {
  width: 100%;
  /* 16px keeps iOS from zooming the page in on focus */
  font-family: inherit;
  font-size: 16px;
  color: #24499b;
  background: transparent;
  border: 2px solid rgba(36, 73, 155, 0.55);
  /* uneven corners so the boxes read as drawn, like the ones in the artwork */
  border-radius: 12px 10px 13px 11px;
  padding: 10px 12px;
}

.paper-form-mobile textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.4;
}

.paper-form-mobile select {
  appearance: none;
  cursor: pointer;
  /* hand-drawn caret, same triangle as the one printed on the desktop sheet */
  background-image: linear-gradient(45deg, transparent 50%, #24499b 50%),
    linear-gradient(135deg, #24499b 50%, transparent 50%);
  background-position: right 18px center, right 12px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

.paper-form-mobile ::placeholder {
  color: #8ea0c9;
}

.paper-form-mobile input:focus,
.paper-form-mobile select:focus,
.paper-form-mobile textarea:focus {
  outline: none;
  border-color: #24499b;
}

.pfm-consent {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: start;
  margin-top: 2px;
  font-size: 1rem;
  line-height: 1.35;
  color: #24499b;
  cursor: pointer;
}

.pfm-consent input {
  appearance: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  border: 2px solid rgba(36, 73, 155, 0.7);
  border-radius: 6px 5px 7px 5px;
  background: transparent;
  cursor: pointer;
}

/* the tick is drawn on, not stamped — same dash animation as .pf-consent */
.pfm-consent svg {
  position: absolute;
  left: -1px;
  top: -4px;
  width: 30px;
  height: 30px;
  overflow: visible;
  pointer-events: none;
}

.pfm-consent path {
  fill: none;
  stroke: #1f3f8f;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 52 300;
  stroke-dashoffset: 52;
  transition: stroke-dashoffset 340ms cubic-bezier(.2, .9, .3, 1.4);
}

.pfm-consent input:checked ~ svg path {
  stroke-dashoffset: 0;
}

.pfm-consent input:focus-visible {
  outline: 2px solid #24499b;
  outline-offset: 3px;
}

.pfm-consent a {
  color: #24499b;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* reuses .pf-submit's pill/plane/label artwork, just taken out of the
   absolute percentage grid the desktop sheet positions it in */
.pfm-submit {
  position: relative;
  left: auto;
  top: auto;
  justify-self: end;
  width: 170px;
  /* pill.webp is 360x120 */
  height: 56.6px;
  margin-top: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .pf-submit:hover .pf-plane {
    animation: none;
  }

  .paper-form *,
  .paper-form-mobile * {
    transition-duration: 1ms !important;
  }
}

/* ---------------------------------------------
   Responsive
--------------------------------------------- */

/* The longer page-level nav labels need the burger slightly before the content
   layout changes, so the header never wraps into a second row. */
@media (max-width: 1120px) {
  .header-inner {
    padding: 14px 20px;
    gap: 12px;
  }

  .nav-burger {
    display: flex;
  }

  /* drops out of the header row and hangs under it as a panel */
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 20px 14px;
    /* opaque, unlike the glass header — it covers page content, and the blur
       alone left headings legible straight through the menu */
    background: #fff;
    border-bottom: 1px solid rgba(13, 85, 208, 0.12);
    box-shadow: 0 16px 24px rgba(6, 14, 46, 0.08);
  }

  .nav-toggle:checked ~ .main-nav {
    display: flex;
  }

  .main-nav a {
    padding: 14px 2px;
    border-bottom: 1px solid rgba(13, 85, 208, 0.1);
  }

  .main-nav .nav-page-link {
    padding: 14px 2px;
  }

  .main-nav .nav-page-link + .nav-page-link {
    margin-left: 0;
  }

  .main-nav .nav-page-link + .nav-page-link::before {
    display: none;
  }

  .main-nav a:last-child {
    border-bottom: 0;
  }

  /* the underline is a desktop affordance; in the panel the link stands alone */
  .main-nav a.active::after {
    display: none;
  }
}

/* Tablet and below — the hero splits into two stacked rows, and the two
   illustrations that are absolutely positioned beside the copy on desktop come
   back into the flow above it. */
@media (max-width: 980px) {
  .header-inner {
    padding: 14px 20px;
    gap: 12px;
  }

  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .hero-copy {
    order: 2;
    padding: 56px 24px 64px;
  }

  /* the desktop nudges are tuned to the tall split panel — in the stacked
     layout the padding alone places the copy */
  .hero-copy > :not(.hero-sign),
  .hero-copy > .hero-elements {
    transform: none;
  }

  /* back into the flow — the panel is too short to float them in corners */
  .hero-sign {
    position: static;
    align-self: flex-end;
    margin-bottom: 20px;
  }

  /* the doodles are decoration only — drop them rather than stack four
     images above the copy */
  .hero-sign-drinks,
  .hero-sign-snacks {
    display: none;
  }

  .hero-media {
    order: 1;
    height: 46vh;
    min-height: 300px;
  }

  /* the seam turns horizontal once the panels stack, and the strip only reads
     vertically — so the vertical img gives way to the horizontal tear the rest
     of the page uses, hung off the top of the paper panel */
  .hero-tear {
    display: none;
  }

  .hero-copy::before {
    content: "";
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    top: 0;
    /* mirrors .tear-rent-top: flipped, so the masked fade still lands on the
       paper side while the ragged edge bites up into the video */
    transform: translateY(-65%) scaleY(-1);
    height: clamp(46px, 9vw, 90px);
    background: url("../images/paperEdge_rgba.webp") center / 100% 100% no-repeat;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 35%);
  }

  /* side by side the two rows would each be a ~170px sliver, too small to make
     out a single product — stacked, each one gets the full width */
  .products {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 3.5rem 1.5rem 2.25rem;
  }

  /* the title wraps to two or three lines down here, and the desktop 1.7x
     stretch would both overrun the snack rows and carry the last line past the
     end of the fade, leaving it invisible — so both are pulled in */
  .products-title {
    font-size: clamp(2rem, 8vw, 4rem);
    transform: scaleY(1.35);
    margin-bottom: calc(1.5rem + 0.8em);
    background-image: linear-gradient(
      180deg,
      var(--blue) 72%,
      rgba(13, 85, 208, 0.45) 100%
    );
  }

  .trouble,
  .rent {
    padding: 80px 24px;
    /* the illustration is a flow item here, so the section drives the stack */
    display: flex;
    flex-direction: column;
  }

  .rent {
    min-height: 0;
  }

  .trouble-illustration,
  .rent-illustration {
    position: static;
    order: -1;
    height: auto;
    width: min(72%, 300px);
    margin: 0 auto 28px;
    transform: none;
    opacity: 1;
  }

  .trouble-title,
  .trouble-subtitle {
    max-width: 100%;
  }

  .rent-copy,
  .rent-text {
    max-width: 100%;
  }

  .contact {
    padding: 80px 24px;
  }

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

  .contact-subtitle {
    max-width: 100%;
  }

  /* the sheet's baked-in labels shrink with it, so the typed-in text has to
     grow relative to the paper to stay in proportion with them */
  .paper-form {
    font-size: 1.9cqw;
  }
}

/* Phone — below this the desktop sheet's printed labels fall under ~9px, so
   the contact form swaps to its stacked twin. */
@media (max-width: 720px) {
  .paper-form {
    display: none;
  }

  .paper-form-mobile {
    display: grid;
  }
}

@media (max-width: 640px) {
  .trouble,
  .rent {
    padding: 64px 18px;
  }

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

  .rent-actions,
  .trouble-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .phone-display {
    font-size: clamp(1.8rem, 8vw, 2.4rem);
    gap: 12px;
  }

  .btn-outline {
    justify-content: center;
  }

  .hero-copy {
    padding: 44px 18px 52px;
  }

  .hero-media {
    height: 38vh;
    min-height: 240px;
  }

  .hero-stats {
    gap: 24px;
    flex-wrap: wrap;
  }

  .btn-solid {
    width: 100%;
  }

  .products {
    padding: 2.75rem 1.125rem 2rem;
  }

  .contact {
    padding: 64px 18px;
  }

  .contact-bar span {
    display: none;
  }

  .contact-bar {
    padding: 11px;
  }
}

/* the note sits on the dark contact plate, so it can't take the ink colours
   the rest of the body text uses */
.contact-privacy-note {
  margin-top: 22px;
  max-width: 46ch;
  font-size: 0.82rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
}

.contact-privacy-note a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.contact-privacy-note a:hover {
  color: var(--mustard-bright);
}

/* ---------------------------------------------
   Bildergalerie
--------------------------------------------- */

.gallery-section {
  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;
  overflow-x: clip;
  overflow-y: visible;
}

.tear-gallery-top {
  top: auto;
  bottom: 100%;
  transform: translateY(35%) scaleY(-1);
}

.tear-gallery-bottom {
  top: 100%;
}

.gallery-inner {
  position: relative;
  z-index: 2;
  max-width: 1440px;
  margin: 0 auto;
  padding: 96px 90px 110px;
}

.gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 64px;
}

.gallery-kicker {
  font-family: var(--font-script);
  font-size: 2.15rem;
  line-height: 1;
  color: var(--blue);
  margin-bottom: 6px;
}

.gallery-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.5rem, 6vw, 4.65rem);
  line-height: 0.94;
  letter-spacing: 0.01em;
  color: #12275c;
  text-transform: uppercase;
}

.gallery-text {
  max-width: 360px;
  font-family: "Patrick Hand", cursive;
  font-size: 1.38rem;
  line-height: 1.5;
  color: #5a5750;
  text-align: right;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 56px 44px;
}

.gallery-card {
  position: relative;
  background: #fffdf8;
  padding: 16px 16px 0;
  box-shadow: 0 14px 26px rgba(50, 42, 28, 0.18);
  transition: transform 260ms ease;
}

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

.gallery-card-tilt-left {
  transform: rotate(-1.8deg);
}

.gallery-card-tilt-right {
  transform: rotate(1.4deg);
}

.gallery-card-tilt-soft {
  transform: rotate(-0.8deg);
}

.gallery-tape {
  position: absolute;
  top: -16px;
  left: 50%;
  width: 120px;
  height: 34px;
  margin-left: -60px;
  background: rgba(28, 71, 196, 0.14);
  border-left: 1px dashed rgba(28, 71, 196, 0.3);
  border-right: 1px dashed rgba(28, 71, 196, 0.3);
  transform: rotate(-2deg);
  z-index: 2;
}

.gallery-card-tilt-right .gallery-tape {
  transform: rotate(3deg);
}

.gallery-card-tilt-soft .gallery-tape {
  transform: rotate(-4deg);
}

.gallery-card img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  background: #f2f0ea;
}

.gallery-card figcaption {
  font-family: var(--font-script);
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--blue);
  padding: 14px 4px 16px;
}

.gallery-actions {
  display: flex;
  justify-content: center;
  margin-top: 70px;
}

.gallery-button {
  font-family: var(--font-display);
  font-size: 1.25rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  background: var(--blue);
  padding: 18px 40px;
  border-radius: 999px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.gallery-button:hover,
.gallery-button:focus-visible {
  background: #12275c;
  transform: translateY(-2px);
}

@media (max-width: 980px) {
  .gallery-inner {
    padding: 80px 24px 90px;
  }

  .gallery-header {
    align-items: flex-start;
    flex-direction: column;
    margin-bottom: 48px;
  }

  .gallery-text {
    max-width: 520px;
    text-align: left;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }

  .gallery-card img {
    height: 320px;
  }
}

@media (max-width: 640px) {
  .gallery-inner {
    padding: 64px 18px 76px;
  }

  .gallery-kicker {
    font-size: 1.8rem;
  }

  .gallery-title {
    font-size: clamp(2.6rem, 14vw, 3.6rem);
  }

  .gallery-card {
    padding: 12px 12px 0;
  }

  .gallery-card img {
    height: 250px;
  }

  .gallery-card figcaption {
    font-size: 1.6rem;
  }

  .gallery-button {
    width: 100%;
    text-align: center;
    padding-inline: 20px;
  }
}

/* ---------------------------------------------
   Footer
--------------------------------------------- */

.site-footer {
  position: relative;
  /* the light paper plate from .rent / .gallery-section — so the page ends on
     paper rather than on a second dark block */
  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;
  color: var(--ink);
  padding: 96px 32px 28px;
  overflow-x: clip;
  overflow-y: visible;
}

.tear-footer-top {
  z-index: 1;
}

.footer-inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 40px;
  align-items: start;
}

/* on paper the logo goes back to its header colours */
.footer-logo .logo-fresh {
  color: var(--ink);
}

.footer-logo .logo-point {
  color: var(--blue);
}

.footer-tagline {
  margin-top: 12px;
  font-family: var(--font-script);
  font-size: 1.35rem;
  color: var(--blue);
}

.footer-heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: var(--blue);
}

.footer-list {
  list-style: none;
  display: grid;
  gap: 9px;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

.footer-list a {
  transition: color 0.18s ease;
}

.footer-list a:hover,
.footer-list a:focus-visible {
  color: var(--blue);
}

.footer-bottom {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 44px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(13, 85, 208, 0.18);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.footer-legal-nav {
  display: flex;
  gap: 20px;
}

.footer-legal-nav a:hover,
.footer-legal-nav a:focus-visible {
  color: var(--blue);
}

/* ---------------------------------------------
   Legal pages (Impressum / Datenschutz)
--------------------------------------------- */

.legal {
  max-width: 820px;
  margin: 0 auto;
  padding: 72px 32px 96px;
}

.legal-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.legal-updated {
  margin-top: 10px;
  font-family: var(--font-script);
  font-size: 1.25rem;
  color: var(--teal);
}

.legal h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.45rem;
  letter-spacing: 0.02em;
  margin: 44px 0 12px;
  padding-top: 22px;
  border-top: 2px solid rgba(13, 85, 208, 0.14);
}

.legal h3 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.05rem;
  margin: 26px 0 8px;
}

.legal p,
.legal li {
  color: var(--ink-soft);
  line-height: 1.72;
  font-size: 0.98rem;
}

.legal p + p {
  margin-top: 12px;
}

.legal ul,
.legal ol {
  margin: 12px 0 0 20px;
  display: grid;
  gap: 7px;
}

.legal address {
  font-style: normal;
  line-height: 1.72;
  color: var(--ink-soft);
}

.legal a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal strong {
  color: var(--ink);
}

/* fields the operator still has to supply before going live */
.legal .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;
}

.legal-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 52px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}

.legal-back:hover {
  color: var(--blue);
}

@media (max-width: 860px) {
  .site-footer {
    padding: 82px 18px 24px;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .legal {
    padding: 48px 18px 72px;
  }
}