/* Mobile-Fixes (Okt. 2026). Wird auf jeder Seite nach den Seiten-Styles geladen. */

/* Umbrüche, die nur auf großen Screens gewollt sind */
@media (max-width:640px){
  br.dbr{display:none}
}

/* Keine automatische Silbentrennung mehr. Headlines brechen nur zwischen Wörtern,
   Fließtext trennt höchstens sehr lange Komposita. */
@media (max-width:640px){
  h1,h2,h3,h1 span,h2 span,h3 span,b,.st-ty b,.cs-meta b{
    -webkit-hyphens:manual!important;hyphens:manual!important;
    text-wrap:balance;
  }
  #start h1,#start h1 span{text-wrap:wrap}
  p,li,.dk-tip{
    -webkit-hyphens:auto;hyphens:auto;
    -webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:5;
    hyphenate-limit-chars:12 5 5;
    text-wrap:pretty;
  }
  /* Große Headlines etwas kleiner, damit lange Wörter (z. B. „Wertschätzung“) in eine Zeile passen */
  :root{
    --fs-hero:min(clamp(72px,11vw,158px),15.5vw);
    --fs-h1:min(clamp(48px,6.1vw,88px),12vw);
    --fs-num:min(clamp(48px,4.45vw,64px),11.5vw);
  }
}

/* Navigation mobil: nur die Hauptpunkte, als ganzseitiges Menü */
@media (max-width:900px){
  .hdr .dd-m{display:none!important}
  .hdr:has(.nav-t:checked){bottom:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .nav-t:checked ~ .nav{max-height:none!important;overflow:visible!important;gap:6px!important;padding:28px 0 32px!important}
  .hdr .nav .dd{width:100%;border-bottom:1px solid #262626}
  .hdr .nav .dd-t{display:block;padding:14px 0;font:700 clamp(30px,8.5vw,40px)/1 Khand,Arial,sans-serif;letter-spacing:.01em;color:#F2F2EC}
  .hdr .nav .dd-t::after{display:none}
  .hdr .nav .btn{margin-top:22px}
  body:has(.nav-t:checked){overflow:hidden}
}

/* Buttons: mehr Luft nach oben und sauberer Zeilenfall bei zweizeiligen Buttons */
@media (max-width:640px){
  .btn{line-height:1.1;padding-top:12px;padding-bottom:10px;text-wrap:balance}
  :is(p,h1,h2,h3,ul,ol,blockquote,.kt-line) + .btn,
  :is(p,h1,h2,h3,ul,ol,blockquote) + div > .btn:first-child{margin-top:16px}
  .kt-btn{margin-top:22px!important}
  .kt-line{margin-bottom:0}
}

/* Startseite: Hero passt in den Bildschirm, „Scrollen“ sichtbar über der Browserleiste */
@media (max-width:640px){
  #start{min-height:100svh!important;padding-bottom:120px!important}
  #start > a[href="#top"]{bottom:calc(36px + env(safe-area-inset-bottom))!important}
}

/* Ansprechpartner-Boxen (Daniel/Olaf) mobil nebeneinander zum Wischen */
@media (max-width:760px){
  .kt-grid{display:flex!important;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:0 -20px;padding:0 20px 14px;scroll-padding-left:20px;scrollbar-width:none}
  .kt-grid::-webkit-scrollbar{display:none}
  .kt-card{flex:0 0 84%;scroll-snap-align:start;padding:32px 22px}
  .kt-pic{width:180px;height:180px}
  .kt-hint{display:block!important}
}
.kt-hint{display:none;margin:-6px 0 0;font:600 var(--fs-text)/1 Khand,Arial,sans-serif;letter-spacing:.02em;color:#000}

/* Häkchen-Chips gleich breit */
@media (max-width:640px){
  .kt-chips{flex-direction:column;align-items:stretch}
  .kt-chips span{display:block}
}

/* Agentur: Team-Karten als Wisch-Reihe, Zitat über dem Foto statt über dem Gesicht */
@media (max-width:640px){
  .ag-ads{display:flex!important;gap:18px!important;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin:0 -32px;padding:8px 32px 30px;scroll-padding-left:32px;scrollbar-width:none}
  .ag-ads::-webkit-scrollbar{display:none}
  .ag-ads .ad{flex:0 0 78%;scroll-snap-align:start;transform:rotate(calc(var(--r,0deg) * .5))}
  .ag-ads .ad-in img,.ag-ads .ad-in.r img{top:auto;height:68%;transform:none}
  .ag-ads .ad-q,.ag-ads .ad-in.r .ad-q{left:7%;right:7%;top:6%;width:auto;text-align:left;font-size:clamp(15px,4.4vw,18px);line-height:1.1}
  .ag-ads .ad-sub{font-size:14px;white-space:normal}
  /* Vorteile im Jobs-Bereich einspaltig */
  .ag-cul{grid-template-columns:minmax(0,1fr)!important}
  .ag-cul div{padding:18px 0 0}
  /* Büros: Foto oben, Button darunter, Ortsname nur einmal */
  .ag-off .md{grid-template-columns:minmax(0,1fr)!important}
  .ag-off .ag-map{aspect-ratio:auto}
  .ag-off .ag-map-c{position:static;background:#0B0B0B;padding:16px 20px 0;align-items:stretch}
  .ag-off .ag-map-c > b,.ag-off .ag-map-c > span,.ag-off .ag-map-c > svg,.ag-off .ag-map-c > small{display:none}
  .ag-off .ag-map-b{margin-top:0;text-align:center;padding:14px 16px 12px}
  .ag-off .tx{padding:20px 20px 24px}
}
.ag-hint{display:none}
@media (max-width:640px){.ag-hint{display:block;margin:-36px 0 0;font:600 var(--fs-text)/1 Khand,Arial,sans-serif;color:#C9C9C0}}

/* Mobil-Menü: „Jobs“ als eigener Punkt zwischen Agentur und Stories */
.hdr .nav .dd-mob{display:none}
@media (max-width:900px){.hdr .nav .dd-mob{display:block}}