/* Gerhard Martin – martin21.de
   Farben im aktuellen FDP-Corporate-Design (Stand Juli 2026) */

:root {
  --blau: #032D67;
  --gelb: #FFE000;
  --hellblau: #00A7E7;
  --schwarz: #000000;
  --weiss: #FFFFFF;
  --grau: #f4f5f7;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Public Sans', Arial, Helvetica, sans-serif;
  color: var(--blau);
  background: var(--weiss);
  line-height: 1.5;
}

a { color: var(--blau); }

.wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
header.site {
  background: var(--blau);
  color: var(--weiss);
  padding: 18px 0;
}

header.site .wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.brand {
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.5px;
  color: var(--weiss);
  text-decoration: none;
}

nav.site a {
  color: var(--weiss);
  text-decoration: none;
  margin-left: 22px;
  font-weight: 600;
  font-size: 0.95rem;
}

nav.site a:hover { text-decoration: underline; }

/* Balken-Element */
.balken {
  display: inline-block;
  height: 6px;
  width: 64px;
  background: var(--gelb);
  margin: 10px 0 18px;
}

/* Hero */
.hero {
  background: var(--blau);
  color: var(--weiss);
  padding: 70px 0 60px;
}

.hero h1 {
  font-size: 2.4rem;
  font-weight: 900;
  margin: 0 0 6px;
  letter-spacing: -0.5px;
}

.hero .subtitle {
  font-size: 1.15rem;
  font-weight: 500;
  color: #d7e6f5;
  margin-bottom: 6px;
}

.hero p.lead {
  max-width: 620px;
  font-size: 1.05rem;
  font-weight: 400;
  color: #eef4fa;
}

/* Sections */
section { padding: 60px 0; }

h2 {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 4px;
}

section.about { background: var(--weiss); }
section.themen { background: var(--grau); }
section.kacheln { background: var(--weiss); }
section.disclaimer { background: var(--grau); }
section.kontakt { background: var(--blau); color: var(--weiss); }

/* Kacheln (Slogan tiles) */
.kachel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.kachel {
  padding: 28px 24px;
  border-radius: 4px;
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: -0.3px;
}

.kachel .balken { background: var(--weiss); opacity: 0.9; }

.kachel.blau { background: var(--blau); color: var(--weiss); }
.kachel.gelb { background: var(--gelb); color: var(--blau); }
.kachel.hellblau { background: var(--hellblau); color: var(--weiss); }
.kachel.gelb .balken { background: var(--blau); }

/* Disclaimer box */
.disclaimer .box {
  background: var(--weiss);
  border-left: 6px solid var(--gelb);
  padding: 20px 24px;
  font-size: 0.95rem;
  color: #333;
  max-width: 720px;
}

/* Kontakt */
section.kontakt a { color: var(--gelb); }
section.kontakt .balken { background: var(--gelb); }

/* Footer */
footer {
  background: var(--schwarz);
  color: #ccc;
  padding: 24px 0;
  font-size: 0.85rem;
  text-align: center;
}

footer a { color: #ccc; }

@media (max-width: 600px) {
  .hero h1 { font-size: 1.8rem; }
  header.site .wrap { flex-direction: column; align-items: flex-start; }
  nav.site a { margin-left: 0; margin-right: 18px; }
}