::-moz-selection {color: #2C232E; background: #CEBFFF;}
::selection {color: #2C232E;background: #CEBFFF;}

:root{
  --brand:#2C232E;
  --bg:#ffffff;
  --ink:#2C232E;
  --soft:#faf7ff;
  --soft2:#f1eaff;
  --line:#e9e6ef;
  --muted:#4a4150;
  --radius:18px;
  --shadow:0 6px 20px rgba(44,35,46,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;line-height:1.6;font-size:18px}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1400px;margin:0 auto;padding:28px}

.mast{display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:18px 16px 8px;border-bottom:1px solid var(--line);background:var(--bg)}
.logo-wrap{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:14px;border:1px solid var(--line);
  box-shadow:0 2px 14px rgba(44,35,46,.05);background:#fff}
.logo-wrap img{height:38px;width:auto}

.nav{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line)}
.nav .inner{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px}
.nav a{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;margin:6px;border-radius:12px;color:var(--brand);border:1px solid transparent}
.nav a i{font-size:18px}.nav a .label{font-size:14px}
.nav a:hover{background:var(--soft);border-color:var(--line);text-decoration:none}
.nav .btn-emergency{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;border:1px solid #ffdee0;
  background:#ffeff0;color:#8a0f15;text-decoration:none;font-weight:700;}
.nav .btn-emergency i{font-size:18px;color:#8a0f15}
.nav .btn-emergency:hover{background:#ffe6e8;border-color:#ffc8cd}

.web3-ribbon{height:6px;background:linear-gradient(90deg,#2C232E 0%, #6e5b73 45%, #b3a6bf 100%);box-shadow:0 2px 16px rgba(44,35,46,.15) inset}

.hero--image{
  position:relative;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:220px 6vw 200px; 
  text-align:center;
  color:#fff;
  background:#111 no-repeat center/cover;
  background-image:
    url('assets/headers/hero.jpg');
  border-bottom:1px solid var(--line);
  will-change: background-position;
  background-position: center calc(50% + var(--scrollY, 0px)); 
}
.hero--image .inner{position:relative;z-index:2;max-width:1200px;margin:0 auto}
.hero--image::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(1200px 620px at 50% -260px, rgba(0,0,0,.22), transparent 60%),
    linear-gradient(180deg, rgba(10,10,10,.55), rgba(10,10,10,.35) 40%, rgba(10,10,10,.55));
}
.hero--image::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(1200px 900px at 50% 120%, rgba(255,255,255,.08), transparent 60%);
  mix-blend-mode: soft-light;
}
.hero--image h1{
  color:#fff; margin:0 0 14px; font-size:clamp(52px,7.6vw,104px);
  letter-spacing:-0.9px; line-height:1.04; text-shadow:0 2px 22px rgba(0,0,0,.28)
}
.hero--image p.lead{color:#f3f0f6; margin:0 auto 10px; max-width:960px; font-size:clamp(18px,2.2vw,22px)}
.hero--image .quick{margin-top:22px; margin-bottom:10px}
.hero--image .btn{
  background:#fff; color:#2C232E; border-color:#fff;
  padding:14px 24px; border-radius:999px; font-weight:800; letter-spacing:.1px;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  transform:translateY(0); transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease
}
.hero--image .btn:hover{opacity:.96; transform:translateY(-1.5px); box-shadow:0 16px 40px rgba(0,0,0,.32)}

.container > .hero--image{margin-top:-28px}

.container > .hero--image{margin-top:-28px}

.section{padding:28px 0;border-top:1px solid var(--line)}
.section:first-of-type{border-top:none}
.divider{height:1px;background:var(--line);margin:32px 0}
.outlined{border:1px solid rgba(44,35,46,.12); border-radius:18px; padding:18px; background:#fff; box-shadow:var(--shadow)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:32px 0}
.grid.grid-wide{grid-template-columns:repeat(5,1fr)}
@media (max-width: 1200px){ .grid.grid-wide{grid-template-columns:repeat(3,1fr)} }
@media (max-width: 860px){ .grid.grid-wide{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))} }
.card{display:flex;flex-direction:column;justify-content:flex-start;min-height:220px;background:#fff;border:1px solid rgba(44,35,46,.12);
  border-radius:var(--radius);padding:22px;text-align:center;box-shadow:var(--shadow);transition:transform .15s, box-shadow .15s}
.card:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(44,35,46,.10)}
.card i{font-size:28px;color:var(--brand)}
.card h2{text-transform:lowercase;margin:10px 0 6px;font-size:21px;color:var(--brand)}
.card p{margin:0;color:var(--muted)}

.pill-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; margin:26px 0;}
.pill{background:#fff; border:1px solid rgba(44,35,46,.10); border-radius:22px; padding:22px; text-align:center;
  box-shadow:0 8px 24px rgba(44,35,46,.06); transition:transform .15s ease, box-shadow .15s ease;}
.pill:hover{ transform:translateY(-2px); box-shadow:0 14px 36px rgba(44,35,46,.10); }
.pill .icon{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px;
  border:1px solid rgba(44,35,46,.12); background:#fff; box-shadow:0 4px 12px rgba(44,35,46,.06); margin-bottom:10px;}
.pill .icon i{font-size:20px; color:var(--brand)}
.pill h3{margin:0 0 6px 0; font-size:22px; color:var(--ink); font-weight:800; text-transform:lowercase}
.pill p{margin:0 auto; max-width:30ch; color:var(--muted)}

.accent-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.accent{background:#fff;border:1px solid rgba(44,35,46,.12);border-radius:16px;padding:16px;box-shadow:0 8px 24px rgba(44,35,46,.06);position:relative;overflow:hidden}
.accent::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;border-radius:16px 0 0 16px;background:linear-gradient(180deg,#7a6a80,#c7bdd1)}
.section-accent{margin:26px 0 0;background:linear-gradient(180deg,#f7f4ff, #ffffff);border:1px solid var(--line);border-radius:26px;padding:26px;box-shadow:0 10px 30px rgba(44,35,46,.06)}

.faq{display:grid;gap:10px;max-width:820px}
.faq details{border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow);padding:10px 12px}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{transition:transform .18s ease;color:var(--brand)}
.faq details[open] summary i{transform:rotate(90deg)}
.faq details p{margin:8px 2px 4px 28px;color:var(--muted)}

.form{display:grid;gap:12px;max-width:620px}
.form label{font-weight:600}
.form input,.form textarea,.form select{width:100%;padding:14px;background:#fff;border:1px solid var(--line);border-radius:12px;color:var(--ink)}
.form input:focus,.form textarea:focus{outline:2px solid transparent;border-color:var(--brand);box-shadow:0 0 0 3px rgba(44,35,46,.12)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .error{color:#b00020;font-size:13px;display:none}
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:50}
.modal.is-open{display:flex}
.modal .backdrop{position:absolute; inset:0; background:rgba(0,0,0,.35)}
.modal .panel{position:relative; width:min(720px,92vw); max-height:90vh; overflow:auto; background:#fff; border-radius:18px;
  box-shadow:0 20px 60px rgba(44,35,46,.25); padding:22px; border:1px solid var(--line); animation:modalIn .22s ease both}
.modal.closing .panel{animation:modalOut .16s ease both}
@keyframes modalIn { from { opacity:0; transform:translateY(10px) scale(.975);} to { opacity:1; transform:translateY(0) scale(1);} }
@keyframes modalOut{ from { opacity:1; transform:translateY(0) scale(1);} to { opacity:0; transform:translateY(10px) scale(.975);} }
.modal .header{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.modal .header h2{margin:0; font-size:clamp(22px,3.2vw,28px); color:var(--brand); text-transform:lowercase}
.modal .close{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; border:1px solid var(--line); background:#fff; cursor:pointer}
.modal .close i{font-size:18px; color:var(--brand)}
.modal .body{padding-top:8px}
body.modal-open{overflow:hidden}

.float-cta{position:fixed;right:14px;bottom:18vh;z-index:40}
.float-cta .bubble{display:inline-flex;align-items:center;gap:8px;padding:14px;border-radius:999px;background:var(--brand);color:#fff;
  box-shadow:0 10px 28px rgba(44,35,46,.22);cursor:pointer}
.float-cta .bubble span{display:none}
.float-cta .bubble i{font-size:20px}
.float-cta .drawer{position:absolute;right:0;bottom:56px;width:320px;max-width:90vw;transform:translateX(10px);opacity:0;pointer-events:none;
  transition:.18s ease; background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 36px rgba(44,35,46,.15);padding:12px;}
.float-cta:hover .drawer{transform:translateX(0);opacity:1;pointer-events:auto}

.footer{border-top:1px solid var(--line); background:#fff}
.footer .container{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
.footer .footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:6px 0 10px}
@media (max-width: 900px){ .footer .footer-cols{grid-template-columns:1fr;gap:10px} }
.footer h4{margin:0 0 8px 0;color:var(--brand);text-transform:lowercase}
.footer p{margin:0 0 6px 0}
.footer .footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px}
.footer .footer-bottom .footer-nav a{padding:6px 8px}
.footer .iconline{display:flex; align-items:center; gap:8px}
.footer .iconline i{color:var(--brand)}

@media (max-width:720px){
  .nav a .label{display:none}
  .form .row{grid-template-columns:1fr}
  .container{padding:20px}
}

.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin:28px 0}
.feature-card{
  --accent1:#6e5b73; --accent2:#b3a6bf;
  position:relative; padding:22px; border:1px solid rgba(44,35,46,.10); border-radius:20px; background:#fff;
  box-shadow:0 10px 28px rgba(44,35,46,.06); transition:.18s ease; text-align:left;
}
.feature-card:hover{transform:translateY(-2px); box-shadow:0 18px 40px rgba(44,35,46,.10)}
.feature-card::after{content:""; position:absolute; left:14px; right:14px; top:-1px; height:6px; border-radius:8px;
  background:linear-gradient(90deg,var(--accent1),var(--accent2)); box-shadow:0 4px 12px rgba(44,35,46,.10)}
.feature-card .ic{display:inline-flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:14px;
  border:1px solid var(--line); background:#fff; box-shadow:0 6px 16px rgba(44,35,46,.08); margin-bottom:10px}
.feature-card .ic i{font-size:22px; color:var(--brand)}
.feature-card h3{margin:0 0 6px 0; font-size:22px; color:var(--ink); text-transform:lowercase}
.feature-card p{margin:0; color:var(--muted)}
.feature-card small{display:block; margin-top:8px; color:#6b6470}

.feature-card.is-web{ --accent1:#6e5b73; --accent2:#b3a6bf; }
.feature-card.is-it{ --accent1:#5b6e73; --accent2:#9ec1b5; }
.feature-card.is-hosting{ --accent1:#736e5b; --accent2:#cabb9a; }

.process{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin:28px 0}
.step-card{
  position:relative; padding:22px; border:1px solid rgba(44,35,46,.10); border-radius:20px; background:#fff;
  box-shadow:0 10px 28px rgba(44,35,46,.06); transition:.18s ease; text-align:left
}
.step-card:hover{transform:translateY(-2px); box-shadow:0 18px 40px rgba(44,35,46,.10)}
.step-card::after{content:""; position:absolute; left:14px; right:14px; top:-1px; height:6px; border-radius:8px;
  background:linear-gradient(90deg,var(--accent1,#6e5b73),var(--accent2,#b3a6bf)); box-shadow:0 4px 12px rgba(44,35,46,.10)}
.step-card .badge{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px;
  border:1px solid var(--line); background:#fff; box-shadow:0 6px 16px rgba(44,35,46,.08); font-weight:800; }
.step-card h3{margin:10px 0 6px 0; font-size:22px; color:var(--ink); text-transform:lowercase}
.step-card p{margin:0; color:var(--muted)}
.step-card.is-1{ --accent1:#6e5b73; --accent2:#b3a6bf; }
.step-card.is-2{ --accent1:#5b6e73; --accent2:#9ec1b5; }
.step-card.is-3{ --accent1:#736e5b; --accent2:#cabb9a; }

.section{padding:40px 0}
.section.section-spacious{padding:56px 0}
.section .kicker{display:inline-block; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#6b6470; margin-bottom:8px}
.section .hi{margin:0 0 8px 0; font-size:28px; color:var(--brand)}
.section .lead{margin:0 0 10px 0; color:#5a5360}

.block-sep{height:1px; background:linear-gradient(90deg, transparent, var(--line), transparent); margin:18px 0}

.hero--image .btn{
  background:#fff; color:#2C232E; border-color:#fff;
  padding:14px 22px; border-radius:999px; font-weight:700;
  box-shadow:0 10px 26px rgba(0,0,0,.25);
  transform:translateY(0); transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease
}
.hero--image .btn:hover{opacity:.96; transform:translateY(-1px); box-shadow:0 14px 36px rgba(0,0,0,.28)}
.hero--image .quick{margin-top:22px; margin-bottom:8px}
.hero--image .inner > .lead{margin-bottom:6px}

a.feature-card{display:block; color:inherit; text-decoration:none}
a.feature-card:hover{text-decoration:none}
a.feature-card .ic i{pointer-events:none}

.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin:32px 0}
.service-card{
  --accent1:#6e5b73; --accent2:#b3a6bf;
  position:relative; padding:20px; border:1px solid rgba(44,35,46,.10); border-radius:18px; background:#fff;
  box-shadow:0 10px 26px rgba(44,35,46,.06); transition:.18s ease; text-align:center
}
.service-card:hover{transform:translateY(-2px); box-shadow:0 18px 40px rgba(44,35,46,.10)}
.service-card::after{content:""; position:absolute; left:12px; right:12px; top:-1px; height:6px; border-radius:8px;
  background:linear-gradient(90deg,var(--accent1),var(--accent2)); box-shadow:0 4px 12px rgba(44,35,46,.10)}
.service-card i{font-size:28px; color:var(--brand)}
.service-card h2{margin:10px 0 6px; font-size:20px; color:var(--brand); text-transform:lowercase}
.service-card p{margin:0; color:var(--muted)}
.service-card.is-informatik{ --accent1:#5b6e73; --accent2:#9ec1b5 }
.service-card.is-web{ --accent1:#6e5b73; --accent2:#b3a6bf }
.service-card.is-hosting{ --accent1:#736e5b; --accent2:#cabb9a }
.service-card.is-druck{ --accent1:#6e5b5b; --accent2:#caa6a6 }
.service-card.is-custom{ --accent1:#5b5f6e; --accent2:#a6b0ca }
a.service-card{display:block; color:inherit; text-decoration:none}
a.service-card:hover{text-decoration:none}

.branchen-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:22px 0}
.branche-card{
  --accent1:#6e5b73; --accent2:#b3a6bf;
  position:relative; padding:18px; border:1px solid rgba(44,35,46,.10); border-radius:18px; background:#fff;
  box-shadow:0 8px 24px rgba(44,35,46,.06); transition:.18s ease; text-align:left
}
.branche-card::after{content:""; position:absolute; left:12px; right:12px; top:-1px; height:6px; border-radius:8px;
  background:linear-gradient(90deg,var(--accent1),var(--accent2)); box-shadow:0 4px 12px rgba(44,35,46,.10)}
.branche-card h3{margin:4px 0 4px; font-size:20px; color:var(--ink)}
.branche-card p{margin:0; color:var(--muted)}
.branche-card small{display:block; margin-top:6px; color:#6b6470}
.branche-card.is-kmu{ --accent1:#5b6e73; --accent2:#9ec1b5 }
.branche-card.is-service{ --accent1:#6e5b73; --accent2:#b3a6bf }
.branche-card.is-handel{ --accent1:#736e5b; --accent2:#cabb9a }
.branche-card.is-verein{ --accent1:#5b5f6e; --accent2:#a6b0ca }

.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 20px; border-radius:999px; border:1px solid rgba(44,35,46,.08);
  background:#fff; color:#2C232E; font-weight:700; text-decoration:none;
  box-shadow:0 10px 26px rgba(44,35,46,.12); transition:transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}
.btn i{font-size:18px}
.btn:hover{opacity:.96; transform:translateY(-1px); box-shadow:0 16px 40px rgba(44,35,46,.16); text-decoration:none}
.btn:active{transform:translateY(0); box-shadow:0 8px 20px rgba(44,35,46,.12)}
.btn--primary{ background:linear-gradient(90deg,#2C232E,#6e5b73); color:#fff; border-color:transparent }
.btn--primary:hover{ opacity:.98; box-shadow:0 18px 42px rgba(44,35,46,.24) }
.btn--ghost{ background:transparent; border-color:var(--line); color:var(--brand); box-shadow:none }
.btn--ghost:hover{ background:#fff; box-shadow:0 14px 30px rgba(44,35,46,.10) }

.hero--dyn{
  position:relative;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:240px 6vw 210px;
  text-align:center;
  color:#fff;
  background:#0f0f12 no-repeat center/cover;
  background-image:
    url('assets/headers/hero.jpg');
  border-bottom:1px solid var(--line);
  will-change:background-position;
  background-position:center calc(50% + var(--scrollY, 0px));
}
.hero--dyn .inner{position:relative;z-index:2;max-width:1200px;margin:0 auto}

.hero--dyn::before{
  content:""; position:absolute; inset:-2px; z-index:1;
  background:
    radial-gradient(1200px 700px at 70% -200px, rgba(179,166,191,.25), transparent 60%),
    radial-gradient(900px 500px at 20% 10%, rgba(110,91,115,.18), transparent 55%),
    linear-gradient(180deg, rgba(10,10,12,.60), rgba(10,10,12,.38) 40%, rgba(10,10,12,.60));
  animation:heroGlow 9s ease-in-out infinite alternate;
}
.hero--dyn::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(1200px 900px at 50% 120%, rgba(255,255,255,.06), transparent 60%);
}
@keyframes heroGlow{
  0% { filter: hue-rotate(0deg) brightness(1); }
  100%{ filter: hue-rotate(10deg) brightness(1.02); }
}
.hero--dyn h1{
  margin:0 0 16px; font-size:clamp(56px,7.8vw,108px); letter-spacing:-1px; line-height:1.03; color:#fff;
  text-shadow:0 2px 22px rgba(0,0,0,.30);
}
.hero--dyn p.lead{ color:#f2eff6; margin:0 auto 16px; max-width:980px; font-size:clamp(18px,2.4vw,23px) }
.hero--dyn .quick{margin-top:20px; margin-bottom:12px}
.hero--dyn .quick .tag{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.22); color:#fff }
.hero--dyn .quick .tag i{ color:#fff }

.container > .hero--dyn{ margin-top:-28px }

.prices{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:22px; margin:26px 0 }
.price{
  --accent1:#6e5b73; --accent2:#b3a6bf;
  position:relative; background:#fff; border:1px solid rgba(44,35,46,.12); border-radius:20px;
  padding:18px 18px 20px; box-shadow:0 10px 28px rgba(44,35,46,.06); text-align:left; transition:.18s ease;
}
.price:hover{ transform:translateY(-2px); box-shadow:0 18px 42px rgba(44,35,46,.10) }
.price::after{ content:""; position:absolute; left:14px; right:14px; top:-1px; height:6px; border-radius:8px;
  background:linear-gradient(90deg,var(--accent1),var(--accent2)); box-shadow:0 4px 12px rgba(44,35,46,.10) }
.price .head{ display:inline-flex; align-items:center; gap:8px; font-weight:800; text-transform:lowercase; color:var(--brand) }
.price .thinline{ height:1px; background:var(--line); margin:12px 0 }
.price .bullets{ list-style:none; margin:0 0 14px 0; padding:0 }
.price .bullets li{ padding-left:0; margin:6px 0; color:var(--muted) }
.price .bullets li::before{ content:"• "; color:var(--brand); font-weight:700; margin-right:4px }
.price .cta{ display:flex; justify-content:flex-end }
.price .cta .btn{ padding:12px 18px }
.price-basic{ --accent1:#6e5b73; --accent2:#b3a6bf }
.price-pro{ --accent1:#5b6e73; --accent2:#9ec1b5 }
.price-premium{ --accent1:#736e5b; --accent2:#cabb9a }

.pricing{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin:28px 0}
.tier{
  --accent1:#6e5b73; --accent2:#b3a6bf;
  position:relative;background:#fff;border:1px solid rgba(44,35,46,.12);border-radius:20px;
  box-shadow:0 10px 28px rgba(44,35,46,.06);padding:20px;transition:.18s ease;
}
.tier:hover{transform:translateY(-2px);box-shadow:0 18px 42px rgba(44,35,46,.10)}
.tier::after{content:"";position:absolute;left:14px;right:14px;top:-1px;height:6px;border-radius:8px;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));box-shadow:0 4px 12px rgba(44,35,46,.10)}
.tier .badge{display:inline-flex;align-items:center;gap:8px;font-weight:800;text-transform:lowercase;color:var(--brand)}
.tier .price{font-size:28px;font-weight:800;margin:6px 0;color:var(--ink)}
.tier .hint{color:#6b6470;font-size:14px;margin-bottom:10px}
.tier ul{list-style:none;margin:12px 0 16px 0;padding:0}
.tier ul li{margin:6px 0;padding-left:0;color:var(--muted);display:flex;gap:8px;align-items:flex-start}
.tier ul li i{color:var(--brand);font-size:18px;margin-top:2px}
.tier .cta{display:flex;justify-content:flex-end}
.tier-basic{--accent1:#6e5b73;--accent2:#b3a6bf}
.tier-pro{--accent1:#5b6e73;--accent2:#9ec1b5}
.tier-premium{--accent1:#736e5b;--accent2:#cabb9a}
.tier.is-rec::before{
  content:"empfohlen";position:absolute;right:18px;top:12px;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));color:#fff;
  padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.02em;box-shadow:0 8px 22px rgba(44,35,46,.12)
}

.page .section{padding:40px 0}
.page .section .lead{color:#5a5360;margin-top:4px}
.page .bullets{list-style:none;margin:8px 0 0 0;padding:0}
.page .bullets li{margin:6px 0;color:var(--muted)}

.section .kicker + .lead{margin-top:2px}
.section .kicker + .lead + .bullets{margin-top:8px}
.section .kicker{text-transform:uppercase; letter-spacing:.08em; color:#6b6470}

.intro-highlight{
  position:relative; border:1px solid var(--line); border-radius:22px; background:#fff;
  box-shadow:0 12px 34px rgba(44,35,46,.08); padding:22px; overflow:hidden;
}
.intro-highlight::after{
  content:""; position:absolute; left:14px; right:14px; top:-1px; height:6px; border-radius:8px;
  background:linear-gradient(90deg,#6e5b73,#b3a6bf);
}
.intro-chips{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.intro-chips .chip{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:999px;
  border:1px solid var(--line); background:#fff; box-shadow:0 6px 18px rgba(44,35,46,.06); font-size:14px; color:var(--brand)}
.intro-chips .chip i{font-size:16px; color:var(--brand)}

.tier .price{ display:none } 

.toast-wrap{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:10px;align-items:center}
.toast{min-width:280px;max-width:92vw;padding:12px 16px;border-radius:12px;border:1px solid var(--line);box-shadow:0 14px 36px rgba(44,35,46,.25);
  background:#fff;color:var(--ink);display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(-8px);animation:toastIn .18s ease forwards}
.toast.success{border-color:#cdebd1;background:#f1fbf3}
.toast.success i{color:#0a7a1c}
.toast.error{border-color:#ffd2d6;background:#fff2f3}
.toast.error i{color:#b3121d}
@keyframes toastIn{to{opacity:1;transform:translateY(0)}}

#toTop{position:fixed;right:16px;bottom:18px;z-index:45;display:none}
#toTop .btn{padding:10px 14px}

.about-hero{padding:120px 6vw 60px; text-align:center}
.about-wrap{display:grid; grid-template-columns: 1.2fr .8fr; gap:32px}
@media (max-width: 900px){ .about-wrap{grid-template-columns:1fr; } }
.profile{
  position:relative; border:1px solid var(--line); border-radius:22px; background:#fff;
  box-shadow:0 12px 34px rgba(44,35,46,.08); padding:22px; display:grid; grid-template-columns:140px 1fr; gap:18px; align-items:center;
}
.profile .avatar{width:140px; height:140px; border-radius:18px; overflow:hidden; border:1px solid var(--line); background:#faf9fb}
.profile .avatar img{width:100%; height:100%; object-fit:cover; display:block}
.profile h2{margin:0 0 4px 0; font-size:26px; color:var(--brand)}
.profile .meta{color:#6b6470}
.badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.badge{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; border:1px solid var(--line); background:#fff; box-shadow:0 6px 18px rgba(44,35,46,.06)}
.badge i{color:var(--brand)}

.values{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:18px}
.value{position:relative; padding:18px; border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 10px 28px rgba(44,35,46,.06)}
.value h3{margin:0 0 6px 0; font-size:18px; color:var(--ink)}

.timeline{position:relative; margin:10px 0 0 0}
.timeline::before{content:""; position:absolute; left:10px; top:0; bottom:0; width:2px; background:linear-gradient(#ddd, #eee)}
.step{position:relative; padding-left:32px; margin:14px 0}
.step::before{content:""; position:absolute; left:4px; top:4px; width:14px; height:14px; border-radius:50%; background:linear-gradient(90deg,#6e5b73,#b3a6bf); box-shadow:0 4px 10px rgba(44,35,46,.20)}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:16px}
.kpi{border:1px solid var(--line); border-radius:18px; background:#fff; box-shadow:0 10px 26px rgba(44,35,46,.06); padding:16px; text-align:center}
.kpi b{font-size:26px; display:block; color:var(--brand)}

:root{
  --glow1: #6e5b73;
  --glow2: #b3a6bf;
  --glow3: #9ec1b5;
}
.values .value{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(44,35,46,.10);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.values .value::before{
  content:""; position:absolute; inset:-2px; border-radius:20px;
  background: linear-gradient(90deg,var(--glow1),var(--glow2),var(--glow3));
  opacity:.25; filter: blur(18px);
  z-index:0;
}
.values .value::after{
  content:""; position:absolute; inset:1px; border-radius:18px;
  background:radial-gradient(1200px 300px at 50% -140px, rgba(255,255,255,.85), transparent 60%),
             linear-gradient(180deg, #fff, rgba(255,255,255,.92));
  z-index:1;
}
.values .value > *{ position: relative; z-index:2 }
.values .value h3{
  display:flex; align-items:center; gap:8px;
  background: linear-gradient(90deg,var(--glow1),var(--glow2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  font-weight:800; letter-spacing:.2px;
}
.values .value h3 i{ font-size:18px }
.values .value:hover{ transform: translateY(-2px); transition: transform .18s ease }
.values .value:hover::before{ opacity:.35; filter: blur(24px) }

.values .value .sheen{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
  transform: translateX(-120%); animation: sheenMove 5s ease-in-out infinite;
}
@keyframes sheenMove{ 0%{transform:translateX(-120%)} 60%{transform:translateX(120%)} 100%{transform:translateX(120%)} }

.kpis .kpi{
  position:relative; overflow:hidden; isolation:isolate;
  background: rgba(255,255,255,.96);
}
.kpis .kpi::before{
  content:""; position:absolute; left:12px; right:12px; top:-1px; height:6px; border-radius:8px;
  background: linear-gradient(90deg,var(--glow1),var(--glow2));
  box-shadow: 0 6px 14px rgba(44,35,46,.12);
  z-index:1;
}
.kpis .kpi b{
  background: linear-gradient(90deg,var(--glow1),var(--glow2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 1px 18px rgba(179,166,191,.25);
  letter-spacing:.4px;
}
.kpis .kpi small{ display:block; margin-top:4px; color:#6b6470 }
.kpis .kpi:hover{ transform: translateY(-1px); box-shadow:0 16px 36px rgba(44,35,46,.10); transition:.18s ease }

.subfooter{
  margin-top:22px;
  padding:12px 0 16px;
  position:relative; text-align:center; color:#2C232E; font-size:14px;
  background:transparent;
}
.subfooter::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(44,35,46,.18), transparent);
}
.subfooter .copy{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px;
  background:#fff; border:1px solid var(--line); box-shadow:0 8px 20px rgba(44,35,46,.08);
  color:#2C232E;
}
.subfooter .copy i{ color: var(--brand); }

.modal{
  position:fixed; inset:0; display:none; place-items:center;
  background: rgba(20,16,22,.05); backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index:70; opacity:0;
}
.modal.is-open{ display:grid; animation: modalBackIn .22s ease forwards }
@keyframes modalBackIn{ to{ opacity:1 } }

.modal.animate-out{ animation: modalBackOut .18s ease forwards }
@keyframes modalBackOut{ to{ opacity:0 } }

.modal__dialog{
  width:min(680px, 92vw); max-height:86vh; overflow:auto;
  background:#fff; border:1px solid var(--line); border-radius:22px;
  box-shadow: 0 22px 70px rgba(44,35,46,.18), 0 10px 28px rgba(44,35,46,.12);
  transform: translateY(12px) scale(.98); opacity:0;
  transition: transform .22s cubic-bezier(.22,.61,.36,1), opacity .22s ease, box-shadow .22s ease;
}
.modal.is-open .modal__dialog{
  transform: translateY(0) scale(1); opacity:1;
}
.modal.animate-out .modal__dialog{
  transform: translateY(8px) scale(.98); opacity:0;
}

.modal__dialog .head{
  display:flex; align-items:center; gap:10px; padding:18px 18px 6px 18px;
}
.modal__dialog .head .chip{
  width:44px; height:44px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); background:#fff; box-shadow:0 10px 24px rgba(44,35,46,.08);
}
.modal__dialog .head h3{ margin:0; font-size:22px }

.modal__dialog .body{ padding:6px 18px 18px 18px }
.modal__dialog .foot{ padding:0 18px 18px 18px; display:flex; gap:10px; justify-content:flex-end }

.modal__close{
  position:absolute; top:12px; right:12px; width:40px; height:40px; border-radius:12px;
  border:1px solid var(--line); background:#fff; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(44,35,46,.10);
}
.modal__close:hover{ transform:translateY(-1px) }
.modal__close:focus{ outline:2px solid rgba(179,166,191,.6); outline-offset:2px }

.modal__dialog input, .modal__dialog textarea, .modal__dialog select{
  border-radius:12px; border:1px solid var(--line); padding:10px 12px; width:100%;
}
.modal__dialog input:focus, .modal__dialog textarea:focus, .modal__dialog select:focus{
  outline:none; border-color:#b3a6bf; box-shadow:0 0 0 4px rgba(179,166,191,.18);
}

@media (prefers-reduced-motion: reduce){
  .modal, .modal__dialog{ transition:none !important; animation:none !important }
}

#orderModal .modal__dialog{ width:min(760px, 94vw) }

.note{font-size:14px;color:#6b6470;margin-top:8px}

.avatar--deluxe{
  position:relative; width:220px; height:270px; border-radius:28px;
  background:#fff; border:1px solid var(--line);
  box-shadow:0 16px 40px rgba(44,35,46,.12);
  overflow:hidden;
}
.avatar--deluxe::before{
  content:""; position:absolute; inset:0; border-radius:28px;
  background: linear-gradient(180deg, rgba(110,91,115,.10), transparent 60%);
  pointer-events:none;
}
.avatar--deluxe img{
  width:100%; height:100%; object-fit:cover; border-radius:24px;
  transform: translateY(0);
}
@media (min-width: 900px){
  .avatar--deluxe{ width:240px; height:300px }
}

.modal { z-index: 10000; }
.modal .backdrop, .modal .overlay { z-index: 10000; }
.modal .panel, .modal .dialog { z-index: 10010; }

.toast, .toast-stack, .toaster, .toasts, .notify, .notification, .notifications, .snackbar, .snackbar-container,
.notyf, .notyf__toast, .iziToast, .iziToast-wrapper, .iziToast-wrapper *,
.swal2-container, .swal2-container *,
.alert.toast, .alert-notify, .error-toast, .error-popup, .message.toast,
[role="alert"], [aria-live="polite"], [aria-live="assertive"] {
  position: fixed !important;
  z-index: 2147483000 !important;
  pointer-events: auto;
}

html, body, .container, .page, .footer, header, main {
  transform: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  perspective: none !important;
  isolation: auto;
}

.form .error, .field-error, .error-banner {
  position: relative;
  z-index: 10020;
}

.toast-layer,
.kmg-toast {
  position: fixed;
  inset: auto auto 24px 50%;
  transform: translateX(-50%);
  z-index: 9999;
  pointer-events: none;
}
.kmg-toast {
  min-width: 280px;
  max-width: 520px;
  padding: 12px 16px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  background: #ffeef0;
  color: #7a1d26;
  font-weight: 600;
  display: flex;
  gap: 10px;
  align-items: center;
}
.kmg-toast--ok { background:#eefaf2; color:#155b37; }
.kmg-toast--warn { background:#fff7e6; color:#7a4a00; }
.kmg-toast i { font-size: 18px; }

:root{
  --z-backdrop:  1200;
  --z-modal:     1210;
  --z-toast:     2147483647; 
}
.modal .backdrop{ position:fixed; inset:0; z-index:var(--z-backdrop); }
.modal .panel{ position:fixed; z-index:var(--z-modal); }

.toast-layer,.kmg-toast{
  position: fixed !important;
  inset: 24px auto auto 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast) !important;
  pointer-events: none;
}
.kmg-toast{
  min-width: 280px; max-width: 520px;
  padding: 12px 16px; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  background: #ffeef0; color: #7a1d26; font-weight: 600;
  display: flex; gap: 10px; align-items: center;
  transition: opacity .3s ease, transform .3s ease;
}
.kmg-toast--ok{ background:#eefaf2; color:#155b37; }
.kmg-toast--warn{ background:#fff7e6; color:#7a4a00; }
.kmg-toast i{ font-size:18px; }

:root{ --z-backdrop:1200; --z-modal:1210; --z-toast:2147483647; }
.modal .backdrop{ position:fixed; inset:0; z-index:var(--z-backdrop); }
.modal .panel{ position:fixed; z-index:var(--z-modal); }
.toast-layer,.kmg-toast{ position:fixed !important; inset:24px auto auto 50%; transform:translateX(-50%); z-index:var(--z-toast) !important; pointer-events:none; }
.kmg-toast{ min-width:280px; max-width:520px; padding:12px 16px; border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.15); background:#ffeef0; color:#7a1d26; font-weight:600; display:flex; gap:10px; align-items:center; transition:opacity .3s ease, transform .3s ease; }
.kmg-toast--ok{ background:#eefaf2; color:#155b37; } .kmg-toast--warn{ background:#fff7e6; color:#7a4a00; } .kmg-toast i{ font-size:18px; }

.footer--simple{ background:#fff; color:var(--text, #2b2b2b); }
.footer--simple .footer__inner{ padding:32px 0 24px; }
.footer--simple .footer__accent{
  width:120px; height:6px; border-radius:6px;
  background: var(--brand-600,#4b3b6b);
  margin: 0 0 20px 28px; opacity:.25;
}
.footer--simple .footer__grid{
  display:grid; gap:28px;
  grid-template-columns: repeat(3, minmax(0,1fr));
  padding: 0 clamp(20px,0px);
}
@media (max-width: 960px){ .footer--simple .footer__grid{ grid-template-columns:1fr; } }

.fcard{
  background:#fff;
  border:1px solid rgba(15,23,42,.08);
  border-radius:18px;
  padding:20px 22px;
  box-shadow: 0 10px 30px rgba(17,24,39,.06);
}
.fcard__title{
  font-size:.82rem; letter-spacing:.12em; text-transform:uppercase;
  color: rgba(15,23,42,.65); margin:0 0 14px 0;
}
.fcard__list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.fcard__list i{ margin-right:10px; color:var(--brand-600,#4b3b6b); }
.fcard__list a{ color:inherit; text-decoration:none; border-bottom:1px dashed rgba(15,23,42,.15); }
.fcard__list a:hover{ color:var(--brand-700,#3b2c59); border-bottom-color:transparent; }

.fcard__social{ margin-top:14px; display:flex; gap:10px; }
.sbtn{
  width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  border:1px solid rgba(15,23,42,.12); background:#fff; color:var(--brand-700,#3b2c59);
  text-decoration:none; box-shadow:0 6px 16px rgba(17,24,39,.06);
}
.sbtn:hover{ transform:translateY(-1px); border-color:var(--brand-500,#6b59a3); }

.fcard__cta{ margin-top:16px; display:flex; gap:12px; flex-wrap:wrap; }
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px;
  border:1px solid rgba(15,23,42,.12); background:#fff; color:#2b2b2b; text-decoration:none;
  box-shadow:0 6px 16px rgba(17,24,39,.05);
}
.pill i{ color:var(--brand-700,#3b2c59); }
.pill--solid{
  background: linear-gradient(180deg, var(--brand-600,#4b3b6b), var(--brand-700,#3b2c59));
  color:#fff; border:none;
}
.pill--solid i{ color:#fff; }

.hours{
  border:1px dashed rgba(15,23,42,.18);
  border-radius:12px; padding:14px 16px; display:grid; gap:10px;
}
.hours div{ display:flex; justify-content:space-between; gap:14px; }
.hours span{ color:rgba(15,23,42,.70); }
.hours b{ color:#2b2b2b; font-weight:600; }

.navmini{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.navmini a{ display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:#2b2b2b; }
.navmini i{ color:var(--brand-600,#4b3b6b); }
.navmini a:hover{ color:var(--brand-700,#3b2c59); }

.footer--simple .footer__copy{
  display:flex; justify-content:center; margin:45px 0 0;
  padding: 12px clamp(16px,6vw,96px) 0;
  border-top:1px solid rgba(15,23,42,.06);
}
.copy-pill{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 18px; border-radius:999px; background:#fff;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 8px 24px rgba(17,24,39,.06);
  color:rgba(15,23,42,.75);
}
.copy-pill i{ color:var(--brand-600,#4b3b6b); }

.impressum-note{margin:18px 0 6px; opacity:.9;}
.impressum-note h3{font-size:.9rem; letter-spacing:.08em; text-transform:uppercase; opacity:.75; margin:0 0 8px;}
.impressum-note p{ line-height:1.55;}

.impressum-note, .imprint-note, .legal-note{
  position: relative;
  border:1px solid rgba(44,35,46,.18);
  border-left-width:4px;
  border-radius:14px;
  padding:16px 18px 16px 18px;
  background: linear-gradient(180deg, #ffffff, #fcfbff);
  box-shadow: 0 6px 22px rgba(44,35,46,.06);
  color: var(--ink, #2b2b2b);
  line-height: 1.55;
}
.impressum-note::before, .imprint-note::before, .legal-note::before{
  content: "\F431";
  font-family: "bootstrap-icons";
  position:absolute; left:-14px; top:-14px;
  width:36px; height:36px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  background:#efe9fb;
  color:#2C232E;
  border:1px solid rgba(44,35,46,.16);
  box-shadow:0 4px 14px rgba(44,35,46,.10);
}
.impressum-note h4, .imprint-note h4, .legal-note h4{
  margin:0 0 8px 0; font-size:16px; font-weight:800; text-transform:lowercase; color:#2C232E;
}
.impressum-note p:last-child, .imprint-note p:last-child, .legal-note p:last-child{ margin-bottom: 0; }
@media (max-width: 640px){
  .impressum-note, .imprint-note, .legal-note{ border-radius:12px; padding:14px 14px 14px 14px; }
}

.profile-social{display:flex;gap:10px;margin-top:8px}
.soc{
  width:42px;height:42px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(0,0,0,.08);
  background: #fff; color:#444; text-decoration:none;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
}