/* =========================================================================
   BuchungPlus – Responsive (responsive.css)
   Breakpoints: 1200 / 992 / 768 / 576
   ========================================================================= */

@media (max-width:1200px){
  .footer-cols{grid-template-columns:repeat(3,1fr)}
  .grid-5{grid-template-columns:repeat(3,1fr)}
}

/* ---- Tablet / kleiner Desktop: Navigation einklappen ---- */
@media (max-width:992px){
  .main-nav,.btn-nav-cta{display:none}
  .nav-toggle{display:inline-flex}

  .hero-grid,.page-hero-grid,.split,.calc-grid,.form-grid,
  .footer-top{grid-template-columns:1fr}
  .hero-grid{gap:36px}
  .hero-media{max-width:560px;margin:0 auto}
  .split{gap:32px}
  .split-media{order:-1}

  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .hero-strip-inner{grid-template-columns:repeat(3,1fr);gap:22px 24px}
  .pricing{grid-template-columns:1fr;max-width:460px;margin:0 auto}
  .price-card.highlight{transform:none}
  .scenarios{grid-template-columns:1fr}
  .calc-results{margin-top:6px}

  .related-grid{grid-template-columns:repeat(2,1fr)}
  .footer-cols{grid-template-columns:repeat(3,1fr);gap:22px}

  .cta-band-inner{flex-direction:column;text-align:center;align-items:center}
  .cta-band-text{text-align:center}

  .section{padding:56px 0}
  .hero-badge-tl{left:8px}
  .hero-badge-br{right:8px}
  .hero-bg{min-height:auto;padding:40px 0 44px;background-position:center}
  .hero-overlay{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.88) 55%,rgba(255,255,255,.80) 100%)}
}

/* ---- Tablet hoch / großes Handy ---- */
@media (max-width:768px){
  body{font-size:16px}
  .grid-2,.grid-3,.grid-4,.grid-5{grid-template-columns:1fr}
  .adv-list{grid-template-columns:1fr}
  .hero-strip-inner{grid-template-columns:repeat(2,1fr)}
  .mock-bookbar{grid-template-columns:1fr}
  .mock-bookbar .btn{width:100%}
  .ticks-2{columns:1}
  .form-grid{grid-template-columns:1fr}
  .related-grid{grid-template-columns:1fr}
  .footer-cols{grid-template-columns:repeat(2,1fr)}
  .footer-bottom-inner{flex-direction:column;text-align:center;align-items:center}
  .footer-legal{justify-content:center;flex-wrap:wrap}

  .compare thead{display:none}
  .compare,.compare tbody,.compare tr,.compare td{display:block;width:100%}
  .compare tr{border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-bottom:14px;background:#fff}
  .compare td{border:none}
  .compare td:first-child{background:var(--teal-light);color:var(--navy);font-family:var(--head-font);
    font-weight:700;font-size:1.02rem;padding:12px 16px;border-bottom:1px solid var(--border)}
  .compare td:first-child::before{content:none}
  .compare td:not(:first-child){display:flex;justify-content:space-between;align-items:baseline;gap:16px;
    padding:11px 16px;text-align:right}
  .compare td:not(:first-child)::before{content:attr(data-label);font-weight:600;color:var(--muted);flex:none;text-align:left}
  .compare td.col-bp{background:transparent}
  .compare td:not(:first-child) .icon{width:18px;height:18px}

  .hero-badge{display:none}
  .cookie-inner{flex-direction:column;align-items:stretch}
  .cookie-actions .btn{flex:1}

  /* Startseite-Hero: Bild unter den Text statt im Hintergrund */
  .hero-home{background-image:none!important;min-height:auto;padding:24px 0 40px}
  .hero-home .hero-overlay{display:none}
  .hero-home .hero-mobile-img{display:block;width:100%;margin-top:26px;border-radius:var(--radius-lg);box-shadow:var(--shadow)}

  /* Vorteils-Leiste: mehr Abstand oben/unten */
  .hero-strip-inner{padding-top:40px;padding-bottom:40px}

  /* Footer: Logo-Bereich mit Abstand nach oben */
  .footer-top{padding-top:64px}

  /* Rechner */
  .adv-head{flex-direction:column;gap:12px}
  .adv-box{padding:24px}
  .result-value.big{font-size:2rem}
  .calc-amort .amort-value{font-size:2.2rem}
}

/* ---- Smartphone ---- */
@media (max-width:576px){
  :root{--gap:18px}
  .container{padding-left:18px;padding-right:18px}
  .section{padding:44px 0}
  h1{font-size:2rem}
  h2{font-size:1.5rem}
  .btn-row{flex-direction:column}
  .btn-row .btn{width:100%}
  .hero-actions .btn{width:100%}
  .btn{white-space:normal;word-break:break-word}
  .cta-band-inner{padding:52px 20px}
  .section{padding:52px 0}
  .footer-cols{grid-template-columns:1fr}
  .form-card{padding:24px 20px}
  .calc-panel,.calc-results{padding:22px}
  .price-card{padding:26px 22px}
  .cta-band-actions{flex-direction:column;width:100%}
  .cta-band-actions .btn{width:100%}
  .trustbar-inner{flex-direction:column;gap:12px}
  .hero-trust{gap:10px 18px}

  /* Rechner: Eingabefelder gestapelt, damit lange Labels + Zahlenfeld passen */
  .calc-field-top{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px}
  .calc-field label{flex:0 0 auto}
  .calc-input{width:100%;text-align:left}
  .result-row{gap:12px;align-items:flex-start}
  .result-ic{width:40px;height:40px}
  .result-ic .icon{width:20px;height:20px}
  .result-value{font-size:1.5rem}
  .result-value.big{font-size:1.85rem}
  .calc-amort{padding:18px}
  .calc-amort .amort-value{font-size:2rem}
  .calc-sales .sales-big{font-size:1.3rem}
}