/* Thema Handwerk und Elektro (/rechnung) · Werkstatt, Zollstock, Durchschreibeblock, Rechnung auf Papier */
@font-face{font-family:Caveat;src:url(/assets/fonts/caveat-latin-500-normal.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Caveat;src:url(/assets/fonts/caveat-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex Mono';src:url(/assets/fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}

body.th-handwerk{--paper:#eceeec;--ink:#1c1f21;--muted:#4f5754;--line:#d1d6d3;--sig:#f2c200;--sig-d:#7a5f00;--gr:#23282a;--gr2:#2b3134;--grl:#3a4246;--pen:#1f3a93}
.th-handwerk .eyebrow{color:var(--sig-d)}

/* Zollstock: Zeitleiste vom Aufmaß bis zur Rechnung */
.zollstock{margin-top:34px;max-width:1040px}
.zs-cap{font:600 12px 'Plex Mono',ui-monospace,monospace;color:var(--muted);margin-bottom:8px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.zs-cap b{color:var(--ink)}
.zs-bar{position:relative;display:grid;grid-template-columns:repeat(4,1fr);height:62px;border-radius:3px;background:var(--sig);box-shadow:0 10px 24px -14px rgba(60,45,0,.8),inset 0 -2px 0 rgba(0,0,0,.12)}
.zs-bar::before{content:"";position:absolute;inset:0 0 auto 0;height:18px;background:
  repeating-linear-gradient(90deg,#1c1f21 0 1px,transparent 1px 8px) 0 0/100% 7px no-repeat,
  repeating-linear-gradient(90deg,#1c1f21 0 1.5px,transparent 1.5px 40px) 0 0/100% 14px no-repeat;opacity:.85}
.zs-bar>div{position:relative;padding:22px 12px 0;border-left:2px solid rgba(0,0,0,.28);font:600 13px/1.25 Inter,sans-serif;color:#1c1f21}
.zs-bar>div:first-child{border-left:0}
.zs-bar>div::after{content:"";position:absolute;left:-7px;top:26px;width:12px;height:12px;border-radius:50%;background:#c9a000;box-shadow:inset 0 0 0 2px rgba(0,0,0,.25)}
.zs-bar>div:first-child::after{display:none}
.zs-bar time{display:block;font:600 11px 'Plex Mono',monospace;color:rgba(28,31,33,.75)}
.zs-old{margin-top:10px;font-size:14px;color:var(--muted)}.zs-old s{color:#9b2c2c;text-decoration-thickness:2px}

/* App: Werkstatt links, Papier rechts */
.th-handwerk .app{background:var(--gr);box-shadow:0 40px 80px -40px rgba(20,24,26,.65)}
.th-handwerk .app-bar{background:#1a1e20;border-color:var(--grl)}
.th-handwerk .app-tag{color:var(--sig);border-color:rgba(242,194,0,.4)}
.th-handwerk .in-pane{background:var(--gr2);border-color:var(--grl)}
.th-handwerk .d-tab{border-color:var(--grl)}
.th-handwerk .d-tab[aria-selected=true]{background:rgba(242,194,0,.12);border-color:var(--sig);color:#fff}
.th-handwerk .d-tab[aria-selected=true] small{color:#e8d27a}
/* Sprachnotiz als Chatnachricht */
.th-handwerk .voice{background:#dff6d6;border:0;border-radius:4px 16px 16px 16px;position:relative;max-width:92%;padding-bottom:22px}
.th-handwerk .voice .play{background:#2e7d4f}.th-handwerk .voice .play::after{border-left-color:#fff}
.th-handwerk .voice .wave i{background:#2e7d4f;opacity:.75}
.th-handwerk .voice::after{content:"0:51 ✓✓";position:absolute;right:12px;bottom:4px;font:600 10px Inter,sans-serif;color:#4c7d5d}
.th-handwerk .transcript{color:#eef1ef}
.th-handwerk .transcript mark{background:rgba(242,194,0,.3);color:#fff;border-radius:3px;box-shadow:none;outline:0}
/* Aufmaßzettel als gelber Durchschlag */
.th-handwerk .sheet{background:#fff4b8;color:var(--pen);border-radius:2px;transform:rotate(-1.4deg);padding:26px 20px 22px 44px;
  background-image:radial-gradient(circle at 6px 6px,rgba(0,0,0,.18) 2.5px,transparent 3px),linear-gradient(90deg,transparent 30px,rgba(192,57,43,.55) 30px 31.5px,transparent 31.5px),repeating-linear-gradient(180deg,transparent 0 27px,rgba(31,58,147,.22) 27px 28px);
  background-size:14px 14px,100% 100%,100% 100%;background-repeat:repeat-x,no-repeat,repeat;background-position:0 0,0 0,0 10px;
  box-shadow:0 14px 28px -14px rgba(0,0,0,.75)}
.th-handwerk .sheet ul,.th-handwerk .sheet-sig{font:500 21px/28px Caveat,'Bradley Hand',cursive}
.th-handwerk .sheet-h{font:600 11px/28px 'Plex Mono',monospace;color:#b03a2e;letter-spacing:.08em}
.th-handwerk .sheet-h::after{content:" · Durchschlag · Blatt 1/1";color:rgba(176,58,46,.7)}
.th-handwerk .sheet mark{background:rgba(242,194,0,.65);color:var(--pen)}
.th-handwerk .sheet-sig{color:var(--pen)}
.th-handwerk #d-own{background:#fff4b8;color:var(--pen);font:500 20px/1.35 Caveat,cursive;border:0;border-radius:2px}
.th-handwerk .btn.run{background:var(--sig);color:#1c1f21}.th-handwerk .btn.run:hover{background:#ffd21a}

/* Rechnung auf Papier */
.th-handwerk .out-pane{background:#fff;color:var(--ink)}
.th-handwerk .out-pane .pane-h{color:var(--ink);font:800 22px Inter,sans-serif;letter-spacing:-.01em;text-transform:none;padding-bottom:12px;border-bottom:3px solid var(--sig);margin-bottom:14px}
.th-handwerk .steps li{border-color:var(--line);color:#8a948f;font-weight:600}
.th-handwerk .steps[data-step="1"] li:nth-child(1),.th-handwerk .steps[data-step="2"] li:nth-child(-n+2),.th-handwerk .steps[data-step="3"] li{background:#1c1f21;border-color:#1c1f21;color:var(--sig)}
.th-handwerk .project{color:var(--ink)}.th-handwerk .mode{color:var(--muted)}
.th-handwerk .empty{border-color:var(--line);color:#8a948f}
.th-handwerk .inv th{color:#6b736f;border-color:#1c1f21;border-bottom-width:2px;font-family:'Plex Mono',monospace;font-weight:600}
.th-handwerk .inv td{border-color:#e3e6e4}
.th-handwerk .d-nr{color:#1c1f21;font-family:'Plex Mono',monospace;font-weight:600}
.th-handwerk .d-name small{color:#7b847f}
.th-handwerk .d-qty input{background:#f6f7f6;border-color:#cfd4d1;color:var(--ink)}
.th-handwerk .d-qty input:focus{border-color:var(--sig-d)}
.th-handwerk .d-qty span{color:#6b736f}
.th-handwerk .d-ep input.ep{background:#fff8d6;border-color:#c99a00;color:var(--ink)}
.th-handwerk .tag{background:#eef0ef;color:#4f5754}
.th-handwerk .tag-lv{background:#e3ecfb;color:#1e4e9c}
.th-handwerk .tag-angebot{background:#e2f3e8;color:#1f6b41}
.th-handwerk .tag-mehrleistung,.th-handwerk .tag-nachtrag{background:#fff0c2;color:#7a5200}
.th-handwerk .d-row.is-extra td{background:#fffbe8}
.th-handwerk .ltext{background:#f6f7f6;border-color:#e3e6e4}
.th-handwerk .ltext .asks-h{color:#6b736f}.th-handwerk #d-text-v{color:var(--ink)}
.th-handwerk .asks{background:#fff4b8;border:0;border-radius:2px;transform:rotate(.4deg);box-shadow:0 8px 18px -12px rgba(0,0,0,.5)}
.th-handwerk .asks-h{color:#7a5200}.th-handwerk .asks li{color:#3d3200}.th-handwerk .asks li::before{color:#b07d00}
.th-handwerk .totals div{color:#6b736f}.th-handwerk .totals b{color:var(--ink)}
.th-handwerk .totals .g{border-color:#1c1f21}.th-handwerk .totals .g b{color:#1c1f21}
.th-handwerk .ghost{color:var(--ink);border-color:#cfd4d1}.th-handwerk .ghost:hover{border-color:#1c1f21}
.th-handwerk .approved{color:#1f6b41}.th-handwerk .app.needs-price .approved{color:#9a5b00}
.th-handwerk .time{color:#8a948f}

/* Abschnitte darunter */
.th-handwerk .how-grid .accent{background:var(--gr);border-color:var(--gr)}
.th-handwerk .how-grid .accent .n{background:var(--sig);color:#1c1f21}
.th-handwerk .win div{background:#fff;border-left:4px solid var(--sig)}
.th-handwerk .plan-grid .report{background:var(--gr);border-color:var(--gr)}
.th-handwerk .plan-grid .report .n{background:var(--sig);color:#1c1f21}
.th-handwerk .rep-h{color:var(--sig)}
.th-handwerk .modules{background:#fff;border:1px solid var(--line)}
.th-handwerk .modules li.on{background:var(--gr);border-color:var(--gr)}

@media (max-width:640px){
  .zs-bar{grid-template-columns:1fr 1fr;height:auto}
  .zs-bar>div{padding:20px 10px 10px}.zs-bar>div:nth-child(3){border-left:0}.zs-bar>div:nth-child(3)::after{display:none}
  .th-handwerk .sheet{padding-left:40px}
}
@media print{.zollstock{display:none}.th-handwerk .out-pane .pane-h{border-bottom-color:#000}.th-handwerk .asks{display:none}}

@media (max-width:640px){.top .btn.small{margin-left:auto}}

/* Abspieler und WhatsApp-Rückfrage */
.th-handwerk .voice .play{color:#fff}
.th-handwerk .voice[data-time]::after{content:attr(data-time) " ✓✓";color:#4c7d5d}
.th-handwerk .chat{margin-top:14px;background:#e9e3da;border-radius:12px;padding:10px 12px 12px;display:grid;gap:8px;background-image:radial-gradient(rgba(0,0,0,.04) 1px,transparent 1px);background-size:10px 10px}
.th-handwerk .chat-h{font:600 11px Inter,sans-serif;color:#5d6a63;text-align:center}
.th-handwerk .msg{max-width:88%;padding:7px 10px 16px;border-radius:10px;position:relative;font-size:13.5px;line-height:1.45;color:#1c1f21;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.th-handwerk .msg.out{justify-self:end;background:#d9fdd3;border-top-right-radius:2px}
.th-handwerk .msg.in{justify-self:start;background:#fff;border-top-left-radius:2px}
.th-handwerk .msg time{position:absolute;right:8px;bottom:2px;font-size:10px;color:#6b7a72}
.th-handwerk .msg.typing p{display:flex;gap:4px;padding:3px 2px}
.th-handwerk .msg.typing i{width:6px;height:6px;border-radius:50%;background:#9aa59f;animation:typ 1s infinite}
.th-handwerk .msg.typing i:nth-child(2){animation-delay:.15s}.th-handwerk .msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes typ{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}
.th-handwerk .ask-send{margin-top:10px;background:#1f6b41;color:#fff;border-color:#1f6b41;font-weight:700}
.th-handwerk .ask-send:hover{background:#185a36;border-color:#185a36}
.th-handwerk .ask-send:disabled{opacity:.7;cursor:progress}
.th-handwerk .solved{list-style:none;margin-top:10px;display:grid;gap:4px}
.th-handwerk .solved li{font-size:13px;color:#1f6b41;padding-left:20px;position:relative}
.th-handwerk .solved li::before{content:"✓";position:absolute;left:2px;font-weight:800}
@media print{.th-handwerk .chat,.th-handwerk .solved,.ask-send{display:none!important}}

/* Eingang als Smartphone mit Chat */
.th-handwerk .d-meta{display:none}
.th-handwerk .d-in[data-kind=voice],.th-handwerk .d-in[data-kind=photo]{position:relative;max-width:360px;margin:14px auto 0;border:9px solid #0d0f10;border-radius:30px;padding:62px 12px 18px;
  background:#ece5dd radial-gradient(rgba(0,0,0,.05) 1px,transparent 1px) 0 0/12px 12px;box-shadow:0 24px 40px -22px rgba(0,0,0,.9),inset 0 0 0 1px rgba(255,255,255,.04)}
.th-handwerk .d-in[data-kind=voice]::before,.th-handwerk .d-in[data-kind=photo]::before{content:attr(data-who);position:absolute;left:0;right:0;top:0;height:50px;padding:15px 14px 0 58px;background:#1e5f4f;color:#fff;font:700 14px Inter,sans-serif;border-radius:20px 20px 0 0}
.th-handwerk .d-in[data-kind=voice]::after,.th-handwerk .d-in[data-kind=photo]::after{content:"👷";position:absolute;left:14px;top:9px;width:32px;height:32px;border-radius:50%;background:#f2c200;display:grid;place-items:center;font-size:17px;line-height:32px;text-align:center}
.th-handwerk .d-in .voice{margin:0;max-width:86%}
.th-handwerk .transcript-l{color:#6b7a72;font-size:10.5px;margin:10px 0 4px 2px}
.th-handwerk .d-in[data-kind=voice] .transcript{background:#fff;color:#1c1f21;border-radius:3px 14px 14px 14px;padding:10px 12px;font-size:14px;line-height:1.55;max-width:92%;box-shadow:0 1px 1px rgba(0,0,0,.1)}
.th-handwerk .d-in[data-kind=voice] .transcript mark{color:#1c1f21;background:rgba(242,194,0,.45)}
.th-handwerk .transcript .seg.now{background:rgba(30,95,79,.14);box-shadow:0 0 0 2px rgba(30,95,79,.14)}
.th-handwerk .d-in[data-kind=photo] .sheet{transform:none;border:6px solid #fff;border-radius:12px;box-shadow:0 1px 2px rgba(0,0,0,.18);padding-top:22px}
.th-handwerk .d-in[data-kind=photo] .sheet ul,.th-handwerk .d-in[data-kind=photo] .sheet-sig{font-size:19px;line-height:26px}
.th-handwerk .in-pane:has(#d-chat:not([hidden])) .d-in:not([hidden]){border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0}
.th-handwerk .chat{max-width:360px;width:100%;margin:0 auto;border:9px solid #0d0f10;border-top:0;border-radius:0 0 30px 30px;background:#ece5dd radial-gradient(rgba(0,0,0,.05) 1px,transparent 1px) 0 0/12px 12px}
.th-handwerk .chat-h{display:none}

.th-handwerk .d-in[data-kind=photo] .sheet-h::after{content:" · Durchschlag"}

/* ═══ Ganze Seite: Werkstatt und Baustelle ═══ */
@font-face{font-family:'Barlow Cond';src:url(/assets/fonts/barlow-condensed-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Barlow Cond';src:url(/assets/fonts/barlow-condensed-latin-800-normal.woff2) format('woff2');font-weight:800;font-display:swap}
.th-handwerk h1,.th-handwerk h2,.th-handwerk h3{font-family:'Barlow Cond',Inter,sans-serif;letter-spacing:-.005em}
/* Kopfzeile */
.th-handwerk .top{background:#16191b;border-bottom:3px solid var(--sig)}
.th-handwerk .top .brand{color:#fff}.th-handwerk .top .brand span{color:var(--sig)}
.th-handwerk .top nav a{color:#c9cfcc}.th-handwerk .top nav a:hover{color:#fff}
.th-handwerk .btn{background:var(--sig);color:#16191b;border-radius:4px;font-weight:800}
.th-handwerk .btn:hover{background:#ffd21a}
/* Einstieg auf dunklem Grund */
.th-handwerk .hero{position:relative;color:#eef1ef;padding-bottom:9vh;background:#1c1f21;box-shadow:0 0 0 100vmax #1c1f21;clip-path:inset(0 -100vmax)}
.th-handwerk .hero .eyebrow{color:var(--sig)}
.th-handwerk .hero h1{font-weight:800;font-size:clamp(54px,7.4vw,112px);line-height:.94;max-width:12em;color:#fff}
.th-handwerk .hero h1 em{font-style:normal;color:var(--sig)}
.th-handwerk .lead{color:#c3cac6}
.th-handwerk .flow li{background:#262b2e;border-color:#3a4246;color:#eef1ef;border-radius:4px}
.th-handwerk .flow span{background:var(--sig);color:#16191b;border-radius:3px}
.th-handwerk .flow li:last-child{background:var(--sig);border-color:var(--sig);color:#16191b}.th-handwerk .flow li:last-child span{background:#16191b;color:var(--sig)}
.th-handwerk .hero .link{color:#fff}
.th-handwerk .zs-cap,.th-handwerk .zs-cap b{color:#dfe4e1}
.th-handwerk .zs-old{color:#aab3ae}.th-handwerk .zs-old s{color:#ff8a7a}
.th-handwerk .for{background:var(--sig);color:#16191b}
/* Demo-Kopf */
.th-handwerk .demo-head h2{font-weight:800;font-size:clamp(40px,4.6vw,64px)}
/* Ablauf als Arbeitszettel */
.th-handwerk .how h2,.th-handwerk .plan h2,.th-handwerk .faq h2,.th-handwerk .final h2{font-weight:800;font-size:clamp(38px,4.4vw,62px);line-height:1}
.th-handwerk .how-grid{gap:18px}
.th-handwerk .how-grid article{border:0;border-radius:2px;background:#fff;padding:30px 22px 22px;position:relative;box-shadow:0 10px 22px -16px rgba(0,0,0,.5);
  background-image:radial-gradient(circle at 10px 10px,#eceeec 4px,transparent 4.5px);background-size:22px 20px;background-repeat:repeat-x}
.th-handwerk .how-grid article:nth-child(odd){transform:rotate(-.6deg)}.th-handwerk .how-grid article:nth-child(even){transform:rotate(.5deg)}
.th-handwerk .how-grid article::after{content:"";position:absolute;left:50%;top:-8px;width:64px;height:18px;margin-left:-32px;background:rgba(242,194,0,.75);transform:rotate(-2deg)}
.th-handwerk .how-grid .n{font:800 30px 'Barlow Cond',sans-serif;width:auto;height:auto;background:none;color:var(--sig-d)}
.th-handwerk .how-grid .n::before{content:"Schritt "}
.th-handwerk .how-grid h3{font-size:26px;font-weight:800}
.th-handwerk .how-grid .accent{background:var(--gr);background-image:none}.th-handwerk .how-grid .accent .n{color:var(--sig);background:none}
.th-handwerk .win div{background:var(--gr);color:#eef1ef;border-left:6px solid var(--sig);border-radius:2px}
.th-handwerk .win b{font:800 24px 'Barlow Cond',sans-serif;color:#fff}.th-handwerk .win span{color:#c3cac6}
/* Zusammenarbeit als Auftragsschein */
.th-handwerk .plan-grid article{border:2px dashed #b9c1bd;border-radius:2px;background:#fff}
.th-handwerk .plan-grid .n{border-radius:3px;background:#16191b;color:var(--sig)}
.th-handwerk .plan-grid h3{font-size:26px;font-weight:800}
.th-handwerk .plan-grid .report{border:0;background:#16191b}
.th-handwerk .rep b{font-family:'Barlow Cond',sans-serif;font-weight:800;font-size:32px;color:var(--sig)}
.th-handwerk .modules{background:#16191b;border:0;border-radius:2px;color:#eef1ef}
.th-handwerk .modules li{background:transparent;border:1.5px solid #4a5357;color:#dfe4e1;border-radius:3px}
.th-handwerk .modules li.on{background:var(--sig);border-color:var(--sig);color:#16191b}
/* Fragen wie Werkzeugkiste */
.th-handwerk .faq details{border-bottom:2px solid #d1d6d3}
.th-handwerk .faq summary{font:800 23px 'Barlow Cond',sans-serif}
.th-handwerk .faq summary::after{color:#16191b;background:var(--sig);width:26px;height:26px;display:inline-grid;place-items:center;border-radius:3px;flex-shrink:0}
/* Abschluss als Werkstattschild */
.th-handwerk .final{background:#16191b;border:0;border-radius:4px;color:#eef1ef;box-shadow:inset 0 0 0 6px #16191b,inset 0 0 0 8px var(--sig)}
.th-handwerk .final h2 em{font-style:normal;color:var(--sig)}
.th-handwerk .final p{color:#c3cac6}.th-handwerk .final .link{color:#fff}
.th-handwerk .final img{border-color:var(--sig);border-radius:4px}
.th-handwerk .foot{background:#16191b;color:#aab3ae;border:0}.th-handwerk .foot a{color:#dfe4e1}
@media (max-width:640px){.th-handwerk .hero h1{font-size:52px}.th-handwerk .how-grid article{transform:none!important}}
.th-handwerk .how-grid .n{display:block;width:auto;height:auto;text-align:left}