:root{
  --ink:#1B1B1B; --ink-soft:#5B5A56; --paper:#FBF4E8; --paper-2:#FFFFFF;
  --line:#E7DFCF; --yellow:#F6C445; --yellow-deep:#E0A916;
  --pink:#F7D7D4; --blue:#D9E6EF; --navy:#1B1B1B;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#F5F1E6; --ink-soft:#C9C3B4; --paper:#1A1712; --paper-2:#232019;
    --line:#3A3327; --yellow:#F6C445; --yellow-deep:#F8D062;
    --pink:#4A3230; --blue:#26313A; --navy:#F5F1E6;
  }
}
:root[data-theme="dark"]{
  --ink:#F5F1E6; --ink-soft:#C9C3B4; --paper:#1A1712; --paper-2:#232019;
  --line:#3A3327; --yellow:#F6C445; --yellow-deep:#F8D062;
  --pink:#4A3230; --blue:#26313A; --navy:#F5F1E6;
}
html{scroll-padding-top:env(safe-area-inset-top,0px);}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Nunito',system-ui,sans-serif; line-height:1.6;
  min-height:100%;
}
h1,h2,h3{font-family:'Baloo 2',sans-serif; font-weight:700; margin:0 0 .4em; letter-spacing:-.01em;}
p{color:var(--ink-soft); max-width:62ch;}
button{cursor:pointer; font-family:inherit;}
::selection{background:var(--yellow); color:var(--ink);}

/* nav */
.hamburger{
  position:fixed; top:calc(env(safe-area-inset-top,0px) + 20px); left:20px; z-index:60;
  width:48px; height:48px; border-radius:50%; border:2px solid var(--ink);
  background:var(--paper-2); display:flex; align-items:center; justify-content:center;
  gap:4px; flex-direction:column; transition:transform .25s ease;
}
.hamburger:hover{transform:scale(1.08);}
.hamburger span{width:18px; height:2.4px; border-radius:2px; background:var(--ink); transition:transform .3s, opacity .3s;}
.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.menu-panel{
  position:fixed; inset:0; z-index:55; background:var(--yellow); color:var(--ink);
  display:flex; align-items:center; justify-content:center;
  clip-path:circle(0% at 44px calc(env(safe-area-inset-top,0px) + 44px));
  transition:clip-path .55s cubic-bezier(.65,0,.35,1);
  pointer-events:none;
}
.menu-panel.open{clip-path:circle(150% at 44px calc(env(safe-area-inset-top,0px) + 44px)); pointer-events:auto;}
.menu-list{list-style:none; margin:0; padding:0; text-align:left;}
.menu-list li{margin:.25em 0;}
.menu-list button{
  background:none; border:none; color:var(--ink); font-family:'Baloo 2',sans-serif;
  font-size:clamp(30px,6.4vw,50px); font-weight:700; padding:.12em 0; opacity:.55;
  transition:opacity .25s, transform .25s; transform-origin:left center;
}
.menu-list button:hover{opacity:1; transform:scale(1.05);}
.menu-list button.active{opacity:1; text-decoration:underline; text-decoration-thickness:4px; text-underline-offset:6px;}

/* pages */
.page{
  display:none; min-height:100vh; padding:120px 8vw 100px;
  opacity:0; transform:translateY(14px);
}
.page.active{display:block; animation:reveal .6s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes reveal{to{opacity:1; transform:translateY(0);}}
.wrap{max-width:900px; margin:0 auto;}

/* profile section */
.profile{display:flex; align-items:center; gap:26px; margin-bottom:30px; flex-wrap:wrap;}
.profile-photo{
  position:relative; width:128px; height:128px; flex-shrink:0;
}
.profile-photo .blob{
  position:absolute; inset:-14px; background:var(--pink); border-radius:44% 56% 58% 42% / 48% 44% 56% 52%;
  z-index:0;
}
.profile-photo .pic{
  position:relative; z-index:1; width:100%; height:100%; border-radius:50%;
  border:3px solid var(--ink); background:var(--paper-2);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.profile-photo .pic img{width:100%; height:100%; object-fit:cover; object-position:center 25%; display:block;}
.profile-name{font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.6rem;}
.profile-tag{color:var(--ink-soft); margin:0;}

.badge{
  display:inline-block; background:var(--pink); color:var(--ink); font-weight:700;
  padding:.35em 1em; border-radius:999px; font-size:.85rem; margin-bottom:14px;
}
.hero-cta{
  margin-top:22px; display:inline-flex; align-items:center; gap:10px;
  background:var(--ink); color:var(--paper); border:none; border-radius:999px;
  padding:.85em 1.6em; font-size:1rem; font-weight:700; transition:transform .2s ease, box-shadow .2s;
}
.hero-cta.alt{display:flex; width:fit-content; margin-top:14px; background:var(--yellow); color:var(--ink); border:2px solid var(--ink); text-decoration:none;}
.hero-cta:hover{transform:scale(1.05); box-shadow:0 8px 24px rgba(0,0,0,.18);}

/* cards */
.grid{display:grid; gap:20px; margin-top:30px;}
.card{
  border:2px solid var(--ink); border-radius:20px; padding:24px; background:var(--paper-2);
  transition:transform .25s ease;
}
.card:hover{transform:translateY(-3px);}
.card.yellow{background:var(--yellow);}
.card.pink{background:var(--pink);}
.card.blue{background:var(--blue);}

/* preise */
.price-row{
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:2px dashed var(--line); padding:18px 0;
}
.price-group{margin:34px 0 0; font-size:1.2rem;}
.price-row small{display:block; color:var(--ink-soft); font-size:.8rem; font-weight:400;}
.price-row .amt{font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.3rem; color:var(--yellow-deep);}

/* ablauf steps */
.step{display:flex; gap:18px; padding:20px 0; border-bottom:2px dashed var(--line);}
.step .num{
  font-family:'Baloo 2',sans-serif; font-weight:800; font-size:1.2rem; color:var(--ink);
  background:var(--yellow); min-width:2.2em; height:2.2em; border-radius:50%;
  display:flex; align-items:center; justify-content:center; border:2px solid var(--ink);
}

/* floating contact button */
.fab{
  position:fixed; left:20px; bottom:calc(env(safe-area-inset-bottom,0px) + 20px); z-index:60;
  background:var(--yellow); color:var(--ink); border:2px solid var(--ink); border-radius:999px;
  padding:.9em 1.3em; display:flex; align-items:center; gap:8px; height:48px;
  font-weight:700; box-shadow:0 10px 26px rgba(0,0,0,.18);
  transition:transform .2s ease;
}
.fab:hover{transform:scale(1.07);}
.fab svg{width:18px; height:18px;}

/* modal */
.modal-bg{
  position:fixed; inset:0; background:rgba(20,16,10,.5); z-index:80;
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.modal-bg.open{opacity:1; pointer-events:auto;}
@media(min-width:640px){.modal-bg{align-items:center;}}
.modal{
  background:var(--paper); border-radius:24px 24px 0 0; padding:30px 26px 34px;
  width:100%; max-width:480px; max-height:88vh; overflow-y:auto;
  transform:translateY(30px); transition:transform .35s cubic-bezier(.2,.7,.3,1);
  border:2px solid var(--ink); position:relative;
}
.modal-bg.open .modal{transform:translateY(0);}
@media(min-width:640px){.modal{border-radius:24px;}}
.modal h3{margin-bottom:.2em;}
.field{margin:16px 0;}
.field label{display:block; font-size:.85rem; font-weight:700; color:var(--ink-soft); margin-bottom:6px;}
.field input, .field select, .field textarea{
  width:100%; padding:.7em .8em; border-radius:12px; border:2px solid var(--line);
  background:var(--paper-2); color:var(--ink); font-size:1rem; font-family:inherit; transition:border-color .2s;
}
.field textarea{resize:vertical; min-height:90px;}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--yellow-deep);}
.field-hint{font-size:.78rem; color:var(--ink-soft); margin-top:4px;}
.field-error{font-size:.8rem; color:#B23A3A; margin-top:6px; display:none;}
.field-error.show{display:block;}
.field input.invalid, .field select.invalid{border-color:#B23A3A;}
.phone-group{display:flex; gap:8px; flex-wrap:wrap;}
.phone-group select{flex:1 1 190px; min-width:150px;}
.phone-group input{flex:1 1 140px;}
.send-error{margin-top:16px; padding:14px 16px; border-radius:12px; background:#FBE3E1; border:2px solid #B23A3A; color:#5A1F1F; font-size:.9rem; line-height:1.5;}
.send-error[hidden]{display:none;}
.send-error a{color:inherit; font-weight:700;}
.modal-actions{display:flex; gap:10px; margin-top:22px;}
.btn-primary, .btn-ghost{
  border-radius:999px; padding:.8em 1.4em; font-weight:700; border:2px solid var(--ink);
  transition:transform .2s ease;
}
.btn-primary{background:var(--ink); color:var(--paper); flex:1; border-color:var(--ink);}
.btn-ghost{background:none; color:var(--ink-soft); border-color:var(--line);}
.btn-primary:hover, .btn-ghost:hover{transform:scale(1.05);}
.note{font-size:.8rem; color:var(--ink-soft); margin-top:14px;}
.close-x{position:absolute; top:16px; right:18px; background:none; border:none; font-size:1.3rem; color:var(--ink-soft); transition:transform .2s;}
.close-x:hover{transform:scale(1.15) rotate(90deg);}

/* footer legal */
footer{
  border-top:2px solid var(--line); padding:26px 8vw calc(26px + env(safe-area-inset-bottom,0px));
  display:flex; gap:18px; flex-wrap:wrap; align-items:center; justify-content:space-between;
}
.legal-links{display:flex; gap:22px; flex-wrap:wrap; font-size:.85rem; color:var(--ink-soft);}
.legal-links button{background:none; border:none; color:var(--ink-soft); text-decoration:underline; transition:transform .2s;}
.legal-links button:hover{transform:scale(1.06); color:var(--ink);}
.social-links{display:flex; gap:12px;}
.social-links a{
  width:48px; height:48px; border-radius:50%; border:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center; background:var(--paper-2);
  color:var(--ink); transition:transform .2s ease;
}
.social-links a:hover{transform:scale(1.1); background:var(--yellow);}
.social-links svg{width:22px; height:22px;}


@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}