/*
Theme Name: SPD Gliederung 2017
Description: Nachbau des Designs "Neutrales Gliederungs-Design 2017" in SPD-Rot für den OV Dünnwald/Höhenhaus.
Version: 1.0.0
Text Domain: spd-gliederung-2017
*/
:root {
  --spd-red: #E3000F;
  --spd-red-dark: #D4000E;
  --text: #222222;
  --link: #2C7FDD;
  --link-hover: #1E66B9;
  --bg: #fff;
  --bg-soft: #f3f3f1;
  --text-muted: #5a5a58;
  --max-w: 960px;
  --gap: 15px;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
*,*::before,*::after { box-sizing: border-box; }
body { margin:0; font-family:var(--font); font-size:14px; line-height:20px; color:var(--text); background:var(--bg); }
h1,h2,h3,h4 { font-family:var(--font); font-weight:600; }
a { color:var(--spd-red); text-decoration:none; }
.entry-content a, .hero-card a.more { color:var(--link); }
.entry-content a:hover, .hero-card a.more:hover { color:var(--link-hover); }
img { max-width:100%; height:auto; }
:focus-visible { outline:3px solid #0b57d0; outline-offset:2px; }
.container { max-width:var(--max-w); margin:0 auto; padding:0 var(--gap); }
.skip-link { position:absolute; left:-999px; }
.skip-link:focus { left:1rem; top:1rem; background:#fff; color:#000; padding:.5rem; z-index:100; }

/* Header */
.site-header { background:#fff; }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:var(--gap); padding-top:13px; padding-bottom:13px; }
.site-logo { display:block; line-height:0; }
.site-logo img { width:240px; max-width:100%; height:auto; }
.header-meta { display:flex; gap:16px; align-items:center; }
.header-meta a { color:var(--spd-red); display:inline-flex; padding:6px; }
.header-meta svg { width:24px; height:24px; fill:currentColor; }

/* Hauptnavigation */
.main-nav-bar { background:var(--spd-red); }
.nav-toggle { display:none; }
.main-nav ul { list-style:none; display:flex; flex-wrap:wrap; margin:0; padding:0; }
.main-nav a { display:block; color:#fff; font-size:14px; font-weight:400; line-height:20px; padding:15px 15px 12px; text-transform:none; border-bottom:3px solid transparent; }
.main-nav a:hover, .main-nav .current-menu-item > a, .main-nav .current_page_item > a { border-bottom-color:#fff; }
@media (max-width: 767px) {
  .header-inner { padding-top:12px; padding-bottom:12px; }
  .site-logo img { width:200px; }
  .nav-toggle { display:flex; align-items:center; gap:8px; width:100%; background:var(--spd-red); color:#fff; border:0; padding:15px; font:inherit; cursor:pointer; }
  .nav-toggle svg { width:20px; height:20px; fill:currentColor; }
  .main-nav { display:none; }
  .main-nav.open { display:block; }
  .main-nav ul { flex-direction:column; }
  .main-nav a { border-bottom:0; border-left:3px solid transparent; }
  .main-nav a:hover, .main-nav .current-menu-item > a { border-left-color:#fff; }
}

/* Inhalt */
.site-main { padding:30px 0; }
.page-title, .entry-title { font-size:36px; line-height:1.1; margin:0 0 18px; padding-bottom:6px; border-bottom:4.7px solid var(--spd-red); }
.section-title { display:inline-block; font-size:30px; line-height:1.1; margin:0 0 20px; padding-bottom:6px; border-bottom:4.7px solid var(--spd-red); }
.meta { color:var(--text-muted); font-size:13px; margin:0 0 16px; }
.entry-content { font-size:18px; line-height:1.43; }
.entry-thumb img { display:block; width:100%; margin-bottom:20px; }

/* Karten */
.post-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; }
.post-card { background:var(--bg-soft); border-top:4px solid var(--spd-red); }
.post-card img { display:block; width:100%; aspect-ratio:3/2; object-fit:cover; }
.post-card .body { padding:15px; }
.post-card h2 { font-size:18px; line-height:1.25; margin:4px 0 8px; }
.post-card h2 a { color:var(--text); }
.post-card h2 a:hover { color:var(--spd-red); }
.post-card p { margin:0 0 8px; }

/* Hero */
.hero-card { display:grid; grid-template-columns:1fr; gap:20px; margin-bottom:30px; background:var(--bg-soft); border-top:4px solid var(--spd-red); }
.hero-card .hero-text { padding:20px; }
.hero-card h3 { font-size:26px; line-height:1.15; margin:4px 0 12px; }
.hero-card h3 a { color:var(--text); }
.hero-card h3 a:hover { color:var(--spd-red); }
.hero-card p { font-size:16px; line-height:1.4; }
.hero-card img { display:block; width:100%; height:100%; object-fit:cover; }
@media (min-width: 768px) { .hero-card { grid-template-columns:1fr 1fr; gap:0; } }

/* Footer */
.site-footer { margin-top:30px; background:#fff; }
.footer-bar { background:var(--spd-red-dark); }
.footer-bar .container { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; min-height:50px; }
.footer-nav ul { list-style:none; display:flex; margin:0; padding:0; flex-wrap:wrap; }
.footer-nav a, .to-menu { display:block; color:#fff; padding:15px; font-size:14px; line-height:20px; }
.footer-nav a:hover, .to-menu:hover { text-decoration:underline; color:#fff; }
.navigation.pagination { margin-top:24px; }

/* Titelbild auf Seiten */
.entry-figure { margin:0 0 24px; }
.entry-figure img { display:block; width:100%; height:auto; }