:root{
    --ink:#0B0C10;
    --steel:#A6ACB5;
    --accent:#FF5A1F;
    --accent-2:#FFC933;
    --canvas:#0B0C10;
    --canvas-light:#F6F5F1;
    --canvas-dim:#14161c;
    --canvas-dim-2:#191B21;
    --line:rgba(246,245,241,0.14);
    --radius:10px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth; scroll-padding-top:90px;}
  body{background:var(--canvas); color:var(--canvas-light); font-family:'Work Sans',sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
  h1,h2,h3{font-family:'Fraunces',serif; font-weight:600; letter-spacing:-0.015em;}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}
  @media (max-width:640px){ .wrap{padding:0 20px;} }
  a:focus-visible, button:focus-visible, summary:focus-visible{outline:2px solid var(--accent-2); outline-offset:3px;}
  @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation:none !important; transition:none !important; scroll-behavior:auto !important;} }

  /* ---------- Header ---------- */
  header{position:sticky; top:0; z-index:50; background:rgba(11,12,16,0.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
  nav.wrap{display:flex; align-items:center; justify-content:space-between; height:72px; gap:20px;}
  .brand{font-family:'Fraunces',serif; font-size:1.25rem; font-weight:600;}
  .brand span{color:var(--accent);}
  .navlinks{display:flex; gap:2rem; font-size:0.95rem;}
  .navlinks a{position:relative; padding:4px 0; color:var(--canvas-light);}
  .navlinks a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .25s ease;}
  .navlinks a:hover::after{transform:scaleX(1);}
  .nav-cta{padding:10px 18px !important; font-size:0.88rem !important;}
  @media (max-width:860px){ .navlinks{display:none;} }

  /* ---------- Buttons ---------- */
  .btn{position:relative; display:inline-block; overflow:hidden; padding:15px 28px; font-size:0.98rem; font-weight:600; border-radius:var(--radius); border:1.5px solid transparent; cursor:pointer; transition:transform .2s ease, box-shadow .25s ease, border-color .2s ease, color .2s ease; text-align:center; isolation:isolate;}
  .btn-primary{color:var(--ink); background:linear-gradient(120deg,var(--accent) 0%,#ff8a3c 45%,var(--accent-2) 100%); background-size:180% 100%; background-position:0% 50%; box-shadow:0 8px 28px -10px rgba(255,90,31,.7);}
  .btn-primary::after{content:""; position:absolute; top:-20%; bottom:-20%; width:45%; left:-60%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent); transform:skewX(-18deg); animation:sheen 5.5s ease-in-out infinite; z-index:-1; mix-blend-mode:soft-light;}
  .btn-primary:hover{transform:translateY(-2px); background-position:100% 50%; box-shadow:0 14px 34px -10px rgba(255,150,40,.8);}
  .btn-ghost{color:var(--canvas-light); border-color:var(--line); background:rgba(246,245,241,0.03);}
  .btn-ghost:hover{border-color:var(--accent-2); color:var(--accent-2); transform:translateY(-2px);}
  @keyframes sheen{ 0%,55%{left:-60%;} 80%,100%{left:130%;} }

  /* ---------- Hero ---------- */
  .hero{position:relative; padding:76px 0 0; overflow:hidden; isolation:isolate;}
  .aurora{position:absolute; inset:0; z-index:-1; overflow:hidden; pointer-events:none;}
  .aurora i{position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; will-change:transform;}
  .aurora i:nth-child(1){width:620px; height:620px; background:#ff5a1f; left:-8%; top:-18%; animation:drift1 22s ease-in-out infinite alternate;}
  .aurora i:nth-child(2){width:520px; height:520px; background:#ffb21f; right:-6%; top:6%; opacity:.34; animation:drift2 26s ease-in-out infinite alternate;}
  .aurora i:nth-child(3){width:560px; height:420px; background:#b8310a; left:34%; bottom:-30%; opacity:.4; animation:drift3 30s ease-in-out infinite alternate;}
  .aurora::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,12,16,.35) 0%,rgba(11,12,16,.75) 70%,var(--canvas) 100%);}
  @keyframes drift1{ from{transform:translate(0,0) scale(1);} to{transform:translate(18%,14%) scale(1.25);} }
  @keyframes drift2{ from{transform:translate(0,0) scale(1.1);} to{transform:translate(-20%,22%) scale(.85);} }
  @keyframes drift3{ from{transform:translate(0,0) scale(1);} to{transform:translate(-26%,-12%) scale(1.3);} }

  .hero-grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center;}
  @media (max-width:960px){ .hero-grid{grid-template-columns:1fr;} }
  .hero h1{font-size:clamp(2.5rem,5.6vw,4.3rem); line-height:1.04; margin-bottom:24px;}
  .hero h1 .sub{display:block; color:var(--steel); font-weight:500;}
  .hero-lede{font-size:1.14rem; color:#c9ced6; max-width:50ch; margin-bottom:34px;}
  .hero-cta{display:flex; gap:14px; flex-wrap:wrap; align-items:center;}
  .hero-note{margin-top:18px; font-size:0.9rem; color:var(--steel);}

  @keyframes rise{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }
  .hero-grid > *{animation:rise .9s cubic-bezier(.2,.7,.2,1) both;}
  .hero-grid > *:nth-child(2){animation-delay:.15s;}

  /* ---------- Hero mockup: Website entsteht in 7 Tagen ---------- */
  .stage-wrap{position:relative;}
  .stage{position:relative; background:var(--canvas-dim); border:1px solid var(--line); border-radius:16px; box-shadow:0 40px 90px -30px rgba(255,90,31,.38), 0 0 0 1px rgba(255,255,255,.02) inset; overflow:hidden;}
  .stage-bar{display:flex; align-items:center; gap:7px; padding:12px 14px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.02);}
  .stage-bar b{width:10px; height:10px; border-radius:50%; background:#3a3d46;}
  .stage-url{margin-left:12px; flex:1; font-size:0.78rem; color:var(--steel); background:rgba(255,255,255,.05); border-radius:99px; padding:4px 14px; display:flex; justify-content:space-between; gap:10px;}
  .stage-url em{font-style:normal; color:var(--accent-2); opacity:0; animation:kb5 16s linear infinite;}
  .site{padding:18px 18px 8px;}
  .s-nav{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; animation:kb1 16s ease-out infinite;}
  .s-logo{font-family:'Fraunces',serif; font-weight:600; font-size:0.95rem;}
  .s-links{display:flex; gap:8px;}
  .s-links i{display:block; width:34px; height:5px; border-radius:3px; background:#3a3d46;}
  .s-hero{padding:22px 18px; border-radius:12px; background:linear-gradient(135deg,#2a1710,#1a1c23); margin-bottom:14px; animation:kb2 16s ease-out infinite;}
  .s-hero h4{font-family:'Fraunces',serif; font-size:1.2rem; line-height:1.15; margin-bottom:8px; font-weight:600;}
  .s-hero p{font-size:0.78rem; color:var(--steel); margin-bottom:14px; max-width:30ch;}
  .s-hero span{display:inline-block; background:var(--accent); color:var(--ink); font-size:0.74rem; font-weight:700; padding:7px 13px; border-radius:7px;}
  .s-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; animation:kb3 16s ease-out infinite;}
  .s-cards div{background:#1b1e26; border:1px solid var(--line); border-radius:10px; padding:12px;}
  .s-cards i{display:block; height:5px; border-radius:3px; background:#3a3d46; margin-bottom:7px;}
  .s-cards i:first-child{width:60%; background:var(--accent); opacity:.85;}
  .s-cards i:last-child{width:80%; margin-bottom:0;}
  .s-legal{display:flex; gap:14px; font-size:0.7rem; color:var(--steel); padding:10px 2px 8px; border-top:1px solid var(--line); animation:kb4 16s ease-out infinite;}
  .s-legal span::before{content:"✓ "; color:var(--accent-2);}

  .track{padding:0 18px 18px;}
  .track-bar{height:8px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden;}
  .track-bar i{display:block; height:100%; width:100%; border-radius:99px; background:linear-gradient(90deg,var(--accent),var(--accent-2)); transform-origin:left; animation:fill 16s linear infinite;}
  .days{display:flex; justify-content:space-between; font-size:0.72rem; color:var(--steel); margin:9px 1px 12px;}
  .status{position:relative; height:24px; font-size:0.9rem; font-weight:600;}
  .status span{position:absolute; left:0; top:0; opacity:0; white-space:nowrap;}
  .status span:nth-child(1){animation:st1 16s linear infinite;}
  .status span:nth-child(2){animation:st2 16s linear infinite;}
  .status span:nth-child(3){animation:st3 16s linear infinite;}
  .status span:nth-child(4){opacity:1; color:var(--accent-2); animation:st4 16s linear infinite;}
  .stage-cap{margin-top:12px; font-size:0.78rem; color:var(--steel); text-align:center;}

  @keyframes kb1{ 0%,3%{opacity:0; transform:translateY(8px);} 9%,94%{opacity:1; transform:none;} 99%,100%{opacity:0;} }
  @keyframes kb2{ 0%,18%{opacity:0; transform:translateY(10px) scale(.98);} 26%,94%{opacity:1; transform:none;} 99%,100%{opacity:0;} }
  @keyframes kb3{ 0%,38%{opacity:0; transform:translateY(10px);} 47%,94%{opacity:1; transform:none;} 99%,100%{opacity:0;} }
  @keyframes kb4{ 0%,60%{opacity:0;} 68%,94%{opacity:1;} 99%,100%{opacity:0;} }
  @keyframes kb5{ 0%,82%{opacity:0;} 88%,94%{opacity:1;} 99%,100%{opacity:0;} }
  @keyframes fill{ 0%{transform:scaleX(0);} 88%,95%{transform:scaleX(1);} 100%{transform:scaleX(1);} }
  @keyframes st1{ 0%{opacity:1;} 20%{opacity:1;} 23%,100%{opacity:0;} }
  @keyframes st2{ 0%,20%{opacity:0;} 24%,43%{opacity:1;} 46%,100%{opacity:0;} }
  @keyframes st3{ 0%,43%{opacity:0;} 47%,66%{opacity:1;} 69%,100%{opacity:0;} }
  @keyframes st4{ 0%,66%{opacity:0;} 70%,96%{opacity:1;} 99%,100%{opacity:0;} }

  /* ---------- Stats ---------- */
  .stats-bar{padding:50px 0; margin-top:72px; border-top:1px solid var(--line); background:rgba(11,12,16,.55); backdrop-filter:blur(6px);}
  .stats-row{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
  @media (max-width:760px){ .stats-row{grid-template-columns:1fr 1fr; gap:34px 20px;} }
  .stat-num{font-family:'Archivo Black',sans-serif; font-size:clamp(1.9rem,3.4vw,2.7rem); line-height:1; background:linear-gradient(120deg,var(--accent),var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .stat-label{font-size:0.9rem; color:var(--steel); margin-top:10px; max-width:24ch;}

  /* ---------- Sections ---------- */
  .section{padding:104px 0;}
  .section-alt{background:var(--canvas-dim);}
  .section-head{max-width:660px; margin-bottom:54px;}
  .section-title{font-size:clamp(1.9rem,3.6vw,2.7rem); line-height:1.1; margin-bottom:16px;}
  .section-lede{color:var(--steel); font-size:1.05rem; max-width:56ch;}
  .kicker{font-size:0.9rem; color:var(--accent); font-weight:600; margin-bottom:12px;}

  .reveal{transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0s);}
  .js .reveal{opacity:0; transform:translateY(22px);}
  .js .reveal.in{opacity:1; transform:none;}

  /* ---------- Für wen ---------- */
  .who{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
  @media (max-width:960px){ .who{grid-template-columns:1fr 1fr;} }
  @media (max-width:520px){ .who{grid-template-columns:1fr;} }
  .who div{padding:26px 22px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(255,255,255,.01)); transition:transform .3s ease, border-color .3s ease;}
  .who div:hover{transform:translateY(-4px); border-color:rgba(255,160,40,.55);}
  .who h3{font-size:1.2rem; margin-bottom:8px;}
  .who p{color:var(--steel); font-size:0.94rem;}
  .who .more{display:inline-block; margin-top:14px; color:var(--accent-2); font-size:0.92rem; font-weight:600;}
  .who .more:hover{text-decoration:underline;}

  /* ---------- Ablauf ---------- */
  .process{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:step;}
  @media (max-width:860px){ .process{grid-template-columns:1fr;} }
  .step{position:relative; background:var(--canvas); border:1px solid var(--line); border-radius:16px; padding:32px 28px; overflow:hidden; transition:transform .3s ease, border-color .3s ease;}
  .step:hover{transform:translateY(-4px); border-color:rgba(255,160,40,.55);}
  .step::before{counter-increment:step; content:counter(step); position:absolute; right:18px; top:6px; font-family:'Archivo Black',sans-serif; font-size:5rem; line-height:1; color:rgba(255,90,31,.14);}
  .step h3{font-size:1.25rem; margin-bottom:10px; position:relative;}
  .step p{color:var(--steel); font-size:0.97rem; position:relative;}

  /* ---------- Preise ---------- */
  .pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:stretch;}
  @media (max-width:960px){ .pricing-grid{grid-template-columns:1fr;} }
  .price-card{display:flex; flex-direction:column; background:var(--canvas-dim); border:1px solid var(--line); border-radius:18px; padding:34px 30px; transition:transform .3s ease, border-color .3s ease;}
  .price-card:hover{transform:translateY(-5px); border-color:rgba(255,160,40,.55);}
  .price-card.highlight{position:relative; background:linear-gradient(150deg,#ff5a1f 0%,#ff7a2a 55%,#ffb21f 130%); color:var(--ink); border-color:transparent; box-shadow:0 30px 70px -28px rgba(255,90,31,.7);}
  .ptag{font-family:'Fraunces',serif; font-size:1.3rem; font-weight:600; margin-bottom:6px;}
  .pfor{font-size:0.92rem; color:var(--steel); margin-bottom:22px; min-height:70px;}
  .highlight .pfor{color:rgba(11,12,16,.8);}
  .pval{font-family:'Archivo Black',sans-serif; font-size:2.5rem; line-height:1.1;}
  .prunning{font-size:0.95rem; margin-top:4px; opacity:.85;}
  .price-card ul{margin:24px 0 0; padding:0; list-style:none; flex-grow:1;}
  .price-card li{padding:10px 0 10px 26px; position:relative; border-top:1px solid var(--line); font-size:0.94rem;}
  .price-card li::before{content:"✓"; position:absolute; left:0; top:10px; color:var(--accent-2); font-weight:700;}
  .highlight li{border-top-color:rgba(11,12,16,.2);}
  .highlight li::before{color:var(--ink);}
  .price-note{margin-top:30px; font-size:0.9rem; color:var(--steel); max-width:80ch;}

  /* ---------- Referenz ---------- */
  .case-card{display:grid; grid-template-columns:1.1fr 0.9fr; border:1px solid var(--line); border-radius:20px; overflow:hidden; background:var(--canvas);}
  @media (max-width:860px){ .case-card{grid-template-columns:1fr;} }
  .case-img{aspect-ratio:4/3; overflow:hidden; background:var(--canvas-dim-2);}
  .case-img img{width:100%; height:100%; object-fit:cover; object-position:top; transition:transform 1.2s cubic-bezier(.2,.7,.2,1);}
  .case-card:hover .case-img img{transform:scale(1.04);}
  .case-body{padding:40px 38px; display:flex; flex-direction:column; justify-content:center;}
  .case-tag{font-size:0.9rem; color:var(--accent); font-weight:600; margin-bottom:12px;}
  .case-body h3{font-size:1.55rem; line-height:1.2; margin-bottom:14px;}
  .case-body p{color:var(--steel); margin-bottom:12px; font-size:0.98rem;}
  .case-stats{display:flex; gap:30px; margin:20px 0 26px; flex-wrap:wrap;}
  .case-stat b{font-family:'Archivo Black',sans-serif; font-size:1.8rem; display:block; color:var(--accent-2); line-height:1.1;}
  .case-stat span{font-size:0.84rem; color:var(--steel);}

  /* ---------- FAQ ---------- */
  .faq{max-width:820px;}
  .faq details{border-top:1px solid var(--line);}
  .faq details:last-child{border-bottom:1px solid var(--line);}
  .faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 0; font-family:'Fraunces',serif; font-size:1.22rem; font-weight:600; transition:color .2s ease;}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary:hover{color:var(--accent-2);}
  .faq summary::after{content:"+"; flex:none; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-family:'Work Sans',sans-serif; font-size:1.2rem; color:var(--accent-2); transition:transform .3s ease, background .3s ease;}
  .faq details[open] summary::after{transform:rotate(45deg); background:rgba(255,201,51,.12);}
  .faq details p{color:var(--steel); padding:0 52px 26px 0; max-width:62ch; animation:rise .45s ease both;}

  /* ---------- Über mich ---------- */
  .about-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:center;}
  @media (max-width:860px){ .about-grid{grid-template-columns:1fr; gap:36px;} }
  .about-portrait{aspect-ratio:3/4; overflow:hidden; border-radius:20px; background:var(--ink); border:1px solid var(--line);}
  .about-portrait img{width:100%; height:100%; object-fit:cover;}
  .about-text p{margin-bottom:18px; color:#c9ced6; max-width:58ch;}
  .about-text strong{color:var(--accent-2); font-weight:600;}

  /* ---------- Kontakt ---------- */
  .contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
  @media (max-width:860px){ .contact-grid{grid-template-columns:1fr; gap:36px;} }
  .contact-list{border-top:1px solid var(--line); margin-top:28px;}
  .contact-item{display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:18px 0; border-bottom:1px solid var(--line);}
  .contact-label{font-size:0.9rem; color:var(--steel);}
  .contact-value{font-family:'Fraunces',serif; font-size:1.15rem; text-align:right;}
  .contact-value a:hover{color:var(--accent-2);}
  .contact-panel{position:relative; overflow:hidden; border-radius:22px; padding:42px 36px; color:var(--ink); background:linear-gradient(140deg,#ff5a1f,#ff8a2a 60%,#ffc933); box-shadow:0 36px 80px -34px rgba(255,90,31,.8);}
  .contact-panel h3{font-size:1.6rem; margin-bottom:12px;}
  .contact-panel p{opacity:.88; margin-bottom:26px;}
  .contact-panel .btn{display:block; width:100%; background:var(--ink); color:var(--canvas-light); box-shadow:none;}
  .contact-panel .btn::after{display:none;}
  .contact-panel .btn:hover{background:#000; transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(0,0,0,.6);}
  .contact-panel .btn + .btn{margin-top:12px; background:transparent; color:var(--ink); border-color:rgba(11,12,16,.55);}
  .contact-panel .btn + .btn:hover{background:rgba(11,12,16,.1);}

  footer{border-top:1px solid var(--line); padding:32px 0; font-size:0.88rem; color:var(--steel);}
  .foot-row{display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;}
  footer a:hover{color:var(--accent-2);}