/* =========================================================================
   QUADRONET Layout - Nach oben: "Auftauchen" (28.10.2026)
   -------------------------------------------------------------------------
   Gegenstueck zum Eisberg: Wer die Seite hinunterliest, taucht ab. Die
   Kachel unten rechts ist ein Tiefenmesser - links die Skala, darauf die
   orange Raute in der 8-Grad-Achse; sie sinkt mit, wie weit man gelesen
   hat. Ein Klick laesst auftauchen.
   Geschwister: Cookie-Kachel unten links (80-cookie.css) - gleiche Groesse,
   gleiches Kippen beim Ueberfahren.

   Ohne Skript: steht immer da, ein normaler Link auf #top (springt laut
   HTML-Standard an den Seitenanfang, auch ohne Element mit dieser ID).
   Mit Skript (hoch.js): erst nach ca. einem Bildschirm, Raute folgt der
   Lesetiefe (--tiefe 0..1), Fokus landet danach im Kopf.
   Rueckweg: Zeile lqHoch in setup.typoscript + Render-Zeile in Fuss.html.
   ========================================================================= */

@layer qn.theme {

  .hoch {
    --hoch-groesse: 2.9rem;
    --tiefe: 0;
    position: fixed;
    right: max(24px, env(safe-area-inset-right));
    bottom: max(24px, env(safe-area-inset-bottom));
    z-index: 900;                       /* unter Lexikon-Karten (1000), Fenstern und Cookie-Dialog */
    display: flex;
    align-items: center;
    flex-direction: row-reverse;        /* Schild links neben der Kachel */
    gap: .5rem;
    color: var(--orange-hell);
    text-decoration: none;
  }

  /* ----- Kachel ------------------------------------------------------ */
  .hoch__kachel {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--hoch-groesse);
    height: var(--hoch-groesse);
    border: 1px solid var(--qn-linie);
    border-radius: 3px;
    background: #1B2B38;
    box-shadow: var(--sch-blatt);
    transition: background-color .2s ease, color .2s ease, border-color .2s ease,
                transform .35s cubic-bezier(.34, 1.4, .5, 1);
  }

  /* Skala: senkrechte Linie mit fuenf Strichen (SVG im Partial), links */
  .hoch__skala {
    position: absolute;
    top: 22%;
    left: 22%;
    width: .4rem;
    height: 56%;
    overflow: visible;
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
    opacity: .7;
  }

  /* Raute: Lesetiefe. top laeuft von 22 % (Oberflaeche) bis 78 % (Grund). */
  .hoch__marke {
    position: absolute;
    left: calc(22% - .19rem + .5px);
    top: calc(22% + var(--tiefe) * 56%);
    width: .38rem;
    height: .38rem;
    margin-top: -.19rem;
    background: var(--orange);
    transform: rotate(calc(45deg + var(--winkel)));
    box-shadow: 0 0 0 2px #1B2B38;
    transition: top .25s ease-out, background-color .2s ease, box-shadow .2s ease;
  }

  .hoch__pfeil {
    width: 1.3rem;
    height: 1.3rem;
    margin-left: .55rem;                /* Platz fuer die Skala */
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: square;
    stroke-linejoin: miter;
    transition: transform .3s cubic-bezier(.34, 1.4, .5, 1);
  }

  /* ----- Schild "Nach oben": nur Optik fuer die Maus (aria-hidden). Den
     Namen des Links traegt der versteckte Text .hoch__name. ----------- */
  .hoch__schild {
    padding: .4rem .7rem;
    border: 1px solid var(--qn-linie);
    border-left: 3px solid var(--orange);
    border-radius: 3px;
    background: #1B2B38;
    box-shadow: var(--sch-blatt);
    font: 500 .72rem/1.2 var(--qn-schriftfamilie);
    letter-spacing: .19em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--hell);
    opacity: 0;
    transform: translateX(.6rem);
    pointer-events: none;
    transition: opacity .2s ease, transform .25s ease;
  }

  /* ----- Ueberfahren / Fokus: auftauchen ---------------------------- */
  .hoch:hover .hoch__kachel,
  .hoch:focus-visible .hoch__kachel {
    border-color: var(--orange);
    background: var(--orange);
    color: var(--auf-orange);
    transform: rotate(calc(-1 * var(--winkel)));
  }
  .hoch:hover .hoch__marke,
  .hoch:focus-visible .hoch__marke {
    top: 22%;
    background: var(--auf-orange);
    box-shadow: 0 0 0 2px var(--orange);
  }
  .hoch:hover .hoch__pfeil,
  .hoch:focus-visible .hoch__pfeil { transform: translateY(-2px); }
  .hoch:hover .hoch__schild,
  .hoch:focus-visible .hoch__schild { opacity: 1; transform: none; }

  .hoch:focus-visible { outline: none; }
  .hoch:focus-visible .hoch__kachel { outline: 3px solid var(--qn-fokus); outline-offset: 3px; }

  /* ----- Mit Skript: erst nach etwa einem Bildschirm ---------------- */
  @media (scripting: enabled) {
    .hoch {
      visibility: hidden;
      opacity: 0;
      transform: translateY(1rem);
      transition: opacity .3s ease, transform .35s cubic-bezier(.22, .75, .3, 1), visibility 0s linear .35s;
    }
    .hoch.ist-da {
      visibility: visible;
      opacity: 1;
      transform: none;
      transition: opacity .3s ease, transform .35s cubic-bezier(.22, .75, .3, 1), visibility 0s;
    }
  }

  /* Burger offen: Kachel weg, sie laege ueber dem Panel */
  .nav-offen .hoch { visibility: hidden; opacity: 0; }

  /* Kopf als Fokusziel nach dem Auftauchen (tabindex=-1, nur per Skript) */
  .kopf:focus { outline: none; }

  @media (max-width: 768px) {
    .hoch { --hoch-groesse: 2.6rem; }   /* wie die Cookie-Kachel */
    .hoch__schild { display: none; }    /* Telefon: kein Hover */
  }

  @media (prefers-reduced-motion: reduce) {
    .hoch, .hoch.ist-da, .hoch__kachel, .hoch__marke, .hoch__pfeil, .hoch__schild { transition: none; }
    .hoch:hover .hoch__kachel, .hoch:focus-visible .hoch__kachel { transform: none; }
  }

  @media (forced-colors: active) {
    .hoch__kachel { border-color: ButtonText; background: ButtonFace; color: ButtonText; }
    .hoch__marke { forced-color-adjust: none; background: Highlight; box-shadow: none; }
    .hoch:focus-visible .hoch__kachel { outline-color: Highlight; }
  }

  @media print { .hoch { display: none; } }
}