/* BoardFinder: statische Website. Ohne Framework, ohne externe Ressourcen. */

:root{
  --navy:#003C62;
  --navy-hell:rgba(0,60,98,.06);
  --navy-linie:rgba(0,60,98,.14);
  --bg:#f7f7f7;
  --weiss:#fff;
  --akzent:#1fa9e5;
  --gold:#f7be68;
  --grau:#6b7a85;
  --radius:6px;
  --wrap:1180px;
  /* Original nutzte Open Sans / Open Sans Condensed von Google Fonts.
     Bewusst durch Systemschriften ersetzt: keine externen Requests,
     damit auch kein datenschutzrechtliches Thema. Zum Selbsthosten
     woff2-Dateien nach /assets/fonts/ legen und hier @font-face ergaenzen. */
  --schrift:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --schrift-kopf:"Segoe UI Semibold","Helvetica Neue Condensed",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--navy);
  font-family:var(--schrift);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--akzent)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}

.skip{position:absolute;left:-9999px;background:var(--navy);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:12px;top:12px}

/* ---------- Kopf ---------- */
.kopf{background:var(--weiss);border-bottom:1px solid var(--navy-linie);position:sticky;top:0;z-index:50}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:78px;flex-wrap:wrap}
.logo{line-height:0;flex:0 0 auto}
.logo img{width:230px;height:auto}
.nav ul{display:flex;gap:26px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav a{text-decoration:none;font-size:15.5px;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{border-bottom-color:var(--akzent)}
.nav a.aktiv{border-bottom-color:var(--navy);font-weight:600}
.navtoggle,.burger{display:none}

@media(max-width:880px){
  .burger{display:flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;cursor:pointer;padding:9px}
  .burger span{display:block;height:2px;background:var(--navy);border-radius:2px}
  .nav{flex-basis:100%;display:none;padding-bottom:14px}
  .nav ul{flex-direction:column;gap:0}
  .nav a{display:block;padding:11px 0;border-bottom:1px solid var(--navy-linie)}
  .navtoggle:checked ~ .nav{display:block}
}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{font-family:var(--schrift-kopf);color:var(--navy);line-height:1.22;margin:0 0 .55em}
h1{font-size:clamp(30px,4.4vw,44px);letter-spacing:.01em}
h2{font-size:clamp(23px,3vw,31px);text-transform:uppercase;letter-spacing:.035em}
h3{font-size:20px}
h4{font-size:17px;text-transform:uppercase;letter-spacing:.05em;color:var(--grau)}
p{margin:0 0 1.05em}
ul,ol{padding-left:1.25em}
li{margin-bottom:.4em}
blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:3px solid var(--gold);font-size:1.1em}
hr{border:0;border-top:1px solid var(--navy-linie);margin:2.4em 0}

.sektion{padding:62px 0}
.sektion + .sektion{border-top:1px solid var(--navy-linie)}
.sektion-weiss{background:var(--weiss)}
.blei{font-size:19.5px;line-height:1.6;max-width:66ch}
.mitte{text-align:center}
.mitte .blei{margin-left:auto;margin-right:auto}

.knopf{display:inline-block;background:var(--navy);color:#fff !important;padding:12px 30px;border-radius:100px;
  text-decoration:none;font-size:15.5px;font-weight:600;border:2px solid var(--navy)}
.knopf:hover{background:transparent;color:var(--navy) !important}
.knopf-hell{background:transparent;color:var(--navy) !important}
.knopf-hell:hover{background:var(--navy);color:#fff !important}

/* ---------- Hero ---------- */
.hero{background:var(--navy);color:#fff;padding:76px 0 68px}
.hero h1{color:#fff;max-width:20ch}
.hero p{color:rgba(255,255,255,.9);font-size:20px;max-width:60ch;margin-bottom:1.6em}
.hero .knopf{background:#fff;color:var(--navy) !important;border-color:#fff}
.hero .knopf:hover{background:transparent;color:#fff !important}
.hero .knopf + .knopf{margin-left:12px;background:transparent;color:#fff !important}
.hero .knopf + .knopf:hover{background:#fff;color:var(--navy) !important}

/* ---------- Karten ---------- */
.raster{display:grid;gap:26px}
.raster-3{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.raster-4{grid-template-columns:repeat(auto-fill,minmax(232px,1fr))}

.karte{background:var(--weiss);border:1px solid var(--navy-linie);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column}
.karte:hover{border-color:var(--navy)}
.karte-bild{aspect-ratio:1/1;overflow:hidden;background:var(--navy-hell)}
.karte-bild img{width:100%;height:100%;object-fit:cover}
.karte-bild.leer{display:flex;align-items:center;justify-content:center;font-family:var(--schrift-kopf);
  font-size:38px;color:rgba(0,60,98,.28)}
.karte-text{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column}
.karte-text h3{margin-bottom:.3em;font-size:19px}
.karte-text h3 a{text-decoration:none}
.karte-rolle{color:var(--grau);font-size:14.5px;margin-bottom:.7em}
.karte-meta{color:var(--grau);font-size:13.5px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5em}
.karte-teaser{font-size:15.5px;margin-bottom:1em}
.karte-mehr{margin-top:auto;font-size:15px;font-weight:600;text-decoration:none}
.karte-mehr::after{content:" →"}

/* ---------- Profil ---------- */
.profil-kopf{display:grid;grid-template-columns:250px 1fr;gap:42px;align-items:start}
@media(max-width:760px){.profil-kopf{grid-template-columns:1fr;gap:24px}}
.profil-bild{border-radius:var(--radius);overflow:hidden;background:var(--navy-hell)}
.profil-bild img{width:100%;aspect-ratio:1/1;object-fit:cover}
.profil-kontakt{list-style:none;padding:0;margin:1.2em 0 0;font-size:15.5px}
.profil-kontakt li{margin-bottom:.45em}
.marken{display:flex;flex-wrap:wrap;gap:8px;margin:1.1em 0 0;padding:0;list-style:none}
.marken li{background:var(--navy-hell);border-radius:100px;padding:5px 15px;font-size:13.5px;margin:0}
.profil-text{max-width:74ch;margin-top:44px}
.profil-text h3{margin-top:1.9em;font-size:21px}
.profil-text h4{margin-top:2.1em;color:var(--navy);font-size:16px}

/* ---------- Beitrag ---------- */
.beitrag{max-width:74ch;margin:0 auto}
.beitrag-bild{border-radius:var(--radius);overflow:hidden;margin:0 0 34px}
.beitrag-meta{color:var(--grau);font-size:14.5px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:1.4em}
.beitrag h2{font-size:24px;margin-top:1.7em}
.beitrag h3{margin-top:1.6em}

.nicht-verfuegbar{color:var(--grau)}
.nicht-verfuegbar em{font-size:.9em;font-style:normal;white-space:nowrap}

.hinweis{background:var(--navy-hell);border-left:3px solid var(--gold);padding:18px 22px;border-radius:0 var(--radius) var(--radius) 0;font-size:15.5px}
.hinweis p:last-child{margin-bottom:0}

/* ---------- Kontakt ---------- */
.kontakt-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:22px}
.kontakt-karte{background:var(--weiss);border:1px solid var(--navy-linie);border-radius:var(--radius);padding:22px}
.kontakt-karte h3{font-size:18px;margin-bottom:.25em}
.kontakt-karte p{font-size:15px;margin-bottom:.5em;color:var(--grau)}
.kontakt-karte a{font-size:15px}

/* ---------- Fuss ---------- */
.fuss{background:var(--navy);color:rgba(255,255,255,.82);margin-top:0;padding:52px 0 34px;font-size:15px}
.fuss a{color:#fff;text-decoration:none}
.fuss a:hover{text-decoration:underline}
.fuss-raster{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px}
@media(max-width:760px){.fuss-raster{grid-template-columns:1fr;gap:24px}}
.fuss-marke{font-family:var(--schrift-kopf);font-size:21px;color:#fff;margin-bottom:.35em;letter-spacing:.03em}
.fuss-liste{list-style:none;padding:0;margin:0}
.fuss-liste li{margin-bottom:.55em}
.fuss-klein{font-size:14px;line-height:1.6}
.fuss-schluss{margin:34px 0 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.62)}

/* ---------- Diverses ---------- */
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:26px;text-align:center}
.zahl{font-family:var(--schrift-kopf);font-size:46px;line-height:1;color:var(--navy);margin-bottom:.15em}
.zahl-text{color:var(--grau);font-size:15px}
.liste-schlicht{list-style:none;padding:0}
.liste-schlicht li{border-bottom:1px solid var(--navy-linie);padding:16px 0;margin:0}
.liste-schlicht a{text-decoration:none;font-weight:600}
.liste-schlicht .karte-meta{margin:.2em 0 0}

@media print{.kopf,.fuss,.skip{display:none}body{background:#fff}}