/* =====================================================================
   RESPONSIVE-SCHICHT (Tablet, Handy, Querformat)
   Wird nach allen anderen Stylesheets geladen.
   Breakpoints: 1180 · 1080 (Menü) · 900 · 700 · 520 · 380
   ===================================================================== */

/* ---------- Basis: gilt überall ---------- */
.craft-story,.craft-pin,.craft-track,.craft-scene,.craft-copy,.menu-category,.konfig-step,.konfig-summary-text{min-width:0;max-width:100%}
.btn-gold,.btn-outline{max-width:100%;white-space:normal;text-align:center;justify-content:center;overflow-wrap:anywhere}
.legal-content a,.footer-addr,.footer-copy{overflow-wrap:anywhere}
h1,h2,h3{text-wrap:balance}
.familie-quote,.passion-line,.page-hero p{text-wrap:pretty}
img,video,iframe{max-width:100%}
body.nav-open #siteHeader{transform:none!important;opacity:1!important;will-change:auto}
body.nav-open .quick-actions,body.lightbox-open .quick-actions,body.nav-open .cart-chip,body.nav-open .to-top{visibility:hidden;pointer-events:none}
.nav-status{display:none}

/* Stabile Viewport-Höhe auf Handys (Adressleiste lässt nichts mehr springen) */
@supports (height:100svh){
  .hero-card{height:calc(min(86svh,900px) + ((100svh - 80px - min(86svh,900px)) * var(--grow)))}
  .galerie-stack-inner{height:100svh}
  .bread-step{min-height:66svh}
}

/* ---------- ≤1180: kleine Laptops / Tablet quer ---------- */
@media(max-width:1180px){
  .contact-grid{gap:56px}
  .familie-wrap,.familie-wrap.reverse{gap:56px}
  .bread-process{gap:56px}
  .konfig-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 40px}
  .insta-track{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:none}
  .insta-track::-webkit-scrollbar{display:none}
  .insta-card{flex:0 0 auto;width:max(326px,min(44vw,380px));scroll-snap-align:start}
  .insta-nav{display:flex;top:190px}
}

/* ---------- ≤1080: Menü als Drawer ---------- */
@media(max-width:1080px){
  #siteNav{width:min(360px,88vw);padding-bottom:max(30px,env(safe-area-inset-bottom));overscroll-behavior:contain}
  #navToggle{min-width:44px;min-height:44px}
  .header-status{margin-left:auto;margin-right:12px}
}

/* ---------- ≤900: Tablet hochkant und kleiner ---------- */
@media(max-width:900px){
  .meat-desc{font-size:.9rem}
  .craft-tab{min-height:48px;overflow-wrap:anywhere}
  .konfig-summary-actions{width:100%;min-width:0;gap:16px}
  .konfig-summary-actions>.btn-gold{width:100%;padding:14px 16px}
  .konfig-chip{min-height:44px;max-width:100%;white-space:normal}
  .add-btn,.cart-row-qty button,.cart-row-remove,.konfig-qty button{min-width:44px;min-height:44px}
  .cart-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}
  .cart-row-name{min-width:0;overflow-wrap:anywhere;grid-column:1/-1}
  .cart-row-qty{gap:10px}
  .cart-row-linetotal{width:auto;grid-column:2;grid-row:2}
  .cart-row-remove{grid-column:2;justify-self:end}
  .menu-item{gap:12px}
  .menu-item>div:first-child{min-width:0;overflow-wrap:anywhere}
  .menu-item-right{gap:8px}
  .menu-item-price{white-space:nowrap}
  input,select,textarea{font-size:16px}
  .hours-row{gap:12px;flex-wrap:wrap}
  .hero-scroll-hint{max-width:88%;width:max-content}
  .hero-scroll-hint span{font-size:.85rem}
  .cta-left{padding:72px 0 24px}
  .hours-table{padding-top:12px;padding-bottom:72px}
  .map-embed-wrap{margin-top:56px}
  .stimme-card{width:min(340px,82vw);padding:26px 22px}
  .page-hero h1{font-size:clamp(2.3rem,8vw,4rem)}
  .stats-row{padding:44px 0}
  .craft-photo-caption,.bread-visual-tag{font-size:.7rem}
  .craft-help{font-size:.72rem}
  .craft-top{font-size:.75rem}
  .presse-card{padding:40px 26px}
}

/* ---------- 701–900: Tablet hochkant, nutzt die Breite mit zwei Spalten ---------- */
@media(min-width:701px) and (max-width:900px){
  /* Spieße & Brote: horizontales Akkordeon bleibt, nur etwas niedriger */
  #spiesse .meat-accordion{height:clamp(420px,52svh,520px);gap:14px}
  .bread-final-accordion{height:clamp(340px,42svh,440px);gap:14px}
  #spiesse .spiess-intro h2{font-size:clamp(2rem,5vw,2.6rem)}
  /* Familie: Bild + Zitat nebeneinander */
  .familie-wrap,.familie-wrap.reverse{grid-template-columns:1fr 1fr;gap:36px}
  .familie-media{aspect-ratio:4/5}
  .familie-quote{font-size:clamp(1.35rem,3.2vw,1.8rem)}
  /* Prozess-Schritte: 2×2 */
  .process-steps{grid-template-columns:repeat(2,1fr);gap:40px 30px}
  /* Handwerk-Karussell: Foto links, Text rechts */
  .craft-scene{grid-template-columns:1.1fr 1fr;align-items:stretch}
  .craft-photo{aspect-ratio:auto;min-height:420px}
  .craft-copy{padding:8px 0 8px 28px;justify-content:center}
  .craft-number{top:8px;right:0}
  .craft-copy h3{padding-right:0;font-size:clamp(1.7rem,3.6vw,2.2rem)}
  /* Brot-Prozess mit Bild je Schritt */
  .has-mobile-images .bread-step{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;padding-bottom:40px}
  .has-mobile-images .mobile-step-image{margin:0;aspect-ratio:1/1}
  /* Soßen: 2 Spalten, Footer 4 → 2 */
  .footer-grid{grid-template-columns:1fr 1fr}
  .insta-card{width:min(46vw,360px)}
  .contact-grid{grid-template-columns:1fr 1fr;gap:36px}
  .form-row{grid-template-columns:1fr 1fr}
  .stats-row{gap:30px 56px}
  .stat-heart{width:20px;height:20px}
  .galerie-stack{height:210vh}
}

/* ---------- ≤700: Handy ---------- */
@media(max-width:700px){
  body{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  .to-top,.cart-chip{bottom:calc(94px + env(safe-area-inset-bottom,0px))!important}
  .cart-chip{padding:11px 12px;gap:7px;font-size:.78rem;max-width:calc(100vw - 100px);flex-wrap:wrap}
  .scroll-ink{font-size:clamp(2.1rem,9.6vw,3.6rem);line-height:1.18}
  .konfig-panel{padding:26px 16px}
  .menu-tabs{max-width:100%}
  .map-embed-wrap iframe{height:340px}

  /* Spieße & Brote: gestapelt, antippen zum Aufklappen */
  #spiesse .meat-accordion,.bread-final-accordion{height:auto!important;min-height:0;max-height:none}
  .meat-panel-content{padding:20px 18px}
  .meat-name{white-space:normal;overflow-wrap:break-word;font-size:clamp(1.3rem,6vw,1.9rem)}
  .meat-panel,.bread-final-panel{height:128px}
  .meat-panel.is-active,.bread-final-panel.is-active{height:300px}
  .meat-desc{font-size:.88rem}
  #spiesse > .section-pad{padding-top:96px;padding-bottom:56px}

  /* Handwerk-Karussell */
  .craft-controls{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .craft-copy h3{font-size:clamp(1.55rem,7vw,2rem)}

  /* Statistik: drei Werte in einer Reihe */
  .stats-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:40px 0}
  .stat-heart{display:none}
  .stat-num{font-size:clamp(2rem,10vw,2.8rem)}
  .stat-label{font-size:.66rem;letter-spacing:.08em;line-height:1.35}

  /* Galerie-Stapel etwas kompakter */
  .galerie-stack{height:190vh}

  /* Überschriften etwas ruhiger, damit sie sauber umbrechen */
  #spiesse .spiess-intro h2{font-size:clamp(1.45rem,6.3vw,2rem)}
  .handwerk-head h2,.galerie-head h2,.insta-head h2,.stimmen-head h2{font-size:clamp(1.75rem,7.6vw,2.3rem)}
  .cta-left h2{font-size:clamp(2rem,9vw,2.8rem)}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  footer{padding-top:64px}
  .footer-grid{padding-bottom:44px}
  .presse-card{padding:32px 20px}
}

/* ---------- ≤520: kleine Handys ---------- */
@media(max-width:520px){
  header{padding-left:18px;padding-right:18px}
  .header-status{display:none}
  .nav-status{display:inline-flex;align-self:flex-start;margin-top:22px}
  .form-row{grid-template-columns:1fr}
  .cta-left .btn-gold,.cta-left .btn-outline,.insta-head-actions .btn-outline{width:100%}
  .cta-left div[style*="flex"]{flex-direction:column}
  .hours-row span:last-child{white-space:nowrap}
  .stimme-card p{font-size:.95rem}
  .insta-nav{width:36px;height:36px}
}

/* ---------- ≤380: sehr kleine Handys ---------- */
@media(max-width:380px){
  .craft-tab{font-size:.68rem}
  .craft-number{font-size:2.6rem}
  .menu-item-right{flex-direction:column;align-items:flex-end;gap:8px}
  .meat-panel-content{padding:18px 14px}
  .meat-desc{font-size:.84rem}
  .footer-legal{flex-wrap:wrap;line-height:1.8}
  .stat-label{font-size:.6rem}
  .wrap{padding-left:16px;padding-right:16px}
}

/* ---------- Querformat auf Handys (niedrige Fenster) ---------- */
@media(max-height:520px) and (orientation:landscape){
  header{padding-top:10px;padding-bottom:10px}
  header .logo-mark img{height:44px}
  .quick-actions{display:none!important}
  body{padding-bottom:0}
  .to-top,.cart-chip{bottom:16px!important}
  .page-hero{padding-top:110px}
  .galerie-stack{height:260vh}
  .bread-step{min-height:auto}
  .meat-panel,.bread-final-panel{height:150px}
  .meat-panel.is-active,.bread-final-panel.is-active{height:260px}
}

/* Konfigurator: auf Handys einspaltig */
@media(max-width:640px){
  .konfig-steps{grid-template-columns:minmax(0,1fr);gap:26px}
  .konfig-step{padding-top:56px}
}

/* Lange deutsche Wörter ("Datenschutzerklärung") dürfen nie über den Rand laufen */
h1,h2,h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.motion-word{max-width:100%}
@media(max-width:520px){
  .page-hero h1{font-size:clamp(1.85rem,7.4vw,2.6rem)}
}
@media(max-width:380px){.page-hero h1{font-size:1.6rem}}