:root{
  --papier:#f3ede2;
  --papier-2:#eae2d3;
  --tinte:#1f2b25;
  --tinte-weich:#4a574f;
  --tann:#20372e;
  --tann-tief:#16261f;
  --salbei:#7f9585;
  --lehm:#b4623c;
  --lehm-hell:#d08b64;
  --linie:#d6cbb8;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Karla","Trebuchet MS",sans-serif;
  --rand:clamp(1.25rem,5vw,5.5rem);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .2vw,1.09rem);
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1100px 620px at 88% -8%,rgba(127,149,133,.28),transparent 62%),
    radial-gradient(760px 520px at 2% 22%,rgba(180,98,60,.10),transparent 60%);
  background-attachment:fixed;
}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(2.65rem,7.4vw,5.1rem)}
h2{font-size:clamp(1.95rem,4.2vw,3.1rem)}
h3{font-size:1.2rem;line-height:1.3}
p{margin:0 0 1.05rem}
em{font-style:italic;color:var(--lehm)}

a{color:inherit}
:focus-visible{outline:3px solid var(--lehm);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:0;background:var(--tann);color:#fff;padding:.9rem 1.2rem;z-index:99}
.skip:focus{left:.6rem;top:.6rem}

/* Kopf */
.top{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.3rem var(--rand) .9rem;
}
.wortmarke{text-decoration:none;display:block;line-height:1.15}
.wm-name{display:block;font-family:var(--serif);font-size:1.35rem;letter-spacing:-.01em}
.wm-sub{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--tinte-weich);margin-top:.18rem}
.top nav{display:flex;gap:.35rem;flex-wrap:wrap}
.top nav a{
  text-decoration:none;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;
  padding:.8rem .75rem;min-height:44px;display:inline-flex;align-items:center;
  color:var(--tinte-weich);border-bottom:1px solid transparent;transition:color .25s,border-color .25s;
}
.top nav a:hover{color:var(--tann);border-color:var(--lehm)}
@media (max-width:640px){.top nav{display:none}}

/* Hero */
.hero{padding:clamp(1.5rem,4vw,3rem) var(--rand) clamp(3rem,7vw,5.5rem)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,5vw,4.5rem);align-items:center;max-width:1280px;margin:0 auto}
.kicker{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--lehm);font-weight:700;margin-bottom:1rem}
.hero h1{margin-bottom:1.5rem}
.lead{font-size:clamp(1.05rem,1.3vw,1.2rem);color:var(--tinte-weich);max-width:34ch}
.hero-cta{display:flex;gap:.8rem;flex-wrap:wrap;margin:1.9rem 0 1.6rem}
.hero-facts{list-style:none;margin:0;padding:1.35rem 0 0;border-top:1px solid var(--linie);display:flex;flex-wrap:wrap;gap:.55rem 1.5rem;font-size:.87rem;color:var(--tinte-weich)}
.hero-facts li{position:relative;padding-left:1rem}
.hero-facts li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--salbei)}

.hero-bild{margin:0;position:relative}
.hero-bild img{
  border-radius:220px 220px 14px 14px;
  box-shadow:0 34px 70px -30px rgba(31,43,37,.55);
  aspect-ratio:3/4;object-fit:cover;width:100%;
}
.hero-bild figcaption{
  position:absolute;left:-1.6rem;bottom:1.9rem;
  background:var(--tann);color:#f1ece2;font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  padding:.7rem 1.05rem;border-radius:2px;box-shadow:0 12px 28px -14px rgba(0,0,0,.6);
}
@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-bild{order:-1}
  .hero-bild img{aspect-ratio:4/3;border-radius:160px 160px 12px 12px}
  .hero-bild figcaption{left:auto;right:1rem;bottom:1rem}
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:.85rem 1.7rem;border-radius:999px;text-decoration:none;font-weight:700;
  font-size:.92rem;letter-spacing:.02em;border:1.5px solid transparent;cursor:pointer;
  transition:transform .25s,background .25s,color .25s,box-shadow .25s;
}
.btn-primary{background:var(--tann);color:#f4efe5;box-shadow:0 14px 26px -16px rgba(31,43,37,.9)}
.btn-primary:hover{background:var(--lehm);transform:translateY(-2px)}
.btn-ghost{border-color:var(--tinte-weich);color:var(--tinte)}
.btn-ghost:hover{border-color:var(--tann);background:rgba(32,55,46,.07)}
.btn-hell{background:var(--papier);color:var(--tann)}
.btn-hell:hover{background:var(--lehm-hell);color:var(--tann-tief);transform:translateY(-2px)}
.breit{width:100%}

/* Zitatband */
.band{
  background:var(--tann);color:#e8e1d4;text-align:center;
  padding:clamp(2.6rem,6vw,4.2rem) var(--rand);
}
.band p{
  margin:0;font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.4rem,3.1vw,2.3rem);line-height:1.35;max-width:22ch;margin-inline:auto;
}

/* Abschnittsköpfe */
.kopf{max-width:52ch;margin:0 0 clamp(2rem,4vw,3rem)}
.kopf h2{margin-bottom:1rem}
.kopf-text{color:var(--tinte-weich)}
.kopf.hell .kopf-text{color:rgba(240,235,225,.75)}

/* Angebot */
.angebot{padding:clamp(3.5rem,8vw,6.5rem) var(--rand);max-width:1280px;margin:0 auto}
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:1px;background:var(--linie);border:1px solid var(--linie)}
.karte{background:var(--papier);padding:2.1rem 1.7rem 1.9rem;position:relative;transition:background .3s,transform .3s}
.karte:hover{background:#fbf7ef;transform:translateY(-3px)}
.nr{font-family:var(--serif);font-size:.85rem;letter-spacing:.15em;color:var(--salbei);display:block;margin-bottom:1.4rem}
.karte h3{margin-bottom:.7rem}
.karte p{margin:0;font-size:.95rem;color:var(--tinte-weich)}
.karten-cta{margin:2.4rem 0 0}

/* Haltung */
.haltung{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:center;
  padding:clamp(3rem,7vw,6rem) var(--rand);max-width:1280px;margin:0 auto;
}
.haltung-bild{margin:0}
.haltung-bild img{border-radius:4px 130px 4px 4px;box-shadow:0 30px 60px -34px rgba(31,43,37,.6);aspect-ratio:4/3;object-fit:cover}
.haltung-text h2{margin:0 0 1.1rem}
.haltung-text p{color:var(--tinte-weich)}
.haken{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.7rem}
.haken li{padding-left:1.9rem;position:relative;font-size:.95rem}
.haken li::before{
  content:"";position:absolute;left:0;top:.42em;width:.85rem;height:.5rem;
  border-left:2px solid var(--lehm);border-bottom:2px solid var(--lehm);transform:rotate(-45deg);
}
@media (max-width:860px){.haltung{grid-template-columns:1fr}}

/* Ablauf */
.ablauf{
  background:linear-gradient(165deg,var(--tann) 0%,var(--tann-tief) 100%);
  color:#efe9dd;padding:clamp(3.5rem,8vw,6.5rem) var(--rand);
}
.ablauf .kicker{color:var(--lehm-hell)}
.schritte{list-style:none;margin:0;padding:0;max-width:1280px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem 2.2rem}
.schritte li{position:relative;padding-top:1.4rem;border-top:1px solid rgba(240,233,221,.28)}
.st-nr{
  font-family:var(--serif);font-size:2.6rem;line-height:1;color:transparent;
  -webkit-text-stroke:1px var(--salbei);display:block;margin-bottom:.9rem;
}
.schritte h3{margin-bottom:.55rem;color:#f6f1e7}
.schritte p{margin:0;font-size:.94rem;color:rgba(240,233,221,.78)}

/* Rahmen */
.rahmen{padding:clamp(3.5rem,8vw,6.5rem) var(--rand)}
.rahmen-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.5rem,5vw,4rem);align-items:start;max-width:1280px;margin:0 auto}
.rahmen-text h2{margin:0 0 1.1rem}
.rahmen-text>p{color:var(--tinte-weich)}
.fakten{margin:1.9rem 0 1.4rem;display:grid;gap:0;border-top:1px solid var(--linie)}
.fakten>div{display:flex;justify-content:space-between;gap:1.5rem;padding:.9rem 0;border-bottom:1px solid var(--linie)}
.fakten dt{font-weight:700;font-size:.9rem;letter-spacing:.04em}
.fakten dd{margin:0;text-align:right;color:var(--tinte-weich);font-size:.94rem}
.fussnote{font-size:.86rem;color:var(--tinte-weich);background:rgba(127,149,133,.16);border-left:3px solid var(--salbei);padding:.9rem 1.1rem;margin:0}
.rahmen-bild{margin:0}
.rahmen-bild img{border-radius:4px;box-shadow:0 26px 54px -32px rgba(31,43,37,.5)}
@media (max-width:860px){.rahmen-grid{grid-template-columns:1fr}}

/* Weg */
.weg{position:relative;isolation:isolate;padding:clamp(4rem,10vw,7.5rem) var(--rand);text-align:center;color:#f5f0e6}
.weg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.weg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,32,25,.72),rgba(16,32,25,.86));z-index:-1}
.weg h2{margin:0 auto 1rem;max-width:16ch}
.weg p{color:rgba(245,240,230,.85);max-width:44ch;margin:0 auto 2rem}

/* Kontakt */
.kontakt{padding:clamp(3.5rem,8vw,6.5rem) var(--rand)}
.kontakt-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.75rem,5vw,4rem);max-width:1180px;margin:0 auto}
.kontakt-info h2{margin:0 0 1.1rem}
.kontakt-info>p{color:var(--tinte-weich)}
address{font-style:normal;margin:1.6rem 0 1.1rem;font-size:1.05rem;line-height:1.75}
.anfahrt{font-size:.92rem;color:var(--tinte-weich)}
.hinweis-akut{font-size:.86rem;line-height:1.6;background:rgba(180,98,60,.1);border-left:3px solid var(--lehm);padding:.95rem 1.1rem;color:var(--tinte);margin:1.4rem 0 0}

.formular{background:#fbf7ef;border:1px solid var(--linie);border-radius:6px;padding:clamp(1.4rem,3vw,2.2rem);box-shadow:0 26px 54px -34px rgba(31,43,37,.45)}
.f-titel{font-family:var(--serif);font-size:1.45rem;margin:0 0 1.3rem}
.feld{margin-bottom:1.05rem}
.feld label{display:block;font-size:.83rem;font-weight:700;letter-spacing:.05em;margin-bottom:.4rem}
.feld input,.feld textarea{
  width:100%;min-height:48px;padding:.75rem .9rem;font:inherit;font-size:.95rem;color:var(--tinte);
  background:var(--papier);border:1px solid var(--linie);border-radius:3px;transition:border-color .2s,background .2s;
}
.feld textarea{min-height:118px;resize:vertical}
.feld input:hover,.feld textarea:hover{border-color:var(--salbei)}
.feld input:focus,.feld textarea:focus{background:#fff;border-color:var(--tann)}
.feld ::placeholder{color:#8c8677}
.f-hinweis{font-size:.8rem;color:var(--tinte-weich);margin:.9rem 0 0}
@media (max-width:860px){.kontakt-grid{grid-template-columns:1fr}}

/* Fuß */
.fuss{
  background:var(--tann-tief);color:rgba(238,232,220,.8);
  padding:2.4rem var(--rand) 6.5rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.88rem;
}
.fuss p{margin:0}
.f-name{font-family:var(--serif);font-size:1.1rem;color:#f4efe5;margin-bottom:.3rem}

/* Fixe CTA */
.ruf{
  position:fixed;right:1rem;bottom:1rem;z-index:60;
  background:var(--lehm);color:#fff;text-decoration:none;font-weight:700;font-size:.92rem;
  padding:.95rem 1.5rem;min-height:48px;display:inline-flex;align-items:center;border-radius:999px;
  box-shadow:0 16px 34px -14px rgba(31,43,37,.85);transition:transform .25s,background .25s;
}
.ruf:hover{background:var(--tann);transform:translateY(-2px)}
@media (min-width:641px){.ruf{right:1.6rem;bottom:1.6rem}}

/* Motion */
.fade{opacity:0;animation:auf .8s cubic-bezier(.2,.7,.3,1) forwards;animation-delay:var(--d,0s)}
@keyframes auf{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1);transition-delay:var(--d,0s)}
.reveal.sichtbar{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fade,.reveal{opacity:1;transform:none;animation:none;transition:none}
  .btn,.karte,.ruf,.top nav a{transition:none}
}