/*
Theme Name: FF Pettendorf V3
Theme URI: https://ffpettendorf.com/
Author: OpenAI
Description: Individuelles WordPress-Theme für die Freiwillige Feuerwehr Pettendorf.
Version: 5.4.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: ffp-v3
*/
:root{--red:#f12619;--red-dark:#c81b12;--black:#101214;--ink:#17191c;--muted:#6c7178;--soft:#f4f5f6;--line:#e5e7e9;--white:#fff;--max:1220px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,"Helvetica Neue",sans-serif;color:var(--ink);background:#fff;line-height:1.55}a{text-decoration:none;color:inherit}img{display:block;max-width:100%;height:auto}.wrap{width:min(calc(100% - 40px),var(--max));margin:auto}
.redline{height:6px;background:var(--red)}
.header{height:90px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1000}.header .wrap{height:100%;display:flex;align-items:center}.brand img{width:250px;max-height:72px;object-fit:contain;object-position:left center}.nav{margin-left:auto;display:block!important;visibility:visible!important;opacity:1!important}.nav ul{display:flex;gap:2px;align-items:center;list-style:none;padding:0;margin:0}.nav li{display:block}.nav a{display:block;color:#17191c!important;padding:12px 11px;font-weight:900;font-size:.86rem;text-transform:uppercase;letter-spacing:.02em;border-radius:7px;white-space:nowrap}.nav a:hover,.nav .current-menu-item>a{background:#f5f5f5;color:var(--red)}.menu{display:none;margin-left:auto;border:0;background:#f2f3f4;border-radius:8px;width:44px;height:44px;font-size:1.3rem}
.hero{position:relative;overflow:hidden;background:linear-gradient(110deg,#fff 0%,#fff 53%,#f2f3f4 53%,#f2f3f4 100%);min-height:650px}.hero:after{content:"";position:absolute;right:-150px;top:-210px;width:570px;height:850px;background:var(--red);transform:skewX(-14deg);opacity:.98}.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:.86fr 1.14fr;align-items:center;min-height:650px}.hero-copy{padding:72px 0;position:relative;z-index:5}.kicker{display:flex;align-items:center;gap:10px;color:var(--red);font-weight:950;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem}.kicker:before{content:"";width:35px;height:4px;background:var(--red)}.hero h1{font-size:clamp(3.5rem,6.6vw,6.2rem);line-height:.87;letter-spacing:-.07em;text-transform:uppercase;margin:22px 0 25px;font-style:italic}.hero h1 span{display:block;color:var(--red)}.hero p{font-size:1.15rem;color:var(--muted);max-width:570px;margin:0}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:29px}.btn{min-height:50px;display:inline-flex;align-items:center;justify-content:center;padding:0 21px;border-radius:7px;font-weight:900;text-transform:uppercase;font-size:.84rem;letter-spacing:.035em}.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red-dark)}.btn-dark{background:var(--black);color:#fff}.truck{position:relative;z-index:3;align-self:end;margin-left:-70px;margin-right:-85px;margin-bottom:12px;filter:drop-shadow(0 28px 20px rgba(0,0,0,.18))}.truck img{width:100%;max-height:610px;object-fit:contain;object-position:center bottom}
.emergency{background:var(--black);color:#fff}.emergency .wrap{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px}.emergency-copy{display:flex;align-items:center;gap:15px}.emergency-badge{background:var(--red);padding:7px 10px;border-radius:5px;font-size:.74rem;font-weight:950;text-transform:uppercase;letter-spacing:.08em}.emergency strong{font-size:1rem}.emergency small{color:#aeb3b8;margin-left:8px}.emergency-number{font-size:2rem;font-weight:950;color:#fff}.emergency-number span{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:#9ba0a5;margin-right:8px}
.section{padding:82px 0}.soft{background:var(--soft)}.eyebrow{font-size:.75rem;font-weight:950;text-transform:uppercase;letter-spacing:.13em;color:var(--red)}.title{font-size:clamp(2.2rem,4.6vw,4rem);line-height:.98;letter-spacing:-.055em;margin:9px 0 0;text-transform:uppercase;font-style:italic}.head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:33px}.head-link{font-weight:900;color:var(--red);text-transform:uppercase;font-size:.8rem;letter-spacing:.05em}
.links{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.link-card{background:#fff;border:1px solid var(--line);min-height:170px;padding:25px 23px;position:relative;transition:.18s;overflow:hidden}.link-card:after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--red);transform:scaleX(.25);transform-origin:left;transition:.2s}.link-card:hover{transform:translateY(-3px);box-shadow:0 14px 35px rgba(0,0,0,.08)}.link-card:hover:after{transform:scaleX(1)}.link-num{font-size:.72rem;color:#a3a7ab;font-weight:900;letter-spacing:.1em}.link-card h3{margin:28px 0 5px;font-size:1.3rem;text-transform:uppercase;font-style:italic}.link-card p{margin:0;color:var(--muted);font-size:.89rem}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.post{background:#fff;border:1px solid var(--line);overflow:hidden;transition:.18s}.post:hover{transform:translateY(-3px);box-shadow:0 15px 35px rgba(0,0,0,.08)}.post-img{display:block;aspect-ratio:16/10;background:#ddd;overflow:hidden}.post-img img{width:100%;height:100%;object-fit:cover;transition:.3s}.post:hover .post-img img{transform:scale(1.025)}.post-placeholder{height:100%;display:grid;place-items:center;background:#292d31;color:#fff;font-weight:950}.post-body{padding:21px}.post-meta{font-size:.72rem;color:var(--red);font-weight:950;text-transform:uppercase;letter-spacing:.08em}.post h3{font-size:1.3rem;line-height:1.17;margin:8px 0 10px}.post p{color:var(--muted);margin:0;font-size:.94rem}.read{display:inline-block;color:var(--red);font-weight:900;text-transform:uppercase;font-size:.76rem;margin-top:17px}
.vehicle{background:var(--black);color:#fff;overflow:hidden}.vehicle-grid{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;min-height:500px}.vehicle-copy{padding:75px 0}.vehicle .eyebrow{color:#ff493f}.vehicle .title{max-width:520px}.vehicle p{color:#aeb3b8;max-width:540px}.vehicle-facts{display:flex;gap:28px;flex-wrap:wrap;margin-top:28px}.fact strong{display:block;font-size:1.2rem}.fact span{color:#8e949a;font-size:.8rem}.vehicle-img{margin-right:-100px;align-self:end}.vehicle-img img{max-height:490px;margin-left:auto;filter:drop-shadow(0 22px 18px rgba(0,0,0,.35))}
.join{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;background:var(--red);color:#fff;padding:48px 52px;position:relative;overflow:hidden}.join:after{content:"122";position:absolute;right:190px;top:-60px;font-size:12rem;font-weight:950;color:rgba(255,255,255,.07);font-style:italic}.join> *{position:relative;z-index:2}.join h2{font-size:clamp(2.2rem,4vw,3.7rem);line-height:.95;margin:0;text-transform:uppercase;font-style:italic;letter-spacing:-.04em}.join p{margin:13px 0 0;color:rgba(255,255,255,.82);max-width:670px}.btn-white{background:#fff;color:var(--black)}
.footer{background:#0d0f11;color:#fff;border-top:6px solid var(--red);padding:52px 0 24px}.footer-grid{display:grid;grid-template-columns:1.3fr .8fr .8fr;gap:45px}.footer-logo{width:260px;background:#fff;padding:10px;margin-bottom:16px}.footer h3{margin:0 0 12px;text-transform:uppercase;font-size:.9rem}.footer p,.footer a{color:#969ca2}.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:7px}.footer-bottom{border-top:1px solid #292d31;margin-top:38px;padding-top:20px;color:#686e74;font-size:.82rem;display:flex;justify-content:space-between}
.archive-head{background:var(--black);color:#fff;padding:60px 0;border-bottom:6px solid var(--red)}.archive-head h1{font-size:clamp(2.8rem,6vw,5rem);line-height:.95;text-transform:uppercase;font-style:italic;margin:8px 0 0;letter-spacing:-.05em}.content{width:min(calc(100% - 40px),880px);margin:auto;padding:70px 0 95px}.content h1{font-size:clamp(2.7rem,6vw,5rem);line-height:.98;letter-spacing:-.05em}.entry-meta{color:var(--muted);margin-bottom:28px}.entry-content{font-size:1.07rem}.entry-content a{color:var(--red);text-decoration:underline}.post-thumbnail{margin:25px 0 35px}.nav-links{display:flex;gap:7px;margin-top:35px}.page-numbers{padding:9px 13px;border:1px solid var(--line)}.page-numbers.current{background:var(--red);border-color:var(--red);color:#fff}
@media(max-width:980px){.menu{display:block}.nav{display:none!important;position:absolute;top:96px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:12px 20px 18px}.nav.open{display:block!important}.nav ul{display:grid}.hero-grid{grid-template-columns:1fr;align-content:start}.hero{min-height:850px;background:#fff}.hero-copy{padding:60px 0 10px}.truck{margin:0 -40px -10px 20px}.hero:after{right:-300px;top:380px;height:600px}.links{grid-template-columns:repeat(2,1fr)}.posts{grid-template-columns:repeat(2,1fr)}.vehicle-grid{grid-template-columns:1fr}.vehicle-img{margin:0 -60px 0 50px}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.wrap{width:min(calc(100% - 26px),var(--max))}.header{height:78px}.brand img{width:190px;max-height:62px}.nav{top:84px}.hero{min-height:720px}.hero-grid{min-height:720px}.hero-copy{padding-top:44px}.hero h1{font-size:clamp(3.1rem,15vw,4.6rem)}.hero p{font-size:1rem}.truck{margin:15px -35px 0 -10px}.hero:after{top:410px;right:-350px}.emergency .wrap{padding:13px 0;display:block}.emergency-copy{display:block}.emergency small{display:block;margin:3px 0 0}.emergency-number{margin-top:4px}.section{padding:60px 0}.links,.posts{grid-template-columns:1fr}.head{display:block}.head-link{display:inline-block;margin-top:15px}.vehicle-copy{padding:60px 0 20px}.vehicle-img{margin:0 -30px 0 0}.join{grid-template-columns:1fr;padding:35px 25px}.footer-grid{grid-template-columns:1fr}.footer-bottom{display:block}}

/* V3.2 – Header navigation hardening */
.header{overflow:visible!important}
.header .wrap{display:flex!important;align-items:center!important;gap:18px!important}
.brand{flex:0 0 auto!important;display:block!important}
.brand img{display:block!important;width:230px!important;max-width:230px!important;height:auto!important}
.nav{display:block!important;visibility:visible!important;opacity:1!important;position:static!important;margin-left:auto!important;z-index:1100!important}
.nav .ffp-fixed-menu{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:2px!important;list-style:none!important;margin:0!important;padding:0!important;visibility:visible!important;opacity:1!important}
.nav .ffp-fixed-menu li{display:block!important;visibility:visible!important;opacity:1!important;margin:0!important;padding:0!important}
.nav .ffp-fixed-menu a{display:block!important;visibility:visible!important;opacity:1!important;color:#17191c!important;background:transparent!important;padding:11px 10px!important;font-size:13px!important;line-height:1.2!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:.02em!important;white-space:nowrap!important}
.nav .ffp-fixed-menu a:hover{color:#f12619!important;background:#f3f4f5!important}
@media (max-width:1100px) and (min-width:981px){
  .brand img{width:190px!important;max-width:190px!important}
  .nav .ffp-fixed-menu a{padding:10px 7px!important;font-size:12px!important}
}
@media (max-width:980px){
  .menu{display:block!important}
  .nav{display:none!important;position:absolute!important;top:84px!important;left:0!important;right:0!important;background:#fff!important;border-bottom:1px solid #e5e7e9!important;padding:10px 16px 16px!important;margin:0!important}
  .nav.open{display:block!important}
  .nav .ffp-fixed-menu{display:grid!important;grid-template-columns:1fr!important;gap:2px!important}
  .nav .ffp-fixed-menu a{font-size:14px!important;padding:13px 12px!important}
}

/* V3.3 – finale Hauptnavigation */
.header{height:94px!important;background:#fff!important;border-bottom:1px solid #e7e8ea!important}
.header .wrap{height:100%!important;display:flex!important;align-items:center!important;gap:22px!important}
.brand img{width:210px!important;max-width:210px!important;max-height:76px!important;object-fit:contain!important}
.nav{margin-left:auto!important;display:block!important;position:static!important;visibility:visible!important;opacity:1!important}
.nav .ffp-fixed-menu{display:flex!important;align-items:center!important;gap:0!important;list-style:none!important;margin:0!important;padding:0!important}
.nav .ffp-fixed-menu>li{position:relative!important;display:block!important}
.nav .ffp-fixed-menu>li>a{
  display:flex!important;align-items:center!important;gap:7px!important;
  color:#181a1d!important;background:#fff!important;
  padding:34px 14px 30px!important;
  font-size:13px!important;line-height:1!important;font-weight:950!important;
  text-transform:uppercase!important;letter-spacing:.015em!important;
  white-space:nowrap!important;border-bottom:4px solid transparent!important;
}
.nav .ffp-fixed-menu>li>a:hover{color:#f12619!important;border-bottom-color:#f12619!important;background:#fafafa!important}
.nav .ffp-fixed-menu>li.has-drop>a:after{
  content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);margin-left:1px
}
.nav .sub-menu{
  display:none;position:absolute;top:100%;left:0;min-width:220px;background:#fff;
  list-style:none;margin:0;padding:10px 0;border-top:4px solid #f12619;
  box-shadow:0 18px 42px rgba(0,0,0,.15);z-index:2000
}
.nav li:hover>.sub-menu{display:block}
.nav .sub-menu a{display:block;padding:11px 18px;color:#1b1d20!important;font-weight:800;font-size:13px}
.nav .sub-menu a:hover{background:#f4f5f6;color:#f12619!important}
@media (max-width:1180px) and (min-width:981px){
 .brand img{width:175px!important;max-width:175px!important}
 .nav .ffp-fixed-menu>li>a{padding:34px 8px 30px!important;font-size:11px!important}
}
@media (max-width:980px){
 .header{height:82px!important}
 .brand img{width:185px!important;max-width:185px!important}
 .menu{display:block!important}
 .nav{display:none!important;position:absolute!important;top:88px!important;left:0!important;right:0!important;
      background:#fff!important;border-bottom:1px solid #e5e7e9!important;padding:8px 16px 16px!important;margin:0!important}
 .nav.open{display:block!important}
 .nav .ffp-fixed-menu{display:grid!important;grid-template-columns:1fr!important}
 .nav .ffp-fixed-menu>li>a{padding:14px 12px!important;font-size:14px!important;border-bottom:1px solid #eee!important}
 .nav .sub-menu{position:static!important;display:block!important;box-shadow:none!important;border:0!important;padding:0 0 4px 16px!important}
 .nav .sub-menu:empty{display:none!important}
}

/* V3.4 – Feuerwehrname in Hemi Head */
.hero h1{
  font-family:"Hemi Head","HemiHead","Hemi Head 426",Impact,"Arial Narrow",sans-serif!important;
  font-style:normal!important;
  font-weight:400!important;
  letter-spacing:.01em!important;
  line-height:.91!important;
}

/* V3.5 – echte Menüstruktur laut bestehender FF-Pettendorf-Navigation */
.nav .sub-menu{min-width:270px!important}
.nav .sub-menu li{position:relative!important}
.nav .sub-menu a{white-space:nowrap!important}
.nav .ffp-fixed-menu>li>a{font-size:12px!important;padding-left:11px!important;padding-right:11px!important}
@media(max-width:1180px) and (min-width:981px){
 .nav .ffp-fixed-menu>li>a{font-size:10.5px!important;padding-left:7px!important;padding-right:7px!important}
}

/* V3.6 – WordPress-Menü mit echten bestehenden Links */
.nav .menu,
.nav > ul{
  display:flex!important;
  align-items:center!important;
  gap:0!important;
  list-style:none!important;
  margin:0!important;
  padding:0!important;
}
.nav .menu > li,
.nav > ul > li{position:relative!important;display:block!important}
.nav .menu > li > a,
.nav > ul > li > a{
  display:flex!important;align-items:center!important;gap:7px!important;
  color:#181a1d!important;background:#fff!important;
  padding:34px 11px 30px!important;
  font-size:12px!important;line-height:1!important;font-weight:950!important;
  text-transform:uppercase!important;letter-spacing:.015em!important;
  white-space:nowrap!important;border-bottom:4px solid transparent!important
}
.nav .menu > li > a:hover,
.nav > ul > li > a:hover,
.nav .current-menu-item > a,
.nav .current-menu-ancestor > a{
  color:#f12619!important;border-bottom-color:#f12619!important;background:#fafafa!important
}
.nav .menu-item-has-children > a:after{
  content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);margin-left:2px
}
.nav .sub-menu{
  display:none!important;position:absolute!important;top:100%!important;left:0!important;
  min-width:285px!important;background:#fff!important;list-style:none!important;margin:0!important;padding:10px 0!important;
  border-top:4px solid #f12619!important;box-shadow:0 18px 42px rgba(0,0,0,.15)!important;z-index:2200!important
}
.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu{display:block!important}
.nav .sub-menu li{display:block!important;position:relative!important}
.nav .sub-menu a{
  display:block!important;padding:11px 18px!important;color:#1b1d20!important;
  background:#fff!important;font-weight:800!important;font-size:13px!important;line-height:1.3!important;
  white-space:nowrap!important;text-transform:none!important;border:0!important
}
.nav .sub-menu a:hover{background:#f4f5f6!important;color:#f12619!important}
@media(max-width:1180px) and (min-width:981px){
  .nav .menu > li > a,.nav > ul > li > a{font-size:10.5px!important;padding-left:7px!important;padding-right:7px!important}
}
@media(max-width:980px){
  .nav .menu,.nav > ul{display:grid!important;grid-template-columns:1fr!important}
  .nav .menu > li > a,.nav > ul > li > a{padding:14px 12px!important;font-size:14px!important;border-bottom:1px solid #eee!important}
  .nav .sub-menu{position:static!important;display:block!important;box-shadow:none!important;border:0!important;min-width:0!important;padding:0 0 5px 17px!important}
  .nav .sub-menu a{padding:10px 12px!important;white-space:normal!important}
}

/* V3.7 – Header: Logo oben, Menü garantiert sichtbar und mittig */
.header{
  height:auto!important;
  min-height:132px!important;
  background:#fff!important;
  overflow:visible!important;
}
.header .wrap{
  min-height:132px!important;
  display:grid!important;
  grid-template-columns:220px 1fr 220px!important;
  grid-template-rows:74px 58px!important;
  align-items:center!important;
  position:relative!important;
}
.brand{
  grid-column:1!important;
  grid-row:1!important;
  align-self:center!important;
}
.brand img{width:205px!important;max-width:205px!important;max-height:68px!important}
.nav{
  grid-column:1 / -1!important;
  grid-row:2!important;
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  position:static!important;
  width:100%!important;
  margin:0!important;
  justify-content:center!important;
  align-items:center!important;
  z-index:1500!important;
}
.nav > .menu,
.nav > ul,
.nav .menu{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  justify-content:center!important;
  align-items:center!important;
  width:auto!important;
  margin:0 auto!important;
  padding:0!important;
  gap:2px!important;
}
.nav .menu > li > a,
.nav > ul > li > a{
  padding:18px 17px 16px!important;
  font-size:13px!important;
}
.menu{grid-column:3!important;grid-row:1!important;justify-self:end!important}
@media(max-width:1180px) and (min-width:981px){
 .header .wrap{grid-template-columns:180px 1fr 180px!important}
 .brand img{width:175px!important}
 .nav .menu > li > a,.nav > ul > li > a{padding:18px 10px 16px!important;font-size:11.5px!important}
}
@media(max-width:980px){
 .header{min-height:82px!important}
 .header .wrap{min-height:82px!important;display:flex!important}
 .brand img{width:185px!important;max-width:185px!important}
 .menu{display:block!important;margin-left:auto!important}
 .nav{
   display:none!important;position:absolute!important;top:82px!important;left:0!important;right:0!important;
   width:100%!important;background:#fff!important;padding:8px 16px 16px!important;border-bottom:1px solid #e5e7e9!important
 }
 .nav.open{display:block!important}
 .nav > .menu,.nav > ul,.nav .menu{display:grid!important;width:100%!important}
}

/* V3.8 – Header ganz oben, Menü mittig */
.redline{display:none!important}

.header{
  position:sticky!important;
  top:0!important;
  z-index:3000!important;
  min-height:132px!important;
  margin:0!important;
  background:#fff!important;
}

body{margin-top:0!important;padding-top:0!important}

@media(max-width:980px){
  .header{
    top:0!important;
    min-height:82px!important;
  }
}

/* V3.9 – Logo und Navigation auf derselben Höhe */
.header{
  height:104px!important;
  min-height:104px!important;
}
.header .wrap{
  height:104px!important;
  min-height:104px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:28px!important;
}
.brand{
  display:flex!important;
  align-items:center!important;
  flex:0 0 205px!important;
  align-self:center!important;
}
.brand img{
  display:block!important;
  width:190px!important;
  max-width:190px!important;
  max-height:82px!important;
  object-fit:contain!important;
  object-position:left center!important;
}
.nav{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:1 1 auto!important;
  width:auto!important;
  margin:0!important;
  position:static!important;
}
.nav > .menu,
.nav > ul,
.nav .menu{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  margin:0!important;
}
.nav .menu > li > a,
.nav > ul > li > a{
  display:flex!important;
  align-items:center!important;
  min-height:104px!important;
  padding:0 13px!important;
  border-bottom:4px solid transparent!important;
}
@media(max-width:1180px) and (min-width:981px){
  .header .wrap{gap:12px!important}
  .brand{flex-basis:160px!important}
  .brand img{width:150px!important;max-width:150px!important}
  .nav .menu > li > a,.nav > ul > li > a{padding:0 7px!important;font-size:10.5px!important}
}
@media(max-width:980px){
  .header,.header .wrap{height:82px!important;min-height:82px!important}
  .header .wrap{display:flex!important}
  .brand{flex:0 0 auto!important}
  .brand img{width:175px!important;max-width:175px!important;max-height:68px!important}
  .menu{margin-left:auto!important}
  .nav{
    display:none!important;
    position:absolute!important;
    top:82px!important;
    left:0!important;
    right:0!important;
    width:100%!important;
  }
  .nav.open{display:block!important}
  .nav .menu > li > a,.nav > ul > li > a{min-height:auto!important}
}

/* =========================================================
   V4.0 – Responsive Fix für Tablet & Smartphone
   ========================================================= */

/* Grundsätzlich horizontales Überlaufen verhindern */
html, body {
  max-width: 100%!important;
  overflow-x: hidden!important;
}
img {
  max-width: 100%!important;
  height: auto!important;
}

/* ---------- TABLET ---------- */
@media (max-width: 1100px) {

  .wrap{
    width:min(calc(100% - 32px), var(--max))!important;
  }

  /* Header */
  .header,
  .header .wrap{
    height:82px!important;
    min-height:82px!important;
  }

  .header .wrap{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:16px!important;
  }

  .brand{
    flex:0 0 auto!important;
  }

  .brand img{
    width:165px!important;
    max-width:165px!important;
    max-height:66px!important;
  }

  .menu{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:46px!important;
    height:46px!important;
    margin-left:auto!important;
    flex:0 0 46px!important;
    font-size:1.4rem!important;
    position:relative!important;
    z-index:4001!important;
  }

  .nav{
    display:none!important;
    position:absolute!important;
    top:82px!important;
    left:0!important;
    right:0!important;
    width:100%!important;
    max-height:calc(100vh - 82px)!important;
    overflow-y:auto!important;
    background:#fff!important;
    border-bottom:1px solid #e5e7e9!important;
    box-shadow:0 18px 35px rgba(0,0,0,.12)!important;
    padding:10px 18px 20px!important;
    z-index:4000!important;
  }

  .nav.open{
    display:block!important;
  }

  .nav > .menu,
  .nav > ul,
  .nav .menu{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
  }

  .nav .menu > li,
  .nav > ul > li{
    width:100%!important;
  }

  .nav .menu > li > a,
  .nav > ul > li > a{
    min-height:0!important;
    width:100%!important;
    padding:14px 12px!important;
    font-size:14px!important;
    border-bottom:1px solid #eceeef!important;
    justify-content:space-between!important;
  }

  .nav .sub-menu{
    position:static!important;
    display:block!important;
    min-width:0!important;
    width:100%!important;
    box-shadow:none!important;
    border:0!important;
    padding:0 0 6px 16px!important;
    background:#fafafa!important;
  }

  .nav .sub-menu a{
    white-space:normal!important;
    font-size:13px!important;
    padding:11px 12px!important;
  }

  /* Hero */
  .hero{
    min-height:0!important;
    background:#fff!important;
  }

  .hero-grid{
    min-height:0!important;
    grid-template-columns:1fr!important;
    padding-top:0!important;
  }

  .hero-copy{
    padding:48px 0 20px!important;
    max-width:720px!important;
  }

  .hero h1{
    font-size:clamp(3rem, 9vw, 5rem)!important;
    line-height:.9!important;
  }

  .hero p{
    max-width:650px!important;
  }

  .truck{
    margin:10px auto 0!important;
    width:100%!important;
    max-width:900px!important;
    align-self:auto!important;
  }

  .truck img{
    width:100%!important;
    max-height:none!important;
    object-fit:contain!important;
  }

  .hero:after{
    width:420px!important;
    height:520px!important;
    right:-230px!important;
    top:auto!important;
    bottom:-90px!important;
    opacity:.92!important;
  }

  /* Notruf */
  .emergency .wrap{
    padding:14px 0!important;
    flex-wrap:wrap!important;
  }

  /* Kacheln und Beiträge */
  .links{
    grid-template-columns:repeat(2, minmax(0,1fr))!important;
  }

  .posts{
    grid-template-columns:repeat(2, minmax(0,1fr))!important;
  }

  .join{
    grid-template-columns:1fr!important;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr!important;
  }
}

/* ---------- SMARTPHONE ---------- */
@media (max-width: 700px) {

  .wrap{
    width:min(calc(100% - 24px), var(--max))!important;
  }

  .brand img{
    width:145px!important;
    max-width:145px!important;
  }

  .hero-copy{
    padding:34px 0 12px!important;
  }

  .kicker{
    font-size:.7rem!important;
    letter-spacing:.09em!important;
  }

  .hero h1{
    font-size:clamp(2.65rem, 14vw, 4.15rem)!important;
    letter-spacing:-.035em!important;
    word-break:normal!important;
  }

  .hero p{
    font-size:1rem!important;
  }

  .hero-actions{
    display:grid!important;
    grid-template-columns:1fr!important;
    width:100%!important;
  }

  .btn{
    width:100%!important;
  }

  .truck{
    margin:8px -12px 0!important;
    width:calc(100% + 24px)!important;
  }

  .hero:after{
    width:300px!important;
    height:390px!important;
    right:-210px!important;
    bottom:-60px!important;
  }

  .emergency .wrap{
    display:grid!important;
    grid-template-columns:1fr auto!important;
    align-items:center!important;
    gap:8px 14px!important;
  }

  .emergency-copy{
    display:block!important;
  }

  .emergency small{
    display:block!important;
    margin:4px 0 0!important;
  }

  .emergency-number{
    font-size:1.8rem!important;
  }

  .section{
    padding:52px 0!important;
  }

  .title{
    font-size:clamp(2rem, 11vw, 3.3rem)!important;
  }

  .head{
    display:block!important;
  }

  .head-link{
    display:inline-block!important;
    margin-top:14px!important;
  }

  .links,
  .posts{
    grid-template-columns:1fr!important;
  }

  .link-card{
    min-height:145px!important;
  }

  .post-body{
    padding:18px!important;
  }

  .join{
    padding:30px 22px!important;
  }

  .join:after{
    font-size:8rem!important;
    right:-20px!important;
  }

  .footer-grid{
    grid-template-columns:1fr!important;
    gap:28px!important;
  }

  .footer-bottom{
    display:grid!important;
    gap:7px!important;
  }

  .content{
    width:min(calc(100% - 24px), 880px)!important;
    padding:48px 0 70px!important;
  }

  .content h1{
    font-size:clamp(2.4rem, 13vw, 4rem)!important;
  }
}

/* sehr kleine Geräte */
@media (max-width: 390px) {
  .brand img{
    width:128px!important;
    max-width:128px!important;
  }

  .hero h1{
    font-size:2.6rem!important;
  }

  .emergency .wrap{
    grid-template-columns:1fr!important;
  }

  .emergency-number{
    margin-top:4px!important;
  }
}

/* =========================================================
   V4.1 – Mobile/Tablet Navigation komplett neu
   Wichtig: Hamburger = .menu-toggle, WP-Menü = .menu
   ========================================================= */

.menu-toggle{
  display:none;
  border:0;
  background:#f3f4f5;
  color:#17191c;
  width:46px;
  height:46px;
  border-radius:8px;
  font-size:1.45rem;
  line-height:1;
  cursor:pointer;
  flex:0 0 46px;
  align-items:center;
  justify-content:center;
}

.submenu-toggle{
  display:none;
}

/* Desktop */
@media (min-width:1101px){
  .nav{display:flex!important}
  .nav .sub-menu{display:none!important}
  .nav li:hover > .sub-menu,
  .nav li:focus-within > .sub-menu{display:block!important}
}

/* Tablet + Smartphone */
@media (max-width:1100px){

  .header{
    height:78px!important;
    min-height:78px!important;
    position:sticky!important;
    top:0!important;
  }

  .header .wrap{
    height:78px!important;
    min-height:78px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:14px!important;
  }

  .brand{
    flex:0 1 auto!important;
    min-width:0!important;
  }

  .brand img{
    width:155px!important;
    max-width:155px!important;
    max-height:62px!important;
  }

  .menu-toggle{
    display:flex!important;
    margin-left:auto!important;
    position:relative!important;
    z-index:5002!important;
  }

  .nav{
    display:none!important;
    position:fixed!important;
    top:78px!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    width:100%!important;
    height:auto!important;
    max-height:none!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    background:#fff!important;
    padding:8px 14px 28px!important;
    border-top:1px solid #eceeef!important;
    border-bottom:0!important;
    box-shadow:0 18px 35px rgba(0,0,0,.16)!important;
    z-index:5000!important;
  }

  .nav.open{
    display:block!important;
  }

  .nav > .menu,
  .nav > ul,
  .nav .menu{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    list-style:none!important;
  }

  .nav .menu > li,
  .nav > ul > li{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 48px!important;
    width:100%!important;
    position:relative!important;
    border-bottom:1px solid #eceeef!important;
  }

  .nav .menu > li > a,
  .nav > ul > li > a{
    grid-column:1!important;
    min-height:54px!important;
    padding:0 8px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    font-size:15px!important;
    font-weight:900!important;
    color:#17191c!important;
    border:0!important;
    background:#fff!important;
  }

  /* Desktop-Pfeil ausblenden, eigener Button übernimmt */
  .nav .menu-item-has-children > a:after{
    display:none!important;
  }

  .submenu-toggle{
    display:flex!important;
    grid-column:2!important;
    grid-row:1!important;
    align-items:center!important;
    justify-content:center!important;
    width:48px!important;
    min-height:54px!important;
    border:0!important;
    border-left:1px solid #eceeef!important;
    background:#fff!important;
    color:#17191c!important;
    font-size:1.25rem!important;
    cursor:pointer!important;
  }

  .submenu-toggle span{
    display:block;
    transition:transform .18s ease;
  }

  .submenu-open > .submenu-toggle span{
    transform:rotate(180deg);
  }

  .nav .sub-menu{
    grid-column:1 / -1!important;
    display:none!important;
    position:static!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:4px 0 10px 14px!important;
    background:#f6f7f8!important;
    border:0!important;
    border-top:1px solid #eceeef!important;
    box-shadow:none!important;
  }

  .nav .submenu-open > .sub-menu{
    display:block!important;
  }

  .nav .sub-menu li{
    display:block!important;
    width:100%!important;
    border:0!important;
  }

  .nav .sub-menu a{
    display:block!important;
    width:100%!important;
    padding:11px 12px!important;
    color:#34383d!important;
    background:transparent!important;
    font-size:13.5px!important;
    line-height:1.35!important;
    font-weight:700!important;
    white-space:normal!important;
    text-transform:none!important;
    border:0!important;
  }

  .nav .sub-menu a:hover{
    color:#f12619!important;
    background:#fff!important;
  }
}

/* Handy */
@media (max-width:600px){
  .header,
  .header .wrap{
    height:72px!important;
    min-height:72px!important;
  }

  .brand img{
    width:138px!important;
    max-width:138px!important;
    max-height:58px!important;
  }

  .menu-toggle{
    width:44px!important;
    height:44px!important;
    flex-basis:44px!important;
  }

  .nav{
    top:72px!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }

  .nav .menu > li > a,
  .nav > ul > li > a{
    min-height:52px!important;
    font-size:14px!important;
  }

  .submenu-toggle{
    min-height:52px!important;
  }
}

/* V4.4 – Hemi Head lokal eingebettet */
@font-face{
  font-family:"Hemi Head";
  src:url("assets/fonts/hemihead.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

/* Große Feuerwehr-Überschrift im Hero */
.hero h1{
  font-family:"Hemi Head", Impact, "Arial Narrow", sans-serif!important;
  font-style:normal!important;
  font-weight:400!important;
}

/* Große Abschnittsüberschriften im gleichen Feuerwehr-Look */
.title{
  font-family:"Hemi Head", Impact, "Arial Narrow", sans-serif!important;
  font-style:normal!important;
  font-weight:400!important;
}

/* =========================================================
   V4.6 – Live Einsatzstatus
   ========================================================= */
.live-status{
  margin-top:22px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  background:#fff;
  border:1px solid #e5e7e9;
  border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}

.live-status-label{
  display:flex;
  flex-direction:column;
  gap:1px;
}

.live-status-label strong{
  font-size:.72rem;
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:#17191c;
}

.live-status-label span{
  font-size:.76rem;
  color:#747a80;
}

.live-status-image{
  display:block;
  width:auto!important;
  max-width:180px!important;
  height:32px!important;
  object-fit:contain;
}

@media(max-width:700px){
  .live-status{
    width:100%;
    justify-content:space-between;
    gap:10px;
  }

  .live-status-image{
    max-width:160px!important;
    height:auto!important;
  }
}

@media(max-width:390px){
  .live-status{
    align-items:flex-start;
    flex-direction:column;
  }

  .live-status-image{
    max-width:100%!important;
  }
}


/* =========================================================
   V4.7 – Lage & Warnungen nach Vorbild FF Stockerau
   ========================================================= */
.situation-section{
  padding:72px 0;
  background:#f2f2f2;
}

.situation-head{
  margin-bottom:28px;
}

.situation-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
  align-items:stretch;
}

.situation-card{
  position:relative;
  min-width:0;
}

.situation-label{
  display:inline-block;
  margin:0 0 16px 0;
  padding:8px 14px 7px;
  background:#c9140b;
  color:#fff;
  font-family:"Hemi Head",Impact,"Arial Narrow",sans-serif;
  font-size:1.35rem;
  line-height:1;
  letter-spacing:.025em;
  text-transform:uppercase;
  border-radius:3px;
}

.situation-frame,
.situation-weather{
  height:410px;
  overflow:hidden;
  background:#fff;
  border:1px solid #e0e0e0;
  border-radius:5px;
  box-shadow:0 5px 18px rgba(0,0,0,.04);
}

.situation-frame iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
  background:#fff;
}

.situation-weather{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.situation-weather a{
  display:flex;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;
}

.situation-weather img{
  display:block;
  width:100%;
  max-width:100%;
  max-height:100%;
  height:auto;
  object-fit:contain;
}

.situation-card-footer{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  padding:12px 2px 0;
  font-size:.82rem;
  color:#62676c;
}

.situation-card-footer a{
  color:#c9140b;
  text-decoration:none;
  font-weight:800;
  white-space:nowrap;
}

.situation-card-footer a:hover{
  text-decoration:underline;
}

.situation-note{
  max-width:950px;
  margin:28px auto 0;
  color:#74797d;
  font-size:.78rem;
  line-height:1.55;
  text-align:center;
}

/* Die externen Seiten sind größer als die Karten.
   Auf Desktop wird ein sinnvoller Ausschnitt skaliert dargestellt. */
.situation-frame-map iframe{
  width:132%;
  height:132%;
  transform:scale(.758);
  transform-origin:top left;
}

.situation-frame-level iframe{
  width:145%;
  height:145%;
  transform:scale(.69);
  transform-origin:top left;
}

@media(max-width:1050px){
  .situation-grid{
    grid-template-columns:1fr 1fr;
  }

  .situation-card:last-child{
    grid-column:1 / -1;
    max-width:620px;
    width:100%;
    justify-self:center;
  }
}

@media(max-width:720px){
  .situation-section{
    padding:52px 0;
  }

  .situation-grid{
    grid-template-columns:1fr;
    gap:34px;
  }

  .situation-card:last-child{
    grid-column:auto;
    max-width:none;
  }

  .situation-frame,
  .situation-weather{
    height:370px;
  }

  .situation-label{
    font-size:1.15rem;
  }

  .situation-card-footer{
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }
}

@media(max-width:440px){
  .situation-frame,
  .situation-weather{
    height:330px;
  }
}

/* V4.8 – Live-Informationen ganz unten */
.situation-section-bottom{
  margin-top:24px;
  border-top:1px solid #dedede;
}
.situation-frame-map iframe{
  width:150%;
  height:150%;
  transform:scale(.667);
  transform-origin:top left;
}
.situation-frame-weather iframe{
  width:125%;
  height:125%;
  transform:scale(.8);
  transform-origin:top left;
}
.pegel-card{
  height:410px;
  background:#fff;
  border:1px solid #e0e0e0;
  border-radius:5px;
  box-shadow:0 5px 18px rgba(0,0,0,.04);
  padding:34px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}
.pegel-kicker{
  font-size:.85rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:800;
  color:#c9140b;
  margin-bottom:12px;
}
.pegel-value{
  font-family:"Hemi Head",Impact,"Arial Narrow",sans-serif;
  font-size:2.4rem;
  line-height:1;
  margin-bottom:12px;
}
.pegel-card p{
  margin:0 0 24px;
  color:#62676c;
}
.pegel-button{
  padding:11px 16px!important;
  font-size:.82rem!important;
}
@media(max-width:720px){
  .pegel-card{height:330px;padding:26px}
}

/* V4.9 – kompaktere Live-Anzeigen */
.situation-section{
  padding-top:48px!important;
  padding-bottom:42px!important;
}
.situation-grid{
  gap:20px!important;
  max-width:1320px;
  margin-left:auto;
  margin-right:auto;
}
.situation-frame,
.situation-weather,
.pegel-card{
  height:275px!important;
}
.situation-label{
  font-size:1.05rem!important;
  padding:7px 11px 6px!important;
  margin-bottom:10px!important;
}
.pegel-card{
  padding:24px!important;
}
.pegel-value{
  font-size:1.9rem!important;
}
.situation-card-footer{
  font-size:.74rem!important;
  padding-top:8px!important;
}
.situation-note{
  margin-top:20px!important;
}

@media(max-width:720px){
  .situation-frame,
  .situation-weather,
  .pegel-card{
    height:245px!important;
  }
}

/* =========================================================
   V5.0 – 2 kompakte Live-Anzeigen
   ========================================================= */
.situation-grid-two{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:24px!important;
  max-width:1180px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

.situation-grid-two .situation-card{
  min-width:0;
}

/* Komplette NÖ-Karte sichtbar halten */
.situation-frame-map-full{
  height:310px!important;
  background:#fff;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.situation-frame-map-full iframe{
  display:block;
  width:145%!important;
  height:145%!important;
  border:0;
  transform:scale(.69);
  transform-origin:center center;
}

/* UWZ Niederösterreich kompakt einpassen */
.situation-frame-uwz{
  height:310px!important;
  background:#fff;
  overflow:hidden;
}

.situation-frame-uwz iframe{
  width:156%!important;
  height:156%!important;
  border:0;
  transform:scale(.64);
  transform-origin:top left;
}

@media(max-width:850px){
  .situation-grid-two{
    grid-template-columns:1fr!important;
    max-width:660px!important;
  }

  .situation-frame-map-full,
  .situation-frame-uwz{
    height:300px!important;
  }
}

@media(max-width:520px){
  .situation-frame-map-full,
  .situation-frame-uwz{
    height:250px!important;
  }

  .situation-frame-map-full iframe{
    width:170%!important;
    height:170%!important;
    transform:scale(.588);
  }

  .situation-frame-uwz iframe{
    width:180%!important;
    height:180%!important;
    transform:scale(.555);
  }
}

/* =========================================================
   V5.1 – roter Footer nach Referenz
   ========================================================= */
.site-footer{
  background:#cf0808;
  color:#fff;
  margin-top:0;
}

.site-footer .footer-grid{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(180px,.55fr) minmax(210px,.55fr);
  gap:70px;
  padding-top:42px;
  padding-bottom:38px;
}

.site-footer h3{
  margin:0 0 20px;
  color:#fff;
  font-size:1.05rem;
  font-weight:900;
}

.footer-contact-grid{
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(220px,1fr);
  gap:40px;
}

.footer-contact-grid > div,
.footer-links{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.footer-contact strong,
.footer-contact span{
  display:block;
  color:#fff;
  font-weight:400;
}

.site-footer a{
  color:#fff;
  text-decoration:none;
}

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

.footer-emergency{
  margin-top:5px;
  font-weight:800;
}

.footer-links a{
  font-size:1rem;
}

.social-icons{
  display:flex;
  gap:18px;
  align-items:center;
}

.social-icon{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#cf0808!important;
  background:#fff;
  border-radius:50%;
  font-family:Arial,sans-serif;
  font-size:1.65rem;
  line-height:1;
  font-weight:900;
  text-decoration:none!important;
}

.social-instagram{
  border-radius:11px;
  font-size:2rem;
  background:transparent;
  color:#fff!important;
  border:4px solid #fff;
}

.social-youtube{
  width:52px;
  border-radius:12px;
  font-size:1.15rem;
}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.2);
  color:rgba(255,255,255,.78);
  font-size:.75rem;
}

.footer-bottom .wrap{
  padding-top:12px;
  padding-bottom:12px;
}

@media(max-width:950px){
  .site-footer .footer-grid{
    grid-template-columns:1fr 1fr;
    gap:38px;
  }
  .footer-contact{
    grid-column:1 / -1;
  }
}

@media(max-width:620px){
  .site-footer .footer-grid{
    grid-template-columns:1fr;
    gap:32px;
    padding-top:34px;
    padding-bottom:30px;
  }

  .footer-contact{
    grid-column:auto;
  }

  .footer-contact-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
}

/* =========================================================
   V5.3 – automatisch abgerufener IRIS13 Einsatzstatus
   ========================================================= */
.live-status-dynamic{
  min-width:330px;
  padding:11px 14px!important;
}

.live-status-indicator{
  flex:0 0 auto;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#9aa0a6;
  box-shadow:0 0 0 4px rgba(154,160,166,.15);
}

.live-status-text{
  margin-left:auto;
  font-family:"Hemi Head",Impact,"Arial Narrow",sans-serif;
  font-size:1.15rem;
  line-height:1;
  letter-spacing:.025em;
  white-space:nowrap;
  color:#50555a;
}

.live-status-ready .live-status-indicator{
  background:#45a647;
  box-shadow:0 0 0 4px rgba(69,166,71,.15);
}

.live-status-ready .live-status-text{
  color:#2f8533;
}

.live-status-active{
  border-color:#d71910!important;
  background:#fff8f7!important;
}

.live-status-active .live-status-indicator{
  background:#d71910;
  box-shadow:0 0 0 4px rgba(215,25,16,.16);
  animation:ffp-status-pulse 1.4s infinite;
}

.live-status-active .live-status-text{
  color:#d71910;
}

@keyframes ffp-status-pulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.25);opacity:.65}
}

@media(max-width:700px){
  .live-status-dynamic{
    min-width:0;
  }

  .live-status-text{
    font-size:1rem;
  }
}

@media(max-width:470px){
  .live-status-dynamic{
    align-items:flex-start!important;
    flex-wrap:wrap;
  }

  .live-status-text{
    width:100%;
    margin-left:24px;
    padding-top:3px;
  }
}

/* V5.4 – Quelltext / Einsatzdetails beim Live-Status */
.live-status-dynamic{
  align-items:flex-start!important;
}

.live-status-label{
  flex:1 1 auto;
  min-width:0;
}

.live-status-detail{
  display:block;
  margin-top:5px;
  max-width:620px;
  color:#555d63!important;
  font-size:.72rem!important;
  line-height:1.35!important;
  text-transform:none!important;
  letter-spacing:0!important;
}

.live-status-active .live-status-detail{
  color:#9f1711!important;
}

@media(max-width:700px){
  .live-status-dynamic{
    flex-wrap:wrap;
  }

  .live-status-text{
    margin-left:24px!important;
  }

  .live-status-detail{
    max-width:none;
  }
}