/* ==========================================================================
   Arbeit auf dem Handy

   Unter 640 Pixeln bekommt die Arbeit-Seite ein eigenes Layout, mit den
   Texten und Zeichen der grossen Fassung, aber in anderer Haltung. Die
   Preisseite ist am Handy eine Rechnung und eine Treppe -- diese Seite
   ist ein Werkstattbuch: ein dunkles Band mit dem Terminal oben, die
   Leistungen als Zeilen mit dem Zeichen davor, der Ablauf als Weg mit
   grossen Nummern und dem Benefit als weissem Zettel, die Werkzeuge
   als laufendes Band aus Zeichen.

     - Kopf: Terminal ueber die volle Breite, ohne Rand, der Vorspann
       darunter
     - Dienstleistungen: vier Zeilen, Zeichen links, Text rechts
     - Ablauf: die Leiste bleibt; jede Station traegt ihre Nummer gross
       und blass hinter dem Titel, der Benefit steht als weisser Zettel
       darunter
     - Werkzeuge: der Faecher wird zum laufenden Band (js/arbeit.js baut
       es aus den Karten), die drei Karten werden Zeilen
     - Fragen und Antworten: wie gehabt, nur enger

   Dazu der Effekt von der Preisseite: der Abschnitt in der Bildmitte
   steht voll da und wirft nach oben und unten Schatten, die uebrigen
   sind abgegraut. Die Klasse setzt js/arbeit.js.

   Nur in arbeit.html eingebunden. !important steht hier allein gegen
   Abstaende, die im Markup als style-Attribut haengen.
   ========================================================================== */

@media (max-width: 640px) {

  /* ---------- Grundmasse ---------- */
  .seite-arbeit .sec { padding-block: 56px; }
  .seite-arbeit .h1 { font-size: clamp(40px, 12vw, 48px); }
  .seite-arbeit .h2 { font-size: 28px; letter-spacing: -.02em; }
  .seite-arbeit .grid { row-gap: 20px; }

  /* ---------- Abschnitt in der Bildmitte ----------
     Der Abschnitt, dessen Flaeche die Bildmitte kreuzt, steht voll da
     und wirft nach oben und unten je einen Schatten von sich weg; alle
     anderen sind abgegraut. Ueber :has, damit ohne Skript nichts
     abgegraut bleibt. Die Deckkraft sitzt am Raster und der Schleier
     am Grund, weil eine Deckkraft am Abschnitt selbst auch den eigenen
     Grund mit wegblassen wuerde. */
  .seite-arbeit main > .sec {
    position: relative;
    border-bottom: 0;
    transition: background-color .4s var(--ease);
  }

  .seite-arbeit main:has(.ist-mitte) > .sec:not(.ist-mitte) {
    background: rgba(17, 17, 17, .05);
  }

  .seite-arbeit main > .sec > .grid { transition: opacity .4s var(--ease); }
  .seite-arbeit main:has(.ist-mitte) > .sec:not(.ist-mitte) > .grid { opacity: .62; }

  .seite-arbeit main > .sec::before,
  .seite-arbeit main > .sec::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 22px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .4s var(--ease);
    z-index: 1;
  }

  .seite-arbeit main > .sec::before {
    bottom: 100%;
    background: linear-gradient(to top, rgba(17, 17, 17, .07), rgba(17, 17, 17, 0));
  }

  .seite-arbeit main > .sec::after {
    top: 100%;
    background: linear-gradient(to bottom, rgba(17, 17, 17, .07), rgba(17, 17, 17, 0));
  }

  .seite-arbeit main > .sec.ist-mitte::before,
  .seite-arbeit main > .sec.ist-mitte::after { opacity: 1; }

  /* Ueber dem Kopf steht die Kopfzeile, unter dem letzten Abschnitt
     der dunkle Fuss -- beide Kanten bleiben blank. */
  .seite-arbeit main > .sec--head::before,
  .seite-arbeit main > .sec:last-child::after { display: none; }

  /* ---------- Kopf: Titel, Terminal, Vorspann ---------- */
  .seite-arbeit .sec--head {
    padding-top: clamp(28px, 6svh, 44px);
    padding-bottom: 48px;
  }

  /* Das Terminal laeuft von Kante zu Kante: das Fenster ist hier kein
     Kasten neben dem Text, sondern das Band, auf dem die Seite
     beginnt. Ohne Rundung an den Seiten und ohne Schatten -- ein
     Streifen, kein schwebendes Fenster. */
  .seite-arbeit .fenster-stapel {
    margin-top: 32px !important;
    margin-inline: -24px;
    padding-bottom: 0;
  }

  /* Zu braucht der Stapel oben und unten weniger Luft: es steht dort ja
     nur das Programmsymbol. */
  .seite-arbeit .fenster-stapel.ist-zu { margin-top: 20px !important; }

  .seite-arbeit .fenster {
    border-radius: 0;
    box-shadow: none;
  }

  .seite-arbeit .fenster__inhalt {
    padding: 20px 24px 24px;
    font-size: 11.5px;
  }

  .seite-arbeit .fenster__leiste { padding-inline: 24px; }

  /* Die letzte Zeile fordert einen Tastendruck, um das zweite Fenster
     zu oeffnen -- am Handy gibt es keine Tastatur. Die Zeile und die
     Leerzeile davor fallen darum weg; das Fenster endet nach den
     Sprungverweisen. */
  .seite-arbeit [data-fenster="eins"] .z:last-child,
  .seite-arbeit [data-fenster="eins"] .z:nth-last-child(2) { display: none; }

  .seite-arbeit .lead--tief {
    margin-top: 32px !important;
    font-size: 17px;
    line-height: 1.55;
  }

  /* ---------- Dienstleistungen: vier Zeilen ----------
     Statt vier Karten untereinander mit je einem Zeichen darueber: eine
     Liste. Das Zeichen steht links in seiner eigenen Spalte, daneben
     Titel und Text. */
  .seite-arbeit .cards-4--dienste {
    margin-top: 36px !important;
    row-gap: 0;
  }

  .seite-arbeit .cards-4--dienste .tcard {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 18px;
    row-gap: 6px;
    align-items: start;
    padding: 22px 0;
    border-top: 1px solid var(--hairline-strong);
  }

  .seite-arbeit .cards-4--dienste .tcard:last-child {
    border-bottom: 1px solid var(--hairline-strong);
  }

  /* Das Zeichen zurueck in den Fluss: am Schreibtisch schwebt es ueber
     der Kartenlinie, hier steht es in der linken Spalte. Der Auftritt
     (Aufsteigen mit Ueberschwinger) faellt weg, das Zeichnen des
     Strichs bleibt. */
  .seite-arbeit .cards-4--dienste .ikon3d {
    position: static;
    width: 44px;
    height: 44px;
    grid-row: 1 / span 2;
    opacity: 1;
    transform: none;
    animation: none;
  }

  .seite-arbeit .cards-4--dienste .tcard h3 {
    grid-column: 2;
    font-size: 17px;
    line-height: 1.25;
  }

  .seite-arbeit .cards-4--dienste .tcard p {
    grid-column: 2;
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
  }

  .seite-arbeit .textlinks {
    margin-top: 28px !important;
    gap: 22px;
  }

  /* ---------- Ablauf: Weg mit Nummern und Zetteln ----------
     Die Leiste mit den Punkten bleibt -- sie ist das Rueckgrat der
     Seite. Jede Station bekommt ihre Nummer gross und blass hinter den
     Titel, der Benefit steht als weisser Zettel darunter: das ist das
     Versprechen zu jedem Schritt, und ein Versprechen darf sich
     abheben. */
  .seite-arbeit .flow { counter-reset: schritt; margin-top: 40px; }

  .seite-arbeit .flow-step {
    counter-increment: schritt;
    padding: 34px 0;
  }

  .seite-arbeit .flow-step:first-of-type { padding-top: 0; }

  .seite-arbeit .flow-step__body {
    position: relative;
    padding-left: 30px;
  }

  .seite-arbeit .flow-step__body::before {
    content: counter(schritt);
    position: absolute;
    right: 0;
    top: -10px;
    font-size: 72px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -.05em;
    color: var(--ink);
    opacity: .06;
    pointer-events: none;
  }

  .seite-arbeit .flow-step__body h3 {
    font-size: 24px;
    position: relative;
  }

  .seite-arbeit .flow-step__body p {
    font-size: 15.5px;
    line-height: 1.55;
    position: relative;
  }

  /* Der Zettel liegt auf der Seite, er ist kein Einschub: er hat den
     Ton des Seitengrunds, keine Kante, und haengt allein am Schatten
     -- ein flacher Kern plus ein weiter Schein. Beide ohne Versatz,
     damit der Schatten auf allen vier Seiten gleich breit liegt: der
     Zettel liegt flach auf, er kippt nicht nach unten. Der Grund
     kommt aus --buehne und nicht als festes Weiss, damit der Zettel
     einen Farbton der Seite mitgeht. */
  .seite-arbeit .flow-step__benefit {
    margin-top: 18px;
    margin-left: 30px;
    padding: 14px 16px 16px;
    background: var(--buehne);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 0 3px rgba(17, 17, 17, .07),
                0 0 22px rgba(17, 17, 17, .13);
  }

  .seite-arbeit .flow-step__benefit .label { color: var(--ink-4); }

  .seite-arbeit .flow-step__benefit p {
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ink);
  }

  /* Der Zettel darf nicht mit verblassen, wenn die Station nicht im
     Fokus ist -- er soll blass werden wie der Text, nicht grau
     durchscheinen. Das erledigt die Deckkraft aus pages.css bereits;
     hier nur die Punkte ein Stueck nach innen, damit sie nicht an der
     Bildkante kleben. */
  .seite-arbeit .flow__track { left: 4px; }
  .seite-arbeit .flow-dot { left: -1px; }

  /* ---------- Werkzeuge: laufendes Band und drei Zeilen ---------- */
  /* Der Faecher braucht Breite und eine Maus; hier weicht er dem Band,
     das js/arbeit.js aus seinen Karten baut. */
  .seite-arbeit .werkzeugfaecher { display: none; }

  .seite-arbeit .werkzeuglauf {
    grid-column: 1 / span 12;
    order: 2;
    /* Polster nach oben und unten, damit der Schatten der Karten Platz
       hat: der Kasten beschneidet, was ueber ihn hinausragt, und ohne
       das Polster war der Schatten an der Ober- und Unterkante
       abgeschnitten. Der Abstand darueber ist um dasselbe Mass
       kleiner, damit das Band dort stehen bleibt, wo es stand. */
    margin-top: 12px;
    padding-block: 16px;
    margin-inline: -24px;
    overflow: hidden;
    /* An beiden Enden weich ausgeblendet, damit die Zeichen nicht an
       einer harten Kante abgeschnitten werden. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  }

  .seite-arbeit .werkzeuglauf__spur {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: werkzeuglauf 26s linear infinite;
  }

  .seite-arbeit .werkzeuglauf__karte {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(17, 17, 17, .07);
  }

  /* Der Freiraum je Zeichen ist derselbe wie im Faecher: die Breite der
     Zeichen kommt aus denselben Regeln, nur --karte ist hier die
     Kartenbreite des Bands. */
  .seite-arbeit .werkzeuglauf__karte { --karte: 76px; }

  /* Die Spur enthaelt die Karten zweimal; eine halbe Spur weiter sieht
     es wieder aus wie am Anfang, darum laeuft die Bewegung nahtlos. */
  @keyframes werkzeuglauf {
    to { transform: translateX(-50%); }
  }

  .seite-arbeit #werkzeuge .cards-3 {
    order: 3;
    margin-top: 16px !important;
    row-gap: 0;
  }

  .seite-arbeit #werkzeuge .tcard {
    padding: 20px 0;
    border-top: 1px solid var(--hairline-strong);
  }

  .seite-arbeit #werkzeuge .tcard:last-child {
    border-bottom: 1px solid var(--hairline-strong);
  }

  .seite-arbeit #werkzeuge .tcard h3 { font-size: 17px; }
  .seite-arbeit #werkzeuge .tcard p { font-size: 15px; line-height: 1.55; }

  /* Die Appnamen tun am Handy nichts (kein Zeigen); sie bleiben fett,
     aber in der Textfarbe, damit sie nicht wie tote Verweise wirken. */
  .seite-arbeit #werkzeuge .tcard strong { color: inherit; }

  /* ---------- Fragen und Antworten ---------- */
  .seite-arbeit #faq .c3-8 { margin-top: 28px !important; }
  .seite-arbeit #faq .faq-title { font-size: 30px; }

  @media (prefers-reduced-motion: reduce) {
    .seite-arbeit .werkzeuglauf__spur { animation: none; }
    .seite-arbeit main > .sec,
    .seite-arbeit main > .sec > .grid,
    .seite-arbeit main > .sec::before,
    .seite-arbeit main > .sec::after { transition: none; }
  }
}