/*
Theme Name: Feuerwehr Husbäke Child
Template:   astra
.fh-grid { display: grid; gap: 1rem; grid-template-columns: repeat(12, minmax(0,1fr)); }
.fh-card { grid-column: span 12; background:#fff; border:1px solid #eee; padding:1rem; }
@media (min-width:600px){ .fh-card { grid-column: span 6; } }
@media (min-width:900px){ .fh-card { grid-column: span 4; } }
.fh-list li { padding:.5rem 0; border-bottom:1px solid #eee; }
.fh-filter { display:flex; gap:.5rem; flex-wrap:wrap; margin:1rem 0; }
.fh-filter select, .fh-filter button { padding:.5rem; }
.fh-badge { display:inline-block; background:#e31; color:#fff; padding:.1rem .4rem; border-radius:.3rem; font-size:.85rem; }
.fh-pagination { margin:1rem 0; }
.fh-featured img { width:100%; height:auto; }
.fh-hero img { width:100%; height:auto; display:block; }
:root{
  --fh-bg:#0b0d12;
  --fh-surface:#121520;
  --fh-card:#181c29;
  --fh-border:#2a3244;
  --fh-text:#e6e9ef;
  --fh-text-dim:#b4bdcf;
  --fh-primary:#e31b1b;
  --fh-primary-700:#b51616;
  --fh-accent:#f59f00;
}

html,body{background:var(--fh-bg); color:var(--fh-text);}
img{max-width:100%; height:auto; display:block;}
a{color:var(--fh-text); text-decoration:none;}
a:hover{color:#fff;}

.container{max-width:1200px; margin:0 auto; padding:0 16px;}
.section{padding:48px 0;}
.section--tight{padding:28px 0;}

h1,h2,h3{line-height:1.2; margin:0 0 .6em}
h1{font-size:clamp(28px,4vw,40px); font-weight:800;}
h2{font-size:clamp(22px,3vw,28px); font-weight:700;}
h3{font-size:clamp(18px,2.5vw,22px); font-weight:600;}
p{color:var(--fh-text); line-height:1.7;}

.fh-hero{
  background:linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,.8));
  padding:72px 0; border-bottom:1px solid var(--fh-border);
}
.fh-hero .title{font-size:clamp(32px,5vw,56px); letter-spacing:.5px;}
.fh-hero .subtitle{color:var(--fh-text-dim); margin-top:.6rem; max-width:70ch}

.grid{display:grid; gap:16px;}
.grid--cards{grid-template-columns:repeat(12, minmax(0,1fr));}
.span-12{grid-column:span 12}
@media(min-width:600px){ .span-6{grid-column:span 6} }
@media(min-width:900px){ .span-4{grid-column:span 4} }

.card{
  background:var(--fh-card);
  border:1px solid var(--fh-border);
  border-radius:10px;
  overflow:hidden;
  transition:transform .15s ease, border-color .15s ease;
}
.card:hover{ transform:translateY(-2px); border-color:#3b455f; }
.card__media img{width:100%; height:220px; object-fit:cover; background:#0c0f16}
.card__body{padding:14px;}
.card__title{margin:6px 0 4px}
.card__meta{color:var(--fh-text-dim); font-size:.95rem}

.list{list-style:none; margin:0; padding:0; border:1px solid var(--fh-border); border-radius:10px; overflow:hidden}
.list li{display:flex; gap:10px; align-items:center; padding:12px 14px; background:var(--fh-card); border-bottom:1px solid var(--fh-border)}
.list li:last-child{border-bottom:0}
.list time{color:var(--fh-text-dim); min-width:95px; display:inline-block}

.badge{
  display:inline-block; font-size:.82rem; font-weight:700; letter-spacing:.2px;
  background:linear-gradient(180deg, var(--fh-primary), var(--fh-primary-700));
  color:#fff; padding:.18rem .5rem; border-radius:6px;
}
.badge--accent{ background:linear-gradient(180deg, #f7b733, var(--fh-accent)); color:#231b00 }

/* Typ-Badges nach Slug */
.badge--brand{ background:linear-gradient(180deg, #e31b1b, #b51616); }                  /* Brand = Rot */
.badge--brandmeldeanlage{ background:linear-gradient(180deg, #f97316, #d25f10); }       /* BMA = Orange */
.badge--brandsicherheitswache{ background:linear-gradient(180deg, #f6c000, #d4a800); }  /* BSW = Gelb */
.badge--first-responder{ background:linear-gradient(180deg, #16a34a, #0f7c37); }        /* First Responder = Grün */
.badge--technische-hilfe{ background:linear-gradient(180deg, #2563eb, #1e40af); }       /* Technische Hilfe = Blau */

.btn{
  display:inline-block; padding:10px 14px; border-radius:8px; font-weight:700;
  background:var(--fh-primary); color:#fff; border:1px solid var(--fh-primary-700);
  transition:filter .15s ease, transform .15s ease;
}
.btn:hover{ filter:brightness(1.05); transform:translateY(-1px) }
.btn--ghost{ background:transparent; color:#fff; border-color:var(--fh-border) }

.kicker{color:var(--fh-accent); font-weight:800; letter-spacing:.4px; text-transform:uppercase; font-size:.85rem}
.dim{color:var(--fh-text-dim)}

.fh-filter{display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 20px}
.fh-filter select, .fh-filter button{
  background:var(--fh-surface); color:var(--fh-text); border:1px solid var(--fh-border);
  padding:10px 12px; border-radius:8px;
}

.pagination{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0}
.pagination a, .pagination span{
  padding:8px 12px; border-radius:8px; border:1px solid var(--fh-border); background:var(--fh-surface);
}
.pagination .current{background:var(--fh-primary); border-color:var(--fh-primary-700); color:#fff}

.breadcrumbs{color:var(--fh-text-dim); font-size:.95rem; margin:10px 0 20px}
.breadcrumbs a{color:var(--fh-text-dim)}
.breadcrumbs a:hover{color:#fff}

.post-header{margin-bottom:16px; border-bottom:1px solid var(--fh-border); padding-bottom:12px}
.post-featured{margin:16px 0; border-radius:10px; overflow:hidden; border:1px solid var(--fh-border)}
.post-content :where(p, ul, ol, blockquote){margin:1rem 0}
.post-meta{color:var(--fh-text-dim); font-size:.95rem}

*/