/* =========================================================================
   QUADRONET Layout - Bausteine aus dem Entwurf
   -------------------------------------------------------------------------
   Nur das, was Kopf, Fuss und die kommenden Fluid-Elemente sicher brauchen:
   Wuerfel (Hauszeichen), Knoepfe, Kicker-Zeile, Vorspann, Randnotiz,
   Haarlinie. Die Mikrodesign-Bibliothek (Absatzformate, Listen, Tabellen,
   Karten ...) kommt erst NACH dem Aussortieren dazu - Stufe 3.
   ========================================================================= */

@layer qn.theme {

  /* ----- Der Wuerfel: das Hauszeichen ----------------------------------
     Quadro heisst vier. Drei Groessen, eine Regelmenge; die Groesse steuert
     --k. Klein und kantig vor den Kickern, gross und beschriftet im Fuss. */
  .wuerfel {
    --k: 1em;
    --h: calc(var(--k) / 2);
    --wk: rgba(255, 136, 0, .80);
    --wg: rgba(255, 136, 0, .09);
    display: inline-block;
    position: relative;
    width: var(--k);
    height: var(--k);
    margin-right: .42em;
    vertical-align: -.10em;
    transform-style: preserve-3d;
    transform: rotateX(-22deg) rotateY(-32deg);
  }
  .wuerfel > span {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border: 1.4px solid var(--wk);
    border-radius: 10%;
    background: var(--wg);
    transform-style: preserve-3d;
  }
  /* inset:-1.4px gegen Schlitze an den Kanten */
  .wuerfel > span::before { content: ""; position: absolute; inset: -1.4px; z-index: -1; background: var(--wg); }
  .wuerfel > span:nth-child(1) { transform: translateZ(var(--h)); }
  .wuerfel > span:nth-child(2) { transform: rotateY(180deg) translateZ(var(--h)); }
  .wuerfel > span:nth-child(3) { transform: rotateY(90deg) translateZ(var(--h)); }
  .wuerfel > span:nth-child(4) { transform: rotateY(-90deg) translateZ(var(--h)); }
  .wuerfel > span:nth-child(5) { transform: rotateX(90deg) translateZ(var(--h)); }
  .wuerfel > span:nth-child(6) { transform: rotateX(-90deg) translateZ(var(--h)); }
  .wuerfel b {
    font-family: var(--qn-schriftfamilie);
    font-weight: 400;
    font-size: calc(var(--k) * .085);
    letter-spacing: .08em;
    color: var(--orange-hell);
    opacity: .62;
  }
  .wuerfel.kant > span { border-radius: 0; }
  .frame-m-paper .wuerfel { --wk: rgba(163, 87, 0, .72); --wg: rgba(163, 87, 0, .07); }
  .frame-m-paper .wuerfel b { color: var(--orange-ink); }

  .wuerfel-gross { display: grid; place-items: center; padding: .5rem; perspective: 1300px; }
  .wuerfel-gross .wuerfel { --k: clamp(84px, 11vw, 124px); margin: 0; }
  @media (max-width: 700px) { .wuerfel-gross { margin-inline: auto; } }

  @media (prefers-reduced-motion: no-preference) {
    @keyframes qn-dreh {
      from { transform: rotateX(-22deg) rotateY(0deg); }
      to   { transform: rotateX(-22deg) rotateY(360deg); }
    }
    .wuerfel-gross .wuerfel { animation: qn-dreh 54s linear infinite; }
    .label .wuerfel { animation: qn-dreh 42s linear infinite; }
  }

  /* ----- Kicker-Zeile: Wuerfel · Nummer · Wort · auslaufende Linie ----- */
  .label {
    display: flex;
    align-items: baseline;
    gap: .85em;
    margin: 0 0 1.1rem;
    font: 500 .72rem/1.5 var(--qn-schriftfamilie);
    letter-spacing: .19em;
    text-transform: uppercase;
  }
  .label .nr { font-variant-numeric: tabular-nums; color: #FFA94D; }
  .label .wuerfel { --k: .98em; margin-right: .15em; }
  .label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(159, 192, 216, .32), transparent 92%);
  }
  .frame-m-paper .label .nr { color: var(--orange-ink); }
  .frame-m-paper .label::after { background: linear-gradient(90deg, rgba(22, 36, 47, .24), transparent 92%); }

  /* ----- Vorspann, Randnotiz, Haarlinie -------------------------------- */
  .lead {
    font-size: clamp(1.05rem, 1rem + .4vw, 1.28rem);
    font-weight: 300;
    line-height: 1.55;
  }
  .notiz {
    padding-left: 1.1rem;
    border-left: 1px solid rgba(159, 192, 216, .28);
    font-size: .86rem;
    line-height: 1.6;
    color: var(--qn-schrift-leise);
  }
  .frame-m-paper .notiz { border-left-color: rgba(22, 36, 47, .22); }

  .haar {
    height: 1px;
    margin: 0;
    border: 0;
    background: linear-gradient(90deg, transparent, rgba(159, 192, 216, .3) 8%, rgba(159, 192, 216, .3) 92%, transparent);
  }
  .frame-m-paper .haar { background: linear-gradient(90deg, transparent, rgba(22, 36, 47, .22) 8%, rgba(22, 36, 47, .22) 92%, transparent); }

  /* ----- Knoepfe -------------------------------------------------------
     .b-d = Hauptknopf (Orange, mit kleinem Wuerfel), .b-s = Rahmenknopf.
     min-height 44px: Zielflaeche fuer Finger. */
  .b {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .8em;
    min-height: 44px;
    padding: 1.05em 1.5em;
    border: 0;
    background: none;
    color: inherit;
    font: 600 .95rem/1 var(--qn-schriftfamilie);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--sch-nah);
    transition: box-shadow .3s ease, transform .3s ease;
  }
  .b:hover { box-shadow: var(--sch-blatt); transform: translateY(-1px); }
  .b .pf {
    flex: none;
    width: 8px;
    height: 8px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .35s cubic-bezier(.2, .7, .2, 1);
  }
  .b:hover .pf { transform: rotate(45deg) translate(3px, -3px); }

  .b-d { background: var(--orange); color: var(--auf-orange); }
  .b-d:hover { box-shadow: 0 12px 26px -12px rgba(255, 136, 0, .75); }
  .b-d .mini {
    position: relative;
    flex: none;
    width: 1.05em;
    height: 1.05em;
    transform-style: preserve-3d;
    transform: rotateX(-22deg) rotateY(-30deg);
    transition: transform .7s cubic-bezier(.3, .8, .2, 1);
  }
  .b-d .mini i { position: absolute; inset: 0; border: 1.5px solid rgba(18, 24, 29, .85); background: rgba(18, 24, 29, .10); }
  .b-d .mini i:nth-child(1) { transform: translateZ(.525em); }
  .b-d .mini i:nth-child(2) { transform: rotateY(90deg) translateZ(.525em); }
  .b-d .mini i:nth-child(3) { transform: rotateX(90deg) translateZ(.525em); }
  .b-d:hover .mini,
  .b-d:focus-visible .mini { transform: rotateX(-22deg) rotateY(60deg); }

  .b-s { border: 1px solid currentColor; }
  .b-s:hover { background: rgba(234, 244, 255, .08); }
  .frame-m-paper .b-s { color: var(--ink); }
  .frame-m-paper .b-s:hover { background: rgba(22, 36, 47, .05); }

  .knopfzeile { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2rem; }
}