:root{color-scheme:light;--ink:#173c45;--muted:#45636a;--paper:#fff8e3;--green:#176c60;--purple:#854d9b;--yellow:#f5d478;--line:#d2d9c9;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:#0c2732;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,summary{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{min-height:48px;border:1px solid #aabcb0;border-radius:12px;background:#fffdf3;color:var(--ink);padding:11px 15px;font-weight:750;cursor:pointer;line-height:1.35}button:hover:not(:disabled){background:#edf4df;border-color:var(--green)}button:disabled{opacity:.55;cursor:default}button:focus-visible,input:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #7046a5;outline-offset:4px}button.primary{background:var(--green);color:#fff;border-color:var(--green)}button.primary:hover:not(:disabled){background:#12564e}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip-link{position:fixed;left:12px;top:-100px;background:white;padding:12px;z-index:50;color:var(--ink)}.skip-link:focus{top:12px}
.learning-shell{padding:14px max(24px,calc((100vw - 1350px)/2));background:#12343f;border-bottom:1px solid #64847755}.brand{font-size:13px;font-weight:850;letter-spacing:.12em;display:flex;gap:12px;align-items:center}.brand>span:first-child{font-size:26px;color:var(--yellow)}.brand-divider{opacity:.35}.local-tag{font-size:10px;letter-spacing:.06em;border:1px solid #7ba59d7a;padding:7px 10px;border-radius:30px;color:#dfeddf}
.scale-app{max-width:1398px;margin:auto;padding:32px 24px 18px}.intro{display:flex;justify-content:space-between;align-items:center;gap:28px;padding:0 6px 32px;color:#fff8e3}.eyebrow{font-size:11px;font-weight:850;letter-spacing:.12em;margin:0 0 12px;color:#397568}h1{font-size:clamp(40px,5.1vw,66px);line-height:1.04;letter-spacing:-.04em;margin:0}h1 span{color:#e8d18e}.intro .eyebrow{color:#a5d2b9}.intro-copy{font-size:19px;line-height:1.5;margin:16px 0 0;color:#d6e5df}.mission{display:flex;gap:18px;align-items:center;background:#23434c;border:1px solid #66857e;padding:22px 26px;border-radius:22px;transform:rotate(1deg)}.mission .eyebrow{color:#dfcf94}.mission p:last-child{margin:0;font-size:18px;line-height:1.5}.mission-icon{display:grid;place-items:center;width:62px;height:62px;border:1px dashed #ddcf96;border-radius:50%;color:#edd68c;font-size:37px}
.lab-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:24px;align-items:start}.map-lab{display:flex;flex-direction:column;gap:16px;min-width:0}.readouts{display:grid;grid-template-columns:1fr 1fr;gap:14px}.readout{padding:19px 22px;border-radius:18px;min-width:0}.readout>span{display:block;font-size:10px;letter-spacing:.06em;font-weight:850}.readout>strong{display:block;font-size:51px;line-height:1.25;font-variant-numeric:tabular-nums;letter-spacing:-.03em}.readout small{font-size:.48em;letter-spacing:0}.readout p{font-size:12px;margin:3px 0 0;line-height:1.4}.reality{background:#deebcd;color:#204b40}.model{background:#eee2f0;color:#58366b}.approximately{font-size:.6em}.map-card{background:var(--paper);border:1px solid #b5c5ad;border-radius:19px;overflow:clip;box-shadow:0 12px 30px #0002}.map-heading{padding:17px 21px 14px;display:flex;gap:10px;justify-content:space-between;align-items:center;flex-wrap:wrap}.map-heading h2{font-size:18px;margin:0}.paper-label{font-size:9px;font-weight:750;letter-spacing:.06em;color:#577060}.map-viewport{position:relative;isolation:isolate;line-height:0;background:#dce8c4}#scaleMap{display:block;width:100%;height:auto;aspect-ratio:16/9}#mapDetails[hidden]{display:none}.north{position:absolute;right:3%;top:5%;display:flex;flex-direction:column;align-items:center;color:#2e4c41;line-height:1;font-size:12px;font-weight:850}.north b{font-size:36px}.detail-badge{position:absolute;right:3%;bottom:5%;font-size:11px;font-weight:700;background:#fff8e3e8;line-height:1.3;padding:7px 10px;border-radius:7px;max-width:45%;text-align:right}.scale-overlay{position:absolute;left:4%;bottom:7%;line-height:1;color:#233e37;box-shadow:0 0 0 8px #fff8e3e8;background:#fff8e3e8}.scale-track{display:grid;grid-template-columns:1fr 1fr;height:10px;box-shadow:0 0 0 1px #233e37}.scale-track i:first-child{background:#233e37}.scale-track i:last-child{background:#fff8e3}.scale-ticks{display:flex;justify-content:space-between;margin-top:7px;font-size:12px;font-weight:750;white-space:nowrap}.map-key{display:flex;flex-wrap:wrap;gap:15px;padding:13px 20px;font-size:13px;align-items:center;border-top:1px solid var(--line)}.map-key>span{display:flex;align-items:center;gap:7px}.place-key{display:inline-grid;place-items:center;width:23px;height:23px;border:1px solid #a69c81;border-radius:50%;font-size:12px}.route-key{width:24px;height:5px;background:var(--purple);border-radius:10px}
.controls{padding:20px 22px;background:var(--paper);border-radius:19px;border:1px solid #b5c5ad}.control-top{display:flex;justify-content:space-between;align-items:center;gap:15px}.control-top h2{font-size:15px;margin:0 0 4px;font-weight:600}.control-top output{font-size:30px;font-weight:850;letter-spacing:-.035em;font-variant-numeric:tabular-nums}.control-top p{font-size:13px;line-height:1.5;margin:0;max-width:220px}.slider-row{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:15px;margin:18px 0 6px}.slider-row button{font-size:26px;padding:0;background:#e6ecdc;border:0}.slider-row input{width:100%;height:48px;margin:0;accent-color:var(--green);cursor:pointer;touch-action:pan-y}.slider-row input::-webkit-slider-thumb{width:28px;height:28px}.range-labels{display:flex;justify-content:space-between;gap:12px;font-size:11px;line-height:1.4}.range-labels>span:last-child{text-align:right}.control-hint{font-size:12px;line-height:1.5;color:var(--muted);margin:12px 0}.presets{display:flex;flex-wrap:wrap;gap:8px}.presets button{font-size:13px;padding:10px 12px;min-height:44px}.presets button[aria-pressed=true]{background:#e0d5e8;border-color:#866a9a;color:#563c64}.advanced{display:flex;align-items:center;flex-wrap:wrap;gap:5px 8px;min-height:44px;font-size:13px;font-weight:700;margin-top:12px;cursor:pointer}.advanced input{width:21px;height:21px;accent-color:var(--green);margin:0 3px 0 0}.advanced span{font-weight:400;color:var(--muted)}.change-message{font-size:12px;color:#284e43;line-height:1.5;margin:0}.change-message:not(:empty){margin-top:10px}.screen-warning{display:flex;align-items:flex-start;gap:12px;color:#e2e9e2;padding:0 5px;font-size:12px;line-height:1.6}.screen-warning>span{font-size:21px;line-height:1.3;color:#f2d280}.screen-warning p{margin:0}.screen-warning strong{color:#fff4c6}.conversion{background:#173d48;border:1px solid #60847d;border-radius:14px;color:#e2eee5;padding:0 18px}.conversion summary{min-height:52px;padding:15px 0;font-weight:750;cursor:pointer;font-size:14px}.conversion summary span{font-size:11px;color:#c4d7c9;margin-left:10px;white-space:nowrap}.conversion ol{margin:0;padding:0 0 15px 25px}.conversion li{padding:8px 0;font-size:14px}.conversion p{margin:5px 0;line-height:1.6}.conversion strong{color:#f7d98b}
.learning-panel{position:sticky;top:16px;min-width:0;background:var(--paper);border-radius:20px;border:1px solid #cdd1ba;padding:18px 20px 16px;box-shadow:0 12px 30px #0002}.learning-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:5px;border-radius:13px;background:#e5e7d7;margin-bottom:24px}.learning-tabs button{font-size:14px;border:0;min-height:45px;padding:8px;background:transparent}.learning-tabs button[aria-pressed=true]{background:#173d45;color:#fff;box-shadow:0 3px 7px #112e3820}.panel-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.panel-heading .eyebrow{margin:0}.panel-heading>span{font-size:11px;color:var(--muted)}.task-nav{display:flex;gap:8px;margin:20px 0}.task-nav button{border-radius:50%;padding:0;width:44px;min-height:44px}.task-nav button[aria-pressed=true]{background:var(--green);color:#fff;border-color:var(--green)}.task-nav button.done:not([aria-pressed=true]){box-shadow:inset 0 0 0 2px #507b59;background:#e3edd7}.task-count{font-size:10px;letter-spacing:.07em;color:var(--muted);font-weight:750;margin:0 0 10px}.learning-panel h2{font-size:25px;line-height:1.22;letter-spacing:-.025em;margin:0 0 16px}.task-text{font-size:16px;line-height:1.6;margin:0 0 20px}.answer-options{display:grid;gap:10px}.answer-options button{text-align:left;font-size:14px;line-height:1.5;background:#fffcf1}.answer-options button:hover:not(:disabled){background:#e9efe0}.feedback{font-size:14px;line-height:1.6;border-radius:12px;margin:16px 0 0}.feedback:empty{display:none}.feedback.success{background:#deeed8;color:#20523b;padding:13px}.feedback.try-again{background:#f4e4bd;color:#63451f;padding:13px}.hint-area{margin-top:21px;border-top:1px solid #d7dcc9;padding-top:18px}.hint-area>button{font-size:13px;background:transparent;min-height:44px}.hint-list{padding-left:22px;font-size:14px;line-height:1.65;margin:10px 0 0}.hint-list li{padding:5px 0}.hint-list:empty{display:none}.next-task{width:100%;margin-top:22px;font-size:14px}.next-task:not(.primary){border:0;background:#eee8d3}.current-length{background:#ede3ef;padding:12px;border-radius:10px;font-size:14px;line-height:1.5}.privacy-note{font-size:11px;line-height:1.6;color:#526a61;text-align:center;margin:20px 0 0}.quiz-progress{display:block;margin:17px 0 22px;width:100%;height:7px;accent-color:var(--green)}.quiz-options button{font-size:19px;min-height:56px}.quiz-options button:disabled{opacity:1}.quiz-options .is-correct{background:#deeed8;border-color:#4e8357;color:#1c553b}.quiz-options .is-wrong{background:#f4e4bd;border-color:#b5914d;color:#63451f}.quiz-note{font-size:12px;line-height:1.6;color:var(--muted);margin:18px 0 0}.quiz-score{font-size:15px;line-height:1.7;background:#e2ecd5;padding:15px;border-radius:14px}.quiz-score strong{font-size:46px;display:block;line-height:1.2;color:var(--green)}.quiz-review{padding-left:20px;font-size:13px;line-height:1.6}.quiz-review li{padding:12px 0;border-bottom:1px solid #d2d8c7}.quiz-review p{margin:6px 0}.learning-panel>section[hidden]{display:none}
footer{color:#b8cfc5;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:11px;padding:28px 5px 0}.no-script{background:#fff8e3;padding:24px;margin:24px}.learning-panel [tabindex="-1"]:focus{outline:0}
@media(min-width:1500px){.scale-app{padding-top:44px}.intro-copy{font-size:21px}.learning-panel{font-size:18px}.learning-panel h2{font-size:29px}.task-text{font-size:18px}.answer-options button{font-size:16px}}
@media(max-width:1000px){.lab-layout{grid-template-columns:minmax(0,1fr)}.learning-panel{position:static}.mission{padding:18px}.learning-panel{max-width:none}.answer-options{grid-template-columns:repeat(3,minmax(0,1fr))}.learning-panel h2{max-width:750px}.quiz-options{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:600px){.learning-shell{padding:10px 16px;gap:7px}.brand{font-size:11px;gap:7px}.brand>span:first-child{font-size:21px}.local-tag{font-size:8px;padding:4px 8px}.scale-app{padding:22px 14px 14px}.intro{display:block;padding:0 3px 24px}.intro>.mission{display:none}.intro .eyebrow{font-size:9px}h1{font-size:43px}.intro-copy{font-size:16px;margin-top:13px}.lab-layout{gap:18px}.map-lab{gap:12px}.readouts{gap:10px;order:0}.readout{padding:13px 14px;border-radius:14px}.readout>span{font-size:8px;line-height:1.6;min-height:26px}.readout>strong{font-size:39px}.readout p{font-size:10px}.controls{order:1;padding:16px}.map-card{order:2}.screen-warning{order:3}.conversion{order:4}.control-top{align-items:flex-start;gap:10px}.control-top h2{font-size:12px}.control-top output{font-size:25px}.control-top p{font-size:11px;max-width:145px;line-height:1.6}.slider-row{gap:10px;margin-top:10px}.control-hint{font-size:10px;margin:9px 0}.presets{gap:6px}.presets button{font-size:11px;flex:1;padding:9px 6px}.advanced{font-size:11px;margin-top:7px;gap:3px 5px}.advanced span{font-size:10px}.map-heading{padding:13px 15px;gap:5px}.map-heading h2{font-size:16px}.paper-label{font-size:8px}.map-key{font-size:11px;gap:8px;padding:10px 12px}.place-key{width:20px;height:20px;font-size:11px}.route-key{width:18px}.detail-badge{font-size:8px;padding:4px 6px}.north{font-size:9px}.north b{font-size:26px}.scale-ticks{font-size:10px}.scale-track{height:7px}.scale-overlay{bottom:9%;box-shadow:0 0 0 5px #fff8e3e8}.learning-panel{padding:16px}.learning-panel h2{font-size:25px}.answer-options,.quiz-options{grid-template-columns:minmax(0,1fr)}.answer-options button{font-size:15px;min-height:54px}.quiz-options button{font-size:20px}.learning-tabs{margin-bottom:20px}.screen-warning{font-size:11px}.conversion{padding:0 13px}.conversion summary{font-size:13px}.conversion summary span{display:block;margin:4px 0 0 16px}.conversion li{font-size:13px}footer{font-size:10px;padding-top:24px}}
@media(prefers-reduced-motion:no-preference){button{transition:background .15s,border-color .15s}}
@media print{body{background:#fff}.intro{color:#173c45}.intro .eyebrow,.intro-copy{color:#173c45}.mission,.controls,.learning-panel{display:none}.lab-layout{display:block}.screen-warning{color:#173c45}.screen-warning strong{color:#173c45}.conversion,footer{color:#173c45}.map-card::after{content:"Nicht als kalibrierter Kartendruck verwenden. Zentimeterangaben sind Rechenwerte.";display:block;padding:12px;font-size:12px}}
.control-explainer{text-align:right}.control-distance{display:flex;justify-content:flex-end;align-items:baseline;flex-wrap:wrap;gap:3px 9px;margin-bottom:5px!important}.control-distance output{font-size:29px;color:#68417a}.control-distance span{font-size:10px}.control-explainer #oneCm{font-size:11px}.control-explainer p{max-width:250px}
@media(max-width:600px){.control-distance output{font-size:24px}.control-distance span{font-size:9px}.control-explainer #oneCm{font-size:9px}.control-explainer p{max-width:145px}}
.slider-row input{appearance:none;background:transparent}
.slider-row input::-webkit-slider-runnable-track{height:8px;background:#b8c8af;border-radius:8px}
.slider-row input::-webkit-slider-thumb{appearance:none;width:28px;height:28px;margin-top:-10px;border:3px solid #fff8e3;border-radius:50%;background:#176c60;box-shadow:0 0 0 1px #176c60}
.slider-row input::-moz-range-track{height:8px;background:#b8c8af;border-radius:8px}
.slider-row input::-moz-range-thumb{width:23px;height:23px;border:3px solid #fff8e3;border-radius:50%;background:#176c60}
.view-switch{display:flex;gap:6px;margin:0 20px 14px;padding:5px;background:#e4e8d8;border-radius:14px;width:fit-content;max-width:calc(100% - 40px)}
.view-switch button{display:flex;gap:8px;align-items:center;justify-content:center;min-height:46px;border:0;background:transparent;font-size:14px;padding:10px 18px}
.view-switch button[aria-pressed=true]{background:#173d45;color:#fff;box-shadow:0 3px 7px #112e3820}
.view-switch small{font-size:9px;letter-spacing:.03em;border:1px solid currentColor;border-radius:5px;padding:3px 5px;opacity:.85}
.imagery-note{margin:0;padding:0 20px 13px;font-size:11px;line-height:1.5;color:#52685b}
.map-viewport[data-view=satellite] .north{background:#fff8e3e8;border-radius:9px;padding:6px 8px;box-shadow:0 2px 8px #0002}
@media(max-width:600px){.view-switch{margin:0 12px 10px;max-width:calc(100% - 24px)}.view-switch button{padding:8px 12px;font-size:12px}.view-switch small{font-size:8px}.imagery-note{font-size:10px;padding:0 12px 11px}.map-viewport[data-view=satellite] .north{padding:4px 6px}}
@media(max-width:380px){.control-top{display:block}.control-top #scaleValue{font-size:27px;white-space:nowrap}.control-explainer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px}.control-distance{justify-content:flex-start;max-width:100px!important}.control-explainer #oneCm{max-width:140px}.control-distance output{white-space:nowrap}}
.presets button{white-space:nowrap}

.learning-shell .back-link{color:#fff8e3;display:inline-flex;align-items:center;min-height:44px;padding:8px 13px;border:1px solid #7ba59d7a;border-radius:12px;font-size:13px;text-decoration:none;font-weight:700}.back-link:focus-visible{outline:3px solid #f5d478;outline-offset:3px}

.app-load-guard{border:0;padding:0;margin:0;min-width:0}.app-loading-status{color:#fff8e3;max-width:1350px;margin:18px auto;padding:0 24px;font-size:14px}.app-load-guard[disabled]{opacity:.7}