/* =========================================================================
   Marlene Voigt · Fotografin Hannover
   Schrift: Geist Mono (alles) + Mrs Saint Delafield (dekorativ)
   ========================================================================= */

@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/geist-mono-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:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/geist-mono-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:'Mrs Saint Delafield';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/mrs-saint-delafield-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:'Mrs Saint Delafield';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/mrs-saint-delafield-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;}

:root{
  --papier:#fbf6e7;
  --papier-2:#f4eddb;
  --papier-3:#efe7cf;
  --gruen:#93a87c;
  --gruen-tief:#63764b;
  --gruen-dunkel:#4d5c3a;
  --tinte:#2b2a26;
  --tinte-gruen:#26291f;
  /* gedaempfter Text: 4.78:1 auf dem dunkelsten Papierton, 5.91:1 auf Weiss */
  --grau:#666554;
  --linie:rgba(43,42,38,.16);
  --linie-stark:rgba(43,42,38,.34);
  --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --script:'Mrs Saint Delafield',cursive;
  --rand:32px;
}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

body{
  margin:0;background:var(--papier);color:var(--tinte);
  font-family:var(--mono);font-size:15px;font-weight:400;line-height:1.75;
  letter-spacing:.03em;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;hyphens:auto;
}
img{display:block;max-width:100%;height:auto;}
figure{margin:0;}
p{margin:0 0 1em;}
h1,h2,h3{margin:0;font-weight:400;letter-spacing:.02em;line-height:1.45;}
ul,ol{margin:0;padding:0;list-style:none;}
a{color:inherit;}
button{font:inherit;letter-spacing:inherit;color:inherit;}

:where(a,button,summary,[tabindex]):focus-visible{
  outline:2px solid var(--gruen-tief);outline-offset:3px;border-radius:1px;
}

.sprung{position:absolute;left:-9999px;top:0;z-index:60;background:var(--tinte);color:var(--papier);
  padding:12px 20px;text-decoration:none;}
.sprung:focus{left:12px;top:12px;}

.breite{max-width:1280px;margin:0 auto;padding:0 var(--rand);}
.breite.schmal{max-width:900px;}
.abschnitt{padding:clamp(64px,9vw,124px) 0;}
.abschnitt-kopf{max-width:760px;margin-bottom:clamp(40px,5vw,72px);}
.abschnitt-kopf.mitte{max-width:820px;margin-left:auto;margin-right:auto;text-align:center;}
.abschnitt-kopf h2,.fragen h2,.ueber-text h2{
  font-size:clamp(20px,2.35vw,30px);letter-spacing:.01em;
}
.lede{color:var(--grau);font-size:13px;line-height:1.85;letter-spacing:.05em;margin-top:18px;}
.lede.mitte{max-width:700px;margin-left:auto;margin-right:auto;text-align:center;}
.augenbraue{font-size:11px;text-transform:uppercase;letter-spacing:.22em;color:var(--grau);margin-bottom:20px;}
em{font-style:normal;color:var(--grau);}

/* ------------------------------------------------------------- Knöpfe */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 26px;font-size:11px;text-transform:uppercase;letter-spacing:.18em;
  text-decoration:none;border:1px solid var(--linie-stark);background:transparent;
  cursor:pointer;transition:background .25s,color .25s,border-color .25s;
}
.knopf-rand:hover{background:var(--tinte);color:var(--papier);border-color:var(--tinte);}
.knopf-rand.hell{border-color:rgba(251,246,231,.75);color:#fff;}
.knopf-rand.hell:hover{background:var(--papier);color:var(--tinte);border-color:var(--papier);}
.knopf-voll{background:var(--gruen-tief);border-color:var(--gruen-tief);color:#fff;}
.knopf-voll:hover{background:var(--gruen-dunkel);border-color:var(--gruen-dunkel);}
.knopf-voll.dunkel{background:var(--tinte);border-color:var(--tinte);color:var(--papier);}
.knopf-voll.dunkel:hover{background:#000;border-color:#000;}

/* ============================================================== KOPF */
.kopf{
  position:absolute;inset:0 0 auto;z-index:20;
  display:flex;align-items:flex-start;justify-content:space-between;gap:24px;
  padding:26px var(--rand);color:#fff;
}
.marke{text-decoration:none;display:block;}
.marke-script{
  display:block;font-family:var(--script);font-size:clamp(38px,4.6vw,62px);
  line-height:.9;letter-spacing:.01em;
  text-shadow:0 2px 24px rgba(30,28,20,.45);
}
.marke-zusatz{
  display:block;font-size:9px;text-transform:uppercase;letter-spacing:.3em;
  margin-top:6px;opacity:.92;
}
.hauptnav{display:flex;flex-direction:column;align-items:flex-end;gap:5px;text-align:right;}
.hauptnav a{
  font-size:10px;text-transform:uppercase;letter-spacing:.2em;text-decoration:none;
  opacity:.94;transition:opacity .2s;
}
.hauptnav a:hover{opacity:.6;}
.burger{display:none;}

/* ============================================================== HERO */
.hero{position:relative;min-height:100svh;overflow:hidden;display:flex;align-items:flex-end;}
.hero-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.hero-schleier{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(30,28,20,.40) 0%,rgba(30,28,20,0) 34%),
    linear-gradient(0deg,rgba(30,28,20,.62) 0%,rgba(30,28,20,.12) 46%);
}
.hero-inhalt{
  position:relative;width:100%;
  display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px;
  padding:0 var(--rand) clamp(38px,6vh,74px);color:#fff;
}
.hero-titel{
  font-size:clamp(19px,2.5vw,32px);font-weight:300;line-height:1.55;letter-spacing:.04em;
  text-shadow:0 2px 26px rgba(30,28,20,.4);
}
.hero-neben{text-align:right;max-width:420px;justify-self:end;}
.hero-neben p{font-size:11px;line-height:1.9;letter-spacing:.07em;opacity:.95;margin-bottom:18px;}

/* ============================================================ ABLAUF */
.ablauf-raster{
  display:grid;grid-template-columns:minmax(180px,1fr) minmax(0,2.1fr) minmax(180px,1fr);
  gap:clamp(24px,3.5vw,56px);align-items:start;
}
.ablauf-bild-1{margin-top:clamp(20px,5vw,90px);}
.ablauf-neben{display:flex;flex-direction:column;gap:clamp(24px,4vw,64px);}
.ablauf-bild-3{margin-left:auto;width:82%;}
.schritte li{padding:20px 0;border-top:1px solid var(--linie);}
.schritte li:last-child{border-bottom:1px solid var(--linie);}
.schritte p{margin:0;}
.schritt-nr{
  font-size:11px;text-transform:uppercase;letter-spacing:.16em;margin-bottom:10px !important;
}
.schritte li>p:last-child{color:var(--grau);font-size:13px;line-height:1.85;letter-spacing:.045em;}

/* ======================================================= VERSPRECHEN */
.versprechen{background:var(--papier-2);}
.karten{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px);}
.karte{
  border:1px solid var(--linie);padding:26px 26px 30px;
  min-height:250px;display:flex;flex-direction:column;justify-content:space-between;gap:60px;
}
.karte-titel{
  font-size:11px;text-transform:uppercase;letter-spacing:.18em;margin:0;
}
.karte>p:last-child{margin:0;color:var(--grau);font-size:13px;line-height:1.8;letter-spacing:.045em;}

/* ======================================================= BILDSTREIFEN */
.streifen{
  display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1vw,14px);
  padding:0 var(--rand) clamp(56px,8vw,110px);align-items:start;
}
.streifen img{width:100%;aspect-ratio:56/74;object-fit:cover;}
.streifen figure:nth-child(2){margin-top:clamp(14px,2.6vw,42px);}
.streifen figure:nth-child(4){margin-top:clamp(8px,1.6vw,26px);}
.streifen figure:nth-child(6){margin-top:clamp(18px,3.4vw,54px);}

/* ======================================================== BUCHUNGSBAND */
.band{position:relative;overflow:hidden;min-height:clamp(380px,46vw,560px);display:flex;align-items:center;}
.band-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.band-schleier{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(28,26,19,.72) 0%,rgba(28,26,19,.46) 44%,rgba(28,26,19,.06) 78%);
}
.band-inhalt{position:relative;color:#fff;padding-top:48px;padding-bottom:110px;max-width:1280px;width:100%;}
.band-inhalt h2{font-size:clamp(19px,2.3vw,29px);font-weight:300;letter-spacing:.03em;}
.band-inhalt p{max-width:520px;margin:20px 0 26px;font-size:12px;line-height:1.9;letter-spacing:.055em;opacity:.94;}
.band-script{
  position:absolute;left:0;right:0;bottom:-.18em;margin:0;
  font-family:var(--script);font-size:clamp(70px,13vw,190px);line-height:1;
  text-align:center;color:rgba(255,255,255,.42);pointer-events:none;white-space:nowrap;
}

/* ============================================================ PAKETE */
.pakete .abschnitt-kopf{margin-bottom:clamp(32px,4vw,56px);}
.paket{
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  border:1px solid var(--linie);border-bottom:0;
}
.pakete .paket:last-of-type{border-bottom:1px solid var(--linie);}
.paket-gedreht .paket-karte{order:2;}
.paket-gedreht .paket-bild{order:1;}
.paket-karte{padding:clamp(26px,3vw,44px);display:flex;flex-direction:column;position:relative;}
.paket-karte-gruen{background:var(--gruen);}
.paket-karte h3{font-size:clamp(17px,1.8vw,23px);font-weight:400;}
.paket-lede{margin:14px 0 0;font-size:12px;line-height:1.85;letter-spacing:.05em;color:var(--grau);max-width:46ch;}
.paket-karte-gruen .paket-lede,.paket-karte-gruen .paket-liste li,.paket-karte-gruen .paket-frist{color:var(--tinte-gruen);}
.paket-thumb{width:96px;height:96px;object-fit:cover;margin:26px 0 30px;}
.paket-label{
  font-size:10px;text-transform:uppercase;letter-spacing:.2em;
  padding-bottom:12px;border-bottom:1px solid var(--linie);margin-bottom:16px;
}
.paket-karte-gruen .paket-label{border-color:rgba(38,41,31,.3);}
.paket-liste li{
  font-size:12px;line-height:1.7;letter-spacing:.045em;color:var(--grau);
  padding:5px 0;
}
.paket-frist{
  margin-top:20px;font-size:11px;letter-spacing:.09em;color:var(--grau);
  padding-top:14px;border-top:1px solid var(--linie);
}
.paket-karte-gruen .paket-frist{border-color:rgba(38,41,31,.3);}
.paket-fuss{
  margin-top:auto;padding-top:26px;display:flex;align-items:center;
  justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.paket-preis{margin:0;font-size:clamp(24px,3vw,36px);letter-spacing:.06em;}
.paket-karte-gruen .paket-preis{color:var(--tinte-gruen);}
.paket-bild img{width:100%;height:100%;object-fit:cover;min-height:100%;}
.paket-bild{display:flex;}

/* --------------------------------------------------------- Laufband */
.laufband{background:var(--gruen);overflow:hidden;margin-top:clamp(40px,5vw,72px);padding:13px 0;}
.laufband-spur{display:flex;width:max-content;animation:lauf 46s linear infinite;}
.laufband p{
  margin:0;padding-right:48px;white-space:nowrap;color:var(--tinte-gruen);
  font-size:10px;text-transform:uppercase;letter-spacing:.2em;
}
.laufband span{opacity:.72;}
@keyframes lauf{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){
  .laufband-spur{animation:none;width:100%;}
  .laufband p:last-child{display:none;}
  .laufband p{white-space:normal;padding-right:0;}
}

/* ============================================================== STIL */
.stil{background:var(--papier-2);}
.stil-bilder{
  display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);
  gap:clamp(24px,4vw,72px);align-items:center;margin-bottom:clamp(48px,7vw,110px);
}
.stil-quadrat{max-width:330px;justify-self:center;}
.stil-quadrat img,.stil-gross img{width:100%;}
.stil-titel{
  text-align:center;font-size:clamp(21px,3.3vw,44px);font-weight:300;
  line-height:1.4;letter-spacing:.005em;
}
.stil-panel{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,34px);
  margin-top:clamp(40px,5vw,76px);align-items:stretch;
}
.stil-tafel{
  border:1px solid var(--linie-stark);padding:clamp(22px,2.6vw,36px);
  display:flex;flex-direction:column;
}
.stil-tafel-kopf{font-size:11px;text-transform:uppercase;letter-spacing:.18em;line-height:2;}
.stil-farben{display:flex;gap:8px;margin:auto 0 32px;}
.stil-farben span{width:38px;height:38px;background:var(--f);border:1px solid var(--linie);}
.stil-tafel-gross{font-size:clamp(17px,1.9vw,24px);letter-spacing:.04em;margin:0 0 4px;}
.stil-tafel-script{font-family:var(--script);font-size:clamp(30px,3.6vw,48px);line-height:1.1;margin:0;color:var(--grau);}
.stil-hoch img{width:100%;height:100%;object-fit:cover;}
.stil-hoch{display:flex;}

/* ========================================================== ÜBER MICH */
.ueber-raster{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);gap:clamp(28px,4.5vw,80px);align-items:start;}
.ueber-text>p{color:var(--grau);font-size:13px;line-height:1.9;letter-spacing:.045em;}
.ueber-text h2{margin-bottom:24px;}
.zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:34px 0 0;
  border-top:1px solid var(--linie);padding-top:24px;}
.zahlen dt{font-size:clamp(16px,1.7vw,21px);letter-spacing:.04em;}
.zahlen dd{margin:8px 0 0;font-size:11px;line-height:1.7;letter-spacing:.07em;color:var(--grau);}
.ueber-detail{margin-top:36px;max-width:260px;}

/* ========================================================= PORTFOLIO */
.portfolio{background:var(--gruen);padding:clamp(64px,9vw,124px) 0;color:var(--tinte-gruen);}
.portfolio-titel{
  text-align:center;font-size:clamp(19px,2.4vw,30px);font-weight:400;letter-spacing:.05em;
  margin-bottom:clamp(30px,4vw,50px);
}
.reiter{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,20px);
  margin-bottom:clamp(36px,5vw,66px);}
.reiter-knopf{
  border:1px solid rgba(38,41,31,.45);background:transparent;color:var(--tinte-gruen);
  padding:13px 14px;font-size:10px;text-transform:uppercase;letter-spacing:.16em;
  cursor:pointer;transition:background .25s,color .25s;
}
.reiter-knopf:hover{background:rgba(38,41,31,.12);}
.reiter-knopf.ist-aktiv{background:var(--tinte-gruen);color:var(--papier);border-color:var(--tinte-gruen);}

.collage{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(18px,2.4vw,40px) clamp(14px,1.8vw,28px);}
.collage img{width:100%;object-fit:cover;}
.collage figcaption{margin-top:12px;font-size:10px;letter-spacing:.1em;line-height:1.7;color:rgba(38,41,31,.82);}
.collage figcaption b{display:block;font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--tinte-gruen);}
.collage .c1{grid-column:1/7;grid-row:1/3;}
.collage .c2{grid-column:10/13;grid-row:1/2;align-self:end;}
.collage .c3{grid-column:6/10;grid-row:2/4;}
.collage .c4{grid-column:1/6;grid-row:3/6;}
.collage .c5{grid-column:8/13;grid-row:4/6;align-self:end;}
.collage[hidden]{display:none;}

/* ============================================================ FRAGEN */
.akkordeon{margin-top:clamp(28px,4vw,54px);border-top:1px solid var(--linie);}
.akkordeon details{border-bottom:1px solid var(--linie);}
.akkordeon summary{
  list-style:none;cursor:pointer;padding:20px 44px 20px 0;position:relative;
  font-size:13px;letter-spacing:.05em;line-height:1.7;
}
.akkordeon summary::-webkit-details-marker{display:none;}
.akkordeon summary::after{
  content:"+";position:absolute;right:8px;top:18px;font-size:17px;color:var(--grau);
}
.akkordeon details[open] summary::after{content:"–";}
.akkordeon details p{
  margin:0 0 22px;max-width:74ch;color:var(--grau);font-size:13px;line-height:1.85;letter-spacing:.045em;
}

/* ========================================================= ABSCHLUSS */
.abschluss{padding:clamp(56px,8vw,110px) var(--rand) clamp(64px,9vw,124px);background:var(--papier);
  overflow:hidden;/* der ueberhaengende Strauss darf die Seite nicht breiter machen */}
.umschlag-buehne{
  position:relative;max-width:780px;margin:0 auto;
  display:flex;justify-content:center;padding-top:clamp(40px,7vw,90px);
}
.umschlag{position:relative;width:min(100%,620px);aspect-ratio:5/3.4;background:var(--gruen);
  box-shadow:0 24px 60px -34px rgba(43,42,38,.55);}
.umschlag-karte{
  position:absolute;left:8%;right:8%;bottom:14%;top:-30%;
  background:#fdfbf3;padding:clamp(20px,3vw,34px);
  box-shadow:0 10px 30px -18px rgba(43,42,38,.5);
  display:flex;flex-direction:column;justify-content:flex-start;
}
.karte-script{font-family:var(--script);font-size:clamp(30px,4.4vw,54px);line-height:1;margin:0 0 14px;}
.karte-text{font-size:12px;line-height:1.9;letter-spacing:.05em;color:var(--grau);margin:0;}
.karte-kontakt{margin:16px 0 0;font-size:10px;text-transform:uppercase;letter-spacing:.18em;}
.umschlag-front{
  position:absolute;inset:0;background:#8fa478;
  clip-path:polygon(0 0,50% 46%,100% 0,100% 100%,0 100%);
}
.umschlag-blumen{
  position:absolute;right:-4%;bottom:-6%;width:min(38%,250px);height:auto;pointer-events:none;
}

/* ========================================================== FUSSZEILE */
.fuss{background:var(--papier-2);padding-bottom:clamp(40px,5vw,70px);}
.fuss-bilder{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,16px);
  padding:0 0 clamp(20px,2.6vw,34px);}
.fuss-bilder img{width:100%;aspect-ratio:80/54;object-fit:cover;}
.fuss-nav{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px 24px;
  padding:0 var(--rand) clamp(24px,3vw,44px);
}
.fuss-nav a{font-size:10px;text-transform:uppercase;letter-spacing:.2em;text-decoration:none;color:var(--grau);}
.fuss-nav a:hover{color:var(--tinte);}
.fuss-marke{position:relative;padding-bottom:clamp(20px,3vw,40px);}
.fuss-script{
  font-family:var(--script);font-size:clamp(72px,15.5vw,230px);line-height:.78;margin:0;
  letter-spacing:.01em;
}
.fuss-script span{display:inline-block;padding-left:.22em;}
.fuss-zusatz{
  position:absolute;right:var(--rand);top:clamp(10px,4vw,60px);margin:0;text-align:right;
  font-size:10px;text-transform:uppercase;letter-spacing:.24em;line-height:2;color:var(--grau);
}
.fuss-unten{
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(28px,4vw,60px);padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--linie);
}
.fuss-satz{font-size:clamp(15px,1.8vw,22px);line-height:1.6;letter-spacing:.02em;margin:0 0 16px;}
.fuss-klein{font-size:12px;line-height:1.9;letter-spacing:.05em;color:var(--grau);margin:0 0 26px;}
.fuss-knoepfe{display:flex;gap:14px;flex-wrap:wrap;}
.fuss-rechts{display:flex;flex-direction:column;gap:26px;align-items:flex-start;}
.fuss-kontakt{margin:0;font-size:12px;line-height:2.1;letter-spacing:.06em;}
.fuss-kontakt a{text-decoration:none;border-bottom:1px solid var(--linie-stark);}
.fuss-kontakt a:hover{border-color:var(--tinte);}
.fuss-recht{margin:0;font-size:10px;line-height:2.2;letter-spacing:.1em;color:var(--grau);}
.fuss-recht a{text-decoration:none;}
.fuss-recht a:hover{color:var(--tinte);text-decoration:underline;}

/* ============================================================== MODAL */
.modal{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:20px;}
.modal[hidden]{display:none;}
.modal-hintergrund{position:absolute;inset:0;background:rgba(28,26,19,.62);}
.modal-fenster{
  position:relative;background:var(--papier);max-width:520px;width:100%;
  padding:clamp(26px,4vw,42px);border:1px solid var(--linie-stark);
  max-height:90vh;overflow:auto;
}
.modal-fenster h2{font-size:19px;margin-bottom:14px;}
.modal-zu{position:absolute;top:8px;right:12px;background:none;border:0;font-size:26px;
  line-height:1;cursor:pointer;padding:6px;color:var(--grau);}
.modal-text{font-size:12px;line-height:1.9;letter-spacing:.05em;color:var(--grau);}
.modal-vorschau{
  border:1px solid var(--linie);padding:14px 16px;font-size:12px;line-height:1.8;
  letter-spacing:.04em;background:var(--papier-3);margin-bottom:22px;
  white-space:pre-line;/* die vorbereitete Nachricht enthaelt echte Zeilenumbrueche */
}
.modal-wege{display:flex;gap:12px;flex-wrap:wrap;}
.modal-wege .knopf{flex:1 1 180px;}
.modal-hinweis{margin:22px 0 0;font-size:10px;line-height:1.8;letter-spacing:.06em;color:var(--grau);}
body.modal-offen{overflow:hidden;}

/* ====================================== RECHTSSEITEN UND FEHLERSEITE */
.rechtsseite{background:var(--papier);}
.recht-kopf{
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  padding:26px var(--rand);border-bottom:1px solid var(--linie);
}
.rechtsseite .marke-script{text-shadow:none;font-size:clamp(34px,3.6vw,46px);}
.rechtsseite .marke-zusatz{color:var(--grau);}
.recht-text h1{font-size:clamp(24px,3vw,38px);font-weight:300;margin-bottom:32px;}
.recht-text h2{
  font-size:12px;text-transform:uppercase;letter-spacing:.18em;
  margin:40px 0 12px;padding-top:20px;border-top:1px solid var(--linie);
}
.recht-text p{font-size:13px;line-height:1.95;letter-spacing:.04em;color:var(--grau);}
.recht-text a{color:var(--tinte);}
.recht-text b{color:var(--tinte);font-weight:500;}
.hinweiskasten{border:1px solid var(--linie-stark);background:var(--papier-3);padding:22px 24px;margin-bottom:8px;}
.hinweiskasten p{margin:0;}
.zurueck{margin-top:44px;padding-top:24px;border-top:1px solid var(--linie);}

.fehlerseite{
  min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px var(--rand);
}
.fehler-script{font-family:var(--script);font-size:clamp(52px,10vw,120px);line-height:1;margin:0 0 10px;color:var(--gruen-tief);}
.fehlerseite h1{font-size:clamp(19px,2.4vw,28px);font-weight:300;}
.fehler-text{max-width:52ch;margin:20px 0 32px;font-size:13px;line-height:1.9;letter-spacing:.05em;color:var(--grau);}
.fehler-knoepfe{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin:0;}

/* ========================================================== RESPONSIV */
@media (max-width:1080px){
  .ablauf-raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .ablauf-bild-1{grid-column:1/2;grid-row:2/3;margin-top:0;}
  .schritte{grid-column:1/3;grid-row:1/2;}
  .ablauf-neben{grid-column:2/3;grid-row:2/3;}
  .ablauf-bild-3{width:100%;}
  .stil-panel{grid-template-columns:1fr;}
  .stil-hoch img{max-height:520px;}
  .ueber-raster{grid-template-columns:1fr;}
  .ueber-bild{max-width:460px;}
}

@media (max-width:860px){
  :root{--rand:22px;}
  .kopf{padding:18px var(--rand);}
  .burger{
    display:inline-flex;align-items:center;gap:9px;background:none;border:0;cursor:pointer;
    font-size:10px;text-transform:uppercase;letter-spacing:.2em;color:#fff;padding:6px 0;
  }
  .burger-strich{width:22px;height:1px;background:currentColor;position:relative;display:block;}
  .burger-strich::before,.burger-strich::after{
    content:"";position:absolute;left:0;width:22px;height:1px;background:currentColor;
  }
  .burger-strich::before{top:-6px;}
  .burger-strich::after{top:6px;}
  .hauptnav{
    position:absolute;top:100%;right:var(--rand);background:rgba(28,26,19,.94);
    padding:20px 26px;gap:14px;display:none;min-width:190px;
  }
  .hauptnav.ist-offen{display:flex;}
  .hauptnav a{font-size:11px;}
  .hero-inhalt{grid-template-columns:1fr;gap:26px;}
  .hero-neben{text-align:left;justify-self:start;}
  .karten{grid-template-columns:1fr;}
  .karte{min-height:0;gap:26px;}
  .streifen{grid-template-columns:repeat(3,1fr);}
  .streifen figure:nth-child(n){margin-top:0;}
  .streifen figure:nth-child(2),.streifen figure:nth-child(5){margin-top:22px;}
  .paket,.paket-gedreht{grid-template-columns:1fr;}
  .paket-gedreht .paket-karte{order:0;}
  .paket-gedreht .paket-bild{order:0;}
  .paket-bild img{max-height:420px;}
  .stil-bilder{grid-template-columns:1fr;}
  .stil-quadrat{max-width:240px;justify-self:start;}
  .zahlen{grid-template-columns:1fr;gap:16px;}
  .collage{grid-template-columns:repeat(2,1fr);}
  .collage .c1,.collage .c2,.collage .c3,.collage .c4,.collage .c5{grid-column:auto;grid-row:auto;}
  .collage .c1{grid-column:1/3;}
  .fuss-unten{grid-template-columns:1fr;}
  .fuss-zusatz{position:static;text-align:left;margin-top:14px;}
  .fuss-nav{justify-content:flex-start;gap:12px 20px;}
}

@media (max-width:560px){
  body{font-size:14px;}
  .hero{min-height:92svh;}
  .hero-titel{font-size:18px;}
  .reiter{grid-template-columns:1fr;}
  .streifen{grid-template-columns:repeat(2,1fr);}
  .collage{grid-template-columns:1fr;}
  .collage .c1{grid-column:auto;}
  .nur-breit{display:none;}
  .umschlag-karte{top:-20%;padding:18px;}
  .umschlag-blumen{width:44%;right:-8%;}
  .paket-fuss{flex-direction:column;align-items:flex-start;}
  .paket-fuss .knopf{width:100%;}
  .modal-wege{flex-direction:column;}
}