/* =================================================================
   MOBIL — Feinschliff fuer Handy-Displays
   Eigene Schicht, laedt als letzte CSS. Aendert am Desktop nichts:
   alles steckt in @media (max-width:760px) bzw. enger.
   Angelegt 2026-08-29 zusammen mit dem Wechsel auf Tintenblau.
   ================================================================= */

@media (max-width:760px){

  /* --- Formular ---------------------------------------------------
     Unter 16px zoomt iOS beim Antippen ungefragt in das Feld hinein
     und die Seite bleibt danach verschoben. Die Felder standen auf
     15,2px — knapp darunter, mit genau diesem Effekt. */
  .lead-form input:not([type=hidden]),
  .lead-form textarea,
  .lead-form select,
  input[type=text],input[type=email],input[type=tel],
  input[type=search],input[type=url],textarea,select{
    font-size:16px}
  .lead-form textarea{line-height:1.5}
  .lead-form label{font-size:13.5px}

  /* --- Tap-Targets -------------------------------------------------
     Apple und Google setzen 44px an. Diese Links lagen bei 23–27px. */
  .link-more{min-height:44px;align-items:center;padding-block:.35rem}
  .ticker-item{min-height:40px;display:inline-flex;align-items:center}
  .foot-bottom a{min-height:44px}
  .chip{min-height:32px;display:inline-flex;align-items:center}
  /* Das Logo ist der Weg zurueck zur Startseite und war 24px hoch. */
  .site-header .brand{min-height:44px;display:inline-flex;align-items:center}
  .contact-or a,.body p a{padding-block:.3rem}

  /* --- Mikrotypografie ---------------------------------------------
     Die Labels rechneten sich auf dem Handy auf 11,2–11,8px herunter.
     Am Bildschirm noch elegant, in der Hand nur noch geraten. */
  .eyebrow,.kicker,.meta,.lbl,.ref-idx,.vg-von,.vg-unter,
  .cue-label,.dvtxt,.ref-branch{font-size:12px}
  .no,.vg-ziffer{font-size:12px}
  .chip{font-size:12px}
  /* Diese Labels haengen an Nachfahren-Selektoren und schlagen die
     Kurzform oben — deshalb hier noch einmal in gleicher Tiefe. */
  .svc-row .no,.step .no{font-size:12px}
  .svc-index .svc-row .meta,.svc-schaukasten .svc-row .meta,
  .svc-row .meta{font-size:12px}
  .ins-row .kicker{font-size:12px}
  .work .ref-body .ref-idx,.ref-body .ref-idx{font-size:12px}
  .ref-body .ref-result .ref-line b{font-size:12px}
  .manifesto .by{font-size:13px;letter-spacing:.14em}
  .dvcue .dvtxt::after{font-size:12px}
  .intro__inner .intro__sub em{font-size:11px}
  .svc-index .svc-row .no,.svc-schaukasten .svc-row .no{font-size:12px}
  .svc-split .t span{font-size:12.5px}
  small,.by,.contact-or,.form-foot,.foot-bottom{font-size:13.5px;line-height:1.55}

  /* --- Rhythmus -----------------------------------------------------
     Auf 390px Breite wirken die Desktop-Kapitelabstaende wie Luecken.
     Etwas dichter gesetzt, ohne den Zweiklang aufzugeben. */
  :root{--sp:clamp(4.2rem,9vh,6rem);--sp-sm:clamp(2.8rem,5.5vh,4rem)}

  /* --- Lesbarkeit ---------------------------------------------------
     Fliesstext braucht in der Hand mehr Zeilenabstand, nicht weniger. */
  .lead{line-height:1.6}
  .hero .lead{font-size:15.5px;line-height:1.62}
  p{line-height:1.62}

  /* --- Footer als Akkordeon -----------------------------------------
     Regionen (17 Links) und Branchen (13) machten den Footer 2363px
     hoch — knapp drei Bildschirme reine Linkliste am Seitenende.
     Eingeklappt bleibt alles erreichbar, aber nichts im Weg.
     Greift nur, wenn mobil.js das Attribut gesetzt hat; ohne JS
     bleibt der Footer offen wie bisher. */
  .foot-top[data-mobil-acc]{grid-template-columns:1fr;gap:0}
  .foot-top[data-mobil-acc] .foot-brand{grid-column:auto;margin-bottom:.6rem}

  .foot-top[data-mobil-acc] .foot-col{
    border-top:1px solid var(--line);padding:0}
  .foot-top[data-mobil-acc] .foot-col:last-child{border-bottom:1px solid var(--line)}

  .foot-top[data-mobil-acc] .foot-col > h3{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;min-height:52px;margin:0;cursor:pointer;
    font-size:12px;letter-spacing:.18em;text-transform:uppercase;
    -webkit-tap-highlight-color:transparent}
  .foot-top[data-mobil-acc] .foot-col > h3::after{
    content:"";flex:0 0 auto;width:11px;height:11px;margin-left:1rem;
    background:currentColor;opacity:.55;
    /* Plus-Zeichen als Maske: dreht sich beim Oeffnen zum Minus */
    -webkit-mask:linear-gradient(#000,#000) center/100% 1px no-repeat,
                 linear-gradient(#000,#000) center/1px 100% no-repeat;
            mask:linear-gradient(#000,#000) center/100% 1px no-repeat,
                 linear-gradient(#000,#000) center/1px 100% no-repeat;
    transition:transform .35s var(--ease,ease),opacity .3s}
  /* Der Strich, der stehen bleibt, muss der senkrechte sein — die
     Drehung legt ihn waagerecht. Andersherum dreht sie das Minus
     wieder hochkant. */
  .foot-top[data-mobil-acc] .foot-col.is-auf > h3::after{
    transform:rotate(90deg);opacity:.9;
    -webkit-mask:linear-gradient(#000,#000) center/1px 100% no-repeat;
            mask:linear-gradient(#000,#000) center/1px 100% no-repeat}

  /* 0fr -> 1fr statt max-height: kein geratener Hoechstwert,
     die Liste faehrt exakt auf ihre eigene Hoehe aus. */
  .foot-top[data-mobil-acc] .foot-col__wrap{
    display:grid;grid-template-rows:0fr;
    transition:grid-template-rows .38s var(--ease,ease)}
  .foot-top[data-mobil-acc] .foot-col.is-auf .foot-col__wrap{grid-template-rows:1fr}
  .foot-top[data-mobil-acc] .foot-col__inner{overflow:hidden}
  .foot-top[data-mobil-acc] .foot-col.is-auf .foot-col__inner{padding-bottom:.5rem}
  .foot-top[data-mobil-acc] .foot-col__inner a{
    padding:.5rem 0;min-height:44px;display:flex;align-items:center;font-size:14px}
}

@media (max-width:560px){
  /* Zwei Knoepfe untereinander lesen sich auf schmalen Geraeten
     ruhiger als zwei halbe nebeneinander. */
  .work-cta,.ins-foot{gap:.7rem}
  .hero .eyebrow{margin-bottom:1.1rem!important;line-height:1.5}
}

@media (prefers-reduced-motion:reduce){
  .foot-top[data-mobil-acc] .foot-col__wrap{transition:none}
  .foot-top[data-mobil-acc] .foot-col > h3::after{transition:none}
}