/* Hintergrund-Farbauswahl: betrifft ausschließlich Kopf- und Seitenhintergrund. */
:root{
  --portal-page-bg:#f3f6f9;
  --portal-header-text:#ffffff;
}
body{background:var(--portal-page-bg)!important}
header{position:relative;color:var(--portal-header-text)!important}
header.portal-solid-bg{background:var(--portal-header-bg)!important}
header.portal-solid-bg .crumbs a{color:var(--portal-header-text)!important}

.portal-color-trigger{
  position:absolute;z-index:50;left:10px;top:10px;width:34px;height:34px;
  display:grid;place-items:center;border:1px solid rgba(32,48,64,.28);border-radius:10px;
  padding:0;margin:0;background:rgba(255,255,255,.92);color:#203040;cursor:pointer;
  font:700 18px/1 Arial,Helvetica,sans-serif;box-shadow:0 2px 8px rgba(0,0,0,.12)
}
.portal-color-trigger:hover,.portal-color-trigger:focus-visible{background:#fff;outline:3px solid rgba(227,164,0,.65);outline-offset:2px}
.portal-color-trigger.page-trigger{top:10px}
main{position:relative}

.portal-palette{
  position:absolute;z-index:60;left:10px;top:50px;width:226px;padding:10px;
  border:1px solid #c7d4de;border-radius:12px;background:#fff;color:#203040;
  box-shadow:0 10px 28px rgba(0,0,0,.22)
}
.portal-palette[hidden]{display:none!important}
.portal-palette-title{font:700 13px Arial,Helvetica,sans-serif;margin:0 0 8px}
.portal-swatches{display:grid;grid-template-columns:repeat(5,34px);gap:7px}
.portal-swatch{width:34px;height:34px;padding:0;margin:0;border:2px solid #fff;border-radius:8px;cursor:pointer;box-shadow:0 0 0 1px #9aa9b5}
.portal-swatch:hover,.portal-swatch:focus-visible{outline:3px solid #e3a400;outline-offset:1px}
.portal-swatch[aria-pressed="true"]{box-shadow:0 0 0 3px #1f4e79}
.portal-reset{width:100%;margin:10px 0 0!important;padding:8px 10px!important;border:0;border-radius:8px;background:#e8edf2!important;color:#29435a!important;font:700 13px Arial,Helvetica,sans-serif!important;cursor:pointer}
.portal-reset:hover,.portal-reset:focus-visible{background:#dce4eb!important}

/* Auf schmalen Bildschirmen bleiben die Schalter klein und außerhalb der Lernkarten. */
@media(max-width:700px){
  .portal-color-trigger{left:6px;top:6px;width:30px;height:30px;font-size:16px}
  .portal-palette{left:6px;top:42px}
}
/* Platz für den Schalter im unteren Hintergrund, damit keine Lernkarte überdeckt wird. */
main{padding-top:52px!important}
@media(max-width:700px){header>.wrap{padding-left:28px}}