/* Tablet-Schicht (768–1023px): wird nach mobile.css geladen. iPad mini/Air/Pro hoch, kleine Laptops. */
@media (min-width:768px) and (max-width:900px){
  /* Hero wie am Desktop zweispaltig statt Handy-Stapel: Birdy rechts, Text links */
  .hero .wrap{grid-template-columns:1.15fr .85fr;text-align:left;align-items:center}
  .hero .ctas{justify-content:flex-start}
  .rot{margin-inline:0}.pill{justify-content:flex-start}
  .hero .bslot{width:min(100%,300px);order:0;margin:0;justify-self:end}
  .hero h1{font-size:clamp(44px,6.6vw,60px)!important}
  .sub-hero{padding-top:120px;padding-bottom:40px}
  .sub-hero .wrap{grid-template-columns:1.2fr .8fr;align-items:center}
  .sub-hero .bslot{width:min(100%,260px);justify-self:end;order:0}
  .sub-hero h1{font-size:clamp(42px,6.4vw,58px)}
}
@media (min-width:768px) and (max-width:1023px){
  /* Kopfzeile deckend (iPad: Inhalt schien durch) */
  .hd::before{background:#fffffff5}
  /* Versprechen: Zeilen dürfen sich nicht berühren */
  .pr .p .no,.pr .p .yes{font-size:clamp(44px,7.6vw,76px);max-width:100%;line-height:1}
  .pr .p .a{font-size:clamp(20px,2.8vw,30px)}
  /* Statements: schmaler, Text darf umbrechen */
  .sa .st h2{font-size:clamp(56px,10vw,100px)}
  .sa .st small{white-space:normal;max-width:36ch}
  /* Fakten-Kacheln: 3 Spalten, Zahlen etwas kleiner */
  .trust{grid-template-columns:repeat(3,1fr)}
  .trust .n{font-size:clamp(40px,5vw,60px)}
  /* Birdy-Sprechblase kleiner, damit sie keine Überschrift verdeckt */
  #birdy .say{max-width:220px;font-size:13px}
  /* Footer-Zahlenzeile: sauber umbrechen */
  .ft .mini{gap:8px 16px}
}
@media (min-width:901px) and (max-width:1100px){
  /* Regions-Hero: Sprechblase der Hero-Taube nicht über die Überschrift */
  .sub-hero .bslot{width:min(100%,280px)}
  .sub-hero h1{font-size:clamp(46px,6.4vw,76px)}
  #birdy .say{max-width:220px;font-size:13px}
}

@media (min-width:1024px) and (max-width:1180px){
  .hd::before{background:#fffffff5}
}