/*
 * Sektor 7 Sidebar -- Kapsel, Portal-Leiste, Telefon-Knopf mit Blatt.
 *
 * SCHEMA DES SEKTOR-7-BLOGS: Tokens aus sektor7-blog/assets/css/blog.css
 * (Abschnitt 1 und Dunkelfassung), Praefix --s7s-. Die Sidebar haengt am
 * body, ausserhalb von .s7b -- die Blog-Tokens gelten hier nicht, darum
 * eine eigene Kopie (dieselbe Falle wie beim Nach-oben-Knopf des Blogs).
 *
 * GLAS KRAEFTIGER ALS IM BLOG (0.72 statt 0.42): die Sidebar schwebt ueber
 * allem, mal hellem Grund, mal Foto. Der Blog hat beim Nach-oben-Knopf
 * gelernt, dass durchscheinend dort unlesbar wird; mit Weichzeichner und
 * 72 % Flaeche traegt die leise Tinte auch ueber dunklen Bildern.
 *
 * Hell/Dunkel: data-s7s-thema="dunkel" am Wurzel-Div, gesetzt vor dem
 * ersten Bild aus localStorage s7lt_thema (wie Blog und Popups).
 */

.s7s {
  --s7s-akzent: #c40000;
  --s7s-akzent-stark: #7f0000;
  --s7s-tinte: #15153d;
  --s7s-tinte-leise: color-mix(in srgb, var(--s7s-tinte) 74%, transparent);
  --s7s-linie: color-mix(in srgb, var(--s7s-tinte) 14%, transparent);
  --s7s-glas: rgba(255, 250, 249, 0.72);
  --s7s-glas-rand: rgba(255, 255, 255, 0.6);
  --s7s-deckend: #f7ecea;
  --s7s-glas-schatten:
    0 12px 32px rgba(64, 30, 30, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1px 0 rgba(255, 255, 255, 0.18);
  --s7s-mulde: linear-gradient(180deg, rgba(128, 74, 74, 0.13), rgba(128, 74, 74, 0.07));
  /* Flaeche unter dem Knopf beim Ueberfahren -- in Ruhe ist der Knopf flach (Leon, 17.09.2026). */
  --s7s-pille: rgba(255, 255, 255, 0.58);
  --s7s-vertieft:
    inset 2px 3px 7px rgba(107, 62, 62, 0.11),
    inset -2px -2px 5px rgba(255, 255, 255, 0.75),
    0 1px 0 rgba(255, 255, 255, 0.9);
  --s7s-erhaben:
    0 6px 16px rgba(64, 30, 30, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  /*
   * RELIEF, ruhig (Leon, 17.09.2026: "zu viele Effekte, professioneller").
   * Vorher Gummi mit Doppelschatten und Glanzlauf. Jetzt EIN Licht von
   * oben: eine feine helle Oberkante und ein kurzer, weicher Schatten.
   * Tiefe entsteht aus Zurueckhaltung, nicht aus Kontrast.
   */
  --s7s-knopf-ruhe:
    0 1px 2px rgba(64, 30, 30, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --s7s-knopf-hoch:
    0 1px 2px rgba(64, 30, 30, 0.08),
    0 4px 10px rgba(64, 30, 30, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --s7s-gedrueckt:
    inset 0 1px 3px rgba(84, 40, 40, 0.16);
  --s7s-delle: rgba(84, 40, 40, 0.2);
  /*
   * KOERPER der Schiene: statt quer schattiertem Zylinder nur ein Hauch
   * Licht von oben, der nach unten ausklingt, und eine scharfe helle
   * Oberkante -- so liest sich die Schiene als Glas mit Dicke, ohne dass
   * ein Verlauf die Knoepfe ueberstrahlt.
   */
  --s7s-woelbung: linear-gradient(180deg,
    rgba(255, 255, 255, 0.34) 0%,
    rgba(255, 255, 255, 0) 38%,
    rgba(84, 40, 40, 0.03) 100%);
  --s7s-woelbung-kante:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 0 0 1px rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(84, 40, 40, 0.05);
  --s7s-kugel: radial-gradient(120% 120% at 32% 24%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.1) 46%, rgba(84, 40, 40, 0.12) 100%);
  --s7s-aktiv: linear-gradient(180deg,
    color-mix(in srgb, var(--s7s-akzent) 26%, transparent),
    color-mix(in srgb, var(--s7s-akzent) 18%, transparent));
  --s7s-aktiv-rand: color-mix(in srgb, var(--s7s-akzent) 34%, transparent);
  /*
   * LICHTKEGEL des offenen Knopfs (Leon, 17.09.2026, nach der Vorlage
   * "Navigation tabs"): dort faellt ein Spot von der Kante auf das aktive
   * Zeichen. Bei uns steht die Lampe links (der rote Strich), also laeuft
   * das Licht quer nach rechts aus -- eine Richtung statt einer gleichmaessig
   * getoenten Flaeche. Eigener Token: --s7s-aktiv traegt weiter die flachen
   * Faelle (Kachel im Blatt, Zeile-stark), die keinen Strich daneben haben.
   */
  --s7s-aktiv-kegel: linear-gradient(90deg,
    color-mix(in srgb, var(--s7s-akzent) 34%, transparent) 0%,
    color-mix(in srgb, var(--s7s-akzent) 20%, transparent) 46%,
    color-mix(in srgb, var(--s7s-akzent) 7%, transparent) 100%);
  --s7s-tip: #15153d;
  --s7s-tip-tinte: #ffffff;
  --s7s-zahl-tinte: #ffffff;
  --s7s-punkt-rand: #fdf3f0;
  /* Discord-Blau und das Gruen der Online-Anzeige -- dieselben Werte wie im Blog und im Linktree. */
  --s7s-discord: #5865f2;
  --s7s-online: #2e9e5b;
  --s7s-schleier: rgba(21, 21, 61, 0.22);
  --s7s-schrift: "Instrument Sans", "Segoe UI", "Helvetica Neue", sans-serif;
  --s7s-versal: "Archivo", "Montserrat", "Arial Narrow", sans-serif;
  --s7s-feder: cubic-bezier(0.34, 1.8, 0.5, 1);
  --s7s-fahrt: cubic-bezier(0.22, 1, 0.36, 1);
  --s7s-rechts: max(14px, env(safe-area-inset-right, 0px));
  /*
   * Anfang oben. Ohne klebenden Seitenkopf reicht die Adminleiste; misst
   * sidebar.js einen Kopf, setzt es diese Variable auf dessen Unterkante
   * (Leons Wunsch: die Sidebar faengt immer unter dem Kopf an).
   */
  --s7s-oben: calc(var(--wp-admin--admin-bar--height, 0px) + 16px);

  color: var(--s7s-tinte);
  font-family: var(--s7s-schrift);
  font-size: 14px;
  line-height: 1.4;
}

.s7s[data-s7s-thema="dunkel"] {
  --s7s-akzent-stark: #ff8a8a;
  --s7s-tinte: #efe6e6;
  --s7s-glas: rgba(38, 28, 31, 0.78);
  --s7s-glas-rand: rgba(255, 255, 255, 0.08);
  --s7s-deckend: #2a1f22;
  --s7s-glas-schatten:
    0 14px 36px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --s7s-mulde: linear-gradient(180deg, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0.16));
  --s7s-pille: rgba(255, 255, 255, 0.07);
  --s7s-vertieft:
    inset 2px 3px 7px rgba(0, 0, 0, 0.35),
    inset -1px -1px 3px rgba(255, 255, 255, 0.04);
  --s7s-erhaben:
    0 6px 16px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  /* Im Dunkeln traegt das Relief ueber Schatten; das Licht bleibt eine Linie. */
  --s7s-knopf-ruhe:
    0 1px 2px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --s7s-knopf-hoch:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --s7s-gedrueckt:
    inset 0 1px 3px rgba(0, 0, 0, 0.45);
  --s7s-delle: rgba(0, 0, 0, 0.45);
  --s7s-woelbung: linear-gradient(180deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0) 34%,
    rgba(0, 0, 0, 0.12) 100%);
  --s7s-woelbung-kante:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  --s7s-kugel: radial-gradient(120% 120% at 32% 24%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03) 46%, rgba(0, 0, 0, 0.35) 100%);
  --s7s-tip: #efe6e6;
  --s7s-tip-tinte: #15153d;
  --s7s-punkt-rand: #261c1f;
  --s7s-discord: #8c95f7;
  --s7s-online: #45c07a;
  --s7s-schleier: rgba(0, 0, 0, 0.45);
}

/* [hidden] gewinnt immer -- auch gegen die display-Regeln unten. */
.s7s [hidden],
.s7s[hidden] { display: none !important; }

.s7s-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Listen fuer Screenreader, fuer das Layout unsichtbar: die Abstaende setzt der Eltern-Flex. */
.s7s .s7s-liste { list-style: none; margin: 0; padding: 0; }
.s7s .s7s-punktlos { display: contents; }

.s7s .s7s-ic {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

.s7s .s7s-glas {
  background: var(--s7s-glas);
  border: 1px solid var(--s7s-glas-rand);
  box-shadow: var(--s7s-glas-schatten);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  box-sizing: border-box;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .s7s .s7s-glas { background: var(--s7s-deckend); }
}
@media (prefers-reduced-transparency: reduce) {
  .s7s .s7s-glas { background: var(--s7s-deckend); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ------------------------------------------------------------------ Rand */

/*
 * Leiste und Kapsel teilen die rechte Kante (Fable-Review #12): EINE
 * Spalte, Leiste oben, Kapsel darunter. Ohne Leiste steht die Kapsel mittig.
 */
.s7s .s7s-rand {
  position: fixed;
  z-index: 900;
  right: var(--s7s-rechts);
  top: var(--s7s-oben);
  bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
  pointer-events: none;
}
.s7s .s7s-rand-mit-leiste { justify-content: flex-start; }
/* Gemessener Kopf: die Adminleiste steckt dann schon in der Messung. */
.s7s.s7s-unter-kopf .s7s-rand { top: var(--s7s-oben); }
/* Fester Abstand je Seite: die Kapsel steht dann oben, nicht mittig. */
.s7s.s7s-oben-fest .s7s-rand { justify-content: flex-start; }
.s7s .s7s-rand > .s7s-leiste,
.s7s .s7s-rand > .s7s-kapsel { pointer-events: auto; }

/* --------------------------------------------------------------- Leiste */

.s7s .s7s-leiste { padding: 6px; border-radius: 22px; }
.s7s .s7s-leiste .s7s-liste { display: flex; flex-direction: column; gap: 4px; }
.s7s .s7s-leiste-knopf {
  position: relative;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 13px;
  text-decoration: none;
  color: var(--s7s-tinte);
  transition: background-color 0.2s, transform 0.35s var(--s7s-feder);
}
.s7s .s7s-leiste-bild { display: block; width: 26px; height: 26px; object-fit: contain; border-radius: 6px; }
.s7s .s7s-anzahl-1, .s7s .s7s-anzahl-2, .s7s .s7s-anzahl-3, .s7s .s7s-anzahl-4,
.s7s .s7s-anzahl-5, .s7s .s7s-anzahl-6, .s7s .s7s-anzahl-7, .s7s .s7s-anzahl-8,
.s7s .s7s-anzahl-9, .s7s .s7s-anzahl-10, .s7s .s7s-anzahl-11, .s7s .s7s-anzahl-12 { max-height: calc(100vh - var(--s7s-oben) - 24px); }
/* Kein overflow hier (Fable-Review 2 #1): es schnitte die Sprechblasen links neben der Leiste ab. Zu wenig Hoehe regelt die Media-Query unten. */

/* --------------------------------------------------------------- Kapsel */

.s7s .s7s-kapsel {
  position: relative;
  width: 60px;
  padding: 8px;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
/*
 * Licht und Kante der Schiene. Liegt UNTER den Knoepfen (die bekommen
 * z-index 1), damit ein Verlauf nie ueber einem Zeichen liegt.
 */
.s7s .s7s-kapsel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: var(--s7s-woelbung);
  box-shadow: var(--s7s-woelbung-kante);
}
.s7s .s7s-kapsel > * { position: relative; z-index: 1; }

/* Kein Glanzlauf mehr: Leon fand den Lichtstreif zu viel (17.09.2026). */
.s7s .s7s-kapsel .s7s-liste { display: flex; flex-direction: column; align-items: center; gap: 6px; }

/*
 * Das Zeichen steht FREI (Leons Wunsch, 16.09.2026): die Mulde darunter
 * sah im Light Mode wie ein leerer Knopf aus. Kein Hintergrund, kein
 * Schatten -- die Marke traegt sich selbst, der Trenner darunter grenzt ab.
 */
.s7s .s7s-logo {
  display: grid; place-items: center;
  width: 40px; height: 36px;
  /* Das Zeichen sitzt auf der Schiene, nicht darin: ein Hauch Schlagschatten statt Mulde. */
  filter: drop-shadow(0 1px 1.5px rgba(84, 40, 40, 0.2));
}
.s7s[data-s7s-thema="dunkel"] .s7s-logo { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5)); }
.s7s .s7s-logo-bild { display: block; width: 32px; height: 32px; object-fit: contain; }
.s7s .s7s-marke { width: 28px; height: 28px; display: block; }
.s7s .s7s-marke-flaeche { fill: var(--s7s-akzent); opacity: 0.16; }
.s7s .s7s-marke-sieben { fill: none; stroke: var(--s7s-akzent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.s7s .s7s-trenner {
  display: block;
  width: 28px; height: 1px;
  background: linear-gradient(to right, transparent, var(--s7s-linie), transparent);
}

.s7s .s7s-knopf,
.s7s button.s7s-knopf {
  -webkit-appearance: none; appearance: none;
  position: relative;
  display: grid; place-items: center;
  width: 44px; height: 44px;
  margin: 0; padding: 0;
  border: 0; border-radius: 13px;
  background: transparent;
  box-shadow: none;
  color: var(--s7s-tinte);
  font: inherit;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  /* In Ruhe flach: zehn Polster uebereinander waren zu unruhig. Die Flaeche kommt erst beim Anfassen. */
  transition: background-color 0.18s, box-shadow 0.18s var(--s7s-fahrt), transform 0.18s var(--s7s-fahrt);
}
.s7s .s7s-knopf[aria-expanded="true"] {
  background: var(--s7s-aktiv-kegel);
  /* Offen: Licht von der Kante statt gleichmaessiger Tonung -- ohne Eindellen, ohne Schrumpfen. */
  box-shadow: inset 0 0 0 1px var(--s7s-aktiv-rand);
}
/*
 * Das Zeichen selbst ist das Signal (Vorlage "Navigation tabs"): es traegt
 * den Akzent und einen Hauch Schein. Im Dunklen der hellere Ton -- #c40000
 * haette auf dunklem Glas zu wenig Kontrast.
 */
.s7s .s7s-knopf[aria-expanded="true"] .s7s-ic {
  color: var(--s7s-akzent);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--s7s-akzent) 35%, transparent));
}
.s7s[data-s7s-thema="dunkel"] .s7s-knopf[aria-expanded="true"] .s7s-ic {
  color: var(--s7s-akzent-stark);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--s7s-akzent-stark) 30%, transparent));
}
/* Nur die Farbe laeuft weich mit; der Schein steht, damit nichts flackert. */
.s7s .s7s-knopf .s7s-ic { transition: color 0.18s; }
/*
 * Die wandernde Lampe. Sie sitzt an der Innenkante der Kapsel und faehrt
 * beim Wechsel senkrecht zur neuen Stelle. Nur transform und opacity --
 * nichts, was ein neues Layout ausloest. Solange sie noch nie gesetzt
 * wurde, ist sie unsichtbar und der Strich am Knopf uebernimmt.
 */
.s7s .s7s-reiter {
  position: absolute;
  left: 0; top: 0;
  z-index: 2;
  width: 3px; height: 24px;
  border-radius: 3px;
  background: var(--s7s-akzent);
  opacity: 0;
  pointer-events: none;
  transform: translateY(var(--s7s-reiter-y, 0));
  transition: transform 0.26s var(--s7s-fahrt), opacity 0.18s;
}
.s7s .s7s-reiter.s7s-an { opacity: 1; }
/* Beim ERSTEN Erscheinen darf sie nicht von ihrer alten Stelle heranfahren. */
.s7s .s7s-reiter.s7s-sofort { transition: none; }
/* Mit wandernder Lampe braucht der einzelne Knopf seinen eigenen Strich nicht mehr. */
.s7s.s7s-hat-reiter .s7s-knopf[aria-expanded="true"]::after { display: none; }

/* K.I.T.T.-Strich: roter Lichtstreif am Rand des offenen Eintrags. */
.s7s .s7s-knopf[aria-expanded="true"]::after {
  content: "";
  position: absolute;
  left: -8px; top: 10px; bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: var(--s7s-akzent);
}

.s7s .s7s-knopf:focus-visible,
.s7s .s7s-leiste-knopf:focus-visible,
.s7s .s7s-kachel:focus-visible,
.s7s .s7s-zeile:focus-visible,
.s7s .s7s-zu:focus-visible,
.s7s .s7s-mehr:focus-visible,
.s7s .s7s-fab:focus-visible,
.s7s .s7s-sheet-kachel:focus-visible,
.s7s .s7s-panel:focus-visible,
.s7s .s7s-sheet:focus-visible {
  outline: 2px solid var(--s7s-akzent);
  outline-offset: 2px;
}

.s7s .s7s-tip {
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translate(6px, -50%);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  background: var(--s7s-tip);
  color: var(--s7s-tip-tinte);
  font: 700 10.5px/1 var(--s7s-versal);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 8px 10px;
  border-radius: 9px;
  transition: opacity 0.15s, transform 0.25s var(--s7s-fahrt);
}
/* Tastatur zeigt die Sprechblase auch -- nur das Ueberfahren braucht eine Maus. */
.s7s .s7s-knopf:focus-visible .s7s-tip,
.s7s .s7s-leiste-knopf:focus-visible .s7s-tip { opacity: 1; transform: translate(0, -50%); }
.s7s .s7s-knopf[aria-expanded="true"] .s7s-tip { opacity: 0; }

@media (hover: hover) {
  /* Anfassen legt eine helle Flaeche mit feiner Lichtkante unter das Zeichen -- keine Bewegung. */
  .s7s .s7s-knopf:hover {
    background: var(--s7s-pille);
    box-shadow: var(--s7s-knopf-hoch);
  }
  .s7s .s7s-leiste-knopf:hover { background: var(--s7s-mulde); box-shadow: var(--s7s-knopf-hoch); }
  .s7s .s7s-knopf:hover .s7s-tip,
  .s7s .s7s-leiste-knopf:hover .s7s-tip { opacity: 1; transform: translate(0, -50%); }
  .s7s .s7s-knopf[aria-expanded="true"]:hover { background: var(--s7s-aktiv-kegel); }
  .s7s .s7s-knopf[aria-expanded="true"]:hover .s7s-tip { opacity: 0; }
  /* Kacheln steigen aus ihrer Mulde heraus, wenn man sie anfasst. */
  .s7s .s7s-kachel:hover .s7s-mulde { background: var(--s7s-glas); box-shadow: var(--s7s-knopf-hoch); transform: translateY(-2px); }
  .s7s .s7s-sheet-kachel:hover { box-shadow: var(--s7s-knopf-hoch); transform: translateY(-2px); }
  .s7s .s7s-zeile:hover { box-shadow: var(--s7s-knopf-ruhe); }
  .s7s .s7s-zeile:hover,
  .s7s .s7s-zu:hover { background: var(--s7s-mulde); color: var(--s7s-tinte); }
  .s7s .s7s-mehr:hover { text-decoration: underline; }
}
/* Der Druck: die Flaeche gibt nach und dellt ein (Gummidruck-Normwerte). */
.s7s .s7s-knopf:active,
.s7s .s7s-leiste-knopf:active,
.s7s .s7s-zeile:active,
.s7s .s7s-sheet-kachel:active,
.s7s .s7s-kachel:active .s7s-mulde,
.s7s .s7s-fab:active {
  transform: scale(0.96);
  box-shadow: var(--s7s-gedrueckt);
  transition-duration: 0.08s;
}

.s7s .s7s-punkt {
  position: absolute;
  top: 8px; right: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--s7s-akzent);
  box-shadow: 0 0 0 2px var(--s7s-punkt-rand);
}
/* In einer Zeile steht der Punkt am rechten Ende und ueberdeckt nichts. */
.s7s .s7s-punkt-zeile {
  position: static;
  flex: none;
  margin-left: auto;
}
.s7s .s7s-zahl {
  position: absolute;
  top: 1px; right: -1px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 9px;
  background: var(--s7s-akzent);
  color: var(--s7s-zahl-tinte);
  font: 700 10px/18px var(--s7s-versal);
  font-variant-numeric: tabular-nums;
  text-align: center;
}

/* --------------------------------------------------------------- Panels */

/*
 * Die Karte waechst aus dem Knopf (Leon, 17.09.2026). Der Ursprung liegt
 * GENAU AUF DER MITTE DES GEDRUECKTEN KNOPFS -- sidebar.js misst sie beim
 * Oeffnen und setzt --s7s-ursprung-x/-y. Der Punkt liegt rechts ausserhalb
 * der Karte; das ist erlaubt und genau der Trichter aus Leons Skizze.
 * Ohne JS bleibt es bei der rechten Kante und der Mitte.
 */
@keyframes s7s-panel-auf {
  /*
   * Klein am Knopf beginnen und auf volle Groesse wachsen (Leons Skizze,
   * 17.09.2026: ein Trichter, der aus dem Knopf kommt). Die Deckkraft ist
   * frueh da, damit man das Wachsen sieht und nicht nur ein Einblenden.
   */
  from { opacity: 0; transform: translate(6px, -50%) scale(0.26); }
  45%  { opacity: 1; }
  to   { opacity: 1; transform: translate(0, -50%) scale(1); }
}
.s7s .s7s-panel {
  position: fixed;
  z-index: 901;
  right: calc(var(--s7s-rechts) + 74px);
  top: 50%;
  transform: translateY(-50%);
  width: min(320px, calc(100vw - 110px));
  max-height: calc(100vh - var(--s7s-oben) - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Schmaler, getoenter Balken: der Standard-Balken stand weiss im dunklen Glas (live 17.09.2026, Sofort-Treffer). */
  scrollbar-width: thin;
  scrollbar-color: var(--s7s-linie) transparent;
  padding: 16px;
  border-radius: 26px;
  display: grid;
  gap: 12px;
  /* Das Panel liegt VOR der Schiene -- laengerer Schatten, kraeftigere Lichtkante. */
  box-shadow: var(--s7s-glas-schatten), 0 24px 60px rgba(64, 30, 30, 0.18);
  transform-origin: var(--s7s-ursprung-x, 100%) var(--s7s-ursprung-y, 50%);
  animation: s7s-panel-auf 0.42s var(--s7s-fahrt);
}
.s7s[data-s7s-thema="dunkel"] .s7s-panel { box-shadow: var(--s7s-glas-schatten), 0 24px 60px rgba(0, 0, 0, 0.55); }
.s7s .s7s-panel-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.s7s .s7s-panel-titel {
  margin: 0;
  color: var(--s7s-tinte);
  font: 800 15px/1.1 var(--s7s-versal);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.s7s .s7s-zu,
.s7s button.s7s-zu {
  -webkit-appearance: none; appearance: none;
  display: grid; place-items: center;
  width: 36px; height: 36px;
  margin: 0; padding: 0;
  border: 0; border-radius: 11px;
  background: transparent;
  color: var(--s7s-tinte-leise);
  cursor: pointer;
}
.s7s .s7s-panel-text { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--s7s-tinte-leise); }

.s7s .s7s-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
.s7s .s7s-kachel {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 6px;
  min-width: 0;
  border-radius: 14px;
  color: var(--s7s-tinte);
  text-decoration: none;
  font: 700 9.5px/1.15 var(--s7s-versal);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}
.s7s .s7s-mulde {
  display: grid; place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  background: var(--s7s-mulde);
  box-shadow: var(--s7s-vertieft);
  box-sizing: border-box;
  transition: background-color 0.2s, box-shadow 0.25s var(--s7s-fahrt);
}
.s7s .s7s-kachel-logo { display: block; width: 46%; max-width: 38px; height: auto; aspect-ratio: 1; object-fit: contain; border-radius: 8px; }
.s7s .s7s-kachel-text { overflow-wrap: anywhere; }
/*
 * tgp-exclude: Merker fuer das Lazy-Loading des Themes TheGem. Ohne ihn
 * tauscht es src gegen data-tgpli-src und laedt Bilder in versteckten
 * Panels nie (live gefunden 15.09.2026: leere Portal-Kacheln).
 */
.s7s .tgp-exclude { image-rendering: auto; }
.s7s .s7s-kacheln-bild { gap: 12px 8px; }
.s7s .s7s-mulde-bild { position: relative; overflow: hidden; }
/* "New" auf dem Bild -- gleiche rote Flaeche wie die Zahl am Knopf, damit beides zusammengehoert. */
.s7s .s7s-neu-marke {
  position: absolute;
  top: 6px; left: 6px;
  padding: 3px 6px;
  border-radius: 6px;
  background: var(--s7s-akzent);
  color: var(--s7s-zahl-tinte);
  font: 800 8.5px/1 var(--s7s-versal);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.s7s .s7s-kachel-foto { display: block; width: 100%; height: 100%; object-fit: cover; }
.s7s .s7s-kachel-bild .s7s-kachel-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.s7s .s7s-laedt { grid-column: 1 / -1; padding: 18px 0; text-align: center; font-size: 12px; color: var(--s7s-tinte-leise); }
.s7s .s7s-leer { margin: 0; font-size: 12.5px; color: var(--s7s-tinte-leise); }
.s7s .s7s-mehr {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 2px;
  color: var(--s7s-akzent-stark);
  font: 700 11px/1 var(--s7s-versal);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}
.s7s .s7s-mehr .s7s-ic { width: 16px; height: 16px; }

.s7s .s7s-zeilen { display: grid; gap: 2px; }
.s7s .s7s-zeile,
.s7s button.s7s-zeile {
  -webkit-appearance: none; appearance: none;
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 0 12px;
  box-sizing: border-box;
  border: 0; border-radius: 13px;
  background: transparent;
  color: var(--s7s-tinte);
  font: 700 11.5px/1.2 var(--s7s-versal);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.25s var(--s7s-fahrt), transform 0.4s var(--s7s-feder);
}

/* --------------------------------------------------------------- Telefon */

.s7s .s7s-fab,
.s7s button.s7s-fab {
  -webkit-appearance: none; appearance: none;
  display: none;
  position: fixed;
  z-index: 900;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  width: 56px; height: 56px;
  margin: 0; padding: 0;
  border-radius: 50%;
  place-items: center;
  color: var(--s7s-tinte);
  cursor: pointer;
  transition: transform 0.35s var(--s7s-feder);
}
/* Der runde Knopf am Telefon ist eine Kugel: Licht oben links, Schatten unten rechts. */
.s7s .s7s-fab::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background-image: var(--s7s-kugel);
}
.s7s .s7s-fab-logo { display: grid; place-items: center; position: relative; z-index: 1; }
.s7s .s7s-fab .s7s-marke { width: 28px; height: 28px; }
.s7s .s7s-fab-zahl { top: 2px; right: 2px; }

.s7s .s7s-schleier { position: fixed; inset: 0; z-index: 902; background: var(--s7s-schleier); }
/* Offenes Blatt: die Seite darunter scrollt nicht mit. */
html.s7s-gesperrt { overflow: hidden; }

@keyframes s7s-sheet-auf {
  from { transform: translateY(24px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.s7s .s7s-sheet {
  position: fixed;
  z-index: 903;
  left: 8px; right: 8px;
  bottom: max(8px, env(safe-area-inset-bottom, 0px));
  max-height: min(82vh, 680px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px 14px 16px;
  border-radius: 28px;
  display: grid;
  gap: 12px;
  animation: s7s-sheet-auf 0.3s var(--s7s-fahrt);
}
.s7s .s7s-sheet-kopf { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; padding-top: 12px; }
.s7s .s7s-griff {
  position: absolute; top: 0; left: 50%;
  width: 40px; height: 5px;
  transform: translateX(-50%);
  border-radius: 5px;
  background: var(--s7s-linie);
}
.s7s .s7s-sheet-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.s7s .s7s-sheet-spalten-1 { grid-template-columns: minmax(0, 1fr); }
.s7s .s7s-sheet-spalten-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s7s .s7s-sheet-spalten-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s7s .s7s-sheet-spalten-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.s7s .s7s-sheet-kachel,
.s7s button.s7s-sheet-kachel {
  -webkit-appearance: none; appearance: none;
  position: relative;
  display: grid; justify-items: center; align-content: center; gap: 6px;
  width: 100%;
  min-height: 74px;
  margin: 0;
  padding: 8px 2px;
  box-sizing: border-box;
  border: 0; border-radius: 16px;
  background: var(--s7s-mulde);
  box-shadow: var(--s7s-vertieft);
  color: var(--s7s-tinte);
  font: 700 9.5px/1.15 var(--s7s-versal);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.s7s .s7s-sheet-kachel .s7s-zahl { top: 6px; right: 8px; }
.s7s .s7s-sheet-kachel[aria-expanded="true"] { background: var(--s7s-aktiv); box-shadow: inset 0 0 0 1px var(--s7s-aktiv-rand); }
.s7s .s7s-sheet-block { display: grid; gap: 8px; }
.s7s .s7s-sheet-block .s7s-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Konto (Blog-Plugin): Bild rund, Block unten abgesetzt */
.s7s .s7s-avatar { display: block; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--s7s-glas-rand); }
.s7s .s7s-konto { overflow: visible; }
/* Das Ersatz-Zeichen, solange kein Profilbild da ist -- JS blendet es aus, sobald eins kommt. */
.s7s .s7s-konto-icon { width: 22px; height: 22px; }
.s7s .s7s-konto-kopf { display: flex; align-items: center; gap: 12px; }
.s7s .s7s-konto-bild {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--s7s-mulde);
  color: var(--s7s-tinte-leise);
}
/* Bild und Ersatzzeichen liegen in DERSELBEN Zelle -- nie untereinander. */
.s7s .s7s-konto-bild > * { grid-area: 1 / 1; }
.s7s .s7s-avatar-gross { display: block; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.s7s .s7s-konto-text { display: grid; gap: 2px; min-width: 0; }
.s7s .s7s-konto-text strong { font: 800 13px/1.15 var(--s7s-versal); text-transform: uppercase; letter-spacing: 0.03em; overflow-wrap: anywhere; }
.s7s .s7s-konto-text small { font: 500 11.5px/1.2 var(--s7s-schrift); color: var(--s7s-tinte-leise); }
.s7s .s7s-zeile-stark {
  background: var(--s7s-aktiv);
  box-shadow: inset 0 0 0 1px var(--s7s-aktiv-rand);
}

/* Discord: Zahlenzeile, drei Schritte, Join-Knopf (wie die Community-Karte im Linktree, nur schmal) */
/*
 * In der Kapsel und im Telefon-Menue traegt das Discord-Zeichen die Farbe
 * der anderen Icons (Leon, 17.09.2026). Blau bleibt es nur am Join-Knopf
 * im Panel -- dort ist es der Aufruf, nicht ein Eintrag unter vielen.
 */
.s7s .s7s-discord-knopf .s7s-ic { color: var(--s7s-discord); }
.s7s .s7s-discord-zahlen {
  display: flex; align-items: center; gap: 7px;
  /* Hoehe steht, bevor die Zahlen da sind -- sonst huepft das Panel beim Nachladen. */
  min-height: 15px;
  margin: 0;
  color: var(--s7s-tinte-leise);
  font: 600 11.5px/1.3 var(--s7s-schrift);
  font-variant-numeric: tabular-nums;
}
.s7s .s7s-online-punkt {
  width: 7px; height: 7px; flex: none;
  border-radius: 50%;
  background: var(--s7s-online);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--s7s-online) 22%, transparent);
}
.s7s .s7s-schritte { display: grid; gap: 6px; }
.s7s .s7s-schritt {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 10px;
  padding: 9px 10px;
  border-radius: 14px;
  background: var(--s7s-mulde);
  box-shadow: var(--s7s-vertieft);
}
.s7s .s7s-schritt-zahl {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--s7s-discord) 14%, transparent);
  color: var(--s7s-discord);
  font: 800 11px/1 var(--s7s-versal);
}
.s7s .s7s-schritt-text { display: grid; gap: 3px; min-width: 0; }
.s7s .s7s-schritt-text strong {
  color: var(--s7s-tinte);
  font: 800 11px/1.2 var(--s7s-versal);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.s7s .s7s-schritt-text small { color: var(--s7s-tinte-leise); font: 500 11.5px/1.4 var(--s7s-schrift); }
/* Der Aufruf steht mittig -- er ist das Ziel des Panels, keine Listenzeile. */
.s7s .s7s-discord-knopf { justify-content: center; }

/* Thangs-Anmeldung: Feld klappt unter dem Knopf auf. */
.s7s .s7s-thangs { display: grid; gap: 6px; padding: 4px 2px 6px; }

/* Suche und Teilen */
.s7s .s7s-suche { display: flex; gap: 8px; align-items: center; }

/* Sofort-Treffer unter dem Suchfeld -- Aufbau wie im Suchfeld des Studio Logs, nur schmal. */
.s7s .s7s-suchbereich { display: grid; gap: 10px; }
.s7s .s7s-treffer { display: grid; gap: 4px; }
.s7s .s7s-treffer-kopf {
  margin: 6px 2px 2px;
  color: var(--s7s-tinte-leise);
  font: 800 9.5px/1 var(--s7s-versal);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.s7s .s7s-treffer-liste { display: grid; gap: 2px; }
.s7s .s7s-treffer-punkt { display: block; }
.s7s .s7s-treffer-zeile {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px;
  padding: 6px;
  border-radius: 12px;
  color: var(--s7s-tinte);
  text-decoration: none;
  transition: background-color 0.15s, box-shadow 0.15s;
}
.s7s .s7s-treffer-zeile:focus-visible { outline: 2px solid var(--s7s-akzent); outline-offset: 1px; }
.s7s .s7s-treffer-bild {
  display: block;
  width: 40px; height: 40px;
  overflow: hidden;
  border-radius: 9px;
  background: var(--s7s-mulde);
}
.s7s .s7s-treffer-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s7s .s7s-treffer-text { display: grid; gap: 2px; min-width: 0; }
.s7s .s7s-treffer-text strong {
  overflow: hidden;
  font: 700 12.5px/1.25 var(--s7s-schrift);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.s7s .s7s-treffer-text small {
  overflow: hidden;
  color: var(--s7s-tinte-leise);
  font: 600 10px/1.2 var(--s7s-versal);
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Sammlungen tragen ihre Art in Rot -- wie im Studio Log, damit man sie von einzelnen Modellen unterscheidet. */
.s7s .s7s-treffer-sammlung small { color: var(--s7s-akzent-stark); }
@media (hover: hover) {
  .s7s .s7s-treffer-zeile:hover { background: var(--s7s-pille); box-shadow: var(--s7s-knopf-ruhe); }
}
.s7s .s7s-suchfeld {
  flex: 1 1 auto;
  min-width: 0;
  height: 42px;
  margin: 0;
  padding: 0 14px;
  box-sizing: border-box;
  border: 1px solid var(--s7s-glas-rand);
  border-radius: 13px;
  background: var(--s7s-mulde);
  box-shadow: var(--s7s-vertieft);
  color: var(--s7s-tinte);
  font: 500 13.5px/1 var(--s7s-schrift);
}
.s7s .s7s-suchfeld::placeholder { color: var(--s7s-tinte-leise); }
.s7s .s7s-suchfeld:focus-visible { outline: 2px solid var(--s7s-akzent); outline-offset: 2px; }
.s7s .s7s-suche-knopf,
.s7s button.s7s-suche-knopf {
  -webkit-appearance: none; appearance: none;
  display: grid; place-items: center;
  width: 42px; height: 42px;
  flex: none;
  margin: 0; padding: 0;
  border: 1px solid var(--s7s-aktiv-rand);
  border-radius: 13px;
  background: var(--s7s-aktiv);
  color: var(--s7s-tinte);
  cursor: pointer;
}
.s7s .s7s-vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/*
 * TELEFON = schmal UND ohne feinen Zeiger. Ein schmales Desktop-Fenster
 * behaelt die Kapsel, ein Tablet (breit, Touch) auch -- Leons Wahl.
 */
@media (max-width: 767.98px) and (pointer: coarse), (max-width: 767.98px) and (hover: none) {
  .s7s .s7s-kapsel,
  .s7s .s7s-panel { display: none !important; }
  .s7s .s7s-fab,
  .s7s button.s7s-fab { display: grid; }
  .s7s .s7s-leiste { padding: 4px; border-radius: 18px; }
  .s7s .s7s-leiste-knopf { width: 36px; height: 36px; border-radius: 11px; }
  .s7s .s7s-leiste-bild { width: 24px; height: 24px; }
  .s7s .s7s-tip { display: none; }
  .s7s .s7s-nur-desktop { display: none !important; }
  /* Der Nach-oben-Knopf des Blogs bleibt (Leons Wahl) -- er rueckt ueber den Menueknopf. */
  body:has(.s7s-fab) .s7b-nach-oben { bottom: calc(max(16px, env(safe-area-inset-bottom, 0px)) + 68px); }
}
@media (min-width: 768px), (pointer: fine) and (hover: hover) {
  .s7s .s7s-nur-telefon { display: none !important; }
}

/* Kleine Fensterhoehe: erst enger, dann weicht die Leiste -- die Portale stehen ja auch im Panel. */
@media (max-height: 860px) and (min-width: 768px) {
  .s7s .s7s-leiste-knopf { width: 34px; height: 34px; }
  .s7s .s7s-leiste-bild { width: 22px; height: 22px; }
  .s7s .s7s-kapsel { gap: 4px; }
  .s7s .s7s-kapsel .s7s-liste { gap: 4px; }
  .s7s .s7s-knopf,
  .s7s button.s7s-knopf { width: 40px; height: 40px; }
  .s7s .s7s-logo { width: 36px; height: 36px; }
}
@media (max-height: 700px) and (min-width: 768px) {
  .s7s .s7s-rand-mit-leiste .s7s-leiste { display: none; }
  .s7s .s7s-rand-mit-leiste { justify-content: center; }
}

/* Anmeldung wechselt bei gleicher Adresse -- darum Klassen statt Serverentscheidung. */
body.logged-in .s7s .s7s-nur-gast { display: none !important; }
body:not(.logged-in) .s7s .s7s-nur-angemeldet { display: none !important; }

/* Waehrend ein Popup offen ist, tritt die Sidebar zurueck. */
.s7s.s7s-still .s7s-rand,
.s7s.s7s-still .s7s-fab { opacity: 0; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .s7s .s7s-panel,
  .s7s .s7s-sheet { animation: none; }
  .s7s .s7s-knopf,
  .s7s .s7s-leiste-knopf,
  .s7s .s7s-fab,
  .s7s .s7s-zeile,
  .s7s .s7s-sheet-kachel,
  .s7s .s7s-mulde,
  .s7s .s7s-knopf .s7s-ic,
  .s7s .s7s-reiter,
  .s7s .s7s-tip { transition: none; }
  /* Das Relief bleibt, nur die Bewegung faellt weg. */
  .s7s .s7s-knopf:hover,
  .s7s .s7s-knopf:active,
  .s7s .s7s-knopf[aria-expanded="true"],
  .s7s .s7s-knopf:hover .s7s-ic,
  .s7s .s7s-knopf:active .s7s-ic,
  .s7s .s7s-leiste-knopf:active,
  .s7s .s7s-zeile:active,
  .s7s .s7s-sheet-kachel:hover,
  .s7s .s7s-sheet-kachel:active,
  .s7s .s7s-kachel:hover .s7s-mulde,
  .s7s .s7s-kachel:active .s7s-mulde,
  .s7s .s7s-fab:active { transform: none; }
}

@media print {
  .s7s { display: none !important; }
}