@font-face { font-family: "Poppins"; src: url("fonts/Poppins-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
    @font-face { font-family: "Poppins"; src: url("fonts/Poppins-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
    @font-face { font-family: "Poppins"; src: url("fonts/Poppins-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

    :root {
      --dunkelblau: #143a4f;
      --nachtblau: #0d2634;
      --blau: #378bcb;
      --linkblau: #115c86;
      --gruen: #00ab96;
      --gruen-text: #09786e;
      --gruen-hell: #bee1e0;
      --grund: #f3f7f9;
      --karte: #ffffff;
      --linie: #dbe5ea;
      --text-leise: #4a6172;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      background: var(--grund);
      color: var(--nachtblau);
      font-family: "Poppins", Arial, sans-serif;
      font-weight: 300;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
    }

    .band { height: 6px; background: linear-gradient(90deg, var(--dunkelblau), var(--blau) 60%, var(--gruen)); }

    main { max-width: 760px; margin: 0 auto; padding: 56px 16px 32px; }

    .karte {
      background: var(--karte);
      border: 1px solid var(--linie);
      border-radius: 16px;
      padding: 48px 48px 40px;
      box-shadow: 0 12px 32px rgba(13, 38, 52, 0.06);
    }

    .logo { display: block; width: 210px; max-width: 70%; height: auto; }

    .hinweis {
      display: inline-flex; align-items: center; gap: 8px;
      margin: 40px 0 12px;
      padding: 4px 12px;
      border-radius: 999px;
      background: #e6f6f3;
      color: var(--gruen-text);
      font-size: 0.85rem; font-weight: 500;
    }
    .hinweis::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gruen); }

    h1 {
      margin: 0 0 12px;
      color: var(--dunkelblau);
      font-size: clamp(1.75rem, 4.5vw, 2.4rem);
      font-weight: 700;
      line-height: 1.2;
    }

    .einleitung { margin: 0; max-width: 34em; color: var(--text-leise); font-size: 1.05rem; }

    .kontakte { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 32px; }

    .kontakt {
      display: block;
      padding: 20px 22px;
      border: 1px solid var(--linie);
      border-radius: 12px;
      color: inherit;
      text-decoration: none;
      transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
    }
    .kontakt:hover, .kontakt:focus-visible { border-color: var(--blau); box-shadow: 0 6px 18px rgba(55, 139, 203, 0.15); transform: translateY(-1px); }
    .kontakt:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }
    .kontakt .titel { display: block; color: var(--text-leise); font-size: 0.9rem; }
    .kontakt .adresse { display: block; margin-top: 4px; color: var(--linkblau); font-size: 1.1rem; font-weight: 500; word-break: break-word; }

    .telefon { margin: 24px 0 0; color: var(--text-leise); font-size: 0.95rem; }
    .telefon a { color: var(--linkblau); font-weight: 500; text-decoration: none; }
    .telefon a:hover { text-decoration: underline; }

    .rechtliches { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 32px; margin-top: 40px; padding: 0 8px; color: var(--text-leise); font-size: 0.85rem; }
    .rechtliches h2 { margin: 0 0 8px; color: var(--dunkelblau); font-size: 1rem; font-weight: 500; }
    .rechtliches p { margin: 0 0 10px; }
    .rechtliches a { color: var(--linkblau); }

    footer { max-width: 760px; margin: 0 auto; padding: 8px 24px 40px; color: var(--text-leise); font-size: 0.8rem; }

    @media (max-width: 560px) {
      main { padding-top: 24px; }
      .karte { padding: 32px 22px 28px; border-radius: 12px; }
      .hinweis { margin-top: 28px; }
    }