/* ============================================================================
   Mindful Weddings - site stylesheet

   The sections below follow the order of the pages, so the block you are
   looking for is usually where you would expect it.

   Colours live as custom properties in the ":root" block. Change a value
   there and it updates everywhere that colour is used.
   ========================================================================= */

/* ----------------------------------------------------------------------------
   Web fonts
   ------------------------------------------------------------------------- */
/* Gelasio is metrically compatible with Georgia and is served from this repo,
   so headings look the same on devices without Georgia (most Android phones).
   Georgia stays as the first fallback. The browser downloads only the subset
   a page actually needs. */
@font-face {
  font-family: "Gelasio";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/gelasio-regular-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Gelasio";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/gelasio-regular-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Gelasio";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/gelasio-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Gelasio";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/gelasio-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------------------
   Reset
   ------------------------------------------------------------------------- */
/* Replaces the framework reset the original build shipped. Only the rules the
   site actually relies on are kept. */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  border: 0 solid;
}

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

ol,
ul,
menu {
  list-style: none;
}

img,
svg,
video,
canvas {
  display: block;
  vertical-align: middle;
}

img,
video {
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  background-color: transparent;
  border-radius: 0;
}


/* ----------------------------------------------------------------------------
   Design tokens
   ------------------------------------------------------------------------- */

:root {
  --ink: #343732;
  --sage: #778170;
  --sage-dark: #596255;
  --mist: #eef0eb;
  --ivory: #faf9f6;
  --silver: #b8b9b4;
  --line: #daddd6;
}


/* ----------------------------------------------------------------------------
   Base elements
   ------------------------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--ivory);
  color: var(--ink);
  margin: 0;
  font-family: Arial,Helvetica,sans-serif;
}

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


/* ----------------------------------------------------------------------------
   Text wrapping in the card grids

   German compound nouns such as "Willkommenstafeln" are long and have no
   place to break. Inside a 1fr grid column such a word widens its whole
   column, which used to push Kollektion and Individuell into horizontal
   scrolling on phones.

   Two rules are needed. Grid items default to min-width: auto, so a column
   can never shrink below its content; min-width: 0 lifts that. And the
   pages are marked lang="de", so browsers hyphenate the German words
   properly once hyphens is switched on. break-word stays as the fallback
   for anything hyphenation cannot split.
   ------------------------------------------------------------------------- */
.service-card,
.collection-card,
.inspiration-card,
.rental-card,
.custom-showcase-card {
  min-width: 0;
}

.service-card h3,
.collection-card h3,
.collection-card figcaption p,
.inspiration-card h3,
.rental-body h3,
.custom-showcase-card h3 {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}


/* ----------------------------------------------------------------------------
   Site header - home page (light text over the hero image)
   ------------------------------------------------------------------------- */

.nav-shell {
  z-index: 10;
  color: #fff;
  border-bottom: 1px solid #ffffff40;
  justify-content: space-between;
  align-items: center;
  height: 92px;
  padding: 0 5vw;
  display: flex;
  position: absolute;
  inset: 0 0 auto;
}

.brand {
  align-items: center;
  display: flex;
}

.home-logo {
  -webkit-backdrop-filter: blur(10px);
  background: #ffffffc7;
  border: 1px solid #ffffffe6;
  border-radius: 50%;
  align-self: flex-start;
  width: 174px;
  height: 174px;
  margin-top: 10px;
  padding: 17px;
  box-shadow: 0 12px 32px #1a221c33,inset 0 0 0 1px #6e766d26;
}

.home-logo img {
  object-fit: contain;
  filter: contrast(1.2)saturate(1.1)drop-shadow(0 2px 2px #21272229);
  image-rendering: auto;
  width: 100%;
  height: 100%;
  display: block;
}

nav {
  text-transform: uppercase;
  letter-spacing: .16em;
  gap: 35px;
  font-size: 12px;
  display: flex;
}

nav a {
  transition: opacity .2s;
}

nav a:hover {
  opacity: .65;
}

/* Menu button. Hidden on desktop; the mobile block further down shows it.
   The checkbox is the real control (transparent, but focusable and
   clickable), the bars below it are only the visual affordance. */
.nav-toggle {
  position: absolute;
  top: 50%;
  right: 5vw;
  z-index: 3;
  width: 46px;
  height: 46px;
  margin: 0;
  transform: translateY(-50%);
  opacity: 0;
  cursor: pointer;
  display: none;
}

.nav-burger {
  position: absolute;
  top: 50%;
  right: 5vw;
  z-index: 2;
  width: 46px;
  height: 46px;
  transform: translateY(-50%);
  display: none;
}

.nav-burger span {
  position: absolute;
  left: 11px;
  width: 24px;
  height: 1.5px;
  background: currentColor;
  transition: transform .25s, opacity .25s;
}

.nav-burger span:nth-child(1) {
  top: 17px;
}

.nav-burger span:nth-child(2) {
  top: 22.5px;
}

.nav-burger span:nth-child(3) {
  top: 28px;
}

/* Open state turns the three bars into a cross. */
.nav-toggle:checked ~ .nav-burger span:nth-child(1) {
  transform: translateY(5.5px) rotate(45deg);
}

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

.nav-toggle:checked ~ .nav-burger span:nth-child(3) {
  transform: translateY(-5.5px) rotate(-45deg);
}

.nav-toggle:focus-visible ~ .nav-burger {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

/* The button and the dropdown are positioned against their header, so the
   header has to be a containing block. The home page header already is one
   (it is absolutely positioned over the hero); this one is not, and without
   the rule below both would escape and position against the whole page. */
.collection-nav {
  position: relative;
  z-index: 10;
}

/* Sub pages have a light header, so the bars need the dark ink colour. */
.collection-nav .nav-burger {
  color: var(--ink);
}

/* That header pads 6vw instead of 5vw, so the button follows its edge. */
.collection-nav .nav-toggle,
.collection-nav .nav-burger {
  right: 6vw;
}


/* ----------------------------------------------------------------------------
   Home - hero, shared headings and buttons
   ------------------------------------------------------------------------- */

.hero {
  color: #fff;
  align-items: center;
  min-height: 820px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.hero-image {
  background: url("../img/mindful-weddings-hero.webp") 50%/cover;
  position: absolute;
  inset: 0;
  transform: scale(1.01);
}

.hero-wash {
  background: linear-gradient(90deg,#232a24d1,#29312a7a 48%,#1e241f14);
  position: absolute;
  inset: 0;
}

.hero-content {
  z-index: 2;
  width: min(760px,78vw);
  margin-left: 15vw;
  padding-top: 145px;
  position: relative;
}

.eyebrow,
.section-label {
  text-transform: uppercase;
  letter-spacing: .26em;
  font-size: 11px;
  font-weight: 600;
}

.eyebrow {
  color: #ffffffc7;
  margin-bottom: 28px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  letter-spacing: -.035em;
  margin-bottom: 33px;
  font-family: "Gelasio", Georgia, serif;
  font-size: clamp(54px,7vw,104px);
  font-weight: 400;
  line-height: .98;
}

h1 em {
  color: #dfe4db;
  font-weight: 400;
}

.hero-copy {
  color: #ffffffd4;
  max-width: 585px;
  font-family: "Gelasio", Georgia, serif;
  font-size: 20px;
  line-height: 1.65;
}

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

.button {
  letter-spacing: .16em;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  min-height: 54px;
  padding: 0 29px;
  font-size: 11px;
  font-weight: 700;
  transition: transform .2s,background .2s;
  display: inline-flex;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  color: var(--sage-dark);
  background: #fff;
}

.text-link {
  text-transform: uppercase;
  letter-spacing: .15em;
  border-bottom: 1px solid #ffffff80;
  padding-bottom: 7px;
  font-size: 11px;
}

.text-link span {
  margin-left: 8px;
}

.hero-note {
  z-index: 2;
  letter-spacing: .08em;
  text-transform: uppercase;
  align-items: flex-start;
  gap: 16px;
  font-size: 11px;
  display: flex;
  position: absolute;
  bottom: 50px;
  right: 5vw;
}

.hero-note span {
  color: #dfe4db;
  font-family: "Gelasio", Georgia, serif;
  font-size: 27px;
}

.hero-note p {
  line-height: 1.6;
}


/* ----------------------------------------------------------------------------
   Home - intro text and service cards
   ------------------------------------------------------------------------- */

.intro {
  max-width: 1500px;
  margin: auto;
  padding: 100px 8vw 95px;
}

.section-label {
  color: var(--sage);
  margin-bottom: 35px;
}

.intro-grid {
  grid-template-columns: .9fr 1.1fr;
  align-items: center;
  gap: 7vw;
  display: grid;
}

h2 {
  letter-spacing: -.025em;
  font-family: "Gelasio", Georgia, serif;
  font-size: clamp(38px,4vw,65px);
  font-weight: 400;
  line-height: 1.1;
}

.intro-grid h2 {
  max-width: 760px;
  margin-bottom: 32px;
}

.intro-copy>p {
  color: #666b64;
  max-width: 570px;
  line-height: 1.85;
}

.intro-visual {
  border: 1px solid var(--line);
  background: #f5f3ee;
  margin: 0;
  padding: 10px;
}

.intro-visual img {
  aspect-ratio: 16/9;
  object-fit: cover;
  width: 100%;
  display: block;
}

.intro-visual figcaption {
  color: #747a72;
  letter-spacing: .13em;
  text-transform: uppercase;
  padding: 13px 5px 3px;
  font-size: 9px;
}

.service-grid {
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(3,1fr);
  margin-top: 85px;
  display: grid;
}

.service-card {
  border-right: 1px solid var(--line);
  min-height: 250px;
  padding: 34px 38px 24px 0;
}

.service-card+.service-card {
  padding-left: 38px;
}

.service-card:last-child {
  border-right: 0;
}

.service-card>span,
.process-grid span {
  color: var(--silver);
  font-family: "Gelasio", Georgia, serif;
  font-style: italic;
}

.service-card h3 {
  margin-top: 49px;
  font-family: "Gelasio", Georgia, serif;
  font-size: 28px;
  font-weight: 400;
}

.service-card p {
  color: #6d716b;
  font-size: 14px;
  line-height: 1.8;
}


/* ----------------------------------------------------------------------------
   Home - origin story and sample offer pages
   ------------------------------------------------------------------------- */

.origin {
  background: #f1f0ec;
  grid-template-columns: .72fr 1.28fr;
  gap: 20px 6vw;
  padding: 100px 10vw 90px;
  display: grid;
}

.origin-heading {
  max-width: 660px;
}

.origin-heading h2 {
  margin-bottom: 0;
}

.origin-content {
  max-width: 920px;
  padding-top: 43px;
}

.origin-content>p {
  color: #686e66;
  line-height: 1.9;
}

.origin-content .origin-lead {
  color: #525a50;
  font: 20px/1.7 "Gelasio", Georgia, serif;
}

.origin-bottom {
  text-align: left;
  grid-column: 1/-1;
  width: 100%;
  margin-top: 0;
  padding-top: 0;
}

.origin-bottom p {
  color: #686e66;
  max-width: none;
  line-height: 1.9;
}

.offer-evidence {
  margin: 38px 0 42px;
}

.offer-pages {
  grid-template-columns: repeat(3,1fr);
  align-items: start;
  gap: 12px;
  display: grid;
}

.offer-pages a {
  background: #fff;
  border: 1px solid #d5d7d1;
  padding: 6px;
  transition: transform .2s,box-shadow .2s;
  display: block;
  box-shadow: 0 12px 28px #30362f17;
}

.offer-pages a:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px #30362f24;
}

.offer-pages img {
  width: 100%;
  height: auto;
  display: block;
}

.offer-evidence figcaption {
  color: #7a7f77;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-top: 14px;
  font-size: 10px;
  line-height: 1.6;
}


/* ----------------------------------------------------------------------------
   Home - sustainability story and principles
   ------------------------------------------------------------------------- */

.story {
  background: var(--mist);
  grid-template-columns: 1fr 1fr;
  display: grid;
}

.story-photo {
  background: url("../img/mindful-weddings-detail.webp") 50%/cover;
  min-height: 780px;
}

.story-content {
  align-self: center;
  padding: 100px 8vw 85px;
}

.story-content h2 {
  max-width: 650px;
}

.story-content .lead {
  color: #565e54;
  font-family: "Gelasio", Georgia, serif;
  font-size: 20px;
  line-height: 1.7;
}

.story-content>p:not(.section-label):not(.lead) {
  color: #6f746d;
  line-height: 1.8;
}

.principles {
  border-top: 1px solid #cfd3ca;
  margin-top: 48px;
}

.principles div {
  border-bottom: 1px solid #cfd3ca;
  justify-content: space-between;
  padding: 18px 0;
  display: flex;
}

.principles strong {
  font-family: "Gelasio", Georgia, serif;
  font-size: 19px;
  font-weight: 400;
}

.principles span {
  color: #747a72;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 12px;
}


/* ----------------------------------------------------------------------------
   Home - how the collaboration works
   ------------------------------------------------------------------------- */

.process {
  max-width: 1500px;
  margin: auto;
  padding: 95px 8vw;
}

.process-grid {
  grid-template-columns: repeat(3,1fr);
  gap: 7vw;
  display: grid;
}

.process-grid div {
  border-top: 1px solid var(--line);
  padding-top: 25px;
}

.process-grid h3 {
  margin: 35px 0 15px;
  font-family: "Gelasio", Georgia, serif;
  font-size: 27px;
  font-weight: 400;
}

.process-grid p {
  color: #6d716b;
  font-size: 14px;
  line-height: 1.8;
}


/* ----------------------------------------------------------------------------
   Home - contact block
   ------------------------------------------------------------------------- */

.contact {
  text-align: center;
  background: var(--sage-dark);
  color: #fff;
  padding: 95px 8vw 55px;
}

.contact .section-label {
  color: #dce2d8;
}

.contact h2 {
  max-width: 850px;
  margin: 0 auto 28px;
}

.contact>p {
  color: #fffc;
  max-width: 760px;
  margin: 0 auto 38px;
  font-family: "Gelasio", Georgia, serif;
  font-size: 18px;
  line-height: 1.7;
}

.contact>p strong {
  color: #fff;
  font-weight: 400;
}

.button-light {
  border: 1px solid #ffffffa6;
}

.button-light:hover {
  color: var(--sage-dark);
  background: #fff;
}

.contact-meta {
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #ffffffa8;
  border-top: 1px solid #ffffff40;
  justify-content: space-between;
  margin-top: 90px;
  padding-top: 25px;
  font-size: 10px;
  display: flex;
}

.contact-meta a {
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}

.contact-meta a:hover {
  color: #fff;
}


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

footer {
  color: #ffffffb3;
  text-transform: uppercase;
  letter-spacing: .12em;
  background: #30362f;
  justify-content: space-between;
  align-items: center;
  padding: 40px 5vw;
  font-size: 11px;
  display: flex;
}

.footer-legal {
  align-items: center;
  gap: 20px;
  display: flex;
}

.footer-legal a {
  border-bottom: 1px solid #ffffff47;
  padding-bottom: 4px;
}


/* ----------------------------------------------------------------------------
   Legal pages - Impressum and Datenschutz
   ------------------------------------------------------------------------- */

.legal-page {
  background: #f8f7f3;
  min-height: 100vh;
}

.legal-nav {
  border-bottom: 1px solid var(--line);
  justify-content: space-between;
  align-items: center;
  height: 105px;
  padding: 0 6vw;
  display: flex;
}

.legal-nav img {
  object-fit: contain;
  width: 92px;
  height: 92px;
}

.legal-nav>a:last-child {
  color: var(--sage-dark);
  letter-spacing: .15em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
}

.legal-content {
  text-align: left;
  width: min(980px,88vw);
  margin: 0 auto;
  padding: 80px 0 105px;
}

.legal-content h1 {
  color: var(--ink);
  margin-bottom: 48px;
  font-size: clamp(42px,5vw,64px);
}

.legal-content h2 {
  margin: 42px 0 14px;
  font-size: 23px;
}

.legal-content h3 {
  margin: 30px 0 10px;
  font: 400 19px "Gelasio", Georgia, serif;
}

.legal-content p,
.legal-content li {
  color: #656b63;
  text-align: left;
  font-size: 13px;
  line-height: 1.72;
}

.legal-content ul {
  margin: 0 0 22px;
  padding-left: 0;
  list-style-position: inside;
}

.legal-content li {
  padding-left: 0;
}

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

.legal-card {
  background: 0 0;
  border: 0;
  padding: 0;
}

.legal-note {
  border-top: 1px solid var(--line);
  margin-top: 60px;
  padding-top: 20px;
  font-size: 12px!important;
}


/* ----------------------------------------------------------------------------
   Footer logo badge
   ------------------------------------------------------------------------- */

.footer-brand {
  background: #fffffff0;
  border-radius: 50%;
  width: 136px;
  height: 136px;
  padding: 9px;
  box-shadow: 0 9px 24px #2027212e,inset 0 0 0 1px #70776f21;
}

.footer-brand img {
  object-fit: contain;
  filter: contrast(1.22)saturate(1.12)drop-shadow(0 2px 2px #21272229);
  width: 100%;
  height: 100%;
}


/* ----------------------------------------------------------------------------
   Kollektion page - Weiss, Creme and Salbeigruen
   ------------------------------------------------------------------------- */

.collection-page {
  background: #f8f7f3;
}

.collection-nav {
  border-bottom: 1px solid var(--line);
  background: #f8f7f3;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  padding: 0 6vw;
  display: flex;
}

.collection-brand {
  width: 92px;
  height: 92px;
  padding: 7px;
}

.collection-brand img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.collection-nav nav {
  color: var(--ink);
}

.collection-hero {
  background: #e8e8e1;
  grid-template-columns: .92fr 1.08fr;
  align-items: stretch;
  min-height: 710px;
  display: grid;
}

.collection-hero>div {
  align-self: center;
  padding: 120px 7vw;
}

.collection-hero h1 {
  color: var(--ink);
  font-size: clamp(55px,6vw,94px);
}

.collection-hero h1 em {
  color: var(--sage);
}

.collection-hero p:not(.section-label) {
  color: #656b63;
  max-width: 590px;
  font-family: "Gelasio", Georgia, serif;
  font-size: 19px;
  line-height: 1.75;
}

.collection-hero>img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  min-height: 710px;
}

.location-note {
  grid-template-columns: .9fr 1.1fr;
  gap: 4vw 9vw;
  max-width: 1500px;
  margin: auto;
  padding: 95px 8vw 85px;
  display: grid;
  position: relative;
}

.location-note h2 {
  max-width: 570px;
}

.location-copy p {
  color: #676d65;
  line-height: 1.9;
}

.collection-gallery {
  background: #eeede8;
  padding: 90px 6vw 105px;
}

.collection-heading {
  max-width: 1320px;
  margin: 0 auto 55px;
}

.collection-heading h2 {
  max-width: 760px;
}

.collection-grid {
  grid-template-columns: repeat(3,1fr);
  align-items: start;
  gap: 24px;
  max-width: 1320px;
  margin: auto;
  display: grid;
}

.collection-card {
  background: #faf9f6;
  border: 1px solid #dcded7;
  margin: 0;
  padding: 11px 11px 20px;
}

.collection-card-featured:first-child {
  grid-column: span 2;
}

.collection-card-featured:first-child .collection-image {
  aspect-ratio: 8/5;
}

.collection-image {
  aspect-ratio: 4/5;
  background: #e4e1da;
  overflow: hidden;
}

.collection-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .6s;
  display: block;
}

.collection-card:hover img {
  transform: scale(1.025);
}

.collection-card figcaption {
  padding: 17px 5px 0;
  position: relative;
}

.collection-card figcaption div {
  align-items: baseline;
  gap: 13px;
  display: flex;
}

.collection-card figcaption span {
  color: #9da198;
  font: italic 14px "Gelasio", Georgia, serif;
}

.collection-card h3 {
  margin-bottom: 8px;
  font: 400 21px "Gelasio", Georgia, serif;
}

.collection-card figcaption p {
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #7b8078;
  margin: 0;
  font-size: 9px;
}

.collection-card-details {
  border-top: 1px solid #dedfd9;
  justify-content: space-between;
  margin-top: 15px;
  padding-top: 13px;
  align-items: center!important;
  gap: 10px!important;
  display: flex!important;
}

.collection-card-details strong {
  color: var(--sage-dark);
  letter-spacing: .07em;
  text-transform: uppercase;
  font: 600 11px/1.4 Arial,sans-serif;
}

.collection-card-details b {
  background: var(--sage-dark);
  color: #fff;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 7px 9px;
  font-size: 9px;
}

.collection-package-note {
  background: #ffffff7a;
  border: 1px solid #cfd3ca;
  grid-column: 1/-1;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 5px 35px;
  margin-top: 24px;
  padding: 28px 34px;
  display: grid;
}

.collection-package-note p {
  color: #81877e;
  letter-spacing: .17em;
  text-transform: uppercase;
  margin: 0;
  font-size: 10px;
}

.collection-package-note strong {
  color: var(--sage-dark);
  font: 400 clamp(27px,3vw,42px)/1.1 "Gelasio", Georgia, serif;
}

.collection-package-note span {
  color: #5f665d;
  grid-area: 1/2/3;
  align-self: center;
  font: italic 16px/1.5 "Gelasio", Georgia, serif;
}

.collection-package-note small {
  color: #777d75;
  letter-spacing: .04em;
  grid-column: 1/-1;
  margin-top: 9px;
  font-size: 11px;
}

.collection-package-note small b {
  color: #5f665d;
  font-weight: 700;
}

.inspiration {
  max-width: 1500px;
  margin: auto;
  padding: 95px 6vw 105px;
}

.inspiration-heading {
  grid-template-columns: 1.15fr .85fr;
  align-items: end;
  gap: 9vw;
  margin-bottom: 60px;
  display: grid;
}

.inspiration-heading h2 {
  max-width: 770px;
  margin-bottom: 0;
}

.inspiration-heading>p {
  color: #686e66;
  margin-bottom: 5px;
  line-height: 1.85;
}

.inspiration-grid {
  grid-template-columns: repeat(2,1fr);
  gap: 28px;
  display: grid;
}

.inspiration-card {
  border: 1px solid var(--line);
  background: #f5f3ee;
  margin: 0;
  padding: 11px 11px 24px;
}

.inspiration-card img {
  aspect-ratio: 3/2;
  object-fit: cover;
  background: #e7e4dd;
  width: 100%;
  display: block;
}

.inspiration-card-3 img,
.inspiration-card-5 img {
  object-position: center;
}

.inspiration-card-4 img {
  object-position: center 78%;
}

.visual-disclaimer {
  border-top: 1px solid var(--line);
  color: #858a82;
  text-align: center;
  max-width: 1050px;
  margin: 36px auto 0;
  padding-top: 22px;
  font-size: 11px;
  line-height: 1.75;
}

.visual-disclaimer strong {
  color: #6d736b;
  font-weight: 600;
}

.inspiration-card figcaption {
  gap: 18px;
  padding: 21px 7px 0;
  display: flex;
}

.inspiration-card figcaption>span {
  color: #999f96;
  font: italic 15px "Gelasio", Georgia, serif;
}

.inspiration-card h3 {
  margin: 0 0 8px;
  font: 400 22px "Gelasio", Georgia, serif;
}

.inspiration-card figcaption p {
  color: #70756e;
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
}

.collection-cta {
  text-align: center;
  background: var(--sage-dark);
  color: #fff;
  padding: 90px 7vw;
}

.collection-cta .section-label {
  color: #dce2d8;
}

.collection-cta>p:not(.section-label) {
  color: #ffffffc7;
  font-family: "Gelasio", Georgia, serif;
  font-size: 18px;
}

.collection-cta h2 {
  max-width: 850px;
  margin: 0 auto 25px;
}


/* ----------------------------------------------------------------------------
   Mietgegenstaende page
   ------------------------------------------------------------------------- */

.rental-hero {
  max-width: 1500px;
  margin: auto;
  padding: 100px 8vw 80px;
}

.rental-hero h1 {
  max-width: 1120px;
  color: var(--ink);
  font-size: clamp(52px,6.4vw,94px);
}

.rental-hero>p:not(.section-label) {
  color: #646b62;
  max-width: 830px;
  font: 19px/1.8 "Gelasio", Georgia, serif;
}

.price-key {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  letter-spacing: .15em;
  text-transform: uppercase;
  justify-content: space-between;
  gap: 25px;
  margin-top: 55px;
  padding: 22px 0;
  font-size: 10px;
  display: flex;
}

.price-key span {
  color: var(--sage);
}

.price-key strong {
  font-weight: 600;
}

.rental-catalog {
  background: #eeede8;
  padding: 90px 6vw 105px;
}

.rental-heading {
  max-width: 1320px;
  margin: 0 auto 58px;
}

.rental-heading h2 {
  max-width: 780px;
}

.rental-grid {
  grid-template-columns: repeat(2,1fr);
  gap: 27px;
  max-width: 1320px;
  margin: auto;
  display: grid;
}

.rental-card {
  background: #faf9f6;
  border: 1px solid #dcded7;
  grid-template-columns: 1.08fr .92fr;
  min-height: 440px;
  padding: 11px;
  display: grid;
}

.rental-image {
  background: #e6e3dc;
  min-height: 410px;
  overflow: hidden;
}

.rental-image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .7s;
  display: block;
}

.rental-card:hover .rental-image img {
  transform: scale(1.025);
}

.rental-body {
  flex-direction: column;
  padding: 27px 25px 20px;
  display: flex;
}

.rental-index {
  color: #9da198;
  font: italic 14px "Gelasio", Georgia, serif;
}

.rental-body h3 {
  margin: 24px 0 9px;
  font: 400 25px/1.2 "Gelasio", Georgia, serif;
}

.rental-quantity {
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sage-dark)!important;
  font-size: 10px!important;
}

.rental-body>p:not(.rental-quantity) {
  color: #71766f;
  font-size: 13px;
  line-height: 1.7;
}

.rental-price {
  border-top: 1px solid var(--line);
  justify-content: space-between;
  align-items: baseline;
  gap: 15px;
  margin-top: auto;
  padding-top: 20px;
  display: flex;
}

.rental-price span {
  color: #858a82;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 9px;
}

.rental-price strong {
  color: var(--sage-dark);
  font: 400 25px "Gelasio", Georgia, serif;
}

.rental-option {
  border-left: 2px solid var(--sage);
  background: #eef0eb;
  flex-direction: column;
  gap: 5px;
  padding: 13px 15px;
  display: flex;
  margin: 15px 0 0!important;
}

.rental-option span {
  color: #858a82;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-size: 8px;
}

.rental-option strong {
  color: var(--sage-dark);
  letter-spacing: .035em;
  font: 600 11px/1.45 Arial,sans-serif;
}

.bundle-note {
  text-align: center;
  background: var(--sage-dark);
  color: #fff;
  padding: 90px 8vw;
}

.bundle-note .section-label {
  color: #dce2d8;
}

.bundle-note h2 {
  max-width: 850px;
  margin: 0 auto 25px;
}

.bundle-note>p:not(.section-label) {
  color: #fffc;
  max-width: 760px;
  margin: 0 auto 40px;
  font: 18px/1.75 "Gelasio", Georgia, serif;
}

.bundle-price {
  color: #fff;
  margin: -6px auto 22px;
  font: 400 clamp(34px,4vw,58px)/1.1 "Gelasio", Georgia, serif;
  display: block;
}


/* ----------------------------------------------------------------------------
   Individuell page - custom paper goods
   ------------------------------------------------------------------------- */

.custom-hero {
  background: linear-gradient(135deg,#f2f1ec,#e4e8e1);
  padding: 100px 8vw 80px;
}

.custom-hero>div {
  max-width: 1050px;
  margin: auto;
}

.custom-hero h1 {
  max-width: 950px;
  color: var(--ink);
  font-size: clamp(52px,6.3vw,92px);
}

.custom-hero p:not(.section-label) {
  color: #626a61;
  max-width: 760px;
  font: 19px/1.8 "Gelasio", Georgia, serif;
}

.custom-heading {
  max-width: 820px;
  margin-bottom: 60px;
}

.custom-process {
  background: #eeede8;
  padding: 90px 8vw;
}

.custom-process>div {
  grid-template-columns: .8fr 1.2fr;
  gap: 8vw;
  max-width: 1250px;
  margin: auto;
  display: grid;
}

.custom-process-copy p {
  color: #676d65;
  line-height: 1.85;
}

.custom-process .button {
  border: 1px solid var(--sage-dark);
  color: var(--sage-dark);
  margin-top: 22px;
}

.custom-process .button:hover {
  background: var(--sage-dark);
  color: #fff;
}

.custom-showcase {
  background: #eeede8;
  padding: 90px 6vw 105px;
}

.custom-showcase .custom-heading {
  max-width: 900px;
  margin: 0 auto 52px;
}

.custom-showcase .custom-heading>p:not(.section-label) {
  color: #676d65;
  max-width: 780px;
  line-height: 1.8;
}

.custom-showcase-grid {
  grid-template-columns: repeat(4,1fr);
  gap: 18px;
  max-width: 1320px;
  margin: auto;
  display: grid;
}

.custom-showcase-card {
  border: 1px solid var(--line);
  background: #faf9f6;
  margin: 0;
  padding: 9px 9px 22px;
}

.custom-showcase-card-save,
.custom-showcase-card-invites,
.custom-showcase-card-signs,
.custom-showcase-card-gifts {
  grid-row: 1;
}

.custom-showcase-card-welcome {
  grid-area: 2/1/auto/3;
}

.custom-showcase-card-tears {
  grid-area: 2/3;
}

.custom-showcase-card-tablecards {
  grid-area: 2/4;
}

.custom-showcase-card-envelopes {
  grid-area: 3/1/auto/3;
}

.custom-showcase-images {
  width: 100%;
  display: grid;
}

.custom-showcase-images-pair {
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.custom-showcase-card img {
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center;
  background: #e7e4dd;
  width: 100%;
  display: block;
}

.custom-showcase-card-welcome .custom-showcase-images img,
.custom-showcase-card-envelopes .custom-showcase-images img {
  aspect-ratio: 16/9;
}

.custom-showcase-images-pair img {
  aspect-ratio: 4/5;
  height: 100%;
}

.custom-showcase-card-tablecards .custom-showcase-images {
  grid-template-columns: 1fr;
}

.custom-showcase-card-tablecards .custom-showcase-images img {
  aspect-ratio: 4/3;
}

.custom-showcase-card-tablecards .custom-showcase-images img:first-child {
  object-position: left center;
}

.custom-showcase-card figcaption {
  gap: 15px;
  padding: 18px 8px 0;
  display: flex;
}

.custom-showcase-card figcaption>span {
  color: #999f96;
  font: italic 14px "Gelasio", Georgia, serif;
}

.custom-showcase-card h3 {
  margin: 0 0 8px;
  font: 400 20px/1.25 "Gelasio", Georgia, serif;
}

.custom-showcase-card p {
  color: #6d736b;
  margin: 0;
  font-size: 12px;
  line-height: 1.65;
}

.custom-anything {
  border: 1px solid var(--line);
  background: #faf9f6;
  grid-area: 3/3/auto/5;
  grid-template-columns: auto 1fr;
  gap: 30px;
  max-width: none;
  margin: 0;
  padding: 38px 42px;
  display: grid;
}

.custom-anything>span {
  color: #999f96;
  font: italic 17px "Gelasio", Georgia, serif;
}

.custom-anything h3 {
  margin: 2px 0 12px;
  font: 400 clamp(30px,3vw,46px)/1.15 "Gelasio", Georgia, serif;
}

.custom-anything p:not(.section-label) {
  color: #676d65;
  max-width: 850px;
  margin: 0;
  line-height: 1.8;
}


/* ----------------------------------------------------------------------------
   Mobile layout (up to 800px), including the collapsible menu
   ------------------------------------------------------------------------- */

@media (max-width: 800px) {
  .nav-shell {
    height: 75px;
  }

  .home-logo {
    width: 128px;
    height: 128px;
    margin-top: 8px;
    padding: 12px;
  }

  .hero {
    min-height: 760px;
  }

  .hero-content {
    width: 84vw;
    margin-left: 9vw;
    padding-top: 155px;
  }

  .hero-copy {
    font-size: 17px;
  }

  .hero-note {
    display: none;
  }

  .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
  }

  .intro {
    padding: 85px 7vw;
  }

  .intro-grid,
  .story {
    grid-template-columns: 1fr;
  }

  .intro-grid {
    gap: 38px;
  }

  .intro-visual {
    order: 2;
  }

  .service-grid,
  .process-grid {
    grid-template-columns: 1fr;
  }

  .service-card,
  .service-card+.service-card {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    min-height: 0;
    padding: 28px 0;
  }

  .service-card h3 {
    margin-top: 22px;
  }

  .origin {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 85px 7vw;
  }

  .origin-content {
    padding-top: 0;
  }

  .offer-pages {
    scroll-snap-type: x mandatory;
    gap: 10px;
    padding: 0 0 12px;
    display: flex;
    overflow-x: auto;
  }

  .offer-pages a {
    scroll-snap-align: start;
    flex: 0 0 72%;
  }

  .story-photo {
    min-height: 500px;
  }

  .story-content {
    padding: 80px 7vw;
  }

  .process {
    padding: 85px 7vw;
  }

  .process-grid {
    gap: 35px;
  }

  .contact {
    padding: 90px 7vw 45px;
  }

  .contact-meta {
    flex-direction: column;
    gap: 12px;
  }

  footer {
    text-align: center;
    flex-direction: column;
    gap: 22px;
  }

  .footer-legal {
    flex-wrap: wrap;
    justify-content: center;
  }

  .legal-nav {
    height: 88px;
  }

  .legal-nav img {
    width: 76px;
    height: 76px;
  }

  .legal-content {
    padding: 70px 0 90px;
  }

  .legal-card {
    padding: 26px 22px;
  }

  .collection-nav {
    height: 82px;
  }

  .collection-brand {
    width: 76px;
    height: 76px;
  }

  .collection-hero {
    grid-template-columns: 1fr;
  }

  .collection-hero>div {
    padding: 85px 7vw 60px;
  }

  .collection-hero>img {
    min-height: 430px;
  }

  .location-note {
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 85px 7vw;
  }

  .collection-package-note {
    grid-template-columns: 1fr;
    padding: 24px;
  }

  .collection-package-note span {
    grid-area: auto/1;
  }

  .collection-gallery {
    padding: 85px 5vw;
  }

  .collection-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .collection-card {
    padding: 7px 7px 15px;
  }

  .collection-card-featured:first-child {
    grid-column: span 2;
  }

  .collection-card h3 {
    font-size: 17px;
  }

  .collection-card figcaption p {
    line-height: 1.5;
  }

  .collection-card-details {
    flex-direction: column;
    align-items: flex-start!important;
  }

  .inspiration {
    padding: 85px 5vw;
  }

  .inspiration-heading {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 40px;
  }

  .inspiration-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .inspiration-card {
    padding: 7px 7px 18px;
  }

  .inspiration-card figcaption {
    padding: 16px 4px 0;
  }

  .collection-cta {
    padding: 85px 7vw;
  }

  .rental-hero {
    padding: 85px 7vw 70px;
  }

  .rental-hero>p:not(.section-label) {
    font-size: 17px;
  }

  .price-key {
    flex-direction: column;
    align-items: flex-start;
  }

  .rental-catalog {
    padding: 80px 5vw;
  }

  .rental-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .rental-card {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 7px;
  }

  .rental-image {
    aspect-ratio: 4/3;
    min-height: 0;
  }

  .rental-body {
    min-height: 280px;
    padding: 22px 17px 18px;
  }

  .bundle-note {
    padding: 85px 7vw;
  }

  .custom-hero {
    padding: 85px 7vw 70px;
  }

  .custom-hero p:not(.section-label) {
    font-size: 17px;
  }

  .custom-showcase {
    padding: 80px 5vw;
  }

  .custom-showcase-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .custom-showcase-card-save,
  .custom-showcase-card-invites,
  .custom-showcase-card-signs,
  .custom-showcase-card-gifts,
  .custom-showcase-card-welcome,
  .custom-showcase-card-tears,
  .custom-showcase-card-tablecards,
  .custom-showcase-card-envelopes,
  .custom-anything {
    grid-area: auto;
  }

  .custom-showcase-card-welcome,
  .custom-showcase-card-envelopes,
  .custom-anything {
    grid-column: span 2;
  }

  .custom-showcase-card-welcome .custom-showcase-images img,
  .custom-showcase-card-envelopes .custom-showcase-images img {
    aspect-ratio: 16/9;
  }

  .custom-showcase-card {
    padding: 6px 6px 16px;
  }

  .custom-showcase-card figcaption {
    padding: 14px 5px 0;
  }

  .custom-anything {
    gap: 18px;
    padding: 28px 22px;
  }

  .custom-process {
    padding: 85px 7vw;
  }

  .custom-process>div {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  /* The navigation folds into the menu button. The original build simply hid
     it here, which left phone visitors with no way to reach the sub pages. */
  .nav-toggle,
  .nav-burger {
    display: block;
  }

  nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 6px 0 14px;
    display: none;
    box-shadow: 0 18px 40px #1a221c33;
  }

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

  .nav-shell nav {
    background: #343732f2;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #ffffff26;
  }

  .collection-nav nav {
    background: #f8f7f3;
    border-bottom: 1px solid var(--line);
  }

  nav a {
    padding: 15px 7vw;
  }

  .nav-shell nav a + a {
    border-top: 1px solid #ffffff1f;
  }

  .collection-nav nav a + a {
    border-top: 1px solid var(--line);
  }
}