/* ──────────────────────────────────────────────────────────────
   mobile.css · Lindner Technik & Design
   Touch- und Lesbarkeits-Feinschliff für Handy und Tablet.

   Wird auf JEDER Seite als LETZTES Stylesheet eingebunden, damit die
   Regeln hier die Inline-Styles der Seiten überschreiben können.
   Greift ausschließlich unter 900 px — am Desktop ändert sich nichts.

   Warum es das braucht (gemessen auf 375×812, iPhone-Format):
   · Mono-Labels standen bei 8,0–9,6 px — das liest auf dem Handy niemand.
   · Formularfelder unter 16 px lassen iOS Safari beim Antippen
     in die Seite hineinzoomen. Der Besucher landet schief im Formular.
   · Tap-Ziele waren teils 27–32 px hoch. Apple/Google fordern 44 px.
   · Der Preisrechner stellte drei Paket-Spalten nebeneinander und
     schob die Seite dadurch 7 px über den Rand (382 statt 375).
   ────────────────────────────────────────────────────────────── */

/* iOS Safari vergrößert im Querformat sonst eigenmächtig die Schrift */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (max-width: 900px) {

  /* ── 1 · EINGABEFELDER: 16 px verhindert den iOS-Zoom ───────── */
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="search"], input[type="url"],
  select, textarea,
  .f-inp, .f-sel, .f-ta {
    font-size: 16px;
    /* Eigene Höhe statt der winzigen iOS-Standardhöhe */
    min-height: 46px;
  }
  .f-ta, textarea { min-height: 130px; }
  /* Grauer Standard-Look von iOS abschalten */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea { -webkit-appearance: none; appearance: none; border-radius: 2px; }
  input[type="range"] { -webkit-appearance: none; appearance: none; }

  /* ── 2 · MIKRO-TYPOGRAFIE: Untergrenze 11 px ────────────────── */
  /* Die feine Mono-Typo ist am Desktop richtig. Auf dem Handy braucht
     sie eine Untergrenze, sonst ist sie reine Dekoration.
     Sperrsatz wird dabei etwas zurückgenommen, damit die längeren
     Labels nicht in zwei Zeilen brechen. */
  .b-num, .b-tag, .b-go, .b-list li,
  .p-label, .p-tag, .p-offline, .port-legend,
  .ref-badge, .ref-url,
  .stat-l, .skill-tag, .sg-label, .id-role, .id-contact,
  .s-badge, .sec-num, .eyebrow, .row-tag, .crumb,
  .f-label, .ft-copy, .ft-links a, .mm-sub, .nav-cta,
  .ck-btn, .ck-cfg-btn, .ck-txt,
  .mob-bar-btn, .mq-item,
  .shot-empty span, .shot-cap,
  .c-lbl, .ref-facts li span, .ref-facts li,
  /* Bereichsseiten (bereich.css) */
  .bhero-eyebrow, .bhero-eyebrow span, .bmeta, .notice-lbl,
  .tab-btn, .symp-lbl, .tool-h, .tool-i span,
  .shots-note, .shots-note code, .sc-lbl, .brand,
  .ba-tag, .ba-hint, .stage-n,
  .fact-l, .bstep-n, .part-badge, .spec-l, .mat-p, .limit-h,
  .pb-lbl, .phase-n, .phase-meta, .case-badge, .case-tag, .case-offline, .stack-h,
  /* Rechtstexte (rechtstext.css) */
  .nav-back, .back-btn, .cookie-reset-btn, .page-tag, .legal-block h2,
  .pb-item .pb-lbl,
  /* Oldtimer-Demo */
  .scroll-hint, .section-label, .about-badge-text, .kontakt-label, .form-label,
  .hero-eyebrow-txt, .sec-eyebrow, .pkg-tag, .pkg-price-note,
  .calc-vat-note, .calc-checkbox-price, .calc-total-price small {
    font-size: .72rem;
    letter-spacing: .9px;
  }
  /* Haupt-Knöpfe dürfen nicht wie Kleingedrucktes aussehen */
  .btn-pri, .btn-ghost, .f-submit, .c-act, .nav-cta, .pkg-cta {
    font-size: .78rem; letter-spacing: 1.2px; min-height: 48px;
    display: inline-flex; align-items: center; justify-content: center;
  }

  .wartung-price small, .pkg-price small { font-size: .72rem; }
  /* Inline-Links im Fließtext brauchen etwas Fleisch zum Antippen */
  .ck-txt a { display: inline-block; padding: .3rem 0; }

  /* Fließtext-Kleinkram etwas großzügiger als die Mono-Labels */
  .b-desc, .ck-txt, .p-offline, .port-legend { font-size: .82rem; letter-spacing: normal; line-height: 1.7; }
  .b-lead .b-desc { font-size: .9rem; }

  /* ── 3 · TAP-ZIELE: mindestens 44 px ─────────────────────────── */
  /* Negative Margins halten das Layout an Ort und Stelle, während die
     antippbare Fläche wächst. */
  .hamburger { padding: 14px; margin: -14px -8px; min-height: 44px; box-sizing: content-box; }
  .nav-logo  { padding: .5rem 0; display: inline-flex; align-items: center; min-height: 44px; }
  .ctrl-btn  { min-height: 40px; min-width: 40px; }

  .ft-links { gap: .4rem 1.4rem; }
  .ft-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .2rem; }
  .ft-social a { width: 44px; height: 44px; }

  .mob-bar-btn { min-height: 52px; }
  .tab-btn { min-height: 44px; padding-left: .9rem; padding-right: .9rem; }
  .crumb a { display: inline-block; padding: .6rem 0; }
  .nav-back, .back-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 .6rem; }
  .ref-url, .hero-eyebrow-txt a { display: inline-block; padding: .3rem 0; }

  /* Alles, was klickbar aussieht, soll beim Antippen auch reagieren */
  a, button, label, summary, [role="button"] {
    -webkit-tap-highlight-color: rgba(201, 89, 10, .16);
    touch-action: manipulation;
  }

  /* ── 4 · COOKIE-BANNER: Knöpfe sind auf dem Handy zu klein ──── */
  .ck-inner { flex-direction: column; align-items: stretch; }
  .ck-btns  { width: 100%; }
  .ck-btn   { flex: 1 1 0; min-height: 46px; padding: .7rem 1rem; }
  .ck-cfg-btn { min-height: 40px; padding: .5rem .9rem; }

  /* ── 5 · KEIN QUERSCROLL ─────────────────────────────────────── */
  /* Grid- und Flex-Kinder bekommen von Haus aus min-width:auto und
     können dadurch breiter werden als ihre Spur. */
  .calc-card, .calc-summary,
  .b-card, .p-card, .ref-card,
  .calc-grid > *, .b-grid > *, .port-grid > *, .c-grid > * { min-width: 0; }
  /* Einspaltige Raster ausdrücklich auf minmax(0,1fr) — sonst zieht ein
     Kind mit Seitenverhältnis (Bildkasten) die Spur über die Seitenbreite
     hinaus und der Text rechts wird abgeschnitten. */
  .about, .kontakt, .leistungen-grid, .referenzen-grid,
  .b-grid, .port-grid, .c-grid, .switch-grid { grid-template-columns: minmax(0, 1fr); }

  /* Lange Wörter (Domains, E-Mail-Adressen) dürfen umbrechen */
  .ref-url, .id-contact, .c-act, .ck-txt a { overflow-wrap: anywhere; }
}

/* ── 6 · PREISRECHNER auf schmalen Geräten ─────────────────────── */
/* Drei Paketspalten nebeneinander waren auf 375 px unlesbar und
   haben die Seite über den Rand geschoben. Untereinander ist die
   Auswahl klarer und der Preis bleibt der Held. */
@media (max-width: 700px) {
  .calc-grid           { grid-template-columns: minmax(0, 1fr); }
  .calc-radio-group    { grid-template-columns: 1fr; gap: .75rem; }
  .calc-checkbox-group { grid-template-columns: 1fr; gap: .75rem; }
  .calc-radio-btn      { padding: 1.1rem 1.15rem; text-align: left; min-height: 44px; }
  .calc-radio-desc     { margin-bottom: .6rem; }
  .calc-checkbox-btn   { min-height: 52px; }
  .calc-step-title     { font-size: 1.1rem; flex-wrap: wrap; }

  /* Ein 4-px-Regler ist mit dem Daumen kaum zu treffen */
  .calc-slider { height: 6px; }
  .calc-slider::-webkit-slider-thumb { width: 26px; height: 26px; }
  .calc-slider::-moz-range-thumb     { width: 26px; height: 26px; border: none; background: var(--accent); border-radius: 50%; }
  .calc-slider-wrapper { padding: .4rem 0; }
}

/* ── 7 · SEHR SCHMALE GERÄTE (iPhone SE & Co.) ─────────────────── */
@media (max-width: 380px) {
  .nav-inner { padding: 0 1rem; }
  .mob-bar-btn { font-size: .68rem; letter-spacing: .4px; }
  .ft-links { gap: .2rem 1rem; }
}

/* ── 8 · BEWEGUNGSREDUZIERUNG ──────────────────────────────────── */
/* Marquee und Parallax kosten auf schwachen Handys Akku und ruckeln. */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none !important; transform: none !important; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}