:root{font-family:Arial,Helvetica,sans-serif;color:#1f2937;background:#f3f4f6}*{box-sizing:border-box}body{margin:0}header{padding:18px 24px;color:#fff;background:#b91c1c}header h1{margin:0;font-size:1.5rem}header p{margin:4px 0 0}.page{max-width:680px;margin:36px auto;padding:0 18px}.card{padding:28px;background:#fff;border-radius:14px;box-shadow:0 8px 24px #0002}.field{margin:14px 0}.field label{display:block;font-weight:700;margin-bottom:5px}.field input,.field select{width:100%;padding:10px;border:1px solid #cbd5e1;border-radius:8px}.button{display:inline-block;width:100%;padding:12px;border:0;border-radius:8px;background:#b91c1c;color:#fff;font-weight:700;text-align:center;text-decoration:none;cursor:pointer}.secondary{background:#374151}.message{display:none;margin:12px 0;padding:10px;border-radius:8px}.message.error{display:block;background:#fee2e2;color:#991b1b}.message.success{display:block;background:#dcfce7;color:#166534}.check{display:flex;gap:8px;margin:12px 0}.hidden{display:none!important}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.wide{max-width:1200px}.toolbar{display:flex;gap:8px;flex-wrap:wrap}.toolbar .button{width:auto}.tablewrap{overflow:auto}table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:8px;border-bottom:1px solid #ddd;text-align:left}th{background:#f3f4f6}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.kpi{padding:14px;background:#f3f4f6;border-radius:8px}.kpi strong{display:block;font-size:1.5rem}.muted{color:#64748b}.danger{background:#991b1b}@media(max-width:700px){.grid,.kpis{grid-template-columns:1fr}}
.list-filters{display:grid;grid-template-columns:repeat(4,minmax(150px,1fr));gap:12px;align-items:end}.list-filters .field{margin:0}.list-filters .check{align-self:center}.list-filters>.button{width:auto}@media(max-width:900px){.list-filters{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.list-filters{grid-template-columns:1fr}}

.compact-nav-button{width:auto!important;display:inline-flex!important;align-items:center;justify-content:center;padding:9px 18px!important;font-size:.9rem;min-height:38px}

select[multiple]{min-height:112px;padding:6px}select[multiple] option{padding:6px 8px;border-radius:4px}select[multiple] option:checked{background:#b91c1c linear-gradient(0deg,#b91c1c,#b91c1c);color:#fff}

.list-filter-actions{display:flex;gap:8px}.list-filter-actions .button{width:auto;min-width:120px}.field input,.field select,.button{min-height:42px}button,input,select{font:inherit}
@media(max-width:900px){main.wide{padding:14px}.toolbar{gap:6px}.toolbar .button{min-height:42px}.tablewrap{border:1px solid #e5e7eb;border-radius:10px;-webkit-overflow-scrolling:touch}table{min-width:860px}.list-filter-actions{grid-column:1/-1}.list-filter-actions .button{flex:1}}
@media(max-width:560px){header{padding:14px}header h1{font-size:1.3rem}main,.card,main.wide{margin:10px;padding:12px}.toolbar .button{flex:1 1 calc(50% - 6px)}.list-filter-actions{display:grid;grid-template-columns:1fr 1fr}.list-filter-actions .button{width:100%;min-width:0}.kpi strong{font-size:1.25rem}.compact-nav-button{width:100%!important}.field input,.field select,.button{font-size:16px}}


/* Bisher nur in map.html vorhandene Gestaltungsregeln */
:root {
      --fw-red-dark: #84271f;
      --fw-red: #be3426;
      --fw-red-bright: #ce3828;
      --fw-bg: #f2f5f9;
      --fw-card: #ffffff;
      --fw-border: #d9e1ec;
      --fw-text: #0f172a;
      --fw-muted: #64748b;
      --fw-shadow: 0 8px 25px rgba(15, 23, 42, .08);
    }

    body {
      background: var(--fw-bg);
      color: var(--fw-text);
    }

    /* Kopfbereich im Look der Web-App "Übungsobjekte" */
    body > header.app-header {
      min-height: 124px;
      padding: 0;
      background: linear-gradient(110deg, var(--fw-red-dark) 0%, #9a2b21 38%, var(--fw-red-bright) 100%);
      color: #fff;
      border: 0;
      box-shadow: none;
    }

    .header-inner {
      width: min(1100px, calc(100% - 32px));
      min-height: 124px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1fr minmax(260px, 390px) 1fr;
      align-items: center;
      gap: 24px;
    }

    .header-title h1 {
      margin: 0;
      font-size: clamp(1.35rem, 2vw, 1.85rem);
      line-height: 1.05;
      color: #fff;
    }

    .header-title p {
      margin: .38rem 0 0;
      font-size: .98rem;
      color: rgba(255,255,255,.92);
    }

    .header-logo {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .header-logo img {
      display: block;
      width: min(100%, 360px);
      max-height: 94px;
      object-fit: contain;
    }

    .header-spacer { min-width: 1px; }

    /* Navigation als helle, abgerundete Schaltflächen */
    .mapnav {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: .5rem;
      padding: .65rem;
      background: var(--fw-card);
      border: 1px solid var(--fw-border);
      border-radius: 16px;
      box-shadow: var(--fw-shadow);
    }

    .mapnav .button {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 11px;
      border: 1px solid var(--fw-border);
      background: #fff;
      color: var(--fw-text);
      font-weight: 750;
      box-shadow: none;
      text-decoration: none;
    }

    .mapnav .button:hover {
      border-color: #b9c5d5;
      background: #f8fafc;
    }

    /* Kompakte, moderne Filterdarstellung */
    .filter-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      margin: .7rem 0 .45rem;
    }

    .filter-head h2 {
      margin: 0;
      font-size: 1.12rem;
    }

    .filter-toggle {
      border: 1px solid var(--fw-border);
      border-radius: 999px;
      background: #fff;
      color: #334155;
      padding: .4rem .7rem;
      font-weight: 700;
      cursor: pointer;
    }

    .filter-body {
      background: var(--fw-card);
      border: 1px solid var(--fw-border);
      border-radius: 16px;
      padding: .75rem;
      box-shadow: var(--fw-shadow);
    }

    .filter-body .field { margin: 0 0 .55rem; }

    .filter-body label {
      display: block;
      margin: 0 0 .22rem;
      font-size: .79rem;
      font-weight: 750;
      color: #475569;
    }

    .year-range {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .55rem;
    }

    .filter-body select,
    .filter-body input[type="text"],
    .filter-body input:not([type]) {
      width: 100%;
      min-height: 40px;
      border: 1px solid #ccd6e3;
      border-radius: 10px;
      background: #fff;
      padding: .48rem .58rem;
      color: var(--fw-text);
      font: inherit;
      box-sizing: border-box;
      outline: none;
    }

    .filter-body select:focus,
    .filter-body input:focus {
      border-color: var(--fw-red);
      box-shadow: 0 0 0 3px rgba(190,52,38,.12);
    }

    .filter-body select[multiple] {
      min-height: 82px;
      height: 82px;
      padding: .25rem;
      scrollbar-width: thin;
    }

    .filter-body select[multiple] option {
      padding: .32rem .42rem;
      border-radius: 6px;
    }

    .filter-body select[multiple] option:checked {
      background: var(--fw-red) linear-gradient(0deg, var(--fw-red) 0%, var(--fw-red) 100%);
      color: #fff;
    }

    .check {
      display: flex !important;
      align-items: center;
      gap: .45rem;
      margin: .1rem 0 .65rem !important;
      font-size: .88rem !important;
      cursor: pointer;
    }

    .check input {
      width: 18px;
      height: 18px;
      accent-color: var(--fw-red);
    }

    .filter-actions {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: .5rem;
    }

    .filter-actions .button {
      min-height: 40px;
      padding: .5rem .72rem;
      border-radius: 10px;
    }

    #apply {
      background: var(--fw-red);
      border-color: var(--fw-red);
      color: #fff;
    }

    .result-count {
      margin: .55rem 0 .35rem;
      padding: .52rem .65rem;
      background: #fff;
      border: 1px solid var(--fw-border);
      border-radius: 10px;
      color: #334155;
      font-size: .86rem;
    }

    .mapwrap,
    #map {
      border-radius: 16px;
    }

    @media (max-width: 800px) {
      body > header.app-header,
      .header-inner { min-height: 104px; }

      .header-inner {
        width: min(100% - 24px, 680px);
        grid-template-columns: 1fr 150px;
        gap: 12px;
      }

      .header-title h1 { font-size: 1.25rem; }
      .header-title p { font-size: .86rem; }
      .header-logo img { max-height: 68px; }
      .header-spacer { display: none; }

      main.layout {
        display: flex !important;
        flex-direction: column;
      }

      aside.side { display: contents; }
      .mapnav { order: 1; margin: .7rem .75rem 0; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: .5rem; }
      .mapnav .button { min-height: 40px; padding: .42rem .3rem; font-size: .78rem; }
      .filter-head { order: 2; margin: .65rem .75rem .4rem; }
      .filter-body { order: 3; margin: 0 .75rem; padding: .65rem; }
      .filter-body select[multiple] { min-height: 72px; height: 72px; }
      section.mapwrap { order: 4; width: calc(100% - 1.5rem); margin: .75rem .75rem 1rem; }
      #map { width: 100%; min-height: 420px; }
      .result-count { order: 5; margin: 0 1rem .45rem; }
      #msg { order: 6; margin-left: 1rem; margin-right: 1rem; }
      #list { order: 7; margin-left: 1rem; margin-right: 1rem; }
      aside.detail { order: 8; }
    }

    @media (max-width: 480px) {
      .header-inner { grid-template-columns: 1fr 118px; }
      .header-logo img { max-height: 58px; }
      .mapnav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }


/* Version 3.2: einheitliches Erscheinungsbild auf allen Seiten */
:root {
  --fw-red-dark: #84271f;
  --fw-red: #be3426;
  --fw-red-bright: #ce3828;
  --fw-bg: #f2f5f9;
  --fw-card: #ffffff;
  --fw-border: #d9e1ec;
  --fw-text: #0f172a;
  --fw-muted: #64748b;
  --fw-shadow: 0 8px 25px rgba(15, 23, 42, .08);
}
body { background: var(--fw-bg); color: var(--fw-text); }
body > header.app-header {
  min-height: 124px;
  padding: 0;
  background: linear-gradient(110deg, var(--fw-red-dark) 0%, #9a2b21 38%, var(--fw-red-bright) 100%);
  color: #fff;
  border: 0;
  box-shadow: none;
}
.header-inner {
  width: min(1100px, calc(100% - 32px));
  min-height: 124px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr minmax(260px, 390px) 1fr;
  align-items: center;
  gap: 24px;
}
.header-title h1 {
  margin: 0;
  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
}
.header-title p {
  margin: .38rem 0 0;
  color: rgba(255,255,255,.96);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
}
.header-logo { display:flex; align-items:center; justify-content:center; }
.header-logo img { display:block; width:100%; max-width:360px; max-height:88px; object-fit:contain; }
.header-spacer { min-height:1px; }
.page { margin-top: 28px; margin-bottom: 36px; }
.card { border:1px solid var(--fw-border); box-shadow:var(--fw-shadow); }
.card h2:first-child { margin-top:0; }
.field input,.field select {
  border-color:var(--fw-border);
  background:#fff;
  color:var(--fw-text);
}
.field input:focus,.field select:focus {
  outline:3px solid rgba(190,52,38,.14);
  border-color:var(--fw-red);
}
.button { background:var(--fw-red); }
.button:hover { filter:brightness(.96); }
.secondary { background:#475569; }
.page-heading { margin:0 0 18px; }
@media (max-width: 760px) {
  body > header.app-header { min-height:100px; }
  .header-inner {
    width:min(100% - 28px, 1100px);
    min-height:100px;
    grid-template-columns:1fr auto;
    gap:14px;
  }
  .header-logo img { width:112px; max-height:65px; }
  .header-spacer { display:none; }
  .header-title h1 { font-size:1.65rem; }
  .header-title p { font-size:.92rem; }
}
@media (max-width: 480px) {
  .header-inner { grid-template-columns:1fr; padding:16px 0; }
  .header-logo { display:none; }
  body > header.app-header,.header-inner { min-height:94px; }
}