diff --git a/assets/css/format-print.css b/assets/css/format-print.css
index ea76e4b511..4370399f7b 100644
--- a/assets/css/format-print.css
+++ b/assets/css/format-print.css
@@ -161,7 +161,7 @@ mark.search {
 .mermaid.zoom:hover {
   border-color: transparent;
 }
-div.box > .box-content {
+.box > .box-content {
   background-color: rgba(255, 255, 255, 1);
 }
 
diff --git a/assets/css/theme-neon.css b/assets/css/theme-neon.css
index 03ae2e54a6..846e0dce82 100644
--- a/assets/css/theme-neon.css
+++ b/assets/css/theme-neon.css
@@ -214,14 +214,14 @@ body .anchor {
 
 body .badge,
 body .btn,
-body div.box:not(.cstyle.transparent) {
+body .box:not(.cstyle.transparent) {
   box-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 2px rgba(255, 255, 255, 1), 0 0 4px rgba(128, 128, 128, 1), 0 0 4px var(--VARIABLE-BOX-color);
 }
 
 body .badge > .badge-content,
 body .btn,
 body .btn > *,
-body div.box:not(.cstyle.transparent) > .box-label {
+body .box:not(.cstyle.transparent) > .box-label {
   text-shadow: 0 0 1px rgba(255, 255, 255, 1), 0 0 2px rgba(255, 255, 255, 1), 0 0 4px rgba(128, 128, 128, 1), 0 0 4px var(--VARIABLE-BOX-CAPTION-color);
 }
 
@@ -248,7 +248,7 @@ body .btn.cstyle.interactive.transparent > *:focus {
   color: var(--INTERNAL-MAIN-TEXT-color);
 }
 
-body div.box.cstyle.transparent {
+body .box.cstyle.transparent {
   box-shadow: none;
 }
 
@@ -266,8 +266,8 @@ body div.box.cstyle.transparent {
   #R-body .badge > .badge-content,
   #R-body .btn,
   #R-body .btn > *,
-  #R-body div.box,
-  #R-body div.box > .box-label {
+  #R-body .box,
+  #R-body .box > .box-label {
     box-shadow: none;
     text-shadow: none;
   }
@@ -292,8 +292,8 @@ above will not apply, so we have to repeat it here */
 .print #R-body .badge > .badge-content,
 .print #R-body .btn,
 .print #R-body .btn > *,
-.print #R-body div.box,
-.print #R-body div.box > .box-label {
+.print #R-body .box,
+.print #R-body .box > .box-label {
   box-shadow: none;
   text-shadow: none;
 }
diff --git a/assets/css/theme.css b/assets/css/theme.css
index 586f261d1c..128787d8cf 100644
--- a/assets/css/theme.css
+++ b/assets/css/theme.css
@@ -786,23 +786,29 @@ blockquote cite {
 
 /* colored boxes */
 
-div.box {
+.box {
   background-color: var(--VARIABLE-BOX-color);
   border-color: var(--VARIABLE-BOX-color);
-  margin: 1.5rem 0;
   border-style: solid;
   border-width: 1px;
+  margin: 1.5rem 0;
+  outline: none;
+  pointer-events: none;
 }
 
-div.box > .box-label {
+.box > .box-label {
   color: var(--VARIABLE-BOX-CAPTION-color);
   font-weight: 500;
   margin-left: 0.6rem;
   margin-right: 0.6rem;
   padding: 0.2rem 0;
 }
+.box > .box-label::-webkit-details-marker,
+.box > .box-label::marker {
+  display: none;
+}
 
-div.box > .box-content {
+.box > .box-content {
   background-color: var(--VARIABLE-BOX-BG-color);
   color: var(--VARIABLE-BOX-TEXT-color);
   padding-top: 1rem;
@@ -831,12 +837,10 @@ p:empty {
 #R-body table th > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)),
 #R-body table td > :nth-child(1 of :not(:empty)),
 #R-body table td > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)),
-#R-body div.box > .box-content > :nth-child(1 of :not(:empty)),
-#R-body div.box > .box-content > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)),
-#R-body div.expand > .expand-content > :nth-child(1 of :not(:empty)),
-#R-body div.expand > .expand-content > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)),
-#R-body div.tab-content > .tab-content-text > :nth-child(1 of :not(:empty)),
-#R-body div.tab-content > .tab-content-text > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)) {
+#R-body .box > .box-content > :nth-child(1 of :not(:empty)),
+#R-body .box > .box-content > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)),
+#R-body .tab-content > .tab-content-text > :nth-child(1 of :not(:empty)),
+#R-body .tab-content > .tab-content-text > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)) {
   margin-top: 0;
 }
 
@@ -846,21 +850,18 @@ p:empty {
 #R-body table td > :nth-last-child(1 of :not(:empty)),
 #R-body table td > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
 #R-body table td > div:last-child pre:not(.mermaid),
-#R-body div.box > .box-content > :nth-last-child(1 of :not(:empty)),
-#R-body div.box > .box-content > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
-#R-body div.box > .box-content > div:last-child pre:not(.mermaid),
-#R-body div.expand > .expand-content > :nth-last-child(1 of :not(:empty)),
-#R-body div.expand > .expand-content > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
-#R-body div.expand > .expand-content > div:last-child pre:not(.mermaid),
-#R-body div.tab-content > .tab-content-text > :nth-last-child(1 of :not(:empty)),
-#R-body div.tab-content > .tab-content-text > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
-#R-body div.tab-content > .tab-content-text > div:last-child pre:not(.mermaid) {
+#R-body .box > .box-content > :nth-last-child(1 of :not(:empty)),
+#R-body .box > .box-content > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
+#R-body .box > .box-content > div:last-child pre:not(.mermaid),
+#R-body .tab-content > .tab-content-text > :nth-last-child(1 of :not(:empty)),
+#R-body .tab-content > .tab-content-text > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
+#R-body .tab-content > .tab-content-text > div:last-child pre:not(.mermaid) {
   margin-bottom: 0;
 }
 
 /* resources shortcode */
 
-div.attachments .box-content {
+.attachments .box-content {
   display: block;
   margin: 0;
   padding-inline-start: 1.75rem;
@@ -1520,85 +1521,33 @@ option {
 .expand {
   margin-bottom: 1.5rem;
   margin-top: 1.5rem;
+  outline: initial;
+  pointer-events: initial;
   position: relative;
 }
 
-.expand > input {
-  -webkit-appearance: none;
-  appearance: none;
+.expand > .box-label {
   cursor: pointer;
 }
-
-.expand > label {
-  cursor: pointer;
-  display: inline;
-  font-weight: 300;
-  inset-inline-start: 0;
-  position: absolute;
-}
-.expand:not(.box) > label {
-  color: var(--INTERNAL-MAIN-LINK-color);
-}
-
-.expand > input:active + label,
-.expand > input:focus + label,
-.expand > label:hover {
+.expand > .box-label:hover,
+.expand > .box-label:active,
+.expand > .box-label:focus {
   text-decoration: underline;
 }
-.expand:not(.box) > label:hover,
-.expand:not(.box) > label:active,
-.expand:not(.box) > label:focus,
-.expand:not(.box) > input:hover + label,
-.expand:not(.box) > input:active + label,
-.expand:not(.box) > input:focus + label {
-  color: var(--INTERNAL-MAIN-LINK-HOVER-color);
-}
 
-.expand > label > .expander-icon {
+.expand > .box-label > .expander-icon {
   font-size: 0.8rem;
   width: 0.6rem;
 }
-
-.expand > .expand-content {
-  margin-inline-start: 1rem;
-  margin-top: 0.5rem;
+.expand[open] > .box-label > i.expander-icon {
+  transform: rotate(90deg);
 }
-.box.expand > .expand-content {
-  margin-inline-start: 0;
-  margin-top: 0.4rem;
-}
-.box.expand > .box-spacer {
-  margin-bottom: 0.4rem;
-}
-
-/* closed expander */
-.expand > input + label ~ .expand-content {
-  display: none;
-}
-
-.expand > input + label > .fa-chevron-down {
-  display: none;
-}
-.expand > input + label > .fa-chevron-right {
-  display: inline-block;
-}
-
-/* open expander */
-.expand > input:checked + label ~ .expand-content {
-  display: block;
-}
-
-.expand > input:checked + label > .fa-chevron-down {
-  display: inline-block;
-}
-.expand > input:checked + label > .fa-chevron-right {
-  display: none;
-}
-
-/* adjust expander for RTL reading direction */
-html[dir='rtl'] .expand > .expand-label > i.fa-chevron-right {
+html[dir='rtl'] .expand > .box-label > i.expander-icon {
   transform: scaleX(-1);
 }
+html[dir='rtl'] .expand[open] > .box-label > i.expander-icon {
+  transform: rotate(90deg);
+}
 
 #R-body footer.footline {
   margin-top: 2rem;
@@ -2762,26 +2711,27 @@ body.notfound #shrug svg {
   width: 15rem;
 }
 
-/* notice box */
+/* transparent boxes have different margins and - apperantly - different coloring */
 
-div.box.cstyle.transparent {
+.box.cstyle.transparent {
   border-width: 0;
 }
 
-div.box.cstyle.transparent > .box-label {
+.box.cstyle.transparent > .box-label {
   margin: 0;
   padding-bottom: 0;
   padding-top: 0;
 }
-div.box.expand.cstyle.transparent > .box-label {
+.box.expand.cstyle.transparent > .box-label {
   color: var(--INTERNAL-MAIN-LINK-color);
 }
-
-div.box.cstyle.transparent > .box-spacer {
-  display: none;
+.box.expand.cstyle.transparent > .box-label:hover,
+.box.expand.cstyle.transparent > .box-label:active,
+.box.expand.cstyle.transparent > .box-label:focus {
+  color: var(--INTERNAL-MAIN-LINK-HOVER-color);
 }
 
-div.box.cstyle.transparent > .box-content {
+.box.cstyle.transparent > .box-content {
   margin-top: 0;
   padding-bottom: 0;
 }
diff --git a/exampleSite/i18n/art-x-pir.toml b/exampleSite/i18n/art-x-pir.toml
index 02dcb4adb1..3a16ff1911 100644
--- a/exampleSite/i18n/art-x-pir.toml
+++ b/exampleSite/i18n/art-x-pir.toml
@@ -123,3 +123,6 @@ other = "Categorrries"
 
 [category]
 other = "Categorrry"
+
+[Details]
+other = "Details"
diff --git a/i18n/ar.toml b/i18n/ar.toml
index 4a49761e93..b9a3380344 100644
--- a/i18n/ar.toml
+++ b/i18n/ar.toml
@@ -123,3 +123,6 @@ other = "فئات"
 
 [category]
 other = "فئة"
+
+[Details]
+other = "التفاصيل"
diff --git a/i18n/cs.toml b/i18n/cs.toml
index 8f36ac7462..8f3b3b69ad 100644
--- a/i18n/cs.toml
+++ b/i18n/cs.toml
@@ -123,3 +123,6 @@ other = "Kategorie"
 
 [category]
 other = "Kategorie"
+
+[Details]
+other = "Podrobnosti"
diff --git a/i18n/de.toml b/i18n/de.toml
index e9d25a92ed..0e8c6d0870 100644
--- a/i18n/de.toml
+++ b/i18n/de.toml
@@ -123,3 +123,6 @@ other = "Kategorien"
 
 [category]
 other = "Kategorie"
+
+[Details]
+other = "Details"
diff --git a/i18n/en.toml b/i18n/en.toml
index e8c3f9daa0..3ed927138b 100644
--- a/i18n/en.toml
+++ b/i18n/en.toml
@@ -123,3 +123,6 @@ other = "Categories"
 
 [category]
 other = "Category"
+
+[Details]
+other = "Details"
diff --git a/i18n/es.toml b/i18n/es.toml
index 1b386ac770..0b4a2ba300 100644
--- a/i18n/es.toml
+++ b/i18n/es.toml
@@ -123,3 +123,6 @@ other = "Categorías"
 
 [category]
 other = "Categoría"
+
+[Details]
+other = "Detalles"
diff --git a/i18n/fi.toml b/i18n/fi.toml
index 9af8c8a385..c39fa06e7b 100644
--- a/i18n/fi.toml
+++ b/i18n/fi.toml
@@ -123,3 +123,6 @@ other = "Luokat"
 
 [category]
 other = "Kategoria"
+
+[Details]
+other = "Tiedot"
diff --git a/i18n/fr.toml b/i18n/fr.toml
index a206d668f9..733d9d90de 100644
--- a/i18n/fr.toml
+++ b/i18n/fr.toml
@@ -123,3 +123,6 @@ other = "Catégories"
 
 [category]
 other = "Catégorie"
+
+[Details]
+other = "Détails"
diff --git a/i18n/hi.toml b/i18n/hi.toml
index 0dcb048a7c..a1890d20df 100644
--- a/i18n/hi.toml
+++ b/i18n/hi.toml
@@ -123,3 +123,6 @@ other = "श्रेणियाँ"
 
 [category]
 other = "वर्ग"
+
+[Details]
+other = "ब्यौरा"
diff --git a/i18n/hu.toml b/i18n/hu.toml
index d1b83747a2..156bcf67a6 100644
--- a/i18n/hu.toml
+++ b/i18n/hu.toml
@@ -123,3 +123,6 @@ other = "Kategóriák"
 
 [category]
 other = "Kategória"
+
+[Details]
+other = "Részletek"
diff --git a/i18n/id.toml b/i18n/id.toml
index fb99fb8c50..b8d9769ca4 100644
--- a/i18n/id.toml
+++ b/i18n/id.toml
@@ -123,3 +123,6 @@ other = "Kategori"
 
 [category]
 other = "Kategori"
+
+[Details]
+other = "Rincian"
diff --git a/i18n/it.toml b/i18n/it.toml
index 3615ece0de..be536db48f 100644
--- a/i18n/it.toml
+++ b/i18n/it.toml
@@ -123,3 +123,6 @@ other = "Categorie"
 
 [category]
 other = "Categoria"
+
+[Details]
+other = "Dettagli"
diff --git a/i18n/ja.toml b/i18n/ja.toml
index 234668efef..8426c22756 100644
--- a/i18n/ja.toml
+++ b/i18n/ja.toml
@@ -123,3 +123,6 @@ other = "カテゴリー"
 
 [category]
 other = "カテゴリー"
+
+[Details]
+other = "細部"
diff --git a/i18n/ko.toml b/i18n/ko.toml
index c0696641dc..02ecb33c6d 100644
--- a/i18n/ko.toml
+++ b/i18n/ko.toml
@@ -126,3 +126,6 @@ other = "카테고리"
 
 [category]
 other = "카테고리"
+
+[Details]
+other = "세부 정보"
diff --git a/i18n/nl.toml b/i18n/nl.toml
index 57fc6a866e..ffec5c7f42 100644
--- a/i18n/nl.toml
+++ b/i18n/nl.toml
@@ -123,3 +123,6 @@ other = "Categorieën"
 
 [category]
 other = "Categorie"
+
+[Details]
+other = "Details"
diff --git a/i18n/pl.toml b/i18n/pl.toml
index 36417a06ac..f70ef5b0d0 100644
--- a/i18n/pl.toml
+++ b/i18n/pl.toml
@@ -123,3 +123,6 @@ other = "Kategorie"
 
 [category]
 other = "Kategoria"
+
+[Details]
+other = "Szczegóły"
diff --git a/i18n/pt.toml b/i18n/pt.toml
index 01bb30a027..15342470be 100644
--- a/i18n/pt.toml
+++ b/i18n/pt.toml
@@ -123,3 +123,6 @@ other = "Categorias"
 
 [category]
 other = "Categoria"
+
+[Details]
+other = "Detalhes"
diff --git a/i18n/ro.toml b/i18n/ro.toml
index 89d5e85f9f..9b4804d626 100644
--- a/i18n/ro.toml
+++ b/i18n/ro.toml
@@ -123,3 +123,6 @@ other = "Categorii"
 
 [category]
 other = "Categorie"
+
+[Details]
+other = "Detalii"
diff --git a/i18n/ru.toml b/i18n/ru.toml
index 680ebb8e56..4ce79e66bd 100644
--- a/i18n/ru.toml
+++ b/i18n/ru.toml
@@ -123,3 +123,6 @@ other = "Категории"
 
 [category]
 other = "Категория"
+
+[Details]
+other = "Подробности"
diff --git a/i18n/sw.toml b/i18n/sw.toml
index a804bbea0d..a808313098 100644
--- a/i18n/sw.toml
+++ b/i18n/sw.toml
@@ -123,3 +123,6 @@ other = "Kategoria"
 
 [category]
 other = "Kategoria"
+
+[Details]
+other = "Maelezo"
diff --git a/i18n/tr.toml b/i18n/tr.toml
index 2ec30e05c9..016b73c6e5 100644
--- a/i18n/tr.toml
+++ b/i18n/tr.toml
@@ -123,3 +123,6 @@ other = "Kategoriler"
 
 [category]
 other = "Kategori"
+
+[Details]
+other = "Şey"
diff --git a/i18n/vi.toml b/i18n/vi.toml
index 752db6f051..5ec1cbbf8e 100644
--- a/i18n/vi.toml
+++ b/i18n/vi.toml
@@ -126,3 +126,6 @@ other = "Thể loại"
 
 [category]
 other = "Loại"
+
+[Details]
+other = "Chi tiết"
diff --git a/i18n/zh-CN.toml b/i18n/zh-CN.toml
index 71f3b38468..dbbcd2c6eb 100644
--- a/i18n/zh-CN.toml
+++ b/i18n/zh-CN.toml
@@ -123,3 +123,6 @@ other = "类别"
 
 [category]
 other = "类别"
+
+[Details]
+other = "详情"
diff --git a/i18n/zh-Hans.toml b/i18n/zh-Hans.toml
index 71f3b38468..dbbcd2c6eb 100644
--- a/i18n/zh-Hans.toml
+++ b/i18n/zh-Hans.toml
@@ -123,3 +123,6 @@ other = "类别"
 
 [category]
 other = "类别"
+
+[Details]
+other = "详情"
diff --git a/i18n/zh-Hant.toml b/i18n/zh-Hant.toml
index 8063e3c1a1..fba04c4c17 100644
--- a/i18n/zh-Hant.toml
+++ b/i18n/zh-Hant.toml
@@ -123,3 +123,6 @@ other = "類別"
 
 [category]
 other = "類別"
+
+[Details]
+other = "詳情"
diff --git a/i18n/zh-TW.toml b/i18n/zh-TW.toml
index 8063e3c1a1..fba04c4c17 100644
--- a/i18n/zh-TW.toml
+++ b/i18n/zh-TW.toml
@@ -123,3 +123,6 @@ other = "類別"
 
 [category]
 other = "類別"
+
+[Details]
+other = "詳情"
diff --git a/i18n/zh.toml b/i18n/zh.toml
index 71f3b38468..dbbcd2c6eb 100644
--- a/i18n/zh.toml
+++ b/i18n/zh.toml
@@ -123,3 +123,6 @@ other = "类别"
 
 [category]
 other = "类别"
+
+[Details]
+other = "详情"
diff --git a/layouts/partials/shortcodes/notice.html b/layouts/partials/shortcodes/notice.html
index 78dbcdb313..6348424b1e 100644
--- a/layouts/partials/shortcodes/notice.html
+++ b/layouts/partials/shortcodes/notice.html
@@ -31,32 +31,20 @@
     {{- $expander = true }}
   {{- end }}
 {{- end }}
-{{- $id := cond (or (eq .id nil) (eq .id "")) (partial "_relearn/makeRandomMd5.gotmpl" $page) .id }}
-{{- $idattribute := "" }}
-{{- if $expander }}
-  {{- $containerclass = $containerclass | append "expand-content" }}
-  {{- $idattribute = printf ` id="R-expandcontent-%s"` $id }}
-{{- end }}
 {{- with $page }}
   {{- if or $icon $title $hasContent -}}
-<div class="{{ if $expander }}expand {{ end }}box {{ $class }} cstyle {{ $style }}"{{ if $color }} style="--VARIABLE-BOX-color: {{ $color }};"{{ end }}>
-    {{- if $expander }}
-  <input type="checkbox" id="R-expand-{{ $id }}" aria-controls="R-expandcontent-{{ $id }}"{{ if $expanded }} checked{{ end }}>
-  <label class="expand-label box-label" for="R-expand-{{ $id }}">
-    <i class="expander-icon fa-fw fas fa-chevron-down"></i>
-    <i class="expander-icon fa-fw fas fa-chevron-right"></i> {{ if $icon }}<i class="{{ $icon }}"></i>{{ end }}{{ if and $icon $title }} {{ end }}{{ $title | .RenderString }}
-  </label>
-  <div class="box-spacer"></div>
-    {{- else if or $icon $title }}
-  <div class="box-label">
-    {{ if $icon }}<i class="{{ $icon }}"></i>{{ end }}{{ if and $icon $title }} {{ end }}{{ $title | .RenderString }}
-  </div>
-    {{- end }}
+<details class="{{ if $expander }}expand {{ end }}box {{ $class }} cstyle {{ $style }}"{{ if $color }} style=" --VARIABLE-BOX-color: {{ $color }};"{{ end }}{{ if not $expander }} tabindex="-1" open{{ else if $expanded }} open{{ end }}>
+  <summary class="box-label{{ if and (not $expander) (not $icon) (not $title) }} a11y-only{{ end }}">{{ if $expander }}
+    <i class="expander-icon fa-fw fas fa-chevron-right"></i> {{ end }}{{ if $icon }}
+    <i class="{{ $icon }}"></i> {{ end }}{{ if $title }}
+    {{ $title | .RenderString }}{{ else }}
+    <span class="a11y-only">{{ T "Details" }}</span>{{ end }}
+  </summary>
     {{- if $hasContent }}
-{{ printf "  <%s%s class=\"%s\">" $containerstyle $idattribute (delimit $containerclass " ") | safeHTML }}
+{{ printf "  <%s class=\"%s\">" $containerstyle (delimit $containerclass " ") | safeHTML }}
 {{ $content | safeHTML }}
 {{ printf "  </%s>" $containerstyle | safeHTML }}
     {{- end }}
-</div>
+</details>
   {{- end }}
 {{- end }}
\ No newline at end of file
diff --git a/layouts/partials/version.txt b/layouts/partials/version.txt
index 8cab2afd6e..690b181564 100644
--- a/layouts/partials/version.txt
+++ b/layouts/partials/version.txt
@@ -1 +1 @@
-7.1.1+1bb7c1d99ee8ae29ead714decffe8310263ef74c
\ No newline at end of file
+7.1.1+15b9b378f434ff288d819579379d632a97bf4938
\ No newline at end of file