/* Schriften lokal (DSGVO): Dateien liegen in /fonts, keine Verbindung zu Google */
@font-face{font-family:'Unbounded';src:url('../fonts/unbounded-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Sora';src:url('../fonts/sora-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Sora';src:url('../fonts/sora-600.woff2') format('woff2');font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:'Sora';src:url('../fonts/sora-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{
  /* artqrt Branding Booklet, Salbei */
  --paper:#F6F1E7; --wall:#ECE5D8; --wall-deep:#E2D9C8; --ink:#1C2522; --stone:#545C57;
  --line:#DDD4C4; --sage:#8DA287; --forest:#2F5D4A; --sand:#D3C4A8; --sand-soft:#EFE6D6; --night:#1F2D28;
  --err:#9A3B2E; --field:#FFFDF8; --on-night:#F6F1E7; --light:rgba(255,252,244,.85); --floor:#DDD3C1;
  --display:'Unbounded','Arial Black','Helvetica Neue',Arial,sans-serif;
  --sans:'Sora','Helvetica Neue',Helvetica,Arial,sans-serif;
  --pad:clamp(20px,5vw,64px); --max:1280px; --ease:cubic-bezier(.22,.61,.36,1);
  color-scheme:light; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth; scroll-padding-top:calc(80px + env(safe-area-inset-top,0px)); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font:400 16.5px/1.65 var(--sans); -webkit-font-smoothing:antialiased}
::selection{background:var(--sage); color:#1C2522}
img{max-width:100%; display:block}
a{color:inherit}
.prose a,.ans a,.check a{color:var(--forest); text-underline-offset:3px}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important} html{scroll-behavior:auto}}
h1,h2,h3{margin:0; font-family:var(--sans); font-weight:400; letter-spacing:-.03em}
h2{font-size:clamp(2.1rem,3.8vw,3.3rem); line-height:1.06}
h3{font-size:1.25rem; line-height:1.3; letter-spacing:-.02em}
p{margin:0}
.wrap{max-width:var(--max); margin:0 auto; padding-inline:var(--pad)}
.muted{color:var(--stone)}
.small{font-size:.86rem; line-height:1.5}
.grid12{display:grid; grid-template-columns:repeat(12,1fr); gap:0 24px}

.btn{display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 28px; background:var(--ink); color:var(--paper); border:1px solid var(--ink); border-radius:1px; text-decoration:none; font-weight:500; font-size:.95rem; cursor:pointer; transition:background .3s var(--ease),color .3s var(--ease)}
.btn:hover{background:transparent; color:var(--ink)}
.btn[disabled]{opacity:.55; cursor:progress}
.btn-quiet{background:transparent; color:var(--ink)}
.btn-quiet:hover{background:var(--ink); color:var(--paper)}
.link{display:inline-flex; align-items:center; min-height:48px; text-decoration:none; font-weight:500; font-size:.95rem; background:linear-gradient(currentColor,currentColor) 0 calc(100% - 12px)/100% 1px no-repeat}

/* nav */
.nav{position:fixed; top:0; left:0; right:0; z-index:30; padding-top:env(safe-area-inset-top,0px); transition:background .4s,border-color .4s; border-bottom:1px solid transparent}
.nav.is-solid{background:color-mix(in srgb,var(--paper) 92%,transparent); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border-bottom-color:var(--line)}
.nav-in{display:flex; align-items:center; height:72px; gap:24px}
.brand{display:inline-flex; align-items:center; text-decoration:none; color:var(--ink); min-height:44px}
.logo{display:block; height:26px; width:auto}
.nav .btn{margin-left:auto; min-height:42px; padding:0 20px; font-size:.9rem}

/* hero */
.hero{background:var(--paper); padding-top:72px}
.hero-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:0 clamp(24px,4vw,64px); align-items:center; min-height:min(88vh,860px); padding-block:clamp(32px,6vh,72px)}
.hero-copy{grid-column:1/span 6}
.kicker{font-family:var(--display); font-weight:700; font-size:.78rem; letter-spacing:.02em; color:var(--forest); margin-bottom:28px}
.hero h1{font-weight:400; font-size:clamp(2.5rem,4.6vw,4.4rem); line-height:1.06; letter-spacing:-.04em}
.hero h1 span{display:block; color:var(--stone)}
.hero-sub{max-width:38ch; margin-top:28px; color:var(--stone)}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px 30px; margin-top:36px; align-items:center}
.hero-scene{grid-column:7/span 6; position:relative; align-self:stretch; min-height:560px}
.room{position:absolute; inset:0; overflow:hidden; background:radial-gradient(120% 80% at 18% 0%,var(--light) 0%,transparent 60%),var(--wall)}
.room-svg{position:absolute; left:0; right:0; bottom:0; width:100%; height:auto}
/* painting box in room units: centre 50 %, bottom at 470/750 of room-svg; JS keeps it aligned */
.painting{position:absolute; left:50%; transform:translateX(-50%); box-sizing:content-box; padding:var(--fp,8px); background:linear-gradient(135deg,#CDB590,#A88D69); box-shadow:0 2px 3px rgba(40,30,20,.12),0 22px 40px -18px rgba(40,30,20,.45),18px 30px 60px -30px rgba(40,30,20,.3); transition:width .6s var(--ease),height .6s var(--ease),top .6s var(--ease)}
.painting .canvas{width:100%; height:100%; overflow:hidden; background:#EAE2D3}
.painting .canvas svg,.painting .canvas img{width:100%; height:100%; display:block; object-fit:fill}
.room-note{position:absolute; right:clamp(14px,2vw,24px); bottom:10px; margin:0; font-size:.74rem; color:var(--stone)}
@media (max-width:900px){.hero-copy,.hero-scene{grid-column:1/-1} .hero-copy{padding-bottom:40px} .hero-scene{min-height:0; aspect-ratio:4/5; max-height:620px} .hero-grid{padding-bottom:0}}

/* process + criteria */
.section{padding-block:clamp(88px,11vw,160px)}
.process{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,4vw,56px); margin-top:64px; border-top:2px solid var(--sage)}
.process article{padding-top:24px}
.process .n{font-family:var(--display); font-weight:700; font-size:.95rem; color:var(--forest); margin-bottom:10px}
.process p{margin-top:10px; color:var(--stone); max-width:32ch}
.criteria{margin-top:clamp(72px,9vw,120px)}
.criteria h3{grid-column:1/span 4}
.criteria ul{grid-column:6/span 7; list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:22px 32px}
.criteria li{padding-top:14px; border-top:1px solid var(--line)}
@media (max-width:820px){.process{grid-template-columns:1fr} .criteria h3,.criteria ul{grid-column:1/-1} .criteria ul{margin-top:28px; grid-template-columns:1fr}}
.guide>h2{grid-column:1/span 4}
.guide-list{grid-column:6/span 7; display:grid; grid-template-columns:1fr 1fr; gap:40px 32px}
.guide-list article{padding-top:16px; border-top:1px solid var(--line)}
.guide-list p{margin-top:10px; color:var(--stone)}
@media (max-width:900px){.guide>h2,.guide-list{grid-column:1/-1} .guide-list{margin-top:40px}}
@media (max-width:560px){.guide-list{grid-template-columns:1fr; gap:28px}}

/* form */
.form-sec{background:var(--wall); padding-block:clamp(88px,11vw,150px)}
.form-head{display:flex; justify-content:space-between; align-items:end; flex-wrap:wrap; gap:16px 32px; margin-bottom:48px}
form{background:var(--paper); padding:clamp(24px,5vw,72px)}
fieldset{border:0; padding:0; margin:0 0 clamp(56px,7vw,88px); display:grid; grid-template-columns:repeat(12,1fr); gap:0 24px}
fieldset:last-of-type{margin-bottom:0}

.fs-title{grid-column:1/span 4}
.fs-title .n{font-family:var(--display); font-weight:700; font-size:.9rem; color:var(--forest)}
.fs-title h3{margin-top:4px}
.fs-title p{margin-top:10px; color:var(--stone); font-size:.93rem; max-width:30ch}
.fs-body{grid-column:5/span 8; display:grid; grid-template-columns:1fr 1fr; gap:22px 20px}
.full{grid-column:1/-1}
@media (max-width:900px){.fs-title,.fs-body{grid-column:1/-1} .fs-body{margin-top:28px}}
@media (max-width:560px){.fs-body{grid-template-columns:1fr}}
.field label,.field .lbl{display:block; font-size:.88rem; font-weight:500; margin-bottom:8px}
.field .opt{font-weight:400; color:var(--stone)}
input[type=text],input[type=email],input[type=url],input[type=number],input[type=month],select,textarea{width:100%; min-height:50px; padding:12px 14px; background:var(--field); border:1px solid var(--line); border-radius:1px; font-size:16px; transition:border-color .2s}
textarea{min-height:120px; resize:vertical; line-height:1.5}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--ink)}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:var(--err)}
.hint{font-size:.82rem; color:var(--stone); margin-top:6px}
.error{font-size:.82rem; color:var(--err); margin-top:6px; display:none}
.field.invalid .error{display:block}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip input{position:absolute; opacity:0; pointer-events:none}
.chip span{display:inline-flex; align-items:center; min-height:40px; padding:0 14px; border:1px solid var(--line); cursor:pointer; font-size:.92rem; transition:all .2s; user-select:none}
.chip input:checked+span{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.chip input:focus-visible+span{outline:2px solid var(--ink); outline-offset:2px}
.radios{display:grid; gap:10px}
.radio{display:flex; gap:12px; align-items:flex-start; cursor:pointer; font-size:.95rem}
.radio input,.check input{width:18px; height:18px; margin:3px 0 0; accent-color:var(--ink); flex:none}
.ship-info p{background:var(--sand-soft); padding:18px 20px; font-size:.93rem; max-width:none}
.check{display:flex; gap:14px; align-items:flex-start; cursor:pointer; font-size:.93rem}
.check input{margin-right:2px!important}

/* dropzone */
.drop{grid-column:1/-1; border:1px dashed var(--stone); padding:clamp(28px,5vw,48px); text-align:center; cursor:pointer; transition:background .25s,border-color .25s}
.drop:hover,.drop.over{background:var(--sand-soft); border-color:var(--ink)}
.drop strong{font-weight:400; font-size:1.3rem; letter-spacing:-.02em; display:block}
.drop p{margin-top:8px; color:var(--stone); font-size:.9rem}
.drop input{position:absolute; width:1px; height:1px; opacity:0}
.works{grid-column:1/-1; display:grid; gap:20px}
.work{border:1px solid var(--line); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
.work-wall{background:var(--wall); position:relative; overflow:hidden; display:flex; flex-direction:column}
.scene{position:relative; width:100%; margin:auto 0}
.scene .art{position:absolute; background-size:cover; background-position:center; box-shadow:0 1px 1px rgba(30,25,20,.08),0 12px 24px -10px rgba(30,25,20,.35); transition:all .45s var(--ease)}
.scene .sb{position:absolute; bottom:0; background:var(--wall-deep); border-top:4px solid var(--sand)}
.scene-note{display:flex; justify-content:space-between; gap:12px; padding:10px 14px; font-size:.78rem; color:var(--stone); border-top:1px solid var(--line)}
.ratio-warn{color:var(--err)}
.work-fields{padding:22px; display:grid; grid-template-columns:1fr 1fr; gap:16px 14px; align-content:start}
.work-fields .field label{font-size:.82rem}
.work-fields input,.work-fields select{min-height:44px; padding:9px 12px}
.work-top{grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:12px}
.work-top .fn{font-size:.82rem; color:var(--stone); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.remove{background:none; border:0; cursor:pointer; font-size:.84rem; text-decoration:underline; text-underline-offset:3px; padding:8px 0; color:var(--stone); flex:none}
.remove:hover{color:var(--ink)}
@media (max-width:760px){.work{grid-template-columns:1fr}}
@media (max-width:420px){.work-fields{grid-template-columns:1fr}}
.counter{grid-column:1/-1; font-size:.86rem; color:var(--stone)}

.submit-row{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px; margin-top:48px; padding-top:28px; border-top:1px solid var(--line)}
.form-error{color:var(--err); font-size:.92rem; min-height:1.4em}
.demo-note{font-size:.82rem; color:var(--stone); border:1px solid var(--line); padding:4px 10px}
.success{display:none; background:var(--paper); padding:clamp(40px,7vw,96px)}
.success h3{font-weight:400; font-size:clamp(2rem,3.6vw,3rem); line-height:1.1; letter-spacing:-.04em}
.success p{margin-top:20px; color:var(--stone); max-width:52ch}
.done form{display:none} .done .success{display:block}

/* steckbrief */
.brief{background:var(--paper); border-top:2px solid var(--ink); padding:16px 18px 14px; font-size:.84rem; line-height:1.45}
.brief-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.brief .t{font-weight:500; font-size:1.05rem; line-height:1.25; letter-spacing:-.01em}
.brief .tag{font-size:.74rem; color:var(--stone); border:1px solid var(--line); padding:1px 7px; white-space:nowrap}
.brief .a{margin-top:2px}
.brief dl{display:grid; grid-template-columns:auto 1fr; gap:5px 16px; margin:12px 0 0; padding-top:10px; border-top:1px solid var(--line)}
.brief dt{color:var(--stone)} .brief dd{margin:0}
.brief .open{color:var(--stone); opacity:.7}
.brief-slot{padding:0 14px 14px}
.brief-slot .brief{box-shadow:0 1px 2px rgba(0,0,0,.05)}
/* examples */
.examples{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,40px); margin-top:56px}
.ex-wall{background:var(--wall); padding:clamp(28px,6vw,64px) clamp(24px,5vw,56px) clamp(24px,4vw,40px); display:flex; flex-direction:column}
.ex-art{display:flex; justify-content:center; align-items:center; min-height:clamp(220px,30vw,380px)}
.ex-art .frame{width:var(--fw)}
.ex-wall .brief{margin-top:clamp(28px,4vw,44px); align-self:flex-end; width:min(100%,300px); box-shadow:0 1px 2px rgba(0,0,0,.06)}
.frame{position:relative; box-shadow:0 1px 1px rgba(30,25,20,.08),0 14px 28px -12px rgba(30,25,20,.32),0 30px 60px -30px rgba(30,25,20,.25)}
.frame svg{width:100%; height:auto; display:block}
.frame--oak{padding:clamp(5px,1.2%,9px); background:linear-gradient(135deg,#C2AA88,#A88F6C)}
.frame--dark{padding:clamp(5px,1.1%,8px); background:#1C2522}
.frame--dark .mat{background:#FBF8F1; padding:7%}
.ex-cta{display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; margin-top:48px}
@media (max-width:820px){.examples{grid-template-columns:1fr}}
.works-fits{grid-column:1/-1}
.ex-h{grid-column:1/span 7} .ex-p{grid-column:9/span 4; align-self:end}
@media (max-width:820px){.ex-h,.ex-p{grid-column:1/-1} .ex-p{margin-top:18px}}
/* faq + footer */
.faq-list{grid-column:6/span 7; border-top:1px solid var(--ink)}
.faq .grid12>h2{grid-column:1/span 4}
details{border-bottom:1px solid var(--line)}
summary{list-style:none; cursor:pointer; padding:22px 40px 22px 0; position:relative; font-weight:400; font-size:1.15rem; letter-spacing:-.015em}
summary::-webkit-details-marker{display:none}
summary::after,summary::before{content:""; position:absolute; right:6px; top:50%; width:14px; height:1px; background:var(--ink); transition:transform .35s var(--ease)}
summary::before{transform:rotate(90deg)} details[open] summary::before{transform:rotate(0)}
details .ans{padding:0 0 24px; color:var(--stone); max-width:60ch}
@media (max-width:900px){.faq .grid12>h2,.faq-list{grid-column:1/-1} .faq-list{margin-top:40px}}
footer{background:var(--night); color:var(--on-night); padding-block:56px calc(40px + env(safe-area-inset-bottom,0px)); font-size:.86rem}
footer .wrap{display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:24px}
footer .logo{height:24px; margin-bottom:14px}
footer .claim{opacity:.75}
footer nav{display:flex; flex-wrap:wrap; gap:4px 24px}
footer a{text-decoration:none; display:inline-flex; min-height:44px; align-items:center; opacity:.85} footer a:hover{opacity:1; text-decoration:underline; text-underline-offset:4px}

/* ===== Website: Navigation, Sprache, Unterseiten ===== */
:root{--navh:72px}
.i18n-pending body{visibility:hidden}
.hero{padding-top:var(--navh)}
.nav-links{display:flex; gap:28px; margin-left:clamp(16px,4vw,56px)}
.nav-links a{display:inline-flex; align-items:center; min-height:44px; text-decoration:none; font-size:.93rem; background:linear-gradient(currentColor,currentColor) 0 calc(100% - 10px)/0 1px no-repeat; transition:background-size .3s var(--ease)}
.nav-links a:hover,.nav-links a[aria-current=page]{background-size:100% 1px}
.nav-tools{margin-left:auto; display:flex; align-items:center; gap:10px}
.nav .btn{margin-left:0}
.lang{min-height:42px; min-width:46px; padding:0 12px; background:none; border:1px solid var(--line); border-radius:1px; font-size:.86rem; font-weight:500; cursor:pointer; transition:border-color .2s}
.lang:hover{border-color:var(--ink)}
@media (max-width:820px){
  :root{--navh:118px}
  .nav{background:var(--paper); border-bottom-color:var(--line)}
  .nav-in{flex-wrap:wrap; height:auto; padding-top:8px; gap:0 16px}
  .nav-links{order:3; width:100%; margin-left:0; gap:22px; overflow-x:auto}
}
.page-head{padding:calc(var(--navh) + clamp(48px,8vw,104px)) 0 clamp(40px,6vw,72px)}
.page-head h1{font-weight:400; font-size:clamp(2.4rem,4.4vw,4.2rem); line-height:1.06; letter-spacing:-.04em; max-width:18ch}
.page-head h1 span{display:block; color:var(--stone)}
.page-head .lead{max-width:52ch; margin-top:28px; color:var(--stone)}
.band{background:var(--wall)}
.process--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){.process--4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.process--4{grid-template-columns:1fr}}

/* Startseite: zwei Einstiege */
.doors{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,3vw,40px)}
.door{background:var(--wall); padding:clamp(28px,5vw,56px); display:flex; flex-direction:column; gap:16px; text-decoration:none; min-height:300px; transition:background .3s var(--ease)}
.door:hover{background:var(--wall-deep)}
.door h3{font-size:clamp(1.7rem,2.6vw,2.3rem); letter-spacing:-.03em}
.door p{color:var(--stone); max-width:38ch}
.door .link{margin-top:auto; align-self:flex-start}
@media (max-width:820px){.doors{grid-template-columns:1fr}}

/* Pakete */
.plans{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,32px); margin-top:56px}
.plan{background:var(--paper); border:1px solid var(--line); padding:clamp(24px,3vw,40px); display:flex; flex-direction:column}
.plan .price{font-size:clamp(2.2rem,3.4vw,3rem); line-height:1; letter-spacing:-.04em; margin-top:20px}
.plan .per{font-size:.9rem; color:var(--stone); letter-spacing:0}
.plan .gross{font-size:.82rem; color:var(--stone); margin-top:8px}
.plan ul{list-style:none; margin:24px 0 28px; padding:0}
.plan li{padding:11px 0; border-top:1px solid var(--line); font-size:.93rem}
.plan .btn{margin-top:auto}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.terms{margin-top:28px; color:var(--stone); max-width:70ch}
.calc{margin-top:clamp(56px,7vw,88px); background:var(--paper); padding:clamp(24px,4vw,56px); display:grid; grid-template-columns:1fr 1fr; gap:32px clamp(24px,4vw,64px)}
.calc h3{font-size:clamp(1.5rem,2.2vw,1.9rem)}
.calc p{margin-top:12px; color:var(--stone); max-width:46ch}
.calc-form{display:grid; grid-template-columns:1fr 1fr; gap:18px 16px; align-content:start}
.calc-out{grid-column:1/-1; padding-top:18px; border-top:1px solid var(--line)}
.calc-out strong{display:block; font-weight:400; font-size:clamp(1.8rem,2.8vw,2.4rem); letter-spacing:-.03em; line-height:1.1}
@media (max-width:820px){.calc{grid-template-columns:1fr}}
@media (max-width:420px){.calc-form{grid-template-columns:1fr}}
.split{display:grid; grid-template-columns:repeat(12,1fr); gap:0 24px; align-items:end}
.split h2{grid-column:1/span 7}
.split .side{grid-column:9/span 4}
.split .side p{color:var(--stone)}
.split .hero-cta{margin-top:24px}
@media (max-width:820px){.split h2,.split .side{grid-column:1/-1} .split .side{margin-top:18px}}

/* Bibliothek */
.lib{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:clamp(20px,2.4vw,32px)}
.lib-card{background:var(--wall); padding:24px; display:flex; flex-direction:column; gap:20px}
.lib-card .pic{display:flex; justify-content:center; align-items:center; min-height:240px}
.lib-card .pic img{max-height:300px; width:auto; box-shadow:0 1px 1px rgba(30,25,20,.08),0 14px 28px -12px rgba(30,25,20,.32)}
.lib-card .brief{box-shadow:0 1px 2px rgba(0,0,0,.05)}
.lib-card .fee{font-size:.84rem; color:var(--stone)}
.lib-card .btn{align-self:flex-start; min-height:44px; padding:0 20px; font-size:.9rem}
.empty{border:1px dashed var(--stone); padding:clamp(32px,6vw,80px); text-align:center}
.empty h2{font-size:clamp(1.6rem,2.6vw,2.2rem)}
.empty p{margin:14px auto 28px; color:var(--stone); max-width:48ch}

/* Login */
.auth{max-width:520px; background:var(--paper); padding:clamp(24px,5vw,48px)}
.tabs{display:flex; border-bottom:1px solid var(--line); margin-bottom:28px}
.tab{flex:1; min-height:48px; background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; color:var(--stone)}
.tab[aria-selected=true]{border-bottom-color:var(--ink); color:var(--ink); font-weight:500}
.auth form{background:none; padding:0; display:grid; gap:20px}
input[type=password]{width:100%; min-height:50px; padding:12px 14px; background:var(--field); border:1px solid var(--line); border-radius:1px; font-size:16px}
input[type=password]:focus{outline:none; border-color:var(--ink)}
.auth .switch{font-size:.9rem; color:var(--stone)}
.auth .switch button{background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px; color:var(--forest)}
.auth-msg{font-size:.92rem; min-height:1.4em}
.auth-msg.is-err{color:var(--err)}

/* Wand-Check */
.wc{position:relative; max-width:720px; aspect-ratio:3/4; max-height:78vh; margin:0 auto; overflow:hidden; background:var(--wall-deep); touch-action:none; user-select:none}
.wc video,.wc .wc-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:none}
.wc.is-cam video,.wc.is-photo .wc-bg{display:block}
.wc-art{position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); cursor:grab; box-shadow:0 2px 3px rgba(20,15,10,.2),0 22px 40px -14px rgba(20,15,10,.55)}
.wc-art:active{cursor:grabbing}
.wc-art img{display:block; width:100%; height:100%; pointer-events:none}
.wc-bar{max-width:720px; margin:20px auto 0; display:grid; gap:18px}
.wc-row{display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center}
.wc-row .btn{min-height:46px; padding:0 20px}
.wc-row input[type=file]{position:absolute; width:1px; height:1px; opacity:0}
.wc-range{display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; font-size:.9rem}
.wc-range input{width:100%; accent-color:var(--ink)}
.wc-note{font-size:.84rem; color:var(--stone)}

/* Rechtstexte */
.legal{max-width:760px}
.legal h2{font-weight:500; font-size:1.2rem; letter-spacing:-.015em; line-height:1.3; margin:48px 0 10px; padding-top:24px; border-top:1px solid var(--line)}
.legal h3{font-weight:500; font-size:1rem; margin:28px 0 6px}
.legal p,.legal li{color:#2E3633; max-width:68ch}
.legal p{margin:0 0 14px}
.legal a{color:var(--forest); text-underline-offset:3px}
.ph{background:var(--sand); color:var(--ink); padding:1px 6px}
.draft{background:var(--wall); border-left:3px solid var(--sage); padding:16px 20px; font-size:.9rem; margin-bottom:40px}
.draft p{margin:0}
footer .legalname{opacity:.75}

/* Konto: Aufträge mit Phasen */
.order{background:var(--paper); border:1px solid var(--line); padding:clamp(20px,3vw,36px); margin-top:20px}
.order-head{display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:6px 16px}
.order-head .small{color:var(--stone)}
.steps{list-style:none; margin:22px 0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:8px}
.steps li{padding-top:10px; border-top:2px solid var(--line); font-size:.8rem; color:var(--stone)}
.steps li.is-done{border-top-color:var(--sage); color:var(--ink)}
.steps li.is-now{border-top-color:var(--ink); color:var(--ink); font-weight:500}
@media (max-width:560px){.steps{grid-template-columns:1fr} .steps li{padding:8px 0 0}}
.order p{max-width:62ch}
.order .note{margin-top:12px; background:var(--sand-soft); padding:12px 16px; font-size:.92rem}
.order-actions{display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; margin-top:18px}
.order-actions .btn{min-height:46px; padding:0 20px}
.order-actions input[type=file]{position:absolute; width:1px; height:1px; opacity:0}
.acct-list{list-style:none; margin:20px 0 0; padding:0; border-top:1px solid var(--line)}
.acct-list li{display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--line)}
.acct-list .muted{white-space:nowrap}
.acct-h{margin-top:clamp(56px,7vw,88px)}
footer .about{opacity:.75; margin-top:10px}