/* ============================================================================
   hilfsmittelbund.de — statische Hinweisseite (22.10.2026)
   Stil aus dem früheren WordPress-Theme „hilfsmittelbund“ übernommen
   (wp-content/themes/hilfsmittelbund/scss): Farben $base-color-dark #3f27ba,
   Hover #5344e2, $light_background #F0F5FE, Text #2C2C2C, Schrift Open Sans
   (lokal, keine Google Fonts), Inhaltsbreite 66rem.
   ============================================================================ */
@font-face { font-family: "OpenSans"; font-weight: 400; font-style: normal; font-display: swap;
             src: url("/_hmb/OpenSans-Regular.woff2") format("woff2"); }
@font-face { font-family: "OpenSans"; font-weight: 700; font-style: normal; font-display: swap;
             src: url("/_hmb/OpenSans-Bold.woff2") format("woff2"); }

:root {
  --violett: #3f27ba;
  --violett-hover: #5344e2;
  --hell: #F0F5FE;
  --text: #2C2C2C;
  --leise: #4d4d4d;
  --weiss: #fff;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "OpenSans", "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem; line-height: 1.6;
  color: var(--text); background: var(--weiss);
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--violett); }
a:hover { color: var(--violett-hover); }

.innen { max-width: 66rem; margin: 0 auto; padding: 0 1rem; }

header.kopf { padding: 25px 0 20px; }
header.kopf img { display: block; width: 260px; max-width: 70vw; height: auto; }

.band { background: var(--violett); color: var(--weiss); padding: 4.5rem 0 5rem; }
.band h1 { font-size: 2.6rem; line-height: 1.208; margin: 0 0 1.5rem; font-weight: 700; max-width: 46rem; }
.band p { font-size: 1.3rem; margin: 0 0 1rem; max-width: 40rem; }
.band a { color: var(--weiss); font-weight: 700; }
.band a:hover { color: var(--hell); }

main.inhalt { flex: 1; background: var(--hell); padding: 3rem 0 4rem; }
main.inhalt .karte { background: var(--weiss); border-radius: 8px; padding: 2rem; max-width: 46rem; }
main.inhalt h1 { font-size: 2rem; line-height: 1.25; margin: 0 0 1.5rem; }
main.inhalt h2 { font-size: 1.3rem; margin: 2rem 0 .5rem; }
main.inhalt p { margin: 0 0 1rem; }
.zurueck { display: inline-block; margin-bottom: 1.5rem; }

.leer { flex: 1; background: var(--hell); }

footer.fuss { background: var(--violett); color: var(--weiss); padding: 40px 0; }
footer.fuss .innen { border-top: 1px solid #ccc; padding-top: 20px; display: flex;
                     flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; }
footer.fuss a { color: var(--weiss); text-decoration: none; margin-right: 1.25rem; }
footer.fuss a:hover { text-decoration: underline; color: var(--weiss); }

@media (max-width: 765px) {
  .band { padding: 3rem 0 3.5rem; }
  .band h1 { font-size: 2rem; }
  .band p { font-size: 1.15rem; }
  main.inhalt .karte { padding: 1.25rem; }
  main.inhalt h1 { font-size: 1.6rem; }
}