:root{
  --coal:#080808;
  --coal-soft:#111111;
  --smoke:#f7f2ee;
  --smoke-soft:#e7ddd4;
  --ruby:#91171b;
  --ruby-strong:#6f1013;
  --line:rgba(255,255,255,.18);
  --glass:rgba(8,8,8,.44);
  --glass-soft:rgba(20,20,20,.38);
  --text:#f8f3ef;
  --muted:rgba(248,243,239,.8);
  --radius:24px;
  --shadow:0 24px 60px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(60rem 38rem at 10% -12%, rgba(145,23,27,.24) 0%, transparent 70%),
    radial-gradient(56rem 34rem at 92% -18%, rgba(145,23,27,.18) 0%, transparent 72%),
    linear-gradient(180deg, var(--coal) 0%, #0d0d0e 100%);
  font-family:"Manrope", "Segoe UI", sans-serif;
  line-height:1.55;
}

a{color:inherit;text-decoration:none}
.container{width:min(1140px, 92vw);margin:0 auto}

.hero{
  position:relative;
  min-height:clamp(560px, 72svh, 700px);
  display:flex;
  align-items:stretch;
}

.heroBackground{
  position:absolute;
  inset:0;
  overflow:hidden;
}

.bgSlide{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  filter:saturate(1.08) brightness(1.14) contrast(1.04);
  opacity:0;
  transform:scale(1.04);
  transition:opacity 2.2s ease-in-out, transform 9.5s ease-out;
  will-change:opacity, transform;
}

.bgSlide.isVisible{
  opacity:1;
  transform:scale(1);
}

.heroOverlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,.22) 38%, rgba(0,0,0,.56)),
    linear-gradient(to right, rgba(0,0,0,.3), rgba(0,0,0,.1) 45%, rgba(0,0,0,.4));
}

.heroGlow{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 12%, rgba(145,23,27,.18), transparent 40%),
    radial-gradient(circle at 84% 20%, rgba(145,23,27,.14), transparent 45%);
}

.heroLayer{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  flex-direction:column;
  padding:14px 0 10px;
}

.glass{
  border:1px solid var(--line);
  background:linear-gradient(145deg, var(--glass), var(--glass-soft));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:var(--shadow);
}

.topbar{
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:10px 14px;
}

.brand{display:flex;align-items:center;gap:12px;min-width:0}
.logoShell{
  flex:0 0 auto;
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(255,255,255,.96);
  box-shadow:0 10px 22px rgba(0,0,0,.28);
}

.logoTop{width:66px;height:66px}
.logoShell img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.logoFallback{
  display:none;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
  font-family:"Roboto Slab", Georgia, serif;
  font-weight:800;
  font-size:20px;
  color:var(--smoke);
  letter-spacing:.06em;
}

.logoShell.logoMissing img{display:none}
.logoShell.logoMissing .logoFallback{display:flex}

.brandText{
  display:grid;
  line-height:1.05;
  row-gap:4px;
  min-width:0;
}

.brandText strong{
  font-family:"Roboto Slab", Georgia, serif;
  font-size:1.02rem;
  letter-spacing:.06em;
}

.brandText small{
  display:block;
  padding-top:1px;
  color:var(--muted);
  font-size:.82rem;
  letter-spacing:.04em;
}

.nav{
  display:flex;
  gap:16px;
  font-weight:700;
  color:var(--muted);
  font-size:.95rem;
}

.nav a{transition:color .2s ease}
.nav a:hover{color:#fff}

.heroInner{
  flex:1;
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:14px;
  align-items:stretch;
  padding:16px 0 0;
}

.heroCard{
  max-width:none;
  border-radius:30px;
  padding:28px;
  height:100%;
}

.ownerCard{
  border-radius:30px;
  padding:20px;
  display:grid;
  gap:10px;
  align-content:start;
  height:100%;
}

.ownerHeading{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
}

.ownerEyebrow{
  margin:0;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
  font-weight:800;
  color:rgba(255,255,255,.82);
}

.ownerCard h3{
  font-family:"Roboto Slab", Georgia, serif;
  font-size:1.35rem;
}

.ownerPhotoPlaceholder{
  margin-top:4px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.24);
  min-height:300px;
  overflow:hidden;
  background:rgba(0,0,0,.2);
}

.ownerPhotoPlaceholder img{
  width:100%;
  height:100%;
  min-height:300px;
  object-fit:cover;
  display:block;
  object-position:center 30%;
}

.eyebrow,
.sectionEyebrow{
  margin:0;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:12px;
  font-weight:800;
  color:rgba(255,255,255,.82);
}

h1,
h2,
h3{margin:0}

h1{
  margin-top:12px;
  font-family:"Roboto Slab", Georgia, serif;
  font-size:clamp(2rem, 5.2vw, 4rem);
  line-height:1.08;
  letter-spacing:.01em;
}

.lead{
  margin:16px 0 0;
  color:var(--muted);
  max-width:56ch;
  font-size:1.05rem;
}

.heroActions,
.ctaActions{
  margin-top:24px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.ctaIcons{
  gap:10px;
  align-items:flex-start;
}

.btnIcon{
  position:relative;
  width:100px;
  min-height:84px;
  padding:10px 10px 8px;
  border-radius:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
}

.btnIcon svg{
  width:30px;
  height:30px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.9;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.btnIcon.btnPrimary svg{
  fill:currentColor;
  stroke:rgba(18, 7, 7, .9);
  stroke-width:1.2;
}

.btnIconLabel{
  font-size:.75rem;
  font-weight:700;
  line-height:1;
  letter-spacing:.02em;
}

.srOnly{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}

.heroMeta{
  margin-top:20px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.heroMeta span{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.95);
  font-size:.86rem;
  font-weight:700;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  border-radius:999px;
  border:1px solid transparent;
  font-weight:800;
  transition:transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.btn:hover{transform:translateY(-2px)}

.btnPrimary{
  background:linear-gradient(135deg, var(--ruby), var(--ruby-strong));
  color:#fff;
  box-shadow:0 16px 34px rgba(145,23,27,.45);
}

.btnGhost{
  border-color:rgba(255,255,255,.38);
  background:rgba(255,255,255,.08);
  color:#fff;
}

main{position:relative;z-index:3}
.section{padding:52px 0}
#leistungen.section{padding-top:28px}
.sectionSoft{background:linear-gradient(180deg, rgba(145,23,27,.17), rgba(145,23,27,0))}

h2{
  margin-top:8px;
  font-family:"Roboto Slab", Georgia, serif;
  font-size:clamp(1.7rem, 3.6vw, 2.8rem);
}

.sectionHint{
  margin:12px 0 0;
  color:rgba(255,255,255,.72);
  font-size:.92rem;
}

.cards,
.steps{
  margin-top:24px;
  display:grid;
  gap:14px;
}

.reviewsGrid{
  margin-top:24px;
  display:grid;
  gap:14px;
}

.reviewCard{
  border-radius:20px;
  padding:18px;
}

.reviewHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.reviewAuthor{
  font-weight:800;
  font-size:.98rem;
}

.reviewStars{
  font-size:1rem;
  letter-spacing:.08em;
  color:#ffce58;
}

.reviewText{
  margin:10px 0 0;
  color:var(--muted);
}

.reviewMeta{
  margin-top:10px;
  font-size:.84rem;
  color:rgba(255,255,255,.7);
}

.instaGrid{
  margin-top:24px;
  display:grid;
  gap:12px;
}

.instaCard{
  position:relative;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.2);
  aspect-ratio:1 / 1;
}

.instaCard img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s ease;
}

.instaCard:hover img{transform:scale(1.05)}

.instaBadge{
  position:absolute;
  left:10px;
  bottom:10px;
  padding:6px 10px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(0,0,0,.42);
  backdrop-filter: blur(5px);
}

.sectionActions{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.card,
.step{
  border-radius:22px;
  padding:20px;
}

h3{
  font-family:"Roboto Slab", Georgia, serif;
  font-size:1.28rem;
}

.card p,
.step p,
.cta p{
  margin:10px 0 0;
  color:var(--muted);
}

.cta p{
  color:rgba(255,255,255,.9);
}

.step{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:12px;
  align-items:start;
}

.step span{
  font-family:"Roboto Slab", Georgia, serif;
  color:#fff;
  font-size:1.05rem;
  letter-spacing:.08em;
}

.cta{
  border-radius:28px;
  padding:26px;
  display:grid;
  gap:16px;
  align-items:center;
  border-color:rgba(177,28,34,.8);
  background:
    radial-gradient(52rem 24rem at 12% 10%, rgba(177,28,34,.28), transparent 70%),
    linear-gradient(145deg, rgba(110,13,20,.78), rgba(54,7,12,.84));
  box-shadow:0 22px 56px rgba(110,13,20,.38);
}

.contactFormWrap{
  margin-top:20px;
}

.contactForm{
  border-radius:24px;
  padding:24px;
  display:grid;
  gap:14px;
}

.contactForm h3{
  margin-top:2px;
}

.contactFormIntro{
  margin:0;
  color:var(--muted);
}

.formGrid{
  margin-top:4px;
  display:grid;
  gap:12px;
}

.field{
  display:grid;
  gap:7px;
}

.hpField{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}

.field span{
  font-size:.84rem;
  font-weight:800;
  letter-spacing:.01em;
  color:rgba(255,255,255,.88);
}

.contactForm input,
.contactForm select,
.contactForm textarea{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(7,7,7,.42);
  color:#fff;
  font:inherit;
  padding:11px 12px;
}

.contactForm textarea{
  min-height:140px;
  resize:vertical;
}

.contactForm input:focus,
.contactForm select:focus,
.contactForm textarea:focus{
  outline:none;
  border-color:rgba(177,28,34,.95);
  box-shadow:0 0 0 2px rgba(177,28,34,.2);
}

.contactForm .btn{
  justify-self:start;
}

.formNote{
  margin:0;
  font-size:.83rem;
  color:rgba(255,255,255,.75);
}

.formLegal a{
  color:#9fd8ff;
  text-decoration:underline;
  text-decoration-color:#9fd8ff;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  font-weight:700;
}

.formLegal a:hover{
  color:#d6efff;
}

.formLegal a:focus-visible{
  outline:2px solid #d6efff;
  outline-offset:2px;
}

.formStatus{
  padding:9px 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.2);
}

.formStatus.isSuccess{
  border-color:rgba(70,190,120,.55);
  background:rgba(28,102,57,.28);
  color:rgba(217,255,231,.95);
}

.formStatus.isError{
  border-color:rgba(230,78,78,.55);
  background:rgba(125,24,24,.3);
  color:rgba(255,220,220,.95);
}

.ablaufInline{
  margin-top:24px;
}

.ablaufInline .steps{
  margin-top:14px;
}

.footer{padding:34px 0 38px}
.footerRow{
  border-top:1px solid rgba(255,255,255,.18);
  padding-top:18px;
  color:rgba(255,255,255,.85);
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.footerMuted{opacity:.9}

.footerLinks{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.footerLinks a{
  color:#fff;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
}

.legalTopbar{
  padding:12px 16px;
}

.legalMain{
  padding-bottom:26px;
}

.legalSection{
  padding-top:6px;
}

.legalStack{
  display:grid;
  gap:14px;
}

.legalCard{
  border-radius:22px;
  padding:22px;
}

.legalText{
  margin:12px 0 0;
  color:var(--muted);
}

.legalText a{
  color:#ffd8b3;
  text-decoration:underline;
  text-underline-offset:2px;
}

.legalList{
  margin:10px 0 0;
  padding-left:20px;
  color:var(--muted);
}

@media (min-width: 900px){
  .heroInner{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr)}
  .reviewsGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .instaGrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .cta{grid-template-columns:1.2fr .8fr;padding:30px}
  .formGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fieldFull{grid-column:1 / -1}
}

@media (max-width: 780px){
  .hero{min-height:clamp(500px, 66svh, 620px)}
  .topbar{padding:10px 12px}
  .logoTop{width:56px;height:56px}
  .brandText strong{font-size:.92rem}
  .brandText small{font-size:.75rem}
  .nav{font-size:.85rem;gap:10px;flex-wrap:wrap;justify-content:flex-end}
  .heroInner{padding-top:12px}
  .heroCard{padding:22px;border-radius:24px}
  .ownerCard{border-radius:24px;padding:18px}
  .ownerPhotoPlaceholder{min-height:220px}
  .ownerPhotoPlaceholder img{min-height:220px}
  .ablaufInline{margin-top:18px}
  .section{padding:44px 0}
  #leistungen.section{padding-top:22px}
  .btnIcon{
    width:88px;
    min-height:78px;
  }
  .btnIcon svg{
    width:27px;
    height:27px;
  }
}

@media (max-width: 560px){
  .brandText small{display:none}
  .nav{display:none}
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}