First version of Karten App

src/style.css

@@ -0,0 +1,240 @@
+:root {
+  color: #1c1915;
+  background: #1e3328;
+  font-family: system-ui, sans-serif;
+  font-size: 16px;
+  line-height: 1.35;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  height: 100%;
+  overflow: hidden;
+  background: #1e3328;
+}
+
+button,
+input {
+  font: inherit;
+  font-size: 16px;
+}
+
+#app {
+  height: 100dvh;
+  max-height: 100dvh;
+  display: flex;
+  flex-direction: column;
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: env(safe-area-inset-bottom);
+  background: #1e3328;
+}
+
+.map {
+  flex: 1 1 auto;
+  min-height: 40dvh;
+  position: relative;
+  background: #e7e1d4;
+}
+
+.map .ol-viewport {
+  background: #e7e1d4;
+}
+
+.panel {
+  flex: 0 1 auto;
+  max-height: 52dvh;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  background: #e7e1d4;
+  color: #1c1915;
+  border-bottom: 4px solid #1e3328;
+  padding: 8px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
+}
+
+.panel-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.panel-head h1 {
+  flex: 1 1 auto;
+}
+
+.head-actions {
+  display: flex;
+  flex: 0 0 auto;
+  gap: 8px;
+}
+
+.fold-toggle,
+.cache-toggle {
+  flex: 0 0 auto;
+}
+
+.cache-toggle[aria-expanded="true"] {
+  background: #1e3328;
+  color: #e7e1d4;
+}
+
+.fold {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+h1 {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  color: #1e3328;
+}
+
+form,
+.actions,
+.gebiet {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.fields {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
+}
+
+label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+input {
+  width: 100%;
+  min-height: 44px;
+  padding: 8px 10px;
+  border: 1px solid #1e3328;
+  border-radius: 2px;
+  background: #f4f0e6;
+  color: #1c1915;
+}
+
+.fields input {
+  width: 33%;
+  min-width: 6.5rem;
+}
+
+button {
+  min-height: 44px;
+  padding: 10px 14px;
+  border: 1px solid #1e3328;
+  border-radius: 2px;
+  background: #1e3328;
+  color: #e7e1d4;
+  font-weight: 600;
+}
+
+button.secondary {
+  background: #e7e1d4;
+  color: #1e3328;
+}
+
+.actions {
+  flex-direction: row;
+}
+
+.actions button {
+  flex: 1 1 0;
+}
+
+.gebiet p,
+.distance,
+.notice,
+.boot-error {
+  margin: 0;
+  font-size: 16px;
+}
+
+.distance {
+  font-size: 18px;
+  font-weight: 700;
+}
+
+.notice {
+  padding: 10px 12px;
+  background: #1e3328;
+  color: #e7e1d4;
+}
+
+.boot-error {
+  margin: 24px 16px;
+  color: #e7e1d4;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+dialog {
+  border: none;
+  max-width: min(22rem, calc(100vw - 32px));
+  padding: 20px 16px max(16px, env(safe-area-inset-bottom));
+  background: #e7e1d4;
+  color: #1c1915;
+}
+
+dialog::backdrop {
+  background: rgba(28, 25, 21, 0.5);
+}
+
+.ask {
+  margin: 0 0 8px;
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.explain {
+  margin: 0 0 16px;
+  font-size: 16px;
+}
+
+.dialog-actions {
+  display: flex;
+  gap: 8px;
+}
+
+.dialog-actions button {
+  flex: 1 1 0;
+}
+
+button:focus-visible,
+input:focus-visible {
+  outline: 2px solid #1d4e89;
+  outline-offset: 2px;
+}
+
+@media (min-width: 520px) {
+  .fields {
+    grid-template-columns: repeat(3, max-content);
+    justify-content: start;
+    column-gap: 16px;
+  }
+
+  .fields input {
+    width: 8.5rem;
+  }
+}