:root{--ink:#27313a;--teal:#087f8c;--orange:#e87722;--green:#357a52;--paper:#f2f4f5}*{box-sizing:border-box}body{margin:0;background:#f5f6f5;color:var(--ink);font-family:Arial,Helvetica,sans-serif}a{color:inherit}button,input{font:inherit}.top{height:78px;background:#fff;border-bottom:1px solid #e4e8e8;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,24px)}.brand{display:flex;align-items:center;gap:11px;text-decoration:none}.brand-mark{width:39px;height:39px;background:var(--ink);color:white;display:grid;place-content:center;font-weight:900;font-size:14px;letter-spacing:-2px}.brand-mark span{color:#6cc0b8}.brand strong{display:block;font-size:17px;letter-spacing:.06em}.brand small{display:block;font-size:8px;letter-spacing:.16em;margin-top:3px}.publisher{font-size:12px;color:#718087}.publisher a{font-weight:bold;color:var(--ink);text-decoration:none}main{max-width:1400px;margin:auto;padding:0 5vw}.intro{display:flex;justify-content:space-between;align-items:end;padding:63px 0 42px;gap:30px}.intro>div:first-child{max-width:780px}.eyebrow,.kicker{font-size:10px;font-weight:800;letter-spacing:.16em;color:var(--teal);margin:0 0 17px}.eyebrow span{display:inline-block;width:24px;height:2px;background:var(--teal);vertical-align:middle;margin-right:9px}h1{font-size:clamp(37px,5vw,67px);line-height:1.04;letter-spacing:-.045em;margin:0;font-weight:750}h1 em{font-style:normal;color:var(--teal)}.lead{font-size:16px;line-height:1.65;color:#657178;max-width:625px;margin:20px 0 0}.intro-tag{border-left:1px solid #cdd6d4;padding-left:19px;min-width:145px;display:grid;gap:6px}.intro-tag span,.intro-tag small{font-size:10px;letter-spacing:.1em;color:#7d898d}.intro-tag strong{font-size:38px;line-height:1;color:#bccbc7}.workspace{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(360px,1.15fr);gap:18px}.panel{background:#fff;border:1px solid #e4e9e7;padding:30px}.section-head{display:flex;justify-content:space-between;align-items:start}.section-head .kicker{margin-bottom:9px}h2{font-size:25px;letter-spacing:-.035em;margin:0}.head-icon{font-size:24px;color:#a1b2ae}.muted{font-size:13px;color:#7b878b;margin:10px 0 29px}.field{margin-bottom:25px}.field-top{display:flex;align-items:center;justify-content:space-between;gap:12px}.field label{font-size:14px;font-weight:bold}.field label small{display:block;color:#8b9698;font-size:11px;font-weight:normal;margin-top:5px}.number-wrap{display:flex;align-items:center;border:1px solid #d9e0df;background:#f9fbfa;padding:0 10px;width:105px;height:43px}.number-wrap:focus-within{outline:2px solid var(--teal)}.number-wrap input{width:100%;border:0;outline:0;background:transparent;text-align:right;color:var(--ink);font-weight:bold;min-width:0}.number-wrap span{color:#84908f;font-size:12px;margin-left:6px}input[type=range]{width:100%;margin:17px 0 0;accent-color:var(--teal);cursor:pointer}.range-labels{display:flex;justify-content:space-between;color:#a2adab;font-size:10px}.error{font-size:11px;color:#b23830;margin:4px 0 0;min-height:12px}.presets{border-top:1px solid #edf0ef;padding-top:22px}.label-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:13px}.label-row span{font-size:9px;letter-spacing:.12em;color:#9ba6a4}.chips{display:flex;flex-wrap:wrap;gap:7px}.chips button{background:#fff;border:1px solid #dce4e1;border-radius:3px;color:#4d6060;padding:8px 10px;cursor:pointer;font-size:11px}.chips button:hover,.chips button.active{border-color:var(--teal);color:var(--teal);background:#f0f8f7}.tiny{font-size:10px;color:#899695;line-height:1.5;margin:13px 0 0}.visual{display:flex;flex-direction:column}.live{font-size:10px;font-weight:bold;letter-spacing:.12em;color:var(--green)}.live i{display:inline-block;background:var(--green);width:7px;height:7px;border-radius:50%;margin-right:5px}.drawing{background:#f4f7f5;margin-top:23px;min-height:350px;flex:1;display:grid;place-items:center;overflow:hidden}.drawing svg{display:block;width:100%;height:auto;max-height:460px}.legend{display:flex;flex-wrap:wrap;gap:17px;margin-top:19px;color:#71807e;font-size:10px}.legend i{display:inline-block;width:11px;height:11px;margin-right:5px;vertical-align:-2px}.legend-wood{background:#d6b994}.legend-ring{border:1.5px solid #087f8c;border-radius:50%}.legend-reserve{background:#cfe4d7;border:1px solid #7fb398;border-radius:50%}.results{margin-top:18px;background:var(--ink);color:white;display:grid;grid-template-columns:1fr 1fr 1fr auto;align-items:center;gap:25px;padding:32px}.result-heading .kicker{color:#83c7bd;margin-bottom:8px}.result-heading h2{font-size:23px}.result-heading p:last-child,.result p{font-size:11px;color:#aebdbb;line-height:1.4;margin:8px 0 0}.result{border-left:1px solid #536067;padding-left:25px}.result span{display:block;font-size:9px;letter-spacing:.1em;line-height:1.5;color:#b9c7c4;min-height:28px}.result strong{font-size:38px;letter-spacing:-.04em}.result small{font-size:15px;margin-left:5px}.result-accent strong{color:#80c5b8}.share{background:var(--orange);border:0;color:white;font-weight:bold;padding:15px 18px;cursor:pointer;white-space:nowrap}.share:hover{background:#cf6518}.status{font-size:12px;color:#a84034;min-height:0}.status:not(:empty){padding:12px 0}.notes{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0 55px}details,.book{background:#fff;border:1px solid #e4e9e7;padding:25px 28px}summary{cursor:pointer;font-size:14px;font-weight:bold;list-style:none;display:flex;justify-content:space-between}summary::-webkit-details-marker{display:none}summary span{font-size:20px;color:var(--teal)}details p{font-size:13px;line-height:1.65;color:#697a78}.book{display:flex;align-items:center;justify-content:space-between;gap:20px;background:#e7f0ec}.book .kicker{margin-bottom:8px}.book h2{font-size:20px}.book p:last-child{font-size:12px;color:#657672}.book a{font-size:11px;font-weight:bold;text-decoration:none;white-space:nowrap}.book a span{color:var(--teal)}footer{border-top:1px solid #dfe5e2;padding:24px 5vw;display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.08em;color:#81908d}footer b{color:var(--teal)}footer a{text-decoration:none;color:var(--ink)}@media(max-width:800px){.workspace{grid-template-columns:1fr}.results{grid-template-columns:1fr 1fr}.result-heading{grid-column:1/-1}.share{grid-column:1/-1}.notes{grid-template-columns:1fr}.intro-tag{display:none}.intro{padding:42px 0 30px}.drawing{min-height:300px}}@media(max-width:440px){.top{height:68px}.publisher{font-size:0}.publisher a{font-size:11px}.panel{padding:22px}.results{padding:24px;gap:18px}.result{padding-left:13px}.result strong{font-size:30px}.result span{font-size:8px}.book{display:block}.book a{display:inline-block;margin-top:10px}footer{flex-direction:column}.legend{gap:10px}}
/* Kompakte Rechneransicht */
.intro{padding-top:42px;padding-bottom:28px}.workspace{grid-template-columns:minmax(300px,.8fr) minmax(400px,1.2fr);align-items:stretch}.panel{padding:24px}.muted{margin:8px 0 20px}.field{margin-bottom:15px}.field:last-child{margin-bottom:0}.field .error:empty{min-height:0;margin:0}.drawing{margin-top:12px;min-height:0;flex:none}.drawing svg{width:100%;max-width:650px;max-height:none}.legend{margin-top:10px}.results{margin-top:12px;padding:24px 28px}.preset-panel{margin-top:12px;padding:18px 24px;background:#fff;border:1px solid #e4e9e7}.presets{padding:0;border:0}.label-row{margin-bottom:10px}.chips button{min-height:44px}.notes{margin-top:12px}.number-wrap{height:46px}input[type=range]{height:32px;margin:8px 0 0;touch-action:pan-y}.share{min-height:48px}
@media(max-width:800px){.workspace{grid-template-columns:1fr;gap:12px}.visual{padding-bottom:18px}.drawing svg{max-width:520px}.results{margin-top:12px}.intro{padding:28px 0 22px}.lead{margin-top:12px}.notes{gap:12px}.intro-tag{display:none}}
@media(max-width:440px){main{padding:0 16px}.top{padding:0 16px}.intro{padding:25px 0 20px}h1{font-size:36px}.lead{font-size:14px;line-height:1.5}.panel{padding:18px}.muted{margin-bottom:15px}.field{margin-bottom:11px}.field label small{margin-top:3px}.drawing{margin-top:10px}.drawing svg{width:100%}.legend{gap:10px;font-size:10px}.results{padding:20px 18px;gap:12px}.result-heading h2{font-size:21px}.result-heading p:last-child{margin-top:4px}.result strong{font-size:30px}.preset-panel{padding:18px}.chips{gap:6px}.chips button{padding:8px 10px;font-size:11px}.notes{margin-bottom:32px}}
.export-actions{display:flex;flex-direction:column;gap:8px}.download{min-height:48px;padding:13px 16px;background:transparent;border:1px solid #a9bab7;color:#fff;font-weight:bold;white-space:nowrap;cursor:pointer}.download:hover{background:#3c4a50}.export-actions .share{width:100%}@media(max-width:800px){.export-actions{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}.export-actions .share{grid-column:auto}}@media(max-width:440px){.export-actions{grid-template-columns:1fr}.export-actions button{width:100%}}
.storage-choice{border-top:1px solid #e4e9e7;padding-top:16px;margin-top:5px}.storage-choice label{display:flex;align-items:flex-start;gap:9px;font-size:13px;font-weight:700;line-height:1.45;cursor:pointer}.storage-choice input{width:19px;height:19px;flex:none;accent-color:#087f8c;margin:0}.storage-choice p{font-size:11px;line-height:1.5;color:#697a78;margin:7px 0 0}.storage-choice #storage-status:not(:empty){color:#b23830;font-weight:700}.legal-links{display:flex;gap:16px}.legal-links a{text-decoration:underline;text-underline-offset:3px}