/* ==========================================================================
   Feuerwehr Gaden – Optimierung für Smartphone und Tablet
   ANLEITUNG: Diesen Block ganz ans ENDE der style.css kopieren
   (spätere Regeln überschreiben frühere, deshalb muss er unten stehen).
   Zusätzlich EINE Änderung weiter oben in der style.css:
   "@media(max-width:1120px)" -> "@media(max-width:1200px)"
   (Burger-Menü früher, damit die 10 Menüpunkte auf Tablets nicht überlaufen)
   ========================================================================== */

/* ---- Grundlagen ---- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:hidden;overflow-x:clip}
img,video,iframe,svg{max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,li,.card{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.wrap{width:min(1160px,calc(100% - 40px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)))}
.content table{display:block;max-width:100%;overflow-x:auto}
.content pre{overflow-x:auto}

/* ---- Touch: Tippflächen mindestens 44 px, kein "klebendes" Hover ---- */
.menu{min-width:44px;min-height:44px;padding:9px 14px;font-size:18px;line-height:1}
.footer a{padding:6px 0;margin:4px 0}
.page-numbers{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
@media(hover:none){.button:hover,.nav-cta:hover{transform:none}}

/* ---- Navigation (Tablet und Smartphone) ---- */
@media(max-width:1200px){
  nav a{display:flex;align-items:center;min-height:44px;padding:0}
  nav{max-height:calc(100vh - 83px);max-height:calc(100dvh - 83px);overscroll-behavior:contain}
}
@media(max-width:760px){
  nav{max-height:calc(100vh - 72px);max-height:calc(100dvh - 72px)}
  .nav{gap:12px}
}
.brand{min-width:0}
.brand-logo{flex:none}
@media(max-width:400px){
  .brand{font-size:14px}
  .brand small{font-size:10px;letter-spacing:.08em}
}

/* ---- Überschriften: lange Wörter (Jugendfeuerwehr, Einsatzabteilung) laufen nicht mehr über ---- */
@media(max-width:760px){
  h1{font-size:clamp(34px,10.5vw,64px);letter-spacing:-.05em}
  .page-hero h1{font-size:clamp(30px,8.5vw,56px)}
  h2{font-size:clamp(28px,8vw,44px)}
  .content h2{font-size:clamp(26px,7vw,36px)}
  .vehicle-art strong{font-size:32px}
}

/* ---- Hero ---- */
@media(min-width:761px) and (max-width:1000px){
  .hero h1{max-width:calc(100% - 220px)}
}
@media(max-height:520px) and (orientation:landscape){
  .hero{min-height:0}
  .hero>.wrap{padding:40px 0 30px}
  .hero-logo{height:120px}
}

/* ---- Banner "Einer für alle, alle für einen": liegt auf Tablet/Smartphone
        im normalen Fluss unter dem Hero-Inhalt und kann nichts mehr überlagern ---- */
@media(max-width:1000px){
  .hero{flex-direction:column;align-items:stretch}
  .hero>.wrap{padding:55px 0 40px}
  .hero-bar{position:relative;padding:10px 0;font-size:clamp(10px,2.9vw,13px);letter-spacing:.08em;line-height:1.3}
}

/* ---- Karten: Tablet 2 Spalten, Smartphone 1 Spalte ---- */
@media(max-width:1000px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .cards>.card:last-child:nth-child(odd){grid-column:1/-1}
}
@media(max-width:760px){
  .cards{grid-template-columns:1fr}
  .cards>.card:last-child:nth-child(odd){grid-column:auto}
}

/* ---- Zweispaltige Bereiche auf Tablets einspaltig ---- */
@media(max-width:900px){
  .split{grid-template-columns:1fr;gap:40px}
  .join-grid{grid-template-columns:1fr;gap:24px}
  .join .button{justify-self:start}
  .grid-two{grid-template-columns:1fr;gap:24px}
  .fact-row{grid-template-columns:1fr 1fr}
  .list-tiles{grid-template-columns:1fr 1fr}
}
@media(max-width:460px){
  .fact-row,.list-tiles{grid-template-columns:1fr}
}

/* ---- Termine/Einsätze-Bereich mit Seitenleiste ---- */
@media(max-width:900px){
  .community-layout{grid-template-columns:1fr}
  .updates-rail{margin-top:55px}
  .rail-feeds{grid-template-columns:1fr 1fr}
  .updates-rail .live-panel iframe{height:340px}
  .community-main .card{grid-template-columns:130px 1fr}
}
@media(max-width:580px){
  .rail-feeds{grid-template-columns:1fr}
  .updates-rail .live-panel iframe{height:360px}
  .community-main .card{grid-template-columns:1fr}
}

/* ---- Einträge (Einsätze/Termine) auf kleinen Tablets ---- */
@media(min-width:561px) and (max-width:760px){
  .entry{gap:16px;padding:18px 20px}
  .entry-thumb{flex-basis:140px}
  .entry-thumb img{height:100px}
}

/* ---- Formular ---- */
@media(max-width:460px){
  .gaden-form .button{justify-self:stretch}
}

/* ---- Lightbox: Pfeile unten statt über dem Bild, Safe-Area, dvh ---- */
.lightbox{padding:max(10px,env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px))}
.lightbox img{max-height:78vh;max-height:78dvh}
@media(max-width:700px){
  .lightbox{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .lightbox figure{max-width:100%}
  .lightbox img{max-height:68vh;max-height:68dvh}
  .lightbox button{width:52px;height:52px}
  .lb-prev,.lb-next{top:auto;bottom:max(18px,env(safe-area-inset-bottom,0px));margin-top:0}
  .lb-prev{left:calc(50% - 64px)}
  .lb-next{right:calc(50% - 64px)}
  .lb-close{top:max(12px,env(safe-area-inset-top,0px));right:12px}
}

/* ---- Bewegung reduzieren (Systemeinstellung) ---- */
@media(prefers-reduced-motion:reduce){
  :root{scroll-behavior:auto}
  *{transition:none!important}
}

/* ==========================================================================
   TEIL 2: Feinschliff für Smartphone und Tablet
   ========================================================================== */

/* ---- Bedienung per Finger ---- */
a,button,.button{touch-action:manipulation;-webkit-tap-highlight-color:#c51e2d33}
:focus-visible{outline:3px solid #ff5c63;outline-offset:3px}
.button,.nav-cta{min-height:48px}

/* ---- Tablet: etwas weniger Leerraum, Fußzeile darf umbrechen ---- */
@media(min-width:761px) and (max-width:1000px){
  .section{padding:80px 0}
  .footnote{flex-wrap:wrap}
}

/* ---- Smartphone: kompaktere Abstände, lesbare Schriftgrößen ---- */
@media(max-width:760px){
  .section,.join,.instagram-section{padding:56px 0}
  .live-section{padding-bottom:56px}
  .heading{margin-bottom:28px}
  .hero p{margin-bottom:28px}
  .card{padding:24px;min-height:0}
  .card .num{margin-bottom:18px}
  .page-hero{padding:48px 0 44px}
  .page-hero p{font-size:17px}
  .crumb{margin-bottom:18px}
  .content{padding:48px 0 70px}
  .content p,.content li{font-size:16px}
  .panel{margin:20px 0}
  .timeline{padding-left:22px;margin:30px 0}
  .timeline article:before{left:-31px}
  .entry h3{font-size:20px}
  .legal-copy h2{font-size:26px;margin-top:34px}
  .legal-draft,.legal-missing{padding:20px}
  .footer{padding:44px 0 20px}
  .footnote{display:flex;flex-direction:column;gap:8px}
}

/* ---- Kleine Smartphones ---- */
@media(max-width:460px){
  .eyebrow{font-size:12px;letter-spacing:.14em}
  .embed-consent .button{width:100%}
}

/* ---- Banner "Einer für alle, alle für einen" auf dem Smartphone: schmal, eine Zeile ---- */
@media(max-width:760px){
  .hero .hero-bar{padding:6px 0;font-size:10px;letter-spacing:.06em;line-height:1.25}
  .hero .hero-bar .wrap{justify-content:center;text-align:center}
  .hero .hero-bar .wrap span:last-child{display:none}
}
@media(max-width:360px){
  .hero .hero-bar{font-size:9px;letter-spacing:.04em}
}