/* ============================================================
   Handy-Feinschliff (gilt zuletzt, überschreibt bewusst).
   Zwei Regeln aus der UX-Prüfung:
   · Tippziele mindestens 44 px hoch, 8 px Abstand
   · Fliesstext mindestens 15 px, besser 16
   ============================================================ */
@media (max-width: 900px) {

  /* ---------- Tippziele ---------- */
  .marke {
    min-height: 44px; align-items: center;
    padding-right: 6px;               /* Fläche, nicht Zeichen vergrössern */
  }
  .burger { width: 44px; height: 44px; margin-right: -10px; }

  .krumen { gap: 8px; }
  .krumen a, .krumen b {
    display: inline-flex; align-items: center; min-height: 44px;
  }

  .fu-link, .ue-mehr, .ar-alle, .ag-link, .rede-weg, .fq-link,
  .ue-link, .tx-knopf, .ue-knopf, .lu-boden .ue-knopf {
    min-height: 44px; align-items: center;
  }
  .fg-spalten a { display: flex; align-items: center; min-height: 44px; margin-bottom: 2px; }
  .menue-liste a { min-height: 56px; align-items: center; display: flex; }

  .uf { min-height: 44px; padding: 12px 18px; }
  .up, .kar-pfeil { width: 44px; height: 44px; }
  .kk-pfeil { width: 44px !important; height: 44px !important; }
  .kar-karte.mitte .kk-pfeil { width: 48px !important; height: 48px !important; }
  .kp-punkt { width: 10px; height: 10px; }
  .lupe-knopf { width: 48px; height: 48px; }
  .lupe-zu { width: 46px; height: 46px; }
  .anf-zu { width: 46px; height: 46px; }
  .anf-marken span { min-height: 44px; display: inline-flex; align-items: center; }
  .anf-senden { min-height: 52px; }
  .anf-feld input, .anf-feld textarea { min-height: 46px; font-size: 16px; }  /* 16px: iOS zoomt sonst */

  .uk, .lz, .ar-zeile, .vt-feld { min-height: 60px; }
  .fq-punkt summary { min-height: 56px; align-items: center; }

  /* ---------- Fliesstext ---------- */
  .unterzeile { font-size: 15px; }
  .kk-text, .kar-karte.mitte .kk-text { font-size: 15px; line-height: 1.55; }
  .pj-text, .lu-text, .ag-text, .ue-text { font-size: 15.5px; line-height: 1.6; }
  .ag-neben, .ag-punkte p, .ls-punkte span, .ls-beleg-zeile,
  .fq-text, .fg-satz, .rede-text, .uk-art, .vt-satz,
  .fq-punkt p, .ue-rest p:not(.pj-augen), .lu-boden p:not(.pj-augen),
  .pj-ueber p, .ls-schau figcaption { font-size: 15px; line-height: 1.6; }
  .pj-zahl i, .lu-zahlen i, .ls-schritte i { font-size: 13px; line-height: 1.5; }
  .fg-spalten a { font-size: 15px; }

  /* die Sparten-Zeilen dürfen etwas grösser sein */
  .uk-art, .ar-art, .lz-feld { letter-spacing: .1em; }
}

@media (max-width: 900px) {
  /* die letzten kleinen Ziele */
  .rede-augen { min-height: 44px; display: inline-flex; align-items: center; }
  /* Pfeile der Nachbarkarten sind ohnehin nicht bedienbar (pointer-events: none),
     nur die vordere Karte zählt als Tippziel */
  .kar-karte:not(.mitte) .kk-pfeil { pointer-events: none; }
}

@media (max-width: 900px) {
  /* Kontaktwege und Fussmarke sind wichtige Ziele, keine Fliesstext-Links */
  .tx-wege a, .fg-marke { min-height: 44px; display: inline-flex; align-items: center; }
  .tx-block > p > a[href^="mailto"] { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 900px) {
  /* der Weg zum nächsten Projekt bzw. zur nächsten Disziplin */
  .pj-naechstes a, .ls-naechste a { min-height: 44px; align-items: center; }
}

@media (max-width: 900px) {
  /* Links in der Belegzeile sind Fliesstext-Links (WCAG-Ausnahme),
     bekommen aber etwas mehr Trefferfläche */
  .ls-beleg-zeile a { padding: 7px 0; }
}

@media (max-width: 900px) {
  /* Am Handy läuft der Inhalt unter dem festen Kopf durch. Ein weicher
     Verlauf dahinter hält Marke und Menüzeichen lesbar, ohne einen
     harten Balken über die Seite zu legen. Gilt auf allen Seiten. */
  .kopf::before {
    content: ''; position: absolute; z-index: -1;
    inset: -1px 0 auto; height: 72px;
    background: linear-gradient(to bottom, #F8F7F4 62%, rgba(248,247,244,0));
    pointer-events: none;
  }
}

@media (max-width: 900px) {
  /* Das Filmkorn ragt 50 px über den Rand hinaus, damit beim Bewegen keine
     Kante sichtbar wird. Waagrecht führte das auf einer Seite zu einem
     Scrollbalken; senkrecht bleibt der Überstand erhalten. */
  .korn { inset: -50px 0; }
}

@media (max-width: 900px) {
  /* Der Weg zur nächsten Seite sah am Handy aus wie ein Satz Text.
     Jetzt ist es eine Leiste über die ganze Breite mit rundem Pfeil,
     man sieht also, dass es dort weitergeht. Gilt für Projekte und
     Leistungen gleichermassen. */
  .pj-naechstes, .ls-naechste {
    margin-top: 30px; padding: 16px 18px;
    border: 1px solid var(--linie); border-radius: 12px;
    background: #F2F0E9;
    text-align: left;
  }
  .pj-naechstes .pj-augen, .ls-naechste .pj-augen { margin-bottom: 4px; }
  .pj-naechstes a, .ls-naechste a {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    width: 100%; min-height: 44px;
    font-size: 20px; font-weight: 500; letter-spacing: -0.02em; white-space: normal;
  }
  .pj-naechstes a span, .ls-naechste a span {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--linie); background: var(--weiss);
    display: grid; place-items: center; font-size: 14px; color: var(--ink);
  }
}

@media (max-width: 900px) {
  /* Die Brotkrume stand am Handy als eigene Zeile unter dem Kopf und
     kostete rund 90 px Höhe. Jetzt sitzt sie klein und mittig in der
     Kopfzeile selbst, zwischen Zeichen und Menüzeichen. */
  .krumen {
    position: fixed; z-index: 31; top: 0; left: 0; right: 0;
    height: 92px; padding: 0 56px;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 8.5px; letter-spacing: .15em; text-transform: uppercase;
    pointer-events: none;
  }
  .krumen a, .krumen b {
    pointer-events: auto;
    min-height: 0; display: inline-flex; align-items: center;
    padding: 14px 2px;                 /* Trefferfläche ohne sichtbare Höhe */
    white-space: nowrap;
  }
  .krumen a { color: var(--grau); }
  .krumen b {
    color: var(--ink);
    max-width: 46vw; overflow: hidden; text-overflow: ellipsis; display: inline-block;
    padding: 14px 2px;
  }
  /* Hat die Krume drei Stufen, faellt die erste weg: sonst stoesst sie
     an Zeichen und Menuezeichen. Zwei Stufen bleiben vollstaendig. */
  .krumen:has(a ~ a) > a:first-of-type,
  .krumen:has(a ~ a) > a:first-of-type + span { display: none; }
  /* Die Seiten beginnen knapp unter der Kopfzeile. Das Zeichen im Kopf
     endet bei 68 px, ein Abstand von rund 30 px darunter genügt; vorher
     standen 50 px Leere zwischen Kopf und erstem Wort. */
  .ls, .lu, .pj-platte, .ka, .tx, .ag { padding-top: 76px; }
  .ue { padding-top: 84px; }        /* die Übersicht beginnt mit einer grossen Zeile */
}

@media (max-width: 900px) {
  /* das Pfeilzeichen ist inzwischen ueberall weg, siehe weiss.css */
  .kar-karte { justify-content: flex-start; }
  .kar-karte .kk-text { margin-bottom: 0; }

  /* Der Schatten wurde vom Beschnitt der Bühne hart abgeschnitten und
     sah dadurch wie ein Balken aus. Jetzt ist er kürzer und die Bühne
     lässt oben und unten etwas Luft, damit er auslaufen kann. */
  .kar-buehne { padding: 14px 0; }
  .kar-karte { box-shadow: 0 8px 20px -16px rgba(20, 24, 15, .34); }
  .kar-karte.mitte { box-shadow: 0 12px 26px -18px rgba(20, 24, 15, .4); }

  /* die Blätterpfeile knapp unter der Fingergrösse */
  .kar-pfeil { width: 44px; height: 44px; }
}