/* =========================================================================
   QUADRONET Layout - Garagentor-Button (Button-Familie aus der
   Mikrodesign-Bibliothek, Abschnitt 01, Stand 09/2026)
   -------------------------------------------------------------------------
   Ein Kasten mit dicken Waenden. Bei Hover/Fokus klappt die Vorderseite
   wie ein Kipptor nach oben, im Inneren schwebt der Text. Das Tor ist
   Milchglas: der Text schimmert schon im Ruhezustand durch.
   Freigegebene Werte (Dirk, 05.09.2026): Wand 10px, Tiefe 111px,
   Deckkraft .47 (seit 21.10.2026: .75, siehe unten), Text-Ruhe .99, Perspektive 1974px, -92 Grad, 1.38s.

   Einbinden: NUR ueber das Partial Partials/Knopf/Garagentor.html - das
   Innengeruest (Raum, Waende, Tor, Rahmen) muss vollstaendig sein.
   Opt-in ueber die Klasse .gt, KEIN globaler button-Selektor (sonst
   trifft es Cookie-, Schliessen- und Slider-Knoepfe).

   Abweichungen von der Bibliothek:
   - Stellschrauben an .gt statt :root (Komponente bleibt gekapselt).
   - Schrift: IBM Plex Sans 600 statt system-ui 700.
   - max-width:100% (der in der Bibliothek offene Fehler unter 400 px).
   - Nur-Vorlesen-Klasse ist .qn-nur-vorlesen aus qn_base.

   Fallstricke (geloest, nicht wieder einbauen):
   - Tor IN die Laibung (inset: var(--gt-wand)), sonst blitzt es seitlich.
   - .gt__tor .gt__tor-kante braucht die hoehere Spezifitaet.
   - Federn (Overshoot) nur beim Oeffnen, sonst steht das Tor beim
     Schliessen kurz vor dem Rahmen.
   - overflow:hidden an einem Elternelement schneidet das offene Tor ab.
   ========================================================================= */

@layer qn.theme {

/* ---------- Stellschrauben ---------- */
.gt{
  --gt-wand:10px;       /* Wandstärke = Rahmen vorn        */
  --gt-tiefe:111px;     /* Tiefe des Kastens               */
  --gt-persp:1974px;    /* je kleiner, desto stärker 3D    */
  --gt-winkel:-92deg;   /* Öffnungswinkel des Tors         */
  --gt-tempo:1.38s;
  /* 0 = glasklar, 1 = blickdicht. Freigegeben war .47 - mit dem neuen,
     gelberen Markenorange #FF8800 kam dabei auf dem Bildschirm nur Bronze
     an (#7E5828). Dirk, 21.10.2026: .75 als Kompromiss - waermer, der Text
     schimmert noch durch. Gemessen: #B46C16. */
  --gt-tor-deckung:.75;
  --gt-glas:3px;        /* Milchglas-Unschaerfe des Tors   */
  --gt-text-ruhe:.99;   /* Textsichtbarkeit bei zu         */
  --gt-tor-rgb:255 136 0;   /* Torfarbe, als RGB-Tripel   */
  --gt-wand-rgb:52 82 103;   /* Wandfarbe                  */
  --gt-schrift:1.05rem;
  --gt-luft-y:2.1em;    /* Innenabstand oben/unten         */
  --gt-luft-x:2.6em;    /* Innenabstand links/rechts       */
}

/* ============================================================
   Grundgerüst
   ============================================================ */
.gt{
  --_kante:calc(var(--gt-wand) * .55);
  display:inline-block;
  max-width:100%;            /* unter ~400 px schob ein langer Button die Seite seitlich auf */
  vertical-align:middle;
  perspective:var(--gt-persp);
  text-decoration:none;
  color:#fff;
  font:600 var(--gt-schrift)/1.2 var(--qn-schriftfamilie); /* Plex 600 ist geladen, 700 nicht */
  letter-spacing:.06em; text-transform:uppercase;
  -webkit-tap-highlight-color:transparent;
  /* als <button> nutzbar: */
  background:none; border:0; padding:0; margin:0; cursor:pointer;
}

/* Bühne liegt IM FLUSS – daher wächst sie mit dem Text */
.gt__buehne{
  position:relative;
  display:block;
  min-height:100%;
  transform-style:preserve-3d;
  transition:transform var(--gt-tempo) cubic-bezier(.22,.75,.3,1);
}
.gt:hover .gt__buehne,
.gt:focus-visible .gt__buehne{ transform:rotateX(6deg); }

/* ---------- Innenraum ---------- */
.gt__raum{ position:absolute; inset:0; transform-style:preserve-3d; }
.gt__raum > *{ position:absolute; }
.gt__rueck{
  inset:0; transform:translateZ(calc(var(--gt-tiefe) * -1));
  background:radial-gradient(120% 140% at 50% 0%, rgb(var(--gt-wand-rgb) / .82) 0%, rgba(10,18,25,.96) 100%);
  box-shadow:inset 0 0 40px rgba(0,0,0,.85);
}
.gt__wand--links{
  left:0; top:0; height:100%; width:var(--gt-tiefe);
  transform-origin:left center; transform:rotateY(90deg);
  background:linear-gradient(90deg,rgba(13,22,30,.95),rgb(var(--gt-wand-rgb) / .9));
}
.gt__wand--rechts{
  right:0; top:0; height:100%; width:var(--gt-tiefe);
  transform-origin:right center; transform:rotateY(-90deg);
  background:linear-gradient(-90deg,rgba(13,22,30,.95),rgb(var(--gt-wand-rgb) / .9));
}
.gt__wand--oben{
  left:0; top:0; width:100%; height:var(--gt-tiefe);
  transform-origin:top center; transform:rotateX(-90deg);
  background:linear-gradient(180deg,rgb(var(--gt-wand-rgb) / .95),rgba(13,22,30,.95));
}
.gt__wand--unten{
  left:0; bottom:0; width:100%; height:var(--gt-tiefe);
  transform-origin:bottom center; transform:rotateX(90deg);
  background:linear-gradient(0deg,rgba(10,18,25,.95),rgb(var(--gt-wand-rgb) / .8));
}

/* ---------- Text: bestimmt die Größe des Buttons ---------- */
.gt__text{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.3em;
  min-height:1.2em;
  padding:calc(var(--gt-wand) + var(--gt-luft-y)) calc(var(--gt-wand) + var(--gt-luft-x));
  text-align:center;
  transform:translateZ(calc(var(--gt-tiefe) * -.45)) scale(.94);
  opacity:var(--gt-text-ruhe);
  /* Unschaerfe an die Sichtbarkeit gekoppelt: wer den Text im
     Ruhezustand hochdreht, will ihn auch scharf sehen. */
  filter:blur(calc((1 - var(--gt-text-ruhe)) * 2px));
  transition:transform var(--gt-tempo) cubic-bezier(.22,.75,.3,1) .08s,
             opacity calc(var(--gt-tempo) * .6) ease .1s,
             filter calc(var(--gt-tempo) * .6) ease .1s;
  text-shadow:0 6px 18px rgba(0,0,0,.7);
  pointer-events:none;
}
.gt__text small{
  font-size:.62em; font-weight:500; letter-spacing:.14em;
  color:var(--orange);
}
.gt__text svg{ width:1.5em; height:1.5em; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }

.gt:hover .gt__text,
.gt:focus-visible .gt__text{
  opacity:1; filter:blur(0);
  transform:translateZ(6px) scale(1);
  animation:gt-schweben 3.2s ease-in-out .6s infinite;
}
@keyframes gt-schweben{
  0%,100%{ transform:translateZ(6px) translateY(0) }
  50%    { transform:translateZ(14px) translateY(-4px) }
}

/* ---------- Tor ---------- */
.gt__tor{
  position:absolute; inset:var(--gt-wand);
  transform-style:preserve-3d;
  transform-origin:top center;
  transform:rotateX(0deg);
  transition:transform var(--gt-tempo) cubic-bezier(.33,0,.2,1); /* Schliessen: kein Overshoot */
}
.gt:hover .gt__tor,
.gt:focus-visible .gt__tor{
  transform:rotateX(var(--gt-winkel));
  transition-timing-function:cubic-bezier(.34,1.4,.5,1);         /* Federn nur beim Öffnen */
}
.gt__tor > span{ position:absolute; inset:0; backface-visibility:hidden; }

.gt__tor-aussen{
  transform:translateZ(0);
  background:
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.13) 0 1px,
      rgba(0,0,0,0) 1px 24.6%,
      rgba(0,0,0,.26) 25%),
    linear-gradient(160deg, rgba(255,255,255,.16) 0%, rgba(0,0,0,.10) 45%, rgba(0,0,0,.30) 100%),
    linear-gradient(0deg, rgb(var(--gt-tor-rgb) / var(--gt-tor-deckung)) 0 100%);
  backdrop-filter:blur(var(--gt-glas)) saturate(1.2);
  -webkit-backdrop-filter:blur(var(--gt-glas)) saturate(1.2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center;
  padding:0 1em;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.gt__tor-innen{
  transform:rotateX(180deg) translateZ(1px);
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.68)), rgb(var(--gt-tor-rgb));
  box-shadow:inset 0 0 24px rgba(0,0,0,.6);
}
/* Untere Torkante: höhere Spezifität nötig, sonst erbt sie inset:0
   von `.gt__tor > span` und sitzt oben. Klappt nach INNEN. */
.gt__tor .gt__tor-kante{
  inset:auto 0 0 0; height:var(--_kante);
  transform-origin:bottom center; transform:rotateX(90deg);
  backface-visibility:visible;
  background:linear-gradient(0deg, rgba(0,0,0,.5), rgba(0,0,0,.25)), rgb(var(--gt-tor-rgb));
}

/* ---------- Rahmen = die dicken Wände von vorn ---------- */
.gt__rahmen{
  position:absolute; inset:0;
  border:var(--gt-wand) solid;
  border-top-color:rgb(var(--gt-wand-rgb) / .95);
  border-left-color:rgb(var(--gt-wand-rgb) / .85);
  border-right-color:rgba(36,58,74,.9);
  border-bottom-color:rgba(27,44,57,.9);
  transform:translateZ(calc(var(--_kante) + 2px)); /* Luft gegen Z-Fighting */
  pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 18px 30px -18px rgba(0,0,0,.9);
}
.gt__rahmen::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 2px rgba(0,0,0,.5) }

/* ============================================================
   Varianten
   ============================================================ */
/* Sekundär: Tor in Wandfarbe, Akzent nur an der Kante */
.gt--sekundaer{ --gt-tor-rgb:58 90 114; --gt-tor-deckung:.5 }
.gt--sekundaer .gt__tor-kante{ background:linear-gradient(0deg, rgba(0,0,0,.4), rgba(0,0,0,.1)), var(--orange) }

/* Klein: für Fließtext und Nebenaktionen */
.gt--klein{ --gt-schrift:.82rem; --gt-luft-y:1.1em; --gt-luft-x:1.6em; --gt-wand:7px; --gt-tiefe:60px }

/* Groß: Gegenstueck zu klein (RTE-Option "gross", 29.10.2026) */
.gt--gross{ --gt-schrift:1.28rem; --gt-luft-y:2.5em; --gt-luft-x:3.1em; --gt-wand:12px; --gt-tiefe:132px }

/* Hoehe und Breite einzeln (RTE-Optionen flach/hoch/schmal/breit, 29.10.2026).
   Stehen NACH klein/gross: "klein, breit" = kleines Tor mit breiter Luft. */
.gt--flach{ --gt-luft-y:1em }
.gt--hoch{ --gt-luft-y:3.4em }
.gt--schmal{ --gt-luft-x:1.3em }
.gt--breit{ --gt-luft-x:5.4em }

/* Icon: quadratisch, Beschriftung nur für Screenreader */
.gt--icon{ --gt-luft-y:1.15em; --gt-luft-x:1.15em }
.gt--icon .gt__text{ gap:0 }

/* Block: volle Spaltenbreite */
.gt--block{ display:block; width:100% }

/* Torreihe im RTE (29.10.2026): Absatz mit Tor-Links -> Reihe mit Abstand,
   bricht am Telefon um. Leerzeichen zwischen den Links verschwinden in der
   Flexbox von selbst; andere Zeichen ("·") blieben als eigenes Element stehen. */
p:has(> a.gt--rte){ display:flex; flex-wrap:wrap; align-items:flex-end; gap:1.1rem 1.4rem; margin-block:1.6rem }

/* hidden respektieren: .gt setzt display und schlaegt sonst das
   hidden-Attribut (z. B. "Ab meinem Standort", vom Skript eingeblendet) */
.gt[hidden]{ display:none }

/* Massiv: blickdichtes Tor mit Beschriftung darauf */
.gt--massiv{ --gt-tor-deckung:1; --gt-text-ruhe:0 }
.gt--massiv .gt__tor-aussen{ backdrop-filter:none; -webkit-backdrop-filter:none }

/* Beschriftet: Text AUF dem Tor, beim Oeffnen taucht dahinter ein
   anderer auf (Partial-Argument "tor", Dirk 22.10.2026).
   - Innentext im Ruhezustand ganz weg, sonst liegen zwei Texte uebereinander.
   - .gt__mass traegt die Torbeschriftung unsichtbar im Fluss mit, damit der
     Kasten fuer den LAENGEREN der beiden Texte reicht.
   - Abdunkelung .1 auf dem Tor: weiss auf #B46C16 waere 4,1:1, gebraucht
     werden 4,5:1 (kleine Schrift, BFSG). Mit der Abdunkelung ca. 5:1. */
.gt--beschriftet{ --gt-text-ruhe:0 }
.gt--beschriftet .gt__tor-aussen{
  background:
    linear-gradient(0deg, rgba(0,0,0,.1) 0 100%),
    repeating-linear-gradient(180deg,
      rgba(255,255,255,.13) 0 1px,
      rgba(0,0,0,0) 1px 24.6%,
      rgba(0,0,0,.26) 25%),
    linear-gradient(160deg, rgba(255,255,255,.16) 0%, rgba(0,0,0,.10) 45%, rgba(0,0,0,.30) 100%),
    linear-gradient(0deg, rgb(var(--gt-tor-rgb) / var(--gt-tor-deckung)) 0 100%);
}
.gt__tor-schild{ white-space:nowrap; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.55); transition:opacity calc(var(--gt-tempo) * .25) ease calc(var(--gt-tempo) * .6) } /* Rueckkehr erst, wenn das Tor fast zu ist */
/* Offenes Tor steht fast senkrecht zum Betrachter - die Beschriftung
   wuerde oben als verzerrter Streifen ueber der Kante stehen */
.gt--beschriftet:hover .gt__tor-schild,
.gt--beschriftet:focus-visible .gt__tor-schild,
.gt--beschriftet.is-aktiv .gt__tor-schild{ opacity:0; transition-delay:0s }
.gt__mass{ display:block; height:0; margin-top:-.3em; overflow:hidden; visibility:hidden; white-space:nowrap }

/* ============================================================
   Zustände
   ============================================================ */
/* Fokus (Tastatur) */
.gt:focus-visible{ outline:3px solid var(--orange); outline-offset:6px; border-radius:2px }

/* Aktiv / aktuelle Seite: Tor steht offen */
.gt.is-aktiv .gt__tor{ transform:rotateX(var(--gt-winkel)) }
.gt.is-aktiv .gt__text{ opacity:1; filter:blur(0); transform:translateZ(6px) scale(1) }
.gt.is-aktiv .gt__rahmen{ border-color:var(--orange); box-shadow:0 0 0 1px rgba(0,0,0,.45), 0 0 22px -6px rgb(var(--gt-tor-rgb) / .8) }

/* Deaktiviert: Tor bleibt zu, alles matt, keine Reaktion */
.gt[aria-disabled="true"],
.gt:disabled{ cursor:not-allowed; filter:grayscale(.75) brightness(.72) }
.gt[aria-disabled="true"] .gt__tor,
.gt:disabled .gt__tor,
.gt[aria-disabled="true"] .gt__buehne,
.gt:disabled .gt__buehne{ transform:none !important }
.gt[aria-disabled="true"] .gt__text,
.gt:disabled .gt__text{ animation:none !important }

/* Besucht: bewusst KEINE Markierung (Dirk, 22.10.2026). Die orange
   Unterkante aus der Bibliothek wirkte auf der Website wie ein Fehler -
   Knoepfe wie "Projekt besprechen" stehen auf jeder Seite und zeigen
   auf Ziele, die man schon kennt. */

/* ---------- Touch: kein Hover -> Tor steht offen ---------- */
@media (hover:none){
  .gt:not([aria-disabled="true"]) .gt__tor{ transform:rotateX(var(--gt-winkel)) }
  .gt:not([aria-disabled="true"]) .gt__text{ opacity:1; filter:blur(0); transform:translateZ(6px) scale(1) }
  /* Beschriftetes Tor bleibt zu - sonst saehe man die eigentliche
     Beschriftung am Telefon nie */
  .gt--beschriftet:not([aria-disabled="true"]) .gt__tor{ transform:none }
  .gt--beschriftet:not([aria-disabled="true"]) .gt__text{ opacity:0 }
  /* ... und die Torbeschriftung bleibt auch mit Fokus stehen. Sonst stand
     im Kundenlogin-Fenster (Fokus per Skript auf "Ihre Daten") am Telefon
     ein leeres Tor da: Schild ausgeblendet, Tor zu. (25.10.2026) */
  .gt--beschriftet:not([aria-disabled="true"]):focus-visible .gt__tor-schild{ opacity:1 }
}
/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion:reduce){
  .gt__buehne,.gt__tor,.gt__text{ transition-duration:.01ms !important; animation:none !important }
}


}