@charset "UTF-8";
@font-face {
  font-family: "Romie";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/Romie-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Romie";
  font-style: italic;
  font-weight: normal;
  src: url("../fonts/Romie-Regular-Italic.otf") format("opentype");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: normal;
  src: url("../fonts/Inter-Regular.woff2") format("woff2");
}
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  scroll-behavior: smooth;
  font-size: 1vw;
  font-weight: normal;
  background-color: rgb(239, 233, 227);
}

body {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  font-family: "Romie", serif;
  -webkit-font-smoothing: antialiased;
  line-height: var(--line-height);
}

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

img {
  height: auto;
}

h1, h2, h3, h4 {
  font-size: inherit;
  font-weight: inherit;
  margin-block-start: 0;
  margin-block-end: 0;
}

ul {
  margin-block-start: 0;
  margin-block-end: 0;
  padding-inline-start: 0;
  list-style: none;
}

ol {
  margin-block-start: 0;
  margin-block-end: 0;
}

p {
  margin-block-start: 0;
  margin-block-end: 0;
}
p + p {
  margin-top: 1.19em;
}
p + h4.sans {
  margin-top: 1.4em;
}

strong {
  font-weight: 600;
}

.t-c {
  text-align: center;
}

.sans {
  font-family: "Inter", sans-serif;
  font-size: 1.04rem;
}

.f-xl {
  font-size: 5.2rem;
  line-height: 1.1;
}

.f-m {
  font-size: 1.43rem;
  letter-spacing: 0.02em;
}

.f-s {
  font-size: 1.07rem;
  line-height: 1.4;
  letter-spacing: 0.02em;
}
.f-s.sans {
  font-size: 1.04rem;
}

.d-b {
  display: block;
}

.d-i-b {
  display: block;
}

.d-f {
  display: flex;
  flex-wrap: wrap;
}

.d-f-c {
  flex-direction: column;
}

.j-s-b {
  justify-content: space-between;
}

.j-c {
  justify-content: center;
}

.a-b {
  align-items: baseline;
}

.a-c {
  align-items: center;
}

.a-s {
  align-items: flex-start;
}

.m-l-a {
  margin-left: auto;
}

.p-a {
  position: absolute;
}

.r-0 {
  right: 0;
}

.m-t-01 {
  margin-top: 0.1em;
}

.m-t-025 {
  margin-top: 0.25em;
}

.p-r-1 {
  padding-right: calc(var(--unit) * 1);
}

.p-r-2 {
  padding-right: calc(var(--unit) * 2);
}

.p-r-3 {
  padding-right: calc(var(--unit) * 3);
}

.p-r-4 {
  padding-right: calc(var(--unit) * 4);
}

.p-r-5 {
  padding-right: calc(var(--unit) * 5);
}

.p-r-6 {
  padding-right: calc(var(--unit) * 6);
}

.p-r-7 {
  padding-right: calc(var(--unit) * 7);
}

.p-r-8 {
  padding-right: calc(var(--unit) * 8);
}

#app {
  margin: auto;
  width: 100%;
  position: relative;
  overflow-x: clip;
}

header {
  position: absolute;
  z-index: 2;
  height: 100%;
  pointer-events: none;
  padding: calc(var(--unit) * 0.4) 0 0;
}
header div:nth-child(1) {
  height: 100%;
}
header h1, header h2 {
  display: inline;
  position: sticky;
}
header h2 {
  font-style: italic;
  top: calc(var(--unit) * 0.444);
}
header h1 {
  top: calc(var(--unit) * 0.4);
}

#buttons {
  position: fixed;
  bottom: 2.7rem;
  display: flex;
  justify-content: center;
  width: 100%;
  transition: opacity 0.66s;
  opacity: 1;
  pointer-events: auto;
}

.footer-visible #buttons {
  opacity: 0;
}

header, section, main {
  width: 100%;
}

section {
  position: relative;
}

h1 span:nth-of-type(1) {
  position: relative;
  display: inline-block;
  top: -0.45em;
  font-size: 65%;
}

.shift {
  position: relative;
  display: inline-block;
  top: -0.45em;
  font-size: 65%;
}

.button {
  font-family: "Inter", sans-serif;
  background-color: white;
  line-height: 1;
  padding: 0.5em 0.9em 0.5em;
  border-radius: 1em;
  transition: background-color 0.3s;
  font-size: 1.04rem;
}
.button:hover {
  background-color: #E4D8CD;
  text-decoration: none;
}
.button + .button {
  margin-left: 0.6em;
}

#intro {
  height: 100svh;
}

#leistungen ul li {
  height: 10em;
  padding-left: 1.5em;
  position: relative;
}
#leistungen ul li:before {
  content: "";
  width: 0.7em;
  height: 0.7em;
  background-color: white;
  position: absolute;
  left: 0;
  border-radius: 0.8em;
  top: 0.2em;
}

footer {
  padding: calc(var(--unit) * 0.8) 0;
  background-color: rgb(247, 244, 241);
  z-index: 2;
}
footer .button {
  display: inline-block;
}

#imprint {
  display: inline-block;
}

.blur {
  filter: blur(3rem);
  will-change: filter;
}

.transition {
  transition: filter 4s;
  filter: blur(3rem);
  will-change: filter;
}
.transition.in-view {
  filter: blur(0);
}

.delay-1 {
  transition-delay: 1000ms;
}

.delay-2 {
  transition-delay: 2000ms;
}

.expander {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 1s;
}

.expander-content {
  min-height: 0;
  transition: visibility 1s;
  visibility: hidden;
}

.expander.expanded {
  grid-template-rows: 1fr;
}

.expander.expanded .expander-content {
  visibility: visible;
}

@media (min-aspect-ratio: 950/1000) {
  html, body {
    font-size: 1vw;
  }
  :root {
    --unit: calc( 100dvw / 16 );
    --line-height: 1.3;
  }
  .s-1 {
    width: calc(var(--unit) * 1);
  }
  .s-2 {
    width: calc(var(--unit) * 2);
  }
  .s-3 {
    width: calc(var(--unit) * 3);
  }
  .s-4 {
    width: calc(var(--unit) * 4);
  }
  .s-5 {
    width: calc(var(--unit) * 5);
  }
  .s-6 {
    width: calc(var(--unit) * 6);
  }
  .s-7 {
    width: calc(var(--unit) * 7);
  }
  .s-8 {
    width: calc(var(--unit) * 8);
  }
  .s-9 {
    width: calc(var(--unit) * 9);
  }
  .s-10 {
    width: calc(var(--unit) * 10);
  }
  .s-11 {
    width: calc(var(--unit) * 11);
  }
  .s-12 {
    width: calc(var(--unit) * 12);
  }
  .s-13 {
    width: calc(var(--unit) * 13);
  }
  .s-14 {
    width: calc(var(--unit) * 14);
  }
  .s-15 {
    width: calc(var(--unit) * 15);
  }
  .s-16 {
    width: calc(var(--unit) * 16);
  }
  .l-0 {
    left: calc(var(--unit) * 0);
  }
  .l-1 {
    left: calc(var(--unit) * 1);
  }
  .l-2 {
    left: calc(var(--unit) * 2);
  }
  .l-3 {
    left: calc(var(--unit) * 3);
  }
  .l-4 {
    left: calc(var(--unit) * 4);
  }
  .l-5 {
    left: calc(var(--unit) * 5);
  }
  .l-6 {
    left: calc(var(--unit) * 6);
  }
  .l-7 {
    left: calc(var(--unit) * 7);
  }
  .l-8 {
    left: calc(var(--unit) * 8);
  }
  .l-9 {
    left: calc(var(--unit) * 9);
  }
  .l-10 {
    left: calc(var(--unit) * 10);
  }
  .l-11 {
    left: calc(var(--unit) * 11);
  }
  .l-12 {
    left: calc(var(--unit) * 12);
  }
  .l-13 {
    left: calc(var(--unit) * 13);
  }
  .l-14 {
    left: calc(var(--unit) * 14);
  }
  .l-15 {
    left: calc(var(--unit) * 15);
  }
  .l-16 {
    left: calc(var(--unit) * 16);
  }
  .m-l-1 {
    margin-left: calc(var(--unit) * 1);
  }
  .m-l-2 {
    margin-left: calc(var(--unit) * 2);
  }
  .m-l-3 {
    margin-left: calc(var(--unit) * 3);
  }
  .m-l-4 {
    margin-left: calc(var(--unit) * 4);
  }
  .m-l-5 {
    margin-left: calc(var(--unit) * 5);
  }
  .m-l-6 {
    margin-left: calc(var(--unit) * 6);
  }
  .m-l-7 {
    margin-left: calc(var(--unit) * 7);
  }
  .m-l-8 {
    margin-left: calc(var(--unit) * 8);
  }
  .m-l-9 {
    margin-left: calc(var(--unit) * 9);
  }
  .m-l-10 {
    margin-left: calc(var(--unit) * 10);
  }
  .m-l-11 {
    margin-left: calc(var(--unit) * 11);
  }
  .m-l-12 {
    margin-left: calc(var(--unit) * 12);
  }
  .m-l-13 {
    margin-left: calc(var(--unit) * 13);
  }
  .m-l-14 {
    margin-left: calc(var(--unit) * 14);
  }
  .m-l-15 {
    margin-left: calc(var(--unit) * 15);
  }
  .m-l-16 {
    margin-left: calc(var(--unit) * 16);
  }
  .m-r-1 {
    margin-right: calc(var(--unit) * 1);
  }
  .m-r-2 {
    margin-right: calc(var(--unit) * 2);
  }
  .m-r-3 {
    margin-right: calc(var(--unit) * 3);
  }
  .m-r-4 {
    margin-right: calc(var(--unit) * 4);
  }
  .m-r-5 {
    margin-right: calc(var(--unit) * 5);
  }
  .m-r-6 {
    margin-right: calc(var(--unit) * 6);
  }
  .m-r-7 {
    margin-right: calc(var(--unit) * 7);
  }
  .m-r-8 {
    margin-right: calc(var(--unit) * 8);
  }
  .m-r-9 {
    margin-right: calc(var(--unit) * 9);
  }
  .m-r-10 {
    margin-right: calc(var(--unit) * 10);
  }
  .m-r-11 {
    margin-right: calc(var(--unit) * 11);
  }
  .m-r-12 {
    margin-right: calc(var(--unit) * 12);
  }
  .m-r-13 {
    margin-right: calc(var(--unit) * 13);
  }
  .m-r-14 {
    margin-right: calc(var(--unit) * 14);
  }
  .m-r-15 {
    margin-right: calc(var(--unit) * 15);
  }
  .m-r-16 {
    margin-right: calc(var(--unit) * 16);
  }
  .t-0 {
    top: calc(1rem * 0);
  }
  .t-1 {
    top: calc(1rem * 1);
  }
  .t-2 {
    top: calc(1rem * 2);
  }
  .t-3 {
    top: calc(1rem * 3);
  }
  .t-4 {
    top: calc(1rem * 4);
  }
  .t-5 {
    top: calc(1rem * 5);
  }
  .t-6 {
    top: calc(1rem * 6);
  }
  .t-7 {
    top: calc(1rem * 7);
  }
  .t-8 {
    top: calc(1rem * 8);
  }
  .t-9 {
    top: calc(1rem * 9);
  }
  .t-10 {
    top: calc(1rem * 10);
  }
  .t-11 {
    top: calc(1rem * 11);
  }
  .t-12 {
    top: calc(1rem * 12);
  }
  .t-13 {
    top: calc(1rem * 13);
  }
  .t-14 {
    top: calc(1rem * 14);
  }
  .t-15 {
    top: calc(1rem * 15);
  }
  .t-16 {
    top: calc(1rem * 16);
  }
  .t-17 {
    top: calc(1rem * 17);
  }
  .t-18 {
    top: calc(1rem * 18);
  }
  .t-19 {
    top: calc(1rem * 19);
  }
  .t-20 {
    top: calc(1rem * 20);
  }
  .t-21 {
    top: calc(1rem * 21);
  }
  .t-22 {
    top: calc(1rem * 22);
  }
  .t-23 {
    top: calc(1rem * 23);
  }
  .t-24 {
    top: calc(1rem * 24);
  }
  .t-25 {
    top: calc(1rem * 25);
  }
  .t-26 {
    top: calc(1rem * 26);
  }
  .t-27 {
    top: calc(1rem * 27);
  }
  .t-28 {
    top: calc(1rem * 28);
  }
  .t-29 {
    top: calc(1rem * 29);
  }
  .t-30 {
    top: calc(1rem * 30);
  }
  .t-31 {
    top: calc(1rem * 31);
  }
  .t-32 {
    top: calc(1rem * 32);
  }
  .b-0 {
    bottom: calc(1rem * 0);
  }
  .b-1 {
    bottom: calc(1rem * 1);
  }
  .b-2 {
    bottom: calc(1rem * 2);
  }
  .b-3 {
    bottom: calc(1rem * 3);
  }
  .b-4 {
    bottom: calc(1rem * 4);
  }
  .b-5 {
    bottom: calc(1rem * 5);
  }
  .b-6 {
    bottom: calc(1rem * 6);
  }
  .b-7 {
    bottom: calc(1rem * 7);
  }
  .b-8 {
    bottom: calc(1rem * 8);
  }
  .b-9 {
    bottom: calc(1rem * 9);
  }
  .b-10 {
    bottom: calc(1rem * 10);
  }
  .b-11 {
    bottom: calc(1rem * 11);
  }
  .b-12 {
    bottom: calc(1rem * 12);
  }
  .b-13 {
    bottom: calc(1rem * 13);
  }
  .b-14 {
    bottom: calc(1rem * 14);
  }
  .b-15 {
    bottom: calc(1rem * 15);
  }
  .b-16 {
    bottom: calc(1rem * 16);
  }
  .m-t-1 {
    margin-top: calc(1rem * 1);
  }
  .m-t-2 {
    margin-top: calc(1rem * 2);
  }
  .m-t-3 {
    margin-top: calc(1rem * 3);
  }
  .m-t-4 {
    margin-top: calc(1rem * 4);
  }
  .m-t-5 {
    margin-top: calc(1rem * 5);
  }
  .m-t-6 {
    margin-top: calc(1rem * 6);
  }
  .m-t-7 {
    margin-top: calc(1rem * 7);
  }
  .m-t-8 {
    margin-top: calc(1rem * 8);
  }
  .m-t-9 {
    margin-top: calc(1rem * 9);
  }
  .m-t-10 {
    margin-top: calc(1rem * 10);
  }
  .m-t-11 {
    margin-top: calc(1rem * 11);
  }
  .m-t-12 {
    margin-top: calc(1rem * 12);
  }
  .m-t-13 {
    margin-top: calc(1rem * 13);
  }
  .m-t-14 {
    margin-top: calc(1rem * 14);
  }
  .m-t-15 {
    margin-top: calc(1rem * 15);
  }
  .m-t-16 {
    margin-top: calc(1rem * 16);
  }
  .m-t-17 {
    margin-top: calc(1rem * 17);
  }
  .m-t-18 {
    margin-top: calc(1rem * 18);
  }
  .m-t-19 {
    margin-top: calc(1rem * 19);
  }
  .m-t-20 {
    margin-top: calc(1rem * 20);
  }
  .m-t-21 {
    margin-top: calc(1rem * 21);
  }
  .m-t-22 {
    margin-top: calc(1rem * 22);
  }
  .m-t-23 {
    margin-top: calc(1rem * 23);
  }
  .m-t-24 {
    margin-top: calc(1rem * 24);
  }
  .m-t--1 {
    margin-top: calc(1rem * -1);
  }
  .m-t--2 {
    margin-top: calc(1rem * -2);
  }
  .m-t--3 {
    margin-top: calc(1rem * -3);
  }
  .m-t--4 {
    margin-top: calc(1rem * -4);
  }
  .m-t--5 {
    margin-top: calc(1rem * -5);
  }
  .m-t--6 {
    margin-top: calc(1rem * -6);
  }
  .m-t--7 {
    margin-top: calc(1rem * -7);
  }
  .m-t--8 {
    margin-top: calc(1rem * -8);
  }
  .m-t--9 {
    margin-top: calc(1rem * -9);
  }
  .m-t--10 {
    margin-top: calc(1rem * -10);
  }
  .m-t--11 {
    margin-top: calc(1rem * -11);
  }
  .m-t--12 {
    margin-top: calc(1rem * -12);
  }
  .m-t--13 {
    margin-top: calc(1rem * -13);
  }
  .m-t--14 {
    margin-top: calc(1rem * -14);
  }
  .m-t--15 {
    margin-top: calc(1rem * -15);
  }
  .m-t--16 {
    margin-top: calc(1rem * -16);
  }
  .hide-desktop {
    display: none;
  }
  .expander .s-4 {
    padding-right: 2.3rem;
  }
}
@media (max-aspect-ratio: 725/1000) {
  html, body {
    font-size: 3.5vw;
  }
}
@media (max-aspect-ratio: 950/1000) {
  :root {
    --margin: 3dvw;
    --unit: calc( (100dvw - ( var(--margin) * 2 ) ) / 8 );
    --line-height: 1.3;
  }
  main, header, footer {
    padding-left: var(--margin);
    padding-right: var(--margin);
  }
  header .s-7 {
    width: 100%;
  }
  header h2 {
    position: static;
  }
  .hide-mobile {
    display: none;
  }
  .r-p-r {
    position: relative;
  }
  .r-p-a {
    position: absolute;
  }
  .r-s-1 {
    width: calc(var(--unit) * 1);
  }
  .r-s-2 {
    width: calc(var(--unit) * 2);
  }
  .r-s-3 {
    width: calc(var(--unit) * 3);
  }
  .r-s-4 {
    width: calc(var(--unit) * 4);
  }
  .r-s-5 {
    width: calc(var(--unit) * 5);
  }
  .r-s-6 {
    width: calc(var(--unit) * 6);
  }
  .r-s-7 {
    width: calc(var(--unit) * 7);
  }
  .r-s-8 {
    width: calc(var(--unit) * 8);
  }
  .r-s-9 {
    width: calc(var(--unit) * 9);
  }
  .r-s-10 {
    width: calc(var(--unit) * 10);
  }
  .r-s-11 {
    width: calc(var(--unit) * 11);
  }
  .r-s-12 {
    width: calc(var(--unit) * 12);
  }
  .r-s-13 {
    width: calc(var(--unit) * 13);
  }
  .r-s-14 {
    width: calc(var(--unit) * 14);
  }
  .r-s-15 {
    width: calc(var(--unit) * 15);
  }
  .r-s-16 {
    width: calc(var(--unit) * 16);
  }
  .r-s-2-m {
    width: calc(var(--unit) * 2 + var(--margin));
  }
  .r-l-0 {
    left: calc(var(--unit) * 0);
  }
  .r-l-1 {
    left: calc(var(--unit) * 1);
  }
  .r-l-2 {
    left: calc(var(--unit) * 2);
  }
  .r-l-3 {
    left: calc(var(--unit) * 3);
  }
  .r-l-4 {
    left: calc(var(--unit) * 4);
  }
  .r-l-5 {
    left: calc(var(--unit) * 5);
  }
  .r-l-6 {
    left: calc(var(--unit) * 6);
  }
  .r-l-7 {
    left: calc(var(--unit) * 7);
  }
  .r-l-8 {
    left: calc(var(--unit) * 8);
  }
  .r-l-9 {
    left: calc(var(--unit) * 9);
  }
  .r-l-10 {
    left: calc(var(--unit) * 10);
  }
  .r-l-11 {
    left: calc(var(--unit) * 11);
  }
  .r-l-12 {
    left: calc(var(--unit) * 12);
  }
  .r-l-13 {
    left: calc(var(--unit) * 13);
  }
  .r-l-14 {
    left: calc(var(--unit) * 14);
  }
  .r-l-15 {
    left: calc(var(--unit) * 15);
  }
  .r-l-16 {
    left: calc(var(--unit) * 16);
  }
  .r-m-l-1 {
    margin-left: calc(var(--unit) * 1);
  }
  .r-m-l-2 {
    margin-left: calc(var(--unit) * 2);
  }
  .r-m-l-3 {
    margin-left: calc(var(--unit) * 3);
  }
  .r-m-l-4 {
    margin-left: calc(var(--unit) * 4);
  }
  .r-m-l-5 {
    margin-left: calc(var(--unit) * 5);
  }
  .r-m-l-6 {
    margin-left: calc(var(--unit) * 6);
  }
  .r-m-l-7 {
    margin-left: calc(var(--unit) * 7);
  }
  .r-m-l-8 {
    margin-left: calc(var(--unit) * 8);
  }
  .r-m-l-9 {
    margin-left: calc(var(--unit) * 9);
  }
  .r-m-l-10 {
    margin-left: calc(var(--unit) * 10);
  }
  .r-m-l-11 {
    margin-left: calc(var(--unit) * 11);
  }
  .r-m-l-12 {
    margin-left: calc(var(--unit) * 12);
  }
  .r-m-l-13 {
    margin-left: calc(var(--unit) * 13);
  }
  .r-m-l-14 {
    margin-left: calc(var(--unit) * 14);
  }
  .r-m-l-15 {
    margin-left: calc(var(--unit) * 15);
  }
  .r-m-l-16 {
    margin-left: calc(var(--unit) * 16);
  }
  .r-m-r-1 {
    margin-right: calc(var(--unit) * 1);
  }
  .r-m-r-2 {
    margin-right: calc(var(--unit) * 2);
  }
  .r-m-r-3 {
    margin-right: calc(var(--unit) * 3);
  }
  .r-m-r-4 {
    margin-right: calc(var(--unit) * 4);
  }
  .r-m-r-5 {
    margin-right: calc(var(--unit) * 5);
  }
  .r-m-r-6 {
    margin-right: calc(var(--unit) * 6);
  }
  .r-m-r-7 {
    margin-right: calc(var(--unit) * 7);
  }
  .r-m-r-8 {
    margin-right: calc(var(--unit) * 8);
  }
  .r-m-r-9 {
    margin-right: calc(var(--unit) * 9);
  }
  .r-m-r-10 {
    margin-right: calc(var(--unit) * 10);
  }
  .r-m-r-11 {
    margin-right: calc(var(--unit) * 11);
  }
  .r-m-r-12 {
    margin-right: calc(var(--unit) * 12);
  }
  .r-m-r-13 {
    margin-right: calc(var(--unit) * 13);
  }
  .r-m-r-14 {
    margin-right: calc(var(--unit) * 14);
  }
  .r-m-r-15 {
    margin-right: calc(var(--unit) * 15);
  }
  .r-m-r-16 {
    margin-right: calc(var(--unit) * 16);
  }
  .r-r--m {
    right: calc(var(--margin) * -1);
  }
  .r-l--m {
    left: calc(var(--margin) * -1);
  }
  .r-r-0 {
    right: 0;
  }
  .r-t-0 {
    top: calc(1rem * 0);
  }
  .r-t-1 {
    top: calc(1rem * 1);
  }
  .r-t-2 {
    top: calc(1rem * 2);
  }
  .r-t-3 {
    top: calc(1rem * 3);
  }
  .r-t-4 {
    top: calc(1rem * 4);
  }
  .r-t-5 {
    top: calc(1rem * 5);
  }
  .r-t-6 {
    top: calc(1rem * 6);
  }
  .r-t-7 {
    top: calc(1rem * 7);
  }
  .r-t-8 {
    top: calc(1rem * 8);
  }
  .r-t-9 {
    top: calc(1rem * 9);
  }
  .r-t-10 {
    top: calc(1rem * 10);
  }
  .r-t-11 {
    top: calc(1rem * 11);
  }
  .r-t-12 {
    top: calc(1rem * 12);
  }
  .r-t-13 {
    top: calc(1rem * 13);
  }
  .r-t-14 {
    top: calc(1rem * 14);
  }
  .r-t-15 {
    top: calc(1rem * 15);
  }
  .r-t-16 {
    top: calc(1rem * 16);
  }
  .r-t-17 {
    top: calc(1rem * 17);
  }
  .r-t-18 {
    top: calc(1rem * 18);
  }
  .r-t-19 {
    top: calc(1rem * 19);
  }
  .r-t-20 {
    top: calc(1rem * 20);
  }
  .r-t-21 {
    top: calc(1rem * 21);
  }
  .r-t-22 {
    top: calc(1rem * 22);
  }
  .r-t-23 {
    top: calc(1rem * 23);
  }
  .r-t-24 {
    top: calc(1rem * 24);
  }
  .r-t-25 {
    top: calc(1rem * 25);
  }
  .r-t-26 {
    top: calc(1rem * 26);
  }
  .r-t-27 {
    top: calc(1rem * 27);
  }
  .r-t-28 {
    top: calc(1rem * 28);
  }
  .r-t-29 {
    top: calc(1rem * 29);
  }
  .r-t-30 {
    top: calc(1rem * 30);
  }
  .r-t-31 {
    top: calc(1rem * 31);
  }
  .r-t-32 {
    top: calc(1rem * 32);
  }
  .r-b-0 {
    bottom: calc(1rem * 0);
  }
  .r-b-1 {
    bottom: calc(1rem * 1);
  }
  .r-b-2 {
    bottom: calc(1rem * 2);
  }
  .r-b-3 {
    bottom: calc(1rem * 3);
  }
  .r-b-4 {
    bottom: calc(1rem * 4);
  }
  .r-b-5 {
    bottom: calc(1rem * 5);
  }
  .r-b-6 {
    bottom: calc(1rem * 6);
  }
  .r-b-7 {
    bottom: calc(1rem * 7);
  }
  .r-b-8 {
    bottom: calc(1rem * 8);
  }
  .r-b-9 {
    bottom: calc(1rem * 9);
  }
  .r-b-10 {
    bottom: calc(1rem * 10);
  }
  .r-b-11 {
    bottom: calc(1rem * 11);
  }
  .r-b-12 {
    bottom: calc(1rem * 12);
  }
  .r-b-13 {
    bottom: calc(1rem * 13);
  }
  .r-b-14 {
    bottom: calc(1rem * 14);
  }
  .r-b-15 {
    bottom: calc(1rem * 15);
  }
  .r-b-16 {
    bottom: calc(1rem * 16);
  }
  .r-b-17 {
    bottom: calc(1rem * 17);
  }
  .r-b-18 {
    bottom: calc(1rem * 18);
  }
  .r-b-19 {
    bottom: calc(1rem * 19);
  }
  .r-b-20 {
    bottom: calc(1rem * 20);
  }
  .r-m-t-1 {
    margin-top: calc(1rem * 1);
  }
  .r-m-t-2 {
    margin-top: calc(1rem * 2);
  }
  .r-m-t-3 {
    margin-top: calc(1rem * 3);
  }
  .r-m-t-4 {
    margin-top: calc(1rem * 4);
  }
  .r-m-t-5 {
    margin-top: calc(1rem * 5);
  }
  .r-m-t-6 {
    margin-top: calc(1rem * 6);
  }
  .r-m-t-7 {
    margin-top: calc(1rem * 7);
  }
  .r-m-t-8 {
    margin-top: calc(1rem * 8);
  }
  .r-m-t-9 {
    margin-top: calc(1rem * 9);
  }
  .r-m-t-10 {
    margin-top: calc(1rem * 10);
  }
  .r-m-t-11 {
    margin-top: calc(1rem * 11);
  }
  .r-m-t-12 {
    margin-top: calc(1rem * 12);
  }
  .r-m-t-13 {
    margin-top: calc(1rem * 13);
  }
  .r-m-t-14 {
    margin-top: calc(1rem * 14);
  }
  .r-m-t-15 {
    margin-top: calc(1rem * 15);
  }
  .r-m-t-16 {
    margin-top: calc(1rem * 16);
  }
  .r-m-t-17 {
    margin-top: calc(1rem * 17);
  }
  .r-m-t-18 {
    margin-top: calc(1rem * 18);
  }
  .r-m-t-19 {
    margin-top: calc(1rem * 19);
  }
  .r-m-t-20 {
    margin-top: calc(1rem * 20);
  }
  .r-m-t-21 {
    margin-top: calc(1rem * 21);
  }
  .r-m-t-22 {
    margin-top: calc(1rem * 22);
  }
  .r-m-t-23 {
    margin-top: calc(1rem * 23);
  }
  .r-m-t-24 {
    margin-top: calc(1rem * 24);
  }
  .r-m-t--1 {
    margin-top: calc(1rem * -1);
  }
  .r-m-t--2 {
    margin-top: calc(1rem * -2);
  }
  .r-m-t--3 {
    margin-top: calc(1rem * -3);
  }
  .r-m-t--4 {
    margin-top: calc(1rem * -4);
  }
  .r-m-t--5 {
    margin-top: calc(1rem * -5);
  }
  .r-m-t--6 {
    margin-top: calc(1rem * -6);
  }
  .r-m-t--7 {
    margin-top: calc(1rem * -7);
  }
  .r-m-t--8 {
    margin-top: calc(1rem * -8);
  }
  .r-m-t--9 {
    margin-top: calc(1rem * -9);
  }
  .r-m-t--10 {
    margin-top: calc(1rem * -10);
  }
  .r-m-t--11 {
    margin-top: calc(1rem * -11);
  }
  .r-m-t--12 {
    margin-top: calc(1rem * -12);
  }
  .r-m-t--13 {
    margin-top: calc(1rem * -13);
  }
  .r-m-t--14 {
    margin-top: calc(1rem * -14);
  }
  .r-m-t--15 {
    margin-top: calc(1rem * -15);
  }
  .r-m-t--16 {
    margin-top: calc(1rem * -16);
  }
  .r-m-t--17 {
    margin-top: calc(1rem * -17);
  }
  .r-m-t--18 {
    margin-top: calc(1rem * -18);
  }
  .r-m-t--19 {
    margin-top: calc(1rem * -19);
  }
  .r-m-t--20 {
    margin-top: calc(1rem * -20);
  }
  .r-m-t--21 {
    margin-top: calc(1rem * -21);
  }
  .r-m-t--22 {
    margin-top: calc(1rem * -22);
  }
  .r-m-t--23 {
    margin-top: calc(1rem * -23);
  }
  .r-m-t--24 {
    margin-top: calc(1rem * -24);
  }
  .r-m-b--1 {
    margin-bottom: calc(1rem * -1);
  }
  .r-m-b--2 {
    margin-bottom: calc(1rem * -2);
  }
  .r-m-b--3 {
    margin-bottom: calc(1rem * -3);
  }
  .r-m-b--4 {
    margin-bottom: calc(1rem * -4);
  }
  .r-m-b--5 {
    margin-bottom: calc(1rem * -5);
  }
  .r-m-b--6 {
    margin-bottom: calc(1rem * -6);
  }
  .r-m-b--7 {
    margin-bottom: calc(1rem * -7);
  }
  .r-m-b--8 {
    margin-bottom: calc(1rem * -8);
  }
  .r-m-b--9 {
    margin-bottom: calc(1rem * -9);
  }
  .r-m-b--10 {
    margin-bottom: calc(1rem * -10);
  }
  .r-m-b--11 {
    margin-bottom: calc(1rem * -11);
  }
  .r-m-b--12 {
    margin-bottom: calc(1rem * -12);
  }
  .f-xl {
    font-size: 3rem;
    text-align: center;
    line-height: 1.1;
  }
  #intro {
    height: 54rem;
  }
  #leistungen {
    flex-direction: column;
  }
  #leistungen ul {
    font-size: 1.43rem;
    flex-direction: column;
    margin-bottom: 4rem;
  }
  #leistungen ul li {
    padding-left: 1em;
    height: unset;
  }
  #leistungen ul li:before {
    width: 0.5em;
    height: 0.5em;
    top: 0.39em;
  }
  #leistungen ul li + li {
    margin-top: 0.75em;
  }
  h3.sans {
    margin-bottom: 1em;
  }
  footer .button {
    margin-left: -0.2em;
    margin-top: 0.75em;
    margin-bottom: 4em;
  }
  #lebenslauf p {
    font-size: 1.43rem;
  }
  #cv-container {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 1s;
  }
  #cv-container-content {
    overflow: hidden;
  }
  #cv-container.expanded {
    grid-template-rows: 1fr;
  }
  #cv-container.expanded + #toggle-cv:after {
    content: "schließen";
  }
  #toggle-cv {
    cursor: pointer;
    display: inline-block;
    margin-top: 1.8em;
  }
  #toggle-cv:after {
    content: "zum Lebenslauf";
  }
  .expander .s-4 {
    margin-top: 3.5rem;
    margin-bottom: 3.5rem;
  }
}
@media (max-aspect-ratio: 950/1000) and (min-aspect-ratio: 725/1000) {
  html, body {
    font-size: 2vw;
  }
  #intro {
    height: 65rem;
  }
  #intro .r-s-2-m {
    width: calc(var(--unit) * 2);
  }
  .r-l-5 {
    left: 29rem;
  }
  footer div:first-of-type .s-4 {
    margin-right: 3rem;
  }
}
/* ═══════════════════════ Landing pages (CPT `landing`) ═══════════════════
   Module layout for single-landing.php. Positions are taken from the Figma
   frame "Landing page" (1728.93px canvas → 1 unit = 100dvw/16, 1rem = 1vw).
   Content columns use the house helpers; only the decorative photos and the
   module rhythm are pinned here. */
/* The name/role pair replaces the homepage's <h1>/<h2> so the campaign title
   can own the page's single <h1>. Same sticky treatment as `header`. */
.lp-header .lp-name,
.lp-header .lp-role {
  display: inline;
  position: sticky;
}

.lp-deco {
  pointer-events: none;
  z-index: 0;
}

.lp-hero,
.lp-about {
  position: relative;
}

.lp-hero-title,
.lp-hero-col,
.lp-about-col {
  position: relative;
  z-index: 1;
}

/* Sized here rather than via `.f-xl` — the Figma title is a touch larger and
   tighter than the homepage's. Kept outside the media queries so it can never
   fall back to body size at a breakpoint. */
.lp-hero-title {
  font-size: 5.82rem;
  line-height: 0.94;
  padding: 0 1em;
}

.lp-hero-cta {
  display: inline-block;
  margin-top: 1.2rem;
}

/* ── Modul: Anmeldung (blocks/lp-signup) — no Figma frame; the fields pick
   up the .button surface (white on the beige page) so the form reads as part
   of the existing language.

   Reveal: when a link on the page targets the section's anchor, app.js adds
   `.is-collapsed` on load and removes it on click — the 0fr→1fr grid row
   animates the height (pushing the content below downwards), the inner
   wrapper fades in, and the trigger fades out. Without JS (and in the editor
   canvas, which loads no theme JS) the section simply stays open. */
.lp-signup {
  position: relative;
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.6s ease, margin 0.6s ease, padding 0.6s ease;
}
.lp-signup.is-collapsed {
  grid-template-rows: 0fr;
  margin-top: 0;
  padding-bottom: 0;
}
.lp-signup.is-collapsed .lp-signup-inner {
  opacity: 0;
  visibility: hidden;
}

.lp-signup-inner {
  min-height: 0;
  overflow: hidden;
  transition: opacity 0.6s ease 0.15s, visibility 0.6s;
}

/* The CTA that opened the form (opacity only, so nothing reflows). */
.lp-signup-trigger-hidden {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.lp-signup-col {
  position: relative;
  z-index: 1;
}

.lp-signup-form {
  margin-top: 2rem;
}
.lp-signup-form p {
  margin-top: 1.2rem;
}
.lp-signup-form label {
  display: block;
  margin-bottom: 0.3rem;
}
.lp-signup-form input {
  font-family: "Inter", sans-serif;
  font-size: 1.04rem;
  line-height: 1;
  width: 100%;
  padding: 0.5em 0.9em;
  border: none;
  border-radius: 1em;
  background-color: white;
}
.lp-signup-form .lp-signup-submit {
  border: none;
  cursor: pointer;
  margin-top: 1.6rem;
}
.lp-signup-form .lp-signup-submit:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Honeypot — visually gone, still in the DOM for bots to fill. */
.lp-signup-hp {
  position: absolute;
  left: -9999px;
  margin: 0;
}

/* ───────────────────────────── Desktop (16 col) ───────────────────────── */
@media (min-aspect-ratio: 950/1000) {
  .lp-header .lp-name {
    top: calc(var(--unit) * 0.4);
  }
  .lp-header .lp-role {
    /* Same offset as .lp-name — the homepage's 0.444 compensates the italic
       during scroll-sticking, but here the bar is static and the extra
       0.044 unit just reads as misalignment. */
    top: calc(var(--unit) * 0.4);
    margin-left: 2.2rem;
  }
  .lp-hero {
    padding-top: 24rem;
  }
  .lp-hero .lp-hero-col {
    margin-top: 4.2rem;
  }
  .lp-deco-top {
    left: calc(var(--unit) * 14);
    top: 0;
  }
  .lp-deco-float {
    left: calc(var(--unit) * 6.18);
    top: 9.7rem;
  }
  .lp-deco-small {
    left: calc(var(--unit) * 4.37);
    top: 44.3rem;
  }
  /* The bottom photo sits flush on the footer edge, so the module carries the
     design's 341px of air below the portrait rather than ending at it. */
  .lp-about {
    margin-top: 9rem;
    padding-bottom: 19.7rem;
  }
  .lp-about .lp-deco-about {
    left: calc(var(--unit) * 12);
    bottom: 0;
  }
  .lp-signup {
    margin-top: 5.5rem;
    padding-bottom: 0;
  }
}
/* ───────────────────────────── Mobile (8 col) ─────────────────────────── */
@media (max-aspect-ratio: 950/1000) {
  .lp-header .lp-name,
  .lp-header .lp-role {
    position: static;
  }
  .lp-header .lp-role {
    display: block;
  }
  /* The design is desktop-only. Mobile keeps the same elements but anchors the
     two lower photos to reserved space at the foot of their module — a fixed
     `top` would land them on the copy as soon as the text length changes. */
  .lp-hero-title {
    font-size: 3rem; /* matches `.f-xl` at this breakpoint */
    line-height: 1.1;
  }
  .lp-hero {
    padding-top: 16rem;
    padding-bottom: 13rem;
  }
  .lp-hero .lp-hero-col {
    margin-top: 3rem;
  }
  .lp-deco-top {
    right: calc(var(--margin) * -1);
    top: 0;
  }
  .lp-deco-float {
    left: calc(var(--unit) * 4);
    top: 7rem;
  }
  .lp-deco-small {
    left: calc(var(--unit) * 5);
    bottom: 0;
  }
  .lp-about {
    margin-top: 6rem;
    padding-bottom: 11rem;
  }
  .lp-about .lp-deco-about {
    right: calc(var(--margin) * -1);
    left: auto;
    bottom: 0;
  }
  .lp-signup {
    margin-top: 6rem;
    padding-bottom: 5rem;
  }
}
/* ───────────────── Reduced footer (landing variant) ───────────────────── */
.lp-top {
  font-family: "Inter", sans-serif;
  display: inline-block;
  transform: rotate(-90deg);
  margin-left: auto;
}

.footer-imprint-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}