:root {
   --steiger-red: #c62828;
   --steiger-red-dark: #a61f1f;
   --steiger-red-light: #e5cf72;
   --steiger-bg-light: #f5f5f5;
   --steiger-gray: #d9d9d9;
   --steiger-gray-dark: #666666;
   --steiger-gray-light: #eeeeee;
   --steiger-border: #e3e3e3;
   --steiger-white: #ffffff;
   --text-main: #222222;
   --text-soft: #666666;
   --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.08);
}

* {
   box-sizing: border-box;
}

html,
body {
   margin: 0;
   padding: 0;
   font-family: Arial, Helvetica, sans-serif;
   background: var(--steiger-bg-light);
   color: var(--text-main);
   -webkit-text-size-adjust: 100%;
   touch-action: manipulation;
}

body {
   min-height: 100vh;
}

select optgroup {
   font-weight: 700;
   color: #888;
}

.page {
   max-width: 1600px;
   margin: 0 auto;
   padding: 20px;
}

.page-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 20px;
   margin-bottom: 20px;
}

.page-header h1 {
   margin: 0 0 6px 0;
   font-size: 32px;
   line-height: 1.2;
   color: var(--steiger-red);
}

.page-header p {
   margin: 0;
   color: var(--text-soft);
   font-size: 16px;
}

.header-note {
   background: var(--steiger-white);
   border: 1px solid var(--steiger-border);
   color: var(--steiger-red);
   border-radius: 999px;
   padding: 10px 14px;
   font-size: 14px;
   font-weight: 700;
   white-space: nowrap;
}

.layout {
   display: grid;
   grid-template-columns: minmax(0, 1fr) 360px;
   gap: 20px;
   align-items: start;
}

.map-card,
.info-card {
   background: var(--steiger-white);
   border-radius: 18px;
   box-shadow: var(--shadow-soft);
   border: 1px solid var(--steiger-border);
}

.map-card {
   overflow: hidden;
}

.map-toolbar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 16px;
   flex-wrap: wrap;
   padding: 18px 20px;
   border-bottom: 1px solid var(--steiger-border);
   background: #fafafa;
}

.toolbar-left,
.toolbar-right {
   display: flex;
   align-items: center;
   gap: 12px;
   flex-wrap: wrap;
}

.toolbar-left strong {
   font-size: 18px;
   color: var(--steiger-red);
}

#statsLabel {
   color: var(--text-soft);
   font-size: 14px;
}

.toolbar-right label {
   font-size: 14px;
   font-weight: 700;
   color: var(--text-main);
}

.toolbar-right select {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   padding: 10px 14px;
   border: 1px solid #cccccc;
   border-radius: 10px;
   background: var(--steiger-white);
   color: var(--text-main);
   font-size: 14px;
   min-width: 220px;
   outline: none;
   cursor: pointer;
}

.toolbar-right select:focus {
   border-color: var(--steiger-red);
   box-shadow: 0 0 0 3px rgba(198, 40, 40, 0.12);
}

.map-wrapper {
   position: relative;
   min-height: 700px;
   padding: 20px;
   background: var(--steiger-white);
}

.map-wrapper.loading {
   display: flex;
   align-items: center;
   justify-content: center;
}

.loading-text {
   text-align: center;
   color: var(--text-soft);
   font-size: 16px;
   line-height: 1.5;
}

.map-wrapper svg {
   display: block;
   width: 100%;
   max-width: 600px;
   height: auto;
   margin: 0 auto;
}

.legend {
   display: flex;
   flex-wrap: wrap;
   gap: 14px 18px;
   padding: 18px 20px 20px;
   border-top: 1px solid var(--steiger-border);
   background: #fafafa;
}

.legend-item {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
   color: var(--text-main);
}

.legend-color {
   display: inline-block;
   width: 16px;
   height: 16px;
   border-radius: 4px;
   border: 1px solid rgba(0, 0, 0, 0.08);
}

.info-card {
   padding: 24px;
   position: sticky;
   top: 20px;
   scroll-margin-top: 20px;
}

.info-card h2 {
   margin: 0 0 16px 0;
   font-size: 22px;
   color: var(--steiger-red);
}

.details-panel {
   color: var(--text-main);
}

.details-panel.empty {
   color: var(--text-soft);
}

.region-name {
   margin: 0 0 8px 0;
   font-size: 24px;
   line-height: 1.2;
   color: var(--steiger-red);
}

.region-type {
   margin: 0 0 18px 0;
   color: var(--text-soft);
   font-size: 15px;
}

.details-grid {
   display: grid;
   gap: 10px;
   margin-bottom: 20px;
}

.detail-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 12px;
   padding: 12px 14px;
   background: #fafafa;
   border: 1px solid var(--steiger-border);
   border-radius: 12px;
}

.detail-label {
   font-size: 14px;
   color: var(--text-soft);
}

.detail-value {
   font-size: 14px;
   font-weight: 700;
   color: var(--text-main);
   text-align: right;
}

.providers,
.notes {
   margin-top: 22px;
}

.providers h3,
.notes h3 {
   margin: 0 0 10px 0;
   font-size: 16px;
   color: var(--steiger-red);
}

.provider-list {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
}

.provider-chip {
   display: inline-flex;
   align-items: center;
   padding: 7px 12px;
   border-radius: 999px;
   background: var(--steiger-red);
   color: var(--steiger-white);
   font-size: 13px;
   font-weight: 700;
   line-height: 1;
}

.notes p {
   margin: 0;
   padding: 14px;
   background: #fafafa;
   border: 1px solid var(--steiger-border);
   border-radius: 12px;
   color: var(--text-main);
   line-height: 1.5;
}

.tooltip {
   position: fixed;
   z-index: 9999;
   pointer-events: none;
   background: var(--steiger-red);
   color: var(--steiger-white);
   padding: 10px 12px;
   border-radius: 10px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
   font-size: 13px;
   line-height: 1.45;
   min-width: 150px;
   max-width: 240px;
}

.tooltip strong {
   display: block;
   margin-bottom: 4px;
   font-size: 14px;
}

.tooltip small {
   opacity: 0.92;
}

.hidden {
   display: none !important;
}

.district-shape {
   transition: fill 0.15s ease, opacity 0.15s ease, stroke-width 0.15s ease,
      transform 0.15s ease;
   stroke: var(--steiger-white) !important;
   stroke-width: 1 !important;
   cursor: pointer;
}

.district-shape.is-hovered {
   stroke: var(--steiger-red-dark) !important;
   stroke-width: 2 !important;
   opacity: 0.92;
}

.district-shape.is-filtered-out {
   fill: #ebebeb !important;
   opacity: 0.85;
}

.district-shape.is-hidden-by-filter {
   display: none;
}

.status-has-app,
.legend-color.status-has-app {
   fill: var(--steiger-red) !important;
   background: var(--steiger-red) !important;
}

.status-no-app,
.legend-color.status-no-app {
   fill: var(--steiger-gray) !important;
   background: var(--steiger-gray) !important;
}

.status-building,
.legend-color.status-building {
   fill: var(--steiger-red-light) !important;
   background: var(--steiger-red-light) !important;
}

.status-unknown,
.legend-color.status-unknown {
   fill: var(--steiger-gray-light) !important;
   background: var(--steiger-gray-light) !important;
}

code {
   font-family: Menlo, Monaco, Consolas, monospace;
   font-size: 13px;
   background: #f3f3f3;
   padding: 2px 6px;
   border-radius: 6px;
}

@media (max-width: 1100px) {
   .layout {
      grid-template-columns: 1fr;
   }

   .info-card {
      position: static;
   }
}

@media (max-width: 900px) {
   .page {
      padding: 12px;
   }

   .page-header {
      flex-direction: column;
      align-items: stretch;
      margin-bottom: 14px;
   }

   .page-header h1 {
      font-size: 24px;
   }

   .page-header p {
      font-size: 14px;
   }

   .header-note {
      align-self: flex-start;
   }

   .map-toolbar {
      padding: 14px;
   }

   .toolbar-left strong {
      font-size: 16px;
   }

   .toolbar-right {
      width: 100%;
   }

   .toolbar-right select {
      width: 100%;
      min-width: 0;
   }

   .map-wrapper {
      min-height: auto;
      padding: 10px;
   }

   .legend {
      padding: 14px;
      gap: 10px 14px;
   }

   .legend-item {
      font-size: 13px;
   }

   .info-card {
      padding: 18px;
   }

   .info-card h2 {
      font-size: 20px;
   }

   .region-name {
      font-size: 21px;
   }

   .detail-row {
      flex-direction: column;
      align-items: flex-start;
   }

   .detail-value {
      text-align: left;
   }

   .tooltip {
      display: none !important;
   }
}

@media (max-width: 600px) {
   .page-header h1 {
      font-size: 21px;
   }

   .map-toolbar,
   .legend,
   .info-card {
      border-radius: 14px;
   }

   .provider-chip {
      font-size: 12px;
      padding: 6px 10px;
   }
}