/* Scoped CSS für scalable-resilience.html — extrahiert aus Inline-<style> 03.05.2026 */

.landkarte {
      display: grid;
      grid-template-columns: 1.2fr 1.3fr 0.7fr;
      grid-template-rows: 1fr 1.1fr;
      grid-template-areas:
        "fall   fall    risiko"
        "koerp  komp    entsch";
      gap: 6px;
      max-width: 1080px;
      margin: 0 auto;
    }
    .land {
      position: relative;
      padding: 2rem 1.5rem 1.75rem;
      color: var(--color-cream, #f6f1e5);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 180px;
      overflow: hidden;
    }
    .land__num {
      position: absolute;
      top: 0.75rem;
      right: 1rem;
      font-size: 3.2rem;
      font-weight: 700;
      line-height: 1;
      opacity: 0.22;
      font-family: Georgia, serif;
    }
    .land__title {
      font-size: 1.4rem;
      margin: 0;
      line-height: 1.15;
      color: inherit;
    }
    .land__sub {
      font-size: 0.92rem;
      line-height: 1.45;
      margin: 0.6rem 0 0;
      opacity: 0.92;
      max-width: 32ch;
    }
    .land--fall    { grid-area: fall;    background: #2E5C66; border-radius: 20px 8px 12px 24px; }
    .land--risiko  { grid-area: risiko;  background: #B58A3E; border-radius: 8px 24px 20px 10px; }
    .land--koerp   { grid-area: koerp;   background: #6B7E4F; border-radius: 24px 10px 20px 8px; }
    .land--komp    { grid-area: komp;    background: #B22E76; border-radius: 10px 18px 10px 22px; }
    .land--entsch  { grid-area: entsch;  background: #A55D3F; border-radius: 8px 22px 24px 12px; }

    .kompass {
      max-width: 820px;
      margin: 2.5rem auto 0;
      padding: 1.25rem 1.5rem;
      background: var(--color-white, #fff);
      border: 1px solid rgba(0,0,0,0.08);
      border-left: 4px solid #2E5C66;
      display: flex;
      gap: 1rem;
      align-items: center;
    }
    .kompass__icon {
      flex-shrink: 0;
      color: #2E5C66;
    }
    .kompass__text {
      margin: 0;
      font-size: 0.95rem;
      line-height: 1.55;
      color: var(--color-ink, #2a2a2a);
    }

    @media (max-width: 860px) {
      .landkarte {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas:
          "fall    risiko"
          "koerp   komp"
          "entsch  entsch";
      }
    }
    @media (max-width: 560px) {
      .landkarte {
        grid-template-columns: 1fr;
        grid-template-areas:
          "fall"
          "risiko"
          "komp"
          "koerp"
          "entsch";
      }
      .land { min-height: 150px; }
      .land__num { font-size: 2.6rem; }
      .land__title { font-size: 1.2rem; }
      .kompass { flex-direction: column; align-items: flex-start; text-align: left; }
    }