/* ===========================================================================
   Smartphone und kleines Tablet
   ===========================================================================

   Die Seite ist am Schreibtisch entworfen: zweispaltige Raster, feste
   Pixelbreiten, ein 68 Pixel grosses Logo. Auf einem 390 Pixel breiten
   Telefon lief das Logo aus dem Bild, die Navigation verschwand und die
   Textspalte lag ueber dem Foto.

   Dieses Stilblatt schaltet die Raster einspaltig und verkleinert die
   Schriftgrade. Am Schreibtisch aendert es nichts -- alles steht in
   @media-Bloecken.

   Warum ueberall !important steht: Die Seite traegt ihre Gestaltung fast
   vollstaendig in style="..."-Angaben direkt an den Elementen. Eine
   gewoehnliche Regel aus einer Stilvorlage verliert dagegen immer. Mit
   !important gewinnt sie -- das ist hier kein schlechter Stil, sondern
   die einzige Moeglichkeit, ohne Umbau der ganzen Seite auszukommen.
   Zwei Angaben setzt ausserdem das Seitenskript beim Scrollen neu
   (Logogroesse und Abstand der Kopfleiste); auch die schlaegt !important.

   Der Umschaltpunkt liegt bei 860 Pixeln: darunter wird gestapelt.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Was nur auf dem Telefon vorkommt, ist am Schreibtisch aus
   ---------------------------------------------------------------------------
   Diese drei Sachen bringt die Seite im Markup mit, damit das Telefon sie
   einblenden kann. Am Schreibtisch stoeren sie -- deshalb stehen sie hier,
   ausserhalb jedes @media-Blocks, auf "aus".
   --------------------------------------------------------------------------- */

/* Der Knopf mit den drei Strichen und sein Schalter. */
.menu-knopf,
.menu-schalter {
  display: none;
}

/* Nummer und Titel eines Werks, die auf dem Telefon ueber die Fotos rutschen
   (am Schreibtisch steht derselbe Inhalt in der Textspalte). */
.nk-kopf-mobil {
  display: none;
}

/* Der Trennstrich vor dem Fliesstext eines Werks. */
.nk-trenner {
  display: none;
}

/* Der Umbruch in "Drahtbaeume in Miniatur" am Portraet. */
.umbruch-mobil {
  display: none;
}

/* Das zweite Portraet, das auf dem Telefon unter dem Kopfbereich steht. */
.portraet-mobil {
  display: none;
}

/* ---------------------------------------------------------------------------
   Zur Frage "kann sich die Seite quer verschieben?"
   ---------------------------------------------------------------------------
   Nein -- und zwar ohne eine Regel dafuer. Seit der Baum ueber
   "object-fit: cover" von innen vergroessert wird, ragt kein Element mehr
   ueber den Bildschirmrand hinaus; nachgemessen ist die Seite exakt so
   breit wie das Fenster.

   Der naheliegende Riegel "overflow-x: clip" am Wurzelelement waere ein
   Eigentor: Ist an einer Achse "clip" gesetzt und an der anderen
   "visible", macht der Browser aus der zweiten "auto" -- das Wurzelelement
   wird damit zum Scrollbereich, und darin verliert "position: sticky"
   seine Wirkung. Ausprobiert: Der drehende Kopfbereich blieb dann nicht
   mehr stehen, sondern scrollte sofort weg. Deshalb steht hier nichts.
   --------------------------------------------------------------------------- */

@media (max-width: 860px) {

  /* --- Kopfleiste --------------------------------------------------------
     Das Logo steht auf 50 Pixeln (am Schreibtisch sind es 68) und behaelt
     seine Unterzeile
     ("Miniature Objets d'Art") wie am Schreibtisch. Platz dafuer ist, weil
     die drei Verweise nicht mehr nebeneinander stehen, sondern in einem
     Klappmenue.

     Zwei der Angaben setzt das Seitenskript beim Scrollen selbst am
     Element (Logogroesse und Abstand); dagegen hilft nur !important. */
  .nav {
    padding: 10px 16px !important;
    align-items: flex-start !important;
  }
  /* Achtung: das "auto" rechts muss bleiben. Es schiebt alles Weitere in
     der Kopfleiste an den rechten Rand -- eine Kurzschreibweise wie
     "margin: 6px 0 0 0" wirft es weg, und der Menueknopf klebte dann
     mitten in der Zeile am Logo. */
  #brandLink {
    margin: 6px auto 0 0 !important;
    gap: 6px !important;
    /* Die Unterzeile ist breiter als "LISARBOR". Ohne diese Zeile beginnen
       beide links buendig, und das Logo sieht dadurch nach links verrutscht
       aus. "center" richtet die beiden Zeilen an ihrer gemeinsamen Mitte
       aus -- der Block als Ganzes bleibt trotzdem links stehen, weil der
       Verweis nur so breit ist wie sein laengster Inhalt. */
    align-items: center !important;
  }
  #brandLogo {
    font-size: 50px !important;
  }
  #brandTag {
    display: block !important;
    font-size: 9px !important;
    letter-spacing: .28em !important;
  }

  /* --- Klappmenue --------------------------------------------------------
     Statt drei Verweisen nebeneinander ein Knopf mit drei Strichen. Er ist
     bewusst klein gehalten (18 Pixel breit) -- die Trefferflaeche ist
     durch den Innenabstand trotzdem gross genug zum Antippen.

     Es steckt kein JavaScript dahinter, sondern ein verstecktes
     Kontrollkaestchen: Der Knopf ist dessen Beschriftung, und
     ":checked ~ .nav-links" klappt die Liste auf. Das kann mit der
     Editor-Laufzeit nicht ins Gehege kommen. Nur das Zuklappen nach dem
     Antippen eines Verweises erledigt ein Dreizeiler im Seitenkopf. */
  .nav-menu {
    display: block !important;
    position: relative;
    margin-top: 8px;
    /* Etwas Abstand zum Displayrand -- mit den 16 Pixeln Innenabstand der
       Kopfleiste allein klebte der Knopf zu weit aussen. */
    margin-right: 10px;
  }

  /* Nicht per display:none verstecken -- so bleibt das Kaestchen mit der
     Tastatur erreichbar und Vorlesegeraete finden es. */
  .menu-schalter {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  .menu-knopf {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3.5px;
    width: 16px;
    padding: 8px 0;
    margin-left: auto;
    cursor: pointer;
  }
  .menu-knopf span {
    display: block;
    height: 1.4px;
    background: #e9e9ed;
    border-radius: 1px;
    transition: transform .25s ease, opacity .25s ease;
  }
  /* Aufgeklappt wird aus den drei Strichen ein Kreuz. */
  .menu-schalter:checked + .menu-knopf span:nth-child(1) {
    transform: translateY(4.9px) rotate(45deg);
  }
  .menu-schalter:checked + .menu-knopf span:nth-child(2) {
    opacity: 0;
  }
  .menu-schalter:checked + .menu-knopf span:nth-child(3) {
    transform: translateY(-4.9px) rotate(-45deg);
  }

  .nav-links {
    display: none !important;
    position: absolute;
    top: 34px;
    right: 0;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 14px !important;
    min-width: 132px;
    padding: 16px 18px !important;
    border: 1px solid rgba(233, 233, 237, .12);
    border-radius: 12px;
    background: rgba(16, 16, 24, .97);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
    font-size: 15px;
  }
  .menu-schalter:checked ~ .nav-links {
    display: flex !important;
  }
  .nav-links a {
    text-decoration: none;
  }

  /* --- Kopfbereich mit Baum und Portraet ---------------------------------
     Aus zwei Spalten nebeneinander werden zwei Zeilen uebereinander:
     oben der Baum mit seinem Text, darunter das Portraet.

     Die Bahn, ueber die sich der Baum dreht, wird von 380 auf 300
     Bildschirmhoehen gekuerzt -- am Telefon scrollt man mit dem Finger,
     die lange Strecke fuehlt sich sonst zaeh an. Die 48 Bilder werden
     weiterhin alle gezeigt, nur auf kuerzerem Weg. */
  /* --- Der Kopfbereich auf dem Telefon: nur der Baum ---------------------

     Am Schreibtisch stehen Baum und Portraet nebeneinander. Auf dem Telefon
     standen sie zuletzt uebereinander -- und beide zu klein. Jetzt fuellt
     der Baum den ersten Bildschirm allein; Lisa kommt erst danach, als
     eigener Abschnitt (siehe .portraet-mobil weiter unten).

     Warum hier ueberall "svh" steht und nicht "vh": Auf dem Telefon meint
     100vh die Bildschirmhoehe OHNE Adresszeile des Browsers. Beim Laden ist
     die Adresszeile aber da -- der Kopfbereich waere also hoeher als das
     Sichtfeld, und beim Einfahren der Leiste rechnet der Browser alles neu.
     "svh" meint immer die kleine Ansicht, also die mit Adresszeile, und
     aendert sich beim Scrollen nicht. Die vh-Zeile davor bleibt als
     Rueckfallebene fuer aeltere Browser stehen.

     Zur Bahnhoehe: Wie weit man wischen muss, bis sich der Baum einmal
     gedreht hat, ist der Unterschied zwischen Bahnhoehe und
     Bildschirmhoehe -- 150 minus 100 macht einen halben Bildschirm. */
  #heroTrack {
    height: 150vh !important;
    height: 150svh !important;
  }
  #heroTrack > div {
    grid-template-columns: 1fr !important;
    grid-template-rows: 100vh !important;
    grid-template-rows: 100svh !important;
    height: 100vh !important;
    height: 100svh !important;
  }
  /* Rasterzellen wachsen ab Werk mit ihrem breitesten Inhalt mit. Ohne
     min-width:0 zoege der Baum die Zelle ueber die Bildschirmbreite auf,
     und die Bildunterschrift liefe rechts hinaus. */
  #heroTrack > div > div {
    min-width: 0 !important;
  }
  /* Die zweite Zelle ist Lisas Portraet -- auf dem Telefon steht es
     stattdessen unter dem Kopfbereich. */
  #heroTrack > div > div:nth-child(2) {
    display: none !important;
  }
  /* Die Baumzelle fuellt den ganzen Bildschirm, ohne Polsterung. Dadurch
     steht der Baum genau in der Mitte der Bildschirmhoehe -- der Textblock
     darunter ist absolut positioniert und zieht ihn nicht aus der Mitte. */
  #heroTrack > div > div:first-child {
    padding: 0 !important;
  }
  /* Der Rollhinweis sitzt am unteren Bildschirmrand und kaeme dem Textblock
     ins Gehege. Auf dem Telefon zeigt der Fortschrittsbalken ohnehin an,
     dass sich beim Scrollen etwas tut. */
  #scrollHint {
    display: none !important;
  }

  /* --- Die Groesse des Baums ---------------------------------------------

     Zwei Grenzen bestimmen sie.

     Erstens die Breite. Die Einzelbilder sind 620x349 Pixel gross, der Baum
     darin sitzt zwischen x=100 und x=471 -- links und rechts ist leerer
     Rand. Mit "object-fit: cover" wird das Bild so weit vergroessert, dass
     es den Rahmen fuellt, und der Ueberstand faellt weg. Solange der Rahmen
     hoechstens 83 Prozent seiner Breite hoch ist, trifft dieser Schnitt
     ausschliesslich den leeren Rand. Wird er hoeher, beginnt er den Baum
     selbst zu beschneiden. 80vw statt 83vw laesst noch ein paar Pixel
     Sicherheitsabstand -- bei genau 83 beruehrte der Baum den Bildrand.

     Zweitens der Platz. Der Baum steht mittig, der Textblock unten; damit
     die beiden sich nicht beruehren, darf der Baum hoechstens
     Bildschirmhoehe minus 300 Pixel hoch sein.

     min() nimmt den jeweils kleineren der beiden Werte. Ein Beschnitt des
     Baums selbst ist damit ausgeschlossen -- weder oben, noch unten, noch
     an den Seiten. */
  #treeFrame {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    height: min(80vw, calc(100vh - 300px)) !important;
    height: min(80vw, calc(100svh - 300px)) !important;
    max-height: none !important;
    aspect-ratio: 620 / 349 !important;
    object-fit: cover !important;
  }

  /* Der Textblock sitzt am unteren Bildschirmrand -- ueber die volle
     Breite statt in einer 440-Pixel-Spalte, und kleiner gesetzt. */
  .hero-bildtext {
    left: 18px !important;
    right: 18px !important;
    bottom: 22px !important;
    max-width: none !important;
  }
  .hero-bildtext > div:last-child {
    margin-top: 12px !important;
  }
  .hero-buehne {
    height: 66px !important;
  }
  .hero-buehne > div {
    font-size: 18px !important;
  }

  /* --- Lisa, jetzt als eigener Abschnitt ---------------------------------
     Sie erscheint erst, wenn die Drehung durch ist und man weiterscrollt.
     Das Bild laeuft ueber die volle Breite; der Hintergrund geht oben in
     das Dunkel des Kopfbereichs ueber, damit die Kante nicht auffaellt. */
  .portraet-mobil {
    display: block !important;
    position: relative;
    background: #0a0b11;
    padding-bottom: 26px;
  }
  .portraet-mobil img {
    display: block;
    width: 100%;
    max-width: 430px;
    height: auto;
    margin: 0 auto;
  }
  .portraet-mobil-text {
    position: absolute;
    right: 18px;
    bottom: 34px;
    text-align: right;
    line-height: 1.35;
    pointer-events: none;
  }
  .portraet-mobil-name {
    display: block;
    font-family: Inter, sans-serif;
    font-weight: 500;
    font-size: 17px;
    letter-spacing: .02em;
    color: #e9e9ed;
  }
  .portraet-mobil-rolle {
    display: block;
    font-size: 13px;
    color: rgba(233, 233, 237, .55);
  }

  /* --- Abschnitte allgemein ---------------------------------------------
     Aussenabstand von 40 auf 18 Pixel; oben und unten deutlich weniger,
     weil sonst zwischen zwei Abschnitten ein halber Bildschirm leer ist. */
  #kollektion {
    padding: 80px 18px 20px !important;
  }
  #ueber {
    padding: 90px 18px 80px !important;
  }
  #anfrage {
    padding: 80px 18px 60px !important;
  }

  /* --- Ueberschriften ----------------------------------------------------
     44 bis 46 Pixel sind am Telefon zu gross; drei Woerter fuellen sonst
     den halben Bildschirm. */
  h2 {
    font-size: 29px !important;
    line-height: 1.14 !important;
  }
  h3 {
    font-size: 24px !important;
  }

  /* --- Der Tiefeneffekt beim Scrollen ------------------------------------
     Am Schreibtisch wandern einzelne Bloecke beim Scrollen etwas langsamer
     als die Seite -- das gibt Tiefe. Gestapelt auf schmalem Bildschirm
     schiebt derselbe Versatz die Fotos ueber die Ueberschrift darueber:
     "Kein Stueck gleicht dem anderen" verschwand hinter dem ersten Bild.
     Auf dem Telefon deshalb aus. Das Seitenskript setzt den Versatz als
     transform direkt am Element, weshalb hier !important stehen muss. */
  [data-parallax] {
    transform: none !important;
  }

  /* --- Die Werke ---------------------------------------------------------
     Eine Spalte. Am Schreibtisch wechseln die Reihen die Seite (mal Bild
     links, mal rechts), und dafuer steht in jeder zweiten Reihe der Text
     im Quelltext VOR den Fotos. Gestapelt kaeme dadurch mal das Bild
     zuerst und mal der Text -- deshalb wird die Reihenfolge hier fest
     vorgegeben: erst die Fotos, dann der Text.

     Der Fotoblock ist am Merkmal data-parallax zu erkennen, der Textblock
     ist das jeweils andere Kind der Reihe. */
  .nk-row {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .nk-row > [data-parallax] {
    order: 1 !important;
  }
  .nk-row > div {
    order: 2 !important;
  }

  /* --- Nummer und Titel ueber die Fotos ----------------------------------
     Gestapelt war nicht zu erkennen, welcher Text zu welchen Fotos gehoert:
     Man sah erst vier Bilder und darunter erst den Namen. Jetzt steht der
     Kopf oben -- Ziffer links, Titel und Material rechts daneben, das
     spart gegenueber untereinander rund 40 Pixel Hoehe.

     Den Kopf gibt es zweimal im Markup (siehe werkzeuge/mobil-umbau.py);
     hier wird der eine ein- und der andere ausgeblendet. */
  .nk-row > .nk-kopf-mobil {
    display: flex !important;
    order: 0 !important;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 2px;
  }
  .nk-kopf-desktop {
    display: none !important;
  }
  .nk-nummer {
    font-family: Inter, sans-serif;
    font-size: 42px;
    font-weight: 600;
    line-height: 1;
    color: rgba(145, 132, 217, .32);
    flex: none;
  }
  .nk-kopf-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .nk-titel {
    font-size: 26px;
    line-height: 1.12;
  }
  .nk-material {
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #9184d9;
  }

  /* Ein Strich zwischen Fotos und Fliesstext -- er trennt die beiden
     Bloecke, ohne eine weitere Ueberschrift zu brauchen. Er laeuft nach
     rechts aus, damit er nicht wie ein Rahmen wirkt. */
  .nk-trenner {
    display: block !important;
    height: 1px;
    margin: 4px 0 20px;
    background: linear-gradient(to right, #9184d9, rgba(145, 132, 217, 0));
  }

  /* --- Ueber die Kuenstlerin --------------------------------------------- */
  #ueber > div {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  #ueber p,
  #anfrage p {
    font-size: 16px !important;
  }

  /* --- Kontaktformular ---------------------------------------------------
     Name und E-Mail standen nebeneinander; einzeln sind die Felder
     bedienbar. Der Innenabstand des Kastens schrumpft von 46 auf 18. */
  #anfrage form {
    padding: 24px 18px !important;
  }
  #anfrage form > div:first-child {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  #anfrage form button {
    width: 100% !important;
    justify-content: center !important;
  }

  /* --- Fusszeile --------------------------------------------------------- */
  footer {
    margin-top: 70px !important;
    gap: 12px !important;
  }

  /* --- Grossansicht der Bilder ------------------------------------------- */
  #lightbox {
    padding: 4vh 4vw !important;
  }
  #lightboxClose {
    top: 12px !important;
    right: 14px !important;
    width: 40px !important;
    height: 40px !important;
  }
}

/* ---------------------------------------------------------------------------
   Sehr schmale Telefone (iPhone SE und aehnliche)
   --------------------------------------------------------------------------- */
@media (max-width: 400px) {
  /* Das Logo bleibt auch hier gross -- nur eine Spur kleiner, damit es
     neben dem Menueknopf Platz hat. (Frueher standen hier 22 Pixel; das
     stammte aus der Zeit, als die drei Verweise noch nebeneinander in der
     Kopfleiste standen und Platz brauchten.) */
  #brandLogo {
    font-size: 44px !important;
  }
  .nav > div {
    gap: 12px !important;
    font-size: 12px !important;
  }
  .hero-buehne > div {
    font-size: 16px !important;
  }
  h2 {
    font-size: 25px !important;
  }
}

/* ---------------------------------------------------------------------------
   Wer keine Bewegung sehen moechte
   ---------------------------------------------------------------------------
   Diese Einstellung nimmt man im Betriebssystem vor; Browser reichen sie
   an die Seite durch. Die Bildfolge des Baums bleibt -- sie wird vom
   Scrollen gesteuert, nicht von einer Zeitschaltung -- aber alles, was von
   allein wackelt oder pulsiert, haelt an. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}