/* Local redesign */
:root {
  --paper:#f8f7fd;
  --line:#dedbef;
  --ink:#17162b;
  --muted:#565369;
}
.demo-ribbon {
  margin:0;
  padding:6px var(--gutter);
  background:#211b53;
  color:#fff;
  font-size:.78rem;
  font-weight:700;
  text-align:center;
}
.hero-shell {
  overflow:clip;
  border-bottom:1px solid var(--line);
  background:radial-gradient(ellipse at 84% 42%, #ded7ff, transparent 52%), var(--paper);
}
.hero {
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,78px);
  padding-block:clamp(48px,7vw,100px);
}
.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:21px;
  font-size:.88rem;
  font-weight:750;
  color:#433899;
}
.eyebrow::before {
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--blau);
  box-shadow:0 0 0 4px #e6dfff;
}
.hero h1 {font-size:clamp(2.8rem,6.1vw,5.8rem);text-wrap:initial}
.hero-accent {display:block;color:var(--blau)}
.hero-accent .gradient-text {display:inline}
.hero-accent .gradient-text__inner,.hero-accent .gradient-text__content {display:inline}
.hero .lead {max-width:41ch}
.facts {gap:12px}
.facts li {border-top:1px solid #c5bedf}
.stack {
  isolation:isolate;
  border:1px solid #ccc3f4;
  border-radius:32px;
  background:linear-gradient(145deg,#f4efff,#e0d8fb);
  box-shadow:0 26px 80px -55px #3d2b90;
}
.stack::before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(145deg,#ffffff82,transparent 62%);
  pointer-events:none;
}
.stack-label {
  position:absolute;
  inset:auto 24px 16px auto;
  font-size:.78rem;
  font-weight:700;
  color:#423a6f;
}
.s1 {top:8%;right:7%}
.s2 {top:32%;left:7%}
.s3 {bottom:11%;right:7%}
.shot .frame {box-shadow:0 16px 26px -10px #20174b55}
.services {gap:16px}
.services article {
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--paper);
  padding:clamp(20px,2.5vw,34px);
}
.project {border-radius:22px}
.project-feature .project-copy {background:#e9e4fc}
.project-image img:first-child {transition:scale .3s ease}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .project-image:hover img:first-child {scale:1.025}
}
@media (max-width:860px) {
  .hero {grid-template-columns:1fr}
  .hero h1 {font-size:clamp(3.1rem,9.5vw,5rem)}
  .stack {justify-self:center}
}
@media (max-width:640px) {
  .hero {padding-block:38px 46px}
  .hero h1 {font-size:clamp(2.75rem,10vw,4rem)}
  .hero .lead {margin-top:18px}
  .hero .actions {margin-top:22px}
  .peek {background:#f2edff}
}
@media (forced-colors:active) {
  .hero-accent .gradient-text__content {-webkit-text-fill-color:CanvasText}
}

html.lenis.lenis-smooth {scroll-behavior:auto}

.support-plans {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.support-plan {
  border:1px solid var(--line);
  border-radius:24px;
  padding:clamp(22px,3.2vw,42px);
  gap:14px;
  background:var(--card);
  box-shadow:0 14px 34px -28px #211b5360;
}
.support-plan-plus {
  background:linear-gradient(150deg,#312878,var(--nacht) 66%);
  color:#fff;
  border-color:var(--nacht);
}
.support-plan h3 {font-size:clamp(1.65rem,3vw,2.15rem)}
.support-plan .support-plan-tag {
  align-self:start;
  padding:4px 10px;
  border-radius:999px;
  color:var(--blau-tief);
  background:var(--blau-hell);
  font-size:.82rem;
  font-weight:750;
}
.support-plan .support-plan-description {min-height:3.2em}
.support-plan ul {
  list-style:none;
  gap:9px;
  border-top:1px solid var(--line);
  padding:16px 0 0;
  margin:0 0 6px;
}
.support-plan li {position:relative;padding-inline-start:22px}
.support-plan li::before {
  content:"";
  position:absolute;
  inset:.4em auto auto 2px;
  width:7px;
  height:11px;
  border:solid var(--blau);
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.support-plan-plus :is(p:where(:not(.support-plan-tag)),ul,.price,.price span) {color:var(--nacht-text)}
.support-plan-plus .price {color:#fff}
.support-plan-plus ul {border-color:#ffffff30}
.support-plan-plus li::before {border-color:#c4b8ff}
.support-plan .btn {align-self:stretch;margin-top:auto}
.support-plan-plus .btn {background:#fff;color:var(--nacht)}
.support-plan-plus .btn:hover {background:var(--blau-hell)}
.support-plan-plus :focus-visible {outline-color:#fff}
.support-trial {
  padding:12px 14px;
  border:1px solid #ffffff30;
  border-radius:12px;
  background:#ffffff12;
}
.support-trial p {margin-top:4px}
.field select {
  width:100%;
  min-height:50px;
  padding:10px 12px;
  border:1.5px solid var(--line);
  border-radius:10px;
  background:var(--paper);
  font:inherit;
  color:inherit;
}
.attach:not(:has(input:checked)) #c-summary {display:none}
@media (max-width:640px) {
  .support-plans {grid-template-columns:1fr}
  .support-plan .support-plan-description {min-height:0}
}

.support-plan .price {font-size:clamp(1.65rem,3vw,2.2rem)}
.support-plan .price span {font-size:.95rem;font-weight:600;color:var(--muted)}
.support-year {margin-top:6px}
.support-billing {margin-top:16px;color:var(--muted);font-size:.92rem}

.support-cycle {
  display:inline-flex;
  flex-wrap:wrap;
  gap:4px;
  margin-bottom:18px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--paper);
}
.support-cycle label {position:relative;cursor:pointer}
.support-cycle input {position:absolute;opacity:0}
.support-cycle span {
  display:flex;
  align-items:center;
  min-height:44px;
  padding:8px 14px;
  border-radius:13px;
  font-size:.9rem;
  font-weight:700;
}
.support-cycle input:checked + span {background:var(--blau);color:#fff}
.support-cycle input:focus-visible + span {outline:2px solid var(--blau);outline-offset:2px}
@media (forced-colors:active) {
  .support-cycle input:checked + span {outline:2px solid Highlight;outline-offset:-2px}
}

.support-included {
  margin-bottom:18px;
  padding:14px 18px;
  border-radius:14px;
  background:var(--blau-hell);
}
.support-included p {margin-block:4px 6px}
.support-plan-plus .price span {color:var(--nacht-text)}

.website-packages {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.website-packages .website-package {
  padding:clamp(18px,2vw,26px);
  border:1px solid var(--line);
  border-radius:22px;
  background:var(--card);
  box-shadow:0 12px 30px -26px #211b5370;
}
.website-packages .website-package-featured {
  border-color:var(--blau);
  background:linear-gradient(160deg,var(--blau-hell),var(--card) 70%);
}
.website-package-top {display:grid;justify-items:start;grid-template-rows:44px 28px;align-items:center;gap:8px}
.website-package-icon {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:13px;
  color:var(--blau-tief);
  background:var(--blau-hell);
}
.website-package-badge {
  padding:4px 9px;
  border-radius:999px;
  background:var(--blau-tief);
  color:#fff;
  font-size:.75rem;
  font-weight:750;
}
.website-package h3 {overflow-wrap:anywhere}
.website-package .price {font-size:clamp(1.25rem,2vw,1.75rem)}
.website-package .website-package-description {min-height:4.8em}
.website-package ul {border-top:1px solid var(--line);padding-block-start:12px;gap:8px}
.website-package li::marker {color:var(--blau)}
.website-package .btn {margin-top:auto;padding-inline:12px;text-align:center;font-size:.95rem}
.website-package-note {margin-top:16px;color:var(--muted);font-size:.92rem}
@media (max-width:1100px) {
  .website-packages {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px) {
  .website-packages {grid-template-columns:1fr}
}

.website-comparison {margin-top:14px;text-align:right}
.website-comparison summary {
  display:list-item;
  width:fit-content;
  margin-inline-start:auto;
  padding:10px 14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
  color:var(--blau-tief);
  font-size:.9rem;
  font-weight:750;
  cursor:pointer;
}
.website-comparison[open] summary {margin-bottom:12px}
.website-comparison > :not(summary) {text-align:left}
.website-comparison-hint {display:none;margin-bottom:10px;color:var(--muted);font-size:.9rem}
.website-comparison-scroll {
  overflow-x:auto;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card);
}
.website-comparison table {width:100%;min-width:760px;border-collapse:collapse;font-size:.93rem}
.website-comparison :is(th,td) {
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
}
.website-comparison tbody th[scope="row"] {width:25%;font-weight:700}
.website-comparison thead th,.website-comparison .comparison-group {background:var(--paper)}
.website-comparison .comparison-featured {background:var(--blau-hell)}
.website-comparison tbody:last-child tr:last-child > * {border-bottom:0}
@media (max-width:840px) {
  .website-comparison-hint {display:block}
  .website-comparison td[colspan] {max-width:180px}
}

.quote h4 {margin:14px 0 6px;font-size:.85rem;color:var(--nacht-text)}
.quote-package {margin-top:16px;padding:12px;border-radius:12px;background:#ffffff12}
.quote-package h4 {margin-top:0}
.quote-package-row {display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.quote-package-row strong {white-space:nowrap}
#quote-no-extras {font-size:.9rem;color:var(--nacht-text)}
.quote-total {margin-top:16px;padding-top:12px;border-top:1px solid #ffffff2b}
.quote-total p {font-size:.9rem;color:var(--nacht-text);font-weight:700}
.quote-total .amount {margin-bottom:0}
.quote-total #currency {font-size:1rem;letter-spacing:normal;margin-inline-end:4px}

.section-kicker {
  display:block;
  margin-bottom:12px;
  color:var(--blau-tief);
  font-size:.86rem;
  font-weight:750;
  letter-spacing:.035em;
  line-height:1.35;
}
.hero-shell {
  background:radial-gradient(ellipse at 82% 42%,#ded7ff,transparent 57%),
             linear-gradient(160deg,var(--card),var(--paper) 72%);
}
.hero .facts {
  padding:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#ffffff96;
}
.hero .facts li {border:0;padding:0 8px}
.hero .facts li + li {border-inline-start:1px solid var(--line)}
.calculator-intro {margin-bottom:18px}
.calculator-intro h3 {font-size:clamp(1.55rem,3vw,2.1rem)}
.calculator-intro p {margin-top:6px;color:var(--muted)}
#ratgeber .guide-links a {
  display:flex;
  align-items:center;
  min-height:56px;
  height:100%;
  padding:14px 18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--card);
}
#ratgeber .guide-links a:hover {background:var(--blau-hell)}
#ablauf .steps {gap:14px}
#ablauf .steps li {
  padding:72px 20px 20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--paper);
}
#ablauf .steps li::before {top:18px;left:20px;border-radius:12px}
#ablauf .steps li::after {display:none}
.contact {
  background:radial-gradient(ellipse at 8% 20%,#4038ef 0%,transparent 62%),var(--nacht);
}
.contact .section-kicker {color:var(--nacht-text)}
.form .field:has(#c-support),.form .field:has(#c-support-cycle) {grid-column:auto}
.price-bar {bottom:max(12px,env(safe-area-inset-bottom))}
.mobile-cta {bottom:max(12px,env(safe-area-inset-bottom))}
@media (max-width:640px) {
  .hero .facts {padding:12px 16px}
  .hero .facts li {padding:0}
  .hero .facts li + li {border-inline-start:0;border-top:1px solid var(--line);padding-top:10px}
}

.website-package-badge-secondary {
  color:var(--blau-tief);
  background:var(--blau-hell);
}
.website-package li strong {color:var(--ink)}
.support-plan-plus li strong {color:#fff}
.support-plan-plus .support-upgrade {
  margin-top:8px;
  color:#fff;
  font-size:.88rem;
  font-weight:700;
}

.website-packages .website-package-expanded {
  border-color:var(--blau-tief);
  background:linear-gradient(165deg,#ddd8ff,var(--card) 78%);
  box-shadow:0 15px 34px -24px #4038ef80;
}
.website-package-expanded .website-package-badge {
  background:var(--blau-tief);
  color:#fff;
}
.support-plan-plus {box-shadow:0 18px 38px -22px #211b5390}
.support-plus-value {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,148px),1fr));
  gap:8px;
  margin:0;
}
.support-plus-value > div {
  padding:10px 12px;
  border:1px solid #ffffff38;
  border-radius:12px;
  background:#ffffff16;
}
.support-plus-value dt {color:var(--nacht-text);font-size:.82rem}
.support-plus-value dd {margin:0;color:#fff;font-weight:800}

.support-comparison table {min-width:0;table-layout:fixed;overflow-wrap:anywhere}
.support-comparison tbody th[scope="row"] {width:auto}
.support-comparison [data-support-price] {display:block}
@media (max-width:640px) {
  .support-comparison :is(th,td) {padding:9px 8px;font-size:.85rem}
}

#calc-support-billing {margin-top:12px}
.quote-recurring {
  margin-top:14px;
  padding:12px 14px;
  border:1px solid #ffffff32;
  border-radius:12px;
  background:#ffffff12;
}
.quote-recurring h4 {margin:0 0 4px}
.quote-recurring p {font-weight:750}
.hero .eyebrow {
  padding:5px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--card);
}
.stack::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  border-radius:inherit;
  background:radial-gradient(circle 210px at var(--light-x,50%) var(--light-y,50%),#aa8bff75,transparent);
  opacity:0;
  pointer-events:none;
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .stack::after {transition:opacity .3s ease}
  .stack:hover::after {opacity:1}
}
@media (prefers-reduced-motion:no-preference) {
  .btn {
    transition:background .18s ease,transform .28s cubic-bezier(.2,.8,.25,1.4),filter .18s ease;
  }
  .btn:active {
    transform:translateY(2px) scale(.95);
    filter:brightness(.92);
    transition-duration:80ms;
  }
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .btn:hover:not(:active) {transform:translateY(-2px)}
}
@media (prefers-reduced-motion:reduce) {
  .btn:active {transform:none}
}
@media (forced-colors:active) {
  #hero-eyebrow-text .gradient-text__content {-webkit-text-fill-color:CanvasText}
}

.hero-shell,.contact {position:relative;isolation:isolate}
#hero-aurora,#contact-aurora {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
}
#hero-aurora {
  background:radial-gradient(ellipse at 85% 95%,#9a82eb25,transparent 56%);
}
#contact-aurora {
  background:radial-gradient(ellipse at 25% 100%,#7761ee4d,transparent 60%);
}
@media (forced-colors:active) {
  #hero-aurora,#contact-aurora {visibility:hidden}
}

.section {padding-block:clamp(52px,6vw,92px)}
.head {gap:14px clamp(24px,5vw,72px);margin-bottom:clamp(22px,3vw,36px)}
.about-head,.faq .head {margin-bottom:0}
.website-packages {gap:clamp(12px,1.5vw,22px)}
.website-packages .website-package {
  gap:12px;
  padding:clamp(18px,2.1vw,30px);
}
.website-package h3 {font-size:clamp(1.35rem,2vw,1.7rem)}
.website-package .size {font-size:.82rem}
.website-package .price {font-size:clamp(1.48rem,2.2vw,1.95rem)}
.website-package .website-package-description {min-height:5.1em}
.website-package-description strong {color:var(--blau-tief)}
.website-package ul {margin-bottom:10px}
.website-package .btn {min-height:48px}
.calculator {gap:clamp(14px,2.5vw,30px)}
.contact-grid {gap:clamp(22px,4vw,58px)}
.form {gap:clamp(12px,1.6vw,20px)}
.form-confirmation {grid-column:1/-1}
.form-confirmation-content {display:flex;align-items:center;gap:12px}
.confirmation-icon {flex:none;color:var(--blau)}
.form-confirmation-content p {font-weight:400}
@media (max-width:600px) {
  .website-package .website-package-description {min-height:0}
  .website-packages .website-package {gap:10px}
}

#projekte .portfolio {gap:clamp(14px,2vw,26px)}
#projekte .project {border-radius:24px;box-shadow:0 16px 34px -28px #211b5370}
#projekte .project-image {
  padding:clamp(8px,1.25vw,16px);
  background:linear-gradient(155deg,#ece7ff,#ded6f7);
}
#projekte .project-image img {border-radius:12px}
#projekte .project-image .phone {right:6%;bottom:7%}
#projekte .project-image:focus-visible {outline-offset:-5px}
#projekte .project-feature .project-copy {background:var(--card)}
#projekte .project-copy h3 {font-size:clamp(1.35rem,2.5vw,2rem)}
#projekte .project-copy .kind {
  align-self:start;
  color:var(--blau-tief);
  background:var(--blau-hell);
  border-radius:10px;
  padding:5px 9px;
  font-size:.79rem;
}
#projekte .project-copy .link {min-height:44px;display:inline-flex;align-items:center;padding-top:0}
.project-details {font-size:.9rem}
.project-details summary {cursor:pointer;font-weight:700}
.project-details p {margin-top:6px}
.calculator-intro {padding:clamp(18px,3vw,30px);border:1px solid var(--line);border-radius:20px;background:linear-gradient(125deg,var(--card),var(--blau-hell))}
.calculator-intro .section-kicker {margin-bottom:5px}
.calculator .inputs {
  display:grid;
  gap:12px;
  background:transparent;
  border:0;
  padding:0;
}
.calculator .inputs fieldset {
  margin:0;
  padding:10px clamp(12px,2vw,22px) 16px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--card);
}
.calculator .inputs legend {padding-inline:5px;margin-bottom:3px}
.calculator .inputs :is(.choices,.extras) label {min-height:58px}
.calculator .extras small {display:block;color:var(--muted);font-size:.8rem;font-weight:500}
.calculator .inputs label:has(input:focus-visible) {outline:2px solid var(--blau);outline-offset:2px}
.calculator .quote {
  border-radius:22px;
  background:linear-gradient(150deg,#312878,var(--nacht) 64%);
  box-shadow:0 20px 44px -24px #211b53a0;
}
.calculator .quote-total {
  padding:12px 14px;
  border:1px solid #ffffff38;
  border-radius:12px;
  background:#ffffff16;
}
.calculator .quote-recurring {background:#ffffff0a}
@media (max-width:640px) {
  #projekte .project-image img {border-radius:9px}
}

#calc-support-billing + .note {margin:18px 0 0}

.calculator .function-options {gap:10px}
.calculator .function-options .function-option {
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto 1fr auto;
  align-items:start;
  gap:8px 10px;
  padding:14px;
  border-radius:14px;
  background:var(--paper);
}
.function-option input {margin-top:2px}
.function-title {font-weight:800;line-height:1.3}
.calculator .function-description {
  grid-column:1/-1;
  line-height:1.45;
}
.function-price {
  grid-column:1/-1;
  justify-self:start;
  padding:4px 9px;
  border-radius:8px;
  background:var(--blau-hell);
  color:var(--blau-tief);
  font-size:.82rem;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}
.calculator .function-options .function-option:has(input:checked) {background:var(--blau-hell)}
.function-option:has(input:checked) .function-price {background:var(--blau-tief);color:#fff}

.confirmation-ring,.confirmation-sparks {opacity:0}
#c-status-title {display:block;font-size:1.2rem}

.form-confirmation-content {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  flex-direction:column;
  gap:0;
  text-align:center;
  padding:14px 16px 18px;
  border:1px solid #c8bbf8;
  background:linear-gradient(135deg,#f2eaff,#e4e6ff);
}
.confirmation-icon {overflow:visible}
.confirmation-piece {opacity:0}
.confirmation-shine {
  position:absolute;
  z-index:-1;
  inset:0 auto 0 0;
  width:30%;
  pointer-events:none;
  background:linear-gradient(105deg,transparent,#fff,transparent);
  opacity:0;
}
#c-status-title {font-size:clamp(1.35rem,3vw,1.75rem)}
.form-confirmation-content p {margin-top:4px}