@font-face {
  font-family:Werk;
  src:url('assets/work-sans.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap
}
:root {
  --tinte:#172e28;
  --gruen:#285c4c;
  --salbei:#e7eee8;
  --papier:#faf9f5;
  --orange:#c45d31;
  --orange-dunkel:#a34520;
  --grau:#5c6761;
  --linie:#dfe3db;
  --serif:Georgia,'Times New Roman',serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:110px
}
body {
  margin:0;
  color:var(--tinte);
  font-family:Werk,Arial,sans-serif;
  background:var(--papier);
  font-size:16px;
  line-height:1.65
}
button,a {
  -webkit-tap-highlight-color:transparent
}
button,input {
  font:inherit
}
button,a {
  touch-action:manipulation
}
button {
  cursor:pointer
}
a {
  color:inherit
}
button:focus-visible,a:focus-visible,summary:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:6px
}
img {
  display:block;
  max-width:100%;
  height:auto
}
button {
  color:inherit
}
p {
  margin:0 0 22px;
  color:var(--grau)
}
h1,h2,h3 {
  font-weight:500;
  letter-spacing:-.052em;
  line-height:1.1;
  margin:0
}
h1 {
  font-size:clamp(54px,6.6vw,91px)
}
h2 {
  font-size:clamp(39px,4.25vw,60px)
}
h3 {
  font-size:27px;
  letter-spacing:-.035em
}
em {
  font-family:var(--serif);
  font-weight:400;
  color:var(--gruen);
  letter-spacing:-.055em
}
strong {
  font-weight:600
}
[hidden] {
  display:none!important
}
.rahmen {
  max-width:1192px;
  width:calc(100% - 96px);
  margin-inline:auto
}
.abschnitt {
  padding-block:112px
}
.abschnittkopf {
  max-width:800px;
  margin:0 auto 46px;
  text-align:center
}
.abschnittkopf p:last-child {
  max-width:650px;
  margin:25px auto 0;
  font-size:18px
}
.etikett {
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  margin-bottom:23px;
  color:var(--gruen)
}
.kleindruck {
  font-size:12px;
  color:var(--grau);
  margin:16px 0 0
}
.zweispaltig {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:86px;
  align-items:center
}
.zweispaltig h2 {
  margin-bottom:28px
}
.zweispaltig>div>p:not([class]) {
  font-size:17px
}
.knopf {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  padding:19px 27px;
  color:#fff;
  background:var(--orange);
  border:1px solid transparent;
  border-radius:7px;
  text-decoration:none;
  line-height:1.3;
  font-weight:500;
  font-size:16px;
  box-shadow:0 6px 16px #99451d15;
  transition:background .2s,transform .2s,box-shadow .2s
}
.knopf:hover {
  background:var(--orange-dunkel);
  transform:translateY(-3px);
  box-shadow:0 10px 24px #99451d25
}
.knopf span {
  font-size:22px
}
.knopf.klein {
  font-size:13px;
  padding:13px 18px;
  gap:18px
}
.textlink {
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid #82998a;
  padding-bottom:5px
}
.textlink span {
  margin-left:12px
}
.sprunglink {
  position:fixed;
  z-index:100;
  top:-100px;
  left:16px;
  background:#fff;
  padding:12px
}
.sprunglink:focus {
  top:10px
}
.hinweisleiste {
  background:var(--tinte);
  color:#ecf0e9;
  text-align:center;
  padding:11px 20px;
  font-size:11px;
  letter-spacing:.025em
}
.hinweisleiste strong {
  font-weight:500
}
.hinweisleiste a {
  margin-left:28px;
  text-underline-offset:4px
}
.kopf {
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 4.2%;
  background:#faf9f5f2;
  backdrop-filter:blur(16px);
  border-bottom:1px solid #dde2d990
}
.marke {
  display:block;
  width:200px;
  flex-shrink:0
}
.kopf nav {
  display:flex;
  gap:28px;
  align-items:center
}
.kopf nav>a:not(.knopf) {
  font-size:12px;
  text-decoration:none
}
.kopf nav>a:not(.knopf):hover {
  color:var(--orange)
}
.menuschalter {
  display:none
}
.einstieg {
  overflow:hidden;
  padding:70px 0 0;
  background:radial-gradient(ellipse at 50% 63%,#e9eee4 0,transparent 56%)
}
.einstiegtext {
  max-width:880px;
  margin:auto;
  text-align:center;
  padding:0 24px;
  position:relative;
  z-index:2
}
.einstieg .etikett {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:27px
}
.punkt {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gruen);
  box-shadow:0 0 0 5px #285c4c0d
}
.vorspann {
  font-size:20px;
  margin:27px 0 12px;
  color:var(--tinte)
}
.einstiegdetails {
  font-size:16px;
  max-width:670px;
  margin:0 auto 29px
}
.vertrauen {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  text-align:left;
  margin:28px auto 0;
  font-size:11px;
  color:var(--grau)
}
.vertrauen img {
  width:43px;
  height:43px;
  object-fit:cover;
  object-position:50% 20%;
  border-radius:50%
}
.vertrauen strong {
  color:var(--tinte);
  font-size:11px
}
.schaufenster {
  height:410px;
  max-width:1370px;
  margin:64px auto 0;
  position:relative;
  perspective:1300px
}
.fenster {
  position:absolute;
  background:white;
  border:1px solid #d3d8cf;
  border-radius:9px;
  overflow:hidden;
  box-shadow:0 18px 55px #1a332324;
  display:block;
  text-decoration:none
}
.fensterkopf {
  height:28px;
  background:#f5f5f2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 13px;
  font-size:8px;
  color:#657269;
  border-bottom:1px solid #ddd
}
.fensterpunkte {
  color:#b6bdb8;
  letter-spacing:2px;
  font-size:8px
}
.fenster.mitte {
  width:53%;
  top:0;
  left:23.5%;
  z-index:3;
  transform:rotate(-1deg);
  transition:transform .5s
}
.fenster.mitte:hover {
  transform:translateY(-8px) rotate(0deg)
}
.fenster.seitlich {
  width:42%;
  top:65px;
  filter:saturate(.85);
  opacity:.92
}
.fenster.links {
  left:-4%;
  transform:rotate(-8deg);
  animation:schweben-links 9s ease-in-out infinite
}
.fenster.rechts {
  right:-4%;
  transform:rotate(8deg);
  animation:schweben-rechts 10s ease-in-out infinite
}
.schwebeschild {
  position:absolute;
  bottom:8px;
  left:50%;
  transform:translateX(-50%) rotate(-3deg);
  z-index:4;
  background:var(--tinte);
  color:#fff;
  padding:17px 27px;
  border-radius:5px;
  box-shadow:0 12px 25px #142b2520;
  font-size:14px;
  text-align:center;
  min-width:240px
}
.schwebeschild span {
  display:block;
  font-size:11px;
  color:#cbd9cf
}
.eckdaten {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:38px 0;
  margin-top:36px;
  border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie);
  text-align:center
}
.eckdaten>div+div {
  border-left:1px solid var(--linie)
}
.eckdaten strong {
  display:block;
  font:italic 43px var(--serif);
  color:var(--gruen);
  margin-bottom:9px
}
.eckdaten span {
  font-size:12px;
  color:var(--grau)
}
.projektwahl {
  display:flex;
  gap:8px;
  justify-content:center;
  flex-wrap:wrap;
  margin:0 0 30px
}
.projektwahl button {
  border:1px solid var(--linie);
  padding:10px 21px;
  border-radius:30px;
  background:transparent;
  font-size:13px;
  transition:background .2s,color .2s
}
.projektwahl button:hover {
  background:var(--salbei)
}
.projektwahl button[aria-pressed=true] {
  background:var(--tinte);
  border-color:var(--tinte);
  color:#fff
}
.projektbuehne {
  display:grid;
  grid-template-columns:1.7fr 1fr;
  border:1px solid var(--linie);
  border-radius:13px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 15px 38px #183c2b08
}
.projektbild {
  position:relative;
  padding:0;
  border:0;
  overflow:hidden;
  background:var(--salbei);
  display:block
}
.projektbild img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
  transition:transform .6s
}
.projektbild:hover img {
  transform:scale(1.025)
}
.bildaktion {
  position:absolute;
  bottom:17px;
  left:18px;
  padding:8px 13px;
  border-radius:4px;
  background:#fffef8ee;
  color:var(--tinte);
  font-size:11px
}
.bildaktion span {
  margin-left:12px
}
.projekttext {
  padding:40px 35px;
  position:relative;
  min-height:310px
}
.projekttext h3 {
  margin:15px 0 18px
}
.projekttext p {
  font-size:14px
}
.projekttext a {
  font-size:12px;
  text-underline-offset:5px;
  font-weight:600
}
.projektstand {
  display:block;
  font:italic 18px var(--serif);
  color:#89978d;
  margin-top:25px
}
.referenzhinweis {
  text-align:center;
  font-size:11px;
  max-width:720px;
  margin:22px auto 0;
  line-height:1.8
}
.ausgangslage {
  background:#efeee7
}
.situationen article {
  display:flex;
  gap:23px;
  padding:24px 0;
  border-bottom:1px solid #d7dbd1
}
.situationen article:first-child {
  padding-top:0
}
.situationen article>span {
  font:italic 27px var(--serif);
  color:#7d8e7d
}
.situationen h3 {
  font-size:22px;
  margin-bottom:11px
}
.situationen p {
  font-size:14px;
  margin:0
}
.ergebnisse {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px
}
.ergebnis {
  background:#fff;
  border:1px solid var(--linie);
  border-radius:9px;
  padding:32px;
  transition:transform .3s,box-shadow .3s
}
.ergebnis:hover {
  transform:translateY(-7px);
  box-shadow:0 18px 38px #142b2510
}
.nummer {
  font:italic 44px var(--serif);
  color:#809687;
  display:block;
  margin-bottom:32px
}
.ergebnis h3 {
  margin-bottom:19px;
  font-size:29px
}
.ergebnis p {
  font-size:14px;
  min-height:116px
}
.ergebnistag {
  display:block;
  border-top:1px solid var(--linie);
  padding-top:18px;
  font-size:11px;
  font-weight:500;
  color:var(--gruen)
}
.leitsatz {
  text-align:center;
  margin-top:65px;
  font-size:17px;
  line-height:1.9
}
.leitsatz span {
  color:var(--grau);
  display:block
}
.leitsatz strong {
  display:block;
  font-size:23px;
  letter-spacing:-.035em
}
.ablauf {
  background:var(--tinte);
  color:#fff
}
.ablauf .etikett {
  color:#a6c2aa
}
.ablauf em {
  color:#b5cdb7
}
.ablauf p {
  color:#c1d0c8
}
.tagewahl {
  display:flex;
  border-bottom:1px solid #ffffff25;
  margin-top:44px
}
.tagewahl button {
  width:50%;
  color:#a4b8ac;
  background:transparent;
  border:0;
  border-bottom:3px solid transparent;
  text-align:left;
  padding:20px 24px;
  font-size:24px
}
.tagewahl button span {
  display:block;
  font-size:12px;
  margin-top:8px
}
.tagewahl button[aria-selected=true] {
  border-bottom-color:#d38b5e;
  color:#fff;
  background:#ffffff06
}
.tageinhalt {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:75px;
  padding:40px 24px
}
.grosszahl {
  font:italic 65px var(--serif);
  color:#94b39b;
  display:block;
  margin-bottom:15px
}
.tageinhalt h3 {
  font-size:31px;
  margin-bottom:24px
}
.tageinhalt p {
  font-size:14px
}
.schritte {
  list-style:none;
  counter-reset:schritt;
  padding:0;
  margin:5px 0 0
}
.schritte li {
  counter-increment:schritt;
  position:relative;
  padding:13px 0 13px 40px
}
.schritte li:before {
  content:'0' counter(schritt);
  position:absolute;
  left:0;
  color:#a4b8ac;
  font-size:11px;
  top:18px
}
.schritte strong {
  font-size:15px
}
.schritte p {
  font-size:13px;
  margin:8px 0 0
}
.ablaufabschluss {
  padding:25px 24px 0;
  border-top:1px solid #ffffff25;
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:center
}
.ablaufabschluss p {
  font-size:12px;
  margin:0;
  max-width:480px
}
.ablaufabschluss a {
  font-size:12px
}
.workshopbild {
  position:relative
}
.workshopbild img {
  border-radius:7px;
  aspect-ratio:1.08;
  object-fit:cover
}
.bildnotiz {
  position:absolute;
  bottom:25px;
  left:-20px;
  background:#fff;
  padding:20px 28px;
  border-radius:5px;
  box-shadow:0 10px 30px #1a302015;
  transform:rotate(-4deg)
}
.bildnotiz strong {
  display:block;
  font:italic 27px var(--serif)
}
.bildnotiz span {
  font-size:11px
}
.mitnahme {
  border-top:1px solid var(--linie);
  padding-top:25px;
  font-size:13px;
  line-height:2.1
}
.begleitung {
  background:#e7ece4
}
.begleitung .zweispaltig {
  gap:100px
}
.begleitertext blockquote {
  margin:35px 0;
  font:italic 28px/1.4 var(--serif);
  color:var(--gruen)
}
.portrait {
  margin:0;
  position:relative;
  max-width:430px;
  justify-self:end
}
.portrait img {
  border-radius:130px 130px 6px 6px
}
.portrait figcaption {
  position:absolute;
  left:22px;
  bottom:22px;
  right:22px;
  background:#faf9f5eb;
  padding:18px 20px;
  border-radius:5px
}
.portrait strong,.portrait span {
  display:block
}
.portrait span {
  font-size:11px;
  margin-top:3px
}
.dreiblicke {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  margin-top:50px;
  gap:40px
}
.dreiblicke article {
  border-top:1px solid #93a791;
  padding-top:22px
}
.dreiblicke span {
  font-size:10px;
  letter-spacing:.1em;
  color:var(--gruen)
}
.dreiblicke h3 {
  font-size:23px;
  margin:20px 0 15px
}
.dreiblicke p {
  font-size:14px
}
.angebot {
  background:#f0eee6
}
.leistungsliste {
  padding:0;
  list-style:none;
  margin:30px 0 0
}
.leistungsliste li {
  padding:13px 0 13px 26px;
  position:relative;
  border-bottom:1px solid #d9dbd2;
  font-size:14px
}
.leistungsliste li:before {
  content:'✓';
  position:absolute;
  left:0;
  color:var(--gruen)
}
.preiskarte {
  padding:46px 40px;
  background:#fff;
  border:1px solid #cdd6c8;
  border-radius:10px;
  box-shadow:0 18px 50px #193f3509
}
.preiskarte .preis {
  font-size:79px;
  letter-spacing:-.07em;
  line-height:1;
  margin:28px 0 10px;
  color:var(--tinte)
}
.preis span {
  font-size:44px
}
.preiszusatz {
  font-size:12px!important
}
.preistrenner {
  height:1px;
  background:var(--linie);
  margin:28px 0
}
.preiskarte h3 {
  font-size:23px;
  margin:0 0 15px
}
.preiskarte p {
  font-size:14px
}
.preiskarte .knopf {
  width:100%;
  margin-top:4px
}
.preiskarte .kleindruck {
  font-size:10px;
  text-align:center
}
.preiskarte .zusatzkosten {
  font-size:11px;
  line-height:1.7;
  margin:25px 0 0;
  color:#657269
}
.fragenbereich {
  display:grid;
  grid-template-columns:1fr 1.65fr;
  gap:85px
}
.fragenbereich h2 {
  margin-bottom:26px
}
.fragenbereich p {
  font-size:15px
}
.fragen details {
  border-bottom:1px solid var(--linie);
  padding:0
}
.fragen details:first-child {
  border-top:1px solid var(--linie)
}
summary {
  list-style:none;
  cursor:pointer;
  position:relative;
  padding:24px 34px 24px 0;
  font-size:15px;
  font-weight:500;
  line-height:1.4
}
summary::-webkit-details-marker {
  display:none
}
summary:after {
  content:'+';
  position:absolute;
  right:2px;
  top:21px;
  font:25px Werk;
  color:var(--gruen)
}
details[open] summary:after {
  content:'−'
}
.fragen details p {
  font-size:14px;
  padding:0 30px 5px 0
}
.abschluss {
  text-align:center;
  background:var(--tinte);
  color:#fff;
  position:relative;
  overflow:hidden
}
.abschluss .etikett {
  color:#b6c9b7
}
.abschluss h2 {
  font-size:clamp(47px,5.5vw,78px)
}
.abschluss em {
  color:#b7ccb7
}
.abschluss p:not(.etikett):not(.kleindruck) {
  color:#d0dbd3;
  max-width:530px;
  margin:30px auto
}
.abschluss .kleindruck {
  color:#c8d5cc
}
.email {
  display:block;
  margin-top:28px;
  font-size:12px;
  text-underline-offset:5px;
  color:#cbd9cf
}
.checkhinweis {
  padding-block:38px;
  display:flex;
  gap:30px;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--linie)
}
.checkhinweis p {
  margin:0;
  font-size:12px
}
.checkhinweis a {
  font-size:12px;
  flex-shrink:0
}
.fuss {
  padding:50px 0 36px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:24px
}
.fuss .marke {
  width:190px
}
.fuss p {
  font-size:11px;
  margin:0;
  text-align:right
}
.fuss nav {
  display:flex;
  gap:20px;
  font-size:11px
}
.fuss small {
  font-size:10px;
  color:var(--grau);
  text-align:right
}
.kontaktleiste {
  position:fixed;
  z-index:25;
  bottom:18px;
  left:50%;
  transform:translateX(-50%);
  width:min(840px,calc(100% - 36px));
  background:#fffffff5;
  border:1px solid #dfe3db;
  border-radius:9px;
  padding:12px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  box-shadow:0 8px 36px #10281d25;
  backdrop-filter:blur(15px);
  animation:leiste-rein .35s ease both
}
.kontaktleiste strong {
  font-size:13px;
  display:block
}
.kontaktleiste span:not(.knopf span) {
  font-size:10px;
  color:var(--grau);
  display:block
}
.kontaktleiste .knopf {
  flex-shrink:0
}
.kontaktleiste .knopf span {
  color:#fff
}
.kontaktleiste-sichtbar .fuss {
  padding-bottom:130px
}
dialog {
  width:min(1050px,94vw);
  max-height:90dvh;
  border:0;
  border-radius:10px;
  padding:24px;
  background:var(--papier);
  color:var(--tinte);
  box-shadow:0 20px 80px #0005
}
dialog::backdrop {
  background:#10261cd9;
  backdrop-filter:blur(7px)
}
.dialogkopf {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:20px
}
.dialogkopf h2 {
  font-size:24px
}
.dialogkopf button {
  border:1px solid var(--linie);
  border-radius:5px;
  background:#fff;
  padding:8px 12px;
  font-size:12px
}
.dialogkopf button span {
  margin-left:10px
}
dialog>img {
  width:100%;
  border-radius:5px
}
dialog>p {
  margin:17px 0;
  font-size:12px
}
body.dialog-offen {
  overflow:hidden
}
@keyframes schweben-links {
  50% {
    transform:translateY(-12px) rotate(-6deg)
  }
}
@keyframes schweben-rechts {
  50% {
    transform:translateY(9px) rotate(6deg)
  }
}
@keyframes leiste-rein {
  from {
    opacity:0;
    bottom:0
  }
  to {
    opacity:1;
    bottom:18px
  }
}
@keyframes auftauchen {
  from {
    opacity:0;
    transform:translateY(20px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
.erscheint.sichtbar {
  animation:auftauchen .7s ease both
}
.einstiegtext {
  animation:auftauchen .8s ease both
}
.projekt-wechsel {
  animation:auftauchen .4s ease both
}
@media(min-width:761px) {
  .einstieg {
    padding-top:43px
  }
  .einstieg h1 {
    font-size:clamp(58px,5.8vw,80px);
    line-height:1.06
  }
  .einstieg .etikett {
    margin-bottom:20px
  }
  .einstieg .vorspann {
    margin-top:23px;
    font-size:18px
  }
  .einstiegdetails {
    max-width:760px;
    font-size:15px;
    margin-bottom:24px
  }
  .einstieg .vertrauen {
    margin-top:22px
  }
  .kopf {
    padding-block:16px
  }
}
@media(min-width:1500px) {
  .schaufenster {
    height:450px
  }
}
@media(max-width:1000px) {
  .kopf {
    padding:18px 24px
  }
  .kopf nav {
    gap:15px
  }
  .marke {
    width:170px
  }
  .kopf nav>a:not(.knopf) {
    font-size:11px
  }
  .rahmen {
    width:calc(100% - 56px)
  }
  .zweispaltig,.begleitung .zweispaltig {
    gap:45px
  }
  .schaufenster {
    height:320px
  }
  .ergebnis {
    padding:25px
  }
  .ergebnis h3 {
    font-size:25px
  }
  .ergebnis p {
    min-height:150px
  }
  .projekttext {
    padding:28px 24px
  }
  .projekttext h3 {
    font-size:24px
  }
  .fragenbereich {
    gap:45px
  }
  .abschnitt {
    padding-block:85px
  }
  .hinweisleiste {
    font-size:10px
  }
  .tageinhalt {
    gap:40px
  }
  .preiskarte {
    padding:32px
  }
}
@media(max-width:760px) {
  html {
    scroll-padding-top:85px
  }
  .rahmen {
    width:calc(100% - 40px)
  }
  .hinweisleiste {
    font-size:9px;
    padding:10px 12px
  }
  .hinweisleiste a {
    display:none
  }
  .kopf {
    padding:16px 20px
  }
  .marke {
    width:165px
  }
  .menuschalter {
    display:block;
    border:1px solid var(--linie);
    border-radius:5px;
    background:transparent;
    padding:7px 12px;
    font-size:12px
  }
  .kopf nav {
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    padding:24px;
    background:var(--papier);
    border-bottom:1px solid var(--linie);
    box-shadow:0 15px 20px #142b2510
  }
  .kopf nav.offen {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0
  }
  .kopf nav>a:not(.knopf) {
    padding:12px 0;
    font-size:15px
  }
  .kopf nav .knopf {
    margin-top:14px
  }
  .einstieg {
    padding-top:45px
  }
  .einstiegtext {
    padding-inline:20px
  }
  .einstieg .etikett {
    font-size:8px;
    letter-spacing:.09em;
    gap:8px;
    margin-bottom:23px
  }
  h1 {
    font-size:clamp(40px,8.9vw,67px);
    line-height:1.08;
    letter-spacing:-.055em
  }
  h2 {
    font-size:clamp(34px,7.5vw,48px)
  }
  .vorspann {
    font-size:17px;
    margin-top:23px
  }
  .einstiegdetails {
    font-size:14px;
    margin-bottom:24px
  }
  .hauptaktion {
    font-size:13px;
    padding:17px 18px;
    gap:14px;
    max-width:100%
  }
  .kleindruck {
    font-size:10px
  }
  .vertrauen {
    font-size:9px;
    margin-top:24px;
    max-width:350px;
    line-height:1.6;
    gap:9px
  }
  .vertrauen strong {
    font-size:9px
  }
  .vertrauen img {
    width:37px;
    height:37px;
    flex-shrink:0
  }
  .schaufenster {
    height:255px;
    margin-top:44px;
    width:100%
  }
  .fenster.mitte {
    width:77%;
    left:11.5%;
    top:14px
  }
  .fenster.seitlich {
    width:57%;
    top:44px
  }
  .fenster.links {
    left:-28%
  }
  .fenster.rechts {
    right:-28%
  }
  .fensterkopf {
    font-size:5px;
    height:18px;
    padding:0 7px
  }
  .fensterpunkte {
    font-size:5px;
    letter-spacing:0
  }
  .schwebeschild {
    bottom:4px;
    padding:12px 20px;
    font-size:12px;
    min-width:210px
  }
  .schwebeschild span {
    font-size:9px
  }
  .eckdaten {
    grid-template-columns:1fr 1fr;
    gap:25px 0;
    padding:25px 0;
    margin-top:25px
  }
  .eckdaten>div:nth-child(3) {
    border-left:0
  }
  .eckdaten strong {
    font-size:35px;
    margin-bottom:5px
  }
  .eckdaten span {
    font-size:10px
  }
  .abschnitt {
    padding-block:65px
  }
  .abschnittkopf {
    margin-bottom:30px
  }
  .abschnittkopf p:last-child {
    font-size:15px;
    margin-top:21px
  }
  .etikett {
    font-size:9px;
    margin-bottom:18px
  }
  .projektwahl {
    gap:6px;
    margin-bottom:23px
  }
  .projektwahl button {
    font-size:11px;
    padding:8px 12px
  }
  .projektbuehne {
    grid-template-columns:1fr
  }
  .projektbild img {
    aspect-ratio:1.77;
    height:auto
  }
  .projekttext {
    padding:28px
  }
  .projekttext h3 {
    font-size:25px;
    margin-top:10px
  }
  .projekttext p {
    font-size:14px
  }
  .projekttext {
    min-height:0
  }
  .projektstand {
    position:absolute;
    bottom:25px;
    right:28px;
    font-size:16px
  }
  .referenzhinweis {
    font-size:10px
  }
  .zweispaltig,.begleitung .zweispaltig {
    grid-template-columns:1fr;
    gap:35px
  }
  .zweispaltig>div>p:not([class]) {
    font-size:15px
  }
  .situationen h3 {
    font-size:21px
  }
  .situationen p {
    font-size:13px
  }
  .ergebnisse {
    grid-template-columns:1fr;
    gap:15px
  }
  .ergebnis {
    padding:27px
  }
  .nummer {
    margin-bottom:20px;
    font-size:35px
  }
  .ergebnis h3 {
    font-size:28px
  }
  .ergebnis p {
    min-height:0;
    font-size:14px
  }
  .leitsatz {
    margin-top:38px;
    font-size:15px
  }
  .leitsatz strong {
    font-size:18px
  }
  .tagewahl {
    margin-top:25px
  }
  .tagewahl button {
    font-size:22px;
    padding:17px 12px
  }
  .tagewahl button span {
    font-size:10px
  }
  .tageinhalt {
    grid-template-columns:1fr;
    gap:10px;
    padding:26px 10px
  }
  .grosszahl {
    font-size:52px
  }
  .tageinhalt h3 {
    font-size:29px
  }
  .ablaufabschluss {
    flex-direction:column;
    align-items:flex-start;
    padding:22px 10px 0;
    gap:20px
  }
  .workshopbild img {
    aspect-ratio:1.25
  }
  .bildnotiz {
    left:-5px;
    padding:15px 20px
  }
  .portrait {
    max-width:430px;
    width:100%;
    justify-self:center
  }
  .begleitertext blockquote {
    font-size:25px
  }
  .dreiblicke {
    grid-template-columns:1fr;
    gap:22px;
    margin-top:35px
  }
  .dreiblicke h3 {
    margin:15px 0;
    font-size:24px
  }
  .dreiblicke p {
    margin-bottom:0
  }
  .preiskarte {
    padding:30px 25px
  }
  .preiskarte .preis {
    font-size:72px
  }
  .fragenbereich {
    grid-template-columns:1fr;
    gap:32px
  }
  summary {
    font-size:14px;
    padding-block:22px
  }
  .fragen details p {
    font-size:13px
  }
  .abschluss h2 {
    font-size:clamp(42px,9vw,63px)
  }
  .abschluss p:not(.etikett):not(.kleindruck) {
    font-size:15px;
    margin:25px auto
  }
  .abschluss .kleindruck {
    font-size:9px
  }
  .email {
    font-size:11px
  }
  .checkhinweis {
    flex-direction:column;
    align-items:flex-start;
    padding-block:30px;
    gap:17px
  }
  .fuss {
    grid-template-columns:1fr;
    gap:22px;
    padding-top:35px
  }
  .fuss p,.fuss small {
    text-align:left
  }
  .fuss nav {
    flex-wrap:wrap;
    gap:12px 20px;
    font-size:10px
  }
  .kontaktleiste {
    padding:10px;
    width:calc(100% - 20px);
    bottom:10px;
    gap:10px
  }
  .kontaktleiste strong {
    font-size:10px;
    line-height:1.4
  }
  .kontaktleiste span:not(.knopf span) {
    display:none
  }
  .kontaktleiste .knopf.klein {
    font-size:11px;
    padding:12px;
    gap:10px
  }
  .kontaktleiste .knopf span {
    font-size:17px
  }
  .dialogkopf {
    align-items:flex-start
  }
  .dialogkopf h2 {
    font-size:21px
  }
  .dialogkopf button {
    font-size:10px;
    flex-shrink:0
  }
  dialog {
    padding:18px
  }
  dialog>p {
    font-size:11px
  }
  @keyframes leiste-rein {
    from {
      opacity:0;
      bottom:0
    }
    to {
      opacity:1;
      bottom:10px
    }
  }
}
@media(max-width:380px) {
  .schaufenster {
    height:218px
  }
  .hauptaktion {
    font-size:12px;
    padding:15px;
    gap:10px
  }
  .einstieg .etikett {
    font-size:7px
  }
  .vertrauen span {
    max-width:255px
  }
  .projekttext {
    padding:23px
  }
  .hinweisleiste {
    font-size:8px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
}