@font-face{font-family:"Albert Sans";src:url("/fonts/albert-sans-latin-wght-normal.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Albert Sans";src:url("/fonts/albert-sans-latin-wght-italic.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}

:root{
  --kopfhoehe:92px;
  --rand:24px;
  --nachtkirsche:#1c0b12;
  --nachtkirsche-hell:#2c0b14;
  --creme:#f6efe9;
  --sand:#f7f4f1;
  --text:#2b2a28;
  --linie:rgba(28,11,18,.14);
  --schrift:"Albert Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --ease:cubic-bezier(.2,.6,.2,1)
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--schrift);font-weight:300;color:var(--text);background:#fff;line-height:1.75;font-size:17px}
strong{font-weight:500}
a{color:var(--nachtkirsche);text-decoration-thickness:1px;text-underline-offset:.22em;transition:color .2s var(--ease)}
a:hover{color:var(--nachtkirsche-hell)}
:focus-visible{outline:2px solid var(--nachtkirsche);outline-offset:4px}
.skip{position:absolute;left:12px;top:-60px;z-index:10;background:var(--nachtkirsche);color:#fff;padding:.7rem 1rem;text-decoration:none}
.skip:focus{top:12px;color:#fff}
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--rand)}

/* Kopfzeile */
header.site{height:var(--kopfhoehe);background:#fff;border-bottom:1px solid var(--linie)}
header.site .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
header.site img{display:block;height:auto;width:180px;max-width:44vw}
header.site.ueber-hero{position:absolute;top:0;left:0;right:0;z-index:5;background:transparent;border-bottom:0}
header.site.ueber-hero .wrap>a:first-child{display:flex;flex-direction:column;align-items:center;text-decoration:none;animation:einblenden 1.6s var(--ease) 1.5s both}
.logo-zusatz{margin-top:.9em;font-size:.7rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--nachtkirsche);white-space:nowrap;animation:einblenden 1.4s var(--ease) 2.5s both}

@media (min-width:821px){
  /* Kopfzeile so hoch wie der Hero, damit das Logo mittig im Foto steht; pointer-events lässt Klicks zum Hero durch */
  header.site.ueber-hero{height:100vh;height:100svh;min-height:560px;pointer-events:none}
  header.site.ueber-hero a{pointer-events:auto}
  header.site.ueber-hero .wrap{display:grid;grid-template-columns:1fr 1fr;max-width:none;padding:0}
  /* Lichtschein hält das Logo auch auf dunklen Bildstellen lesbar */
  header.site.ueber-hero .wrap>a:first-child{justify-self:center;align-self:center;padding:70px 90px;background:radial-gradient(closest-side,rgba(255,255,255,.62),rgba(255,255,255,.3) 55%,transparent)}
  header.site.ueber-hero img{width:clamp(220px,20vw,300px);max-width:none;filter:drop-shadow(0 0 10px rgba(255,255,255,.75))}
}

/* Hero – svh misst ohne die Browserleisten mobiler Geräte */
.hero{display:grid;overflow:hidden;grid-template-columns:1fr 1fr;min-height:560px;min-height:100vh;min-height:100svh;background:var(--nachtkirsche);color:var(--creme)}
/* Das Foto reicht unter die Farbfläche, damit es in der Kerbe sichtbar ist */
.hero-bildfeld{position:relative;overflow:hidden;margin-right:-24px}
/* Schatten liegt im Foto, weil der clip-path der Farbfläche einen box-shadow abschneiden würde */
.hero-bildfeld::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(270deg,rgba(15,4,8,.62) 0,rgba(15,4,8,.48) 24px,rgba(15,4,8,.22) 90px,transparent 240px)}
.hero-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;transform-origin:50% 40%;animation:hero-zoom 22s cubic-bezier(.25,.1,.25,1) forwards,hero-scharf 2.4s var(--ease) both;will-change:transform,filter}
.hero-text{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:72px clamp(28px,6vw,104px);background:var(--nachtkirsche);clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 calc(50% + 16px),16px 50%,0 calc(50% - 16px))}
.hero-text>*{position:relative;max-width:560px}
.hero :focus-visible{outline-color:var(--creme)}
.hero-ort{margin:0 0 1.5rem;font-size:.62rem;font-weight:500;line-height:1.5;letter-spacing:.42em;text-transform:uppercase;color:rgba(246,239,233,.75)}
.hero h1{margin:0;color:#d8c8bd;font-weight:200;font-size:clamp(2.2rem,3.5vw,3.5rem);line-height:1.12;letter-spacing:-.012em;text-wrap:balance}
.hero h1::after{content:"";display:block;width:1px;height:56px;margin:2rem auto 0;transform:scaleX(.5);background:rgba(246,239,233,.4)}
.hero p.lead{max-width:26em;margin:2rem auto 2.6rem;font-weight:200;font-size:1.02rem;line-height:1.7;letter-spacing:.04em;color:rgba(246,239,233,.88);text-wrap:balance}
.hero .btn{animation:einblenden 1.4s var(--ease) 2.9s both}
.hero-tel{display:inline-flex;align-items:center;min-height:44px;margin-top:1.4rem;font-size:.92rem;font-weight:200;letter-spacing:.06em;color:rgba(246,239,233,.88);text-decoration:none;white-space:nowrap}
.hero-tel:hover{color:#fff}
.hero-social{display:flex;justify-content:center;margin-top:.6rem}
.hero-social a{display:inline-flex;align-items:center;justify-content:center;width:38px;height:44px;color:rgba(246,239,233,.75);transition:color .25s var(--ease)}
.hero-social a:hover{color:#fff}
.hero-social svg{fill:none;stroke:currentColor;stroke-width:1;stroke-linejoin:round}
.hero-social .punkt{fill:currentColor;stroke:none}

@keyframes einblenden{from{opacity:0;filter:blur(6px);transform:translateY(10px)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes hero-zoom{from{transform:scale(1.1)}to{transform:scale(1)}}
@keyframes hero-scharf{from{filter:blur(18px) brightness(.7)}to{filter:blur(0) brightness(1)}}

/* Buttons */
.btn{display:inline-flex;align-items:center;min-height:44px;padding:.6rem 2.2rem;line-height:1.2;background:var(--nachtkirsche);color:#fff;border:1px solid transparent;font-size:.74rem;font-weight:400;letter-spacing:.26em;text-transform:uppercase;text-decoration:none;transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.btn:hover{background:var(--nachtkirsche-hell);color:#fff}
/* 0,5px ergibt auf skalierten und hochauflösenden Displays genau einen Gerätepixel */
.btn.btn-hell{background:linear-gradient(var(--creme),var(--creme)) no-repeat left/0 100%;border-width:.5px;border-color:rgba(246,239,233,.6);color:var(--creme);transition:background-size .55s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn.btn-hell:hover,.btn.btn-hell:focus-visible{background-color:transparent;background-size:100% 100%;border-color:var(--creme);color:var(--nachtkirsche)}
.btn.btn-rahmen{margin-top:1rem;background:linear-gradient(var(--nachtkirsche),var(--nachtkirsche)) no-repeat left/0 100%;border-width:.5px;border-color:var(--nachtkirsche);color:var(--nachtkirsche);transition:background-size .55s var(--ease),color .35s var(--ease)}
.btn.btn-rahmen:hover,.btn.btn-rahmen:focus-visible{background-color:transparent;background-size:100% 100%;color:#fff}

/* Hinweise */
.hinweis{max-width:760px;margin:clamp(48px,7vw,88px) auto 0;padding:1.8rem 0;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);text-align:center}
.hinweis.hinweis-zwischen{margin:clamp(56px,8vw,104px) auto 0}
.hinweis p{margin:0;font-weight:300;font-size:1.12rem;line-height:1.65}
.hinweis strong{font-weight:500}
.hinweis-text{display:block;text-wrap:balance}
.ladepunkte{display:inline-flex;gap:5px;margin-left:.6em;vertical-align:middle}
.ladepunkte span{width:5px;height:5px;border-radius:50%;background:var(--nachtkirsche);animation:ladepunkt 1.4s var(--ease) infinite}
.ladepunkte span:nth-child(2){animation-delay:.18s}
.ladepunkte span:nth-child(3){animation-delay:.36s}
@keyframes ladepunkt{0%,80%,100%{opacity:.25;transform:scale(.7)}40%{opacity:1;transform:scale(1)}}

/* Abschnitte */
section{padding:clamp(56px,8vw,104px) 0}
section.flaeche{background:var(--sand)}
section h2{margin:0 0 2rem;font-weight:300;font-size:clamp(1.8rem,2.6vw,2.3rem);line-height:1.2;letter-spacing:-.01em;color:var(--nachtkirsche)}
section p{max-width:68ch}
.ueber-uns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:center}
/* clip verhindert, dass das randlose Bildquadrat um die Scrollbar-Breite seitlich scrollbar wird */
#ueber-uns{overflow-x:clip}
.mosaik{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-right:calc(-1 * (max(0px,(100vw - 1080px) / 2) + var(--rand)))}
.mosaik img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:48px 72px}
.karte{border-top:1px solid rgba(28,11,18,.3);padding-top:1.4rem}
.karte h3{margin:0 0 .6rem;font-weight:500;font-size:1.18rem;line-height:1.3}
.karte p{margin:0 0 .8rem}
.download{display:inline-flex;align-items:center;gap:.75rem;min-height:44px;font-size:.8rem;letter-spacing:.02em;color:var(--nachtkirsche);text-decoration:none}
.download svg{flex:none;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.download circle{stroke-opacity:.35;transition:fill .3s var(--ease),stroke-opacity .3s var(--ease)}
.download .pfeil{transition:stroke .3s var(--ease),transform .3s var(--ease)}
.download:hover circle,.download:focus-visible circle{fill:var(--nachtkirsche);stroke-opacity:1}
.download:hover .pfeil,.download:focus-visible .pfeil{stroke:var(--creme);transform:translateY(1.5px)}

/* Fußzeile */
footer.site{background:var(--nachtkirsche);color:rgba(246,239,233,.85);padding:32px 0;font-size:.9rem;font-weight:200;letter-spacing:.05em}
footer.site .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;justify-content:space-between}
footer.site a{color:var(--creme);text-decoration:none}
footer.site a:hover{color:#fff;text-decoration:underline}
footer.site :focus-visible{outline-color:var(--creme)}
footer.site nav{display:flex;gap:28px}
footer.site nav a{display:inline-flex;align-items:center;min-height:44px}
.footer-copy{display:inline-flex;align-items:center;gap:.8em}
.footer-copy img{display:block;width:auto;height:22px;opacity:.6}

.nach-oben{position:fixed;right:20px;bottom:20px;z-index:20;display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--nachtkirsche);color:var(--creme);border:.5px solid rgba(246,239,233,.35);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s,background-color .25s var(--ease),color .25s var(--ease)}
.nach-oben.sichtbar{opacity:1;visibility:visible;transform:none}
.nach-oben:hover{background:var(--creme);color:var(--nachtkirsche)}
.nach-oben svg{fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}

/* Textseiten */
.text-seite{padding:clamp(48px,7vw,88px) 0}
.text-seite .wrap{max-width:820px}
.text-seite h1{margin:0 0 1.6rem;font-weight:300;font-size:clamp(2rem,3.4vw,2.6rem);line-height:1.15;letter-spacing:-.01em;color:var(--nachtkirsche)}
.text-seite h2{margin:2.4rem 0 .5rem;font-weight:500;font-size:1.2rem;line-height:1.35;color:var(--nachtkirsche)}
.text-seite p{margin:.6rem 0}
.text-seite p.zurueck{margin-top:3rem}

@media (max-width:820px){
  /* Gemeinsame Höhe für Foto und Kopfzeile, damit das Logo mittig im Foto steht */
  :root{--bildhoehe:max(310px,43vh);--bildhoehe:max(310px,43svh)}
  .hero{grid-template-columns:1fr;grid-template-rows:var(--bildhoehe) auto}
  .hero-bildfeld{margin:0 0 -24px}
  .hero-bildfeld::before{background:linear-gradient(0deg,rgba(15,4,8,.62) 0,rgba(15,4,8,.48) 24px,rgba(15,4,8,.22) 80px,transparent 200px)}
  .hero-text{padding:36px 24px 40px;clip-path:polygon(0 0,calc(50% - 16px) 0,50% 16px,calc(50% + 16px) 0,100% 0,100% 100%,0 100%)}
  .hero-ort{margin-bottom:1.1rem;font-size:.58rem;letter-spacing:.32em}
  .hero h1::after{height:36px;margin-top:1.4rem}
  .hero p.lead{margin:1.4rem auto 1.8rem}
  .hero-tel{margin-top:.8rem}
  .hero-social{margin-top:0}
  header.site.ueber-hero{height:var(--bildhoehe);pointer-events:none}
  header.site.ueber-hero a{pointer-events:auto}
  header.site.ueber-hero .wrap{justify-content:center}
  header.site.ueber-hero .wrap>a:first-child{padding:44px 28px;background:radial-gradient(closest-side,rgba(255,255,255,.62),rgba(255,255,255,.3) 55%,transparent)}
  header.site.ueber-hero img{width:clamp(210px,56vw,280px);max-width:none;filter:drop-shadow(0 0 10px rgba(255,255,255,.75))}
  .logo-zusatz{font-size:.62rem;letter-spacing:.24em}
  .ueber-uns{grid-template-columns:1fr}
  .mosaik{margin-inline:calc(-1 * var(--rand))}
}

@media (max-width:600px){
  :root{--kopfhoehe:80px;--rand:20px}
  body{font-size:16px}
  .hero h1{font-size:2.05rem}
  .hero p.lead{font-size:.98rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}