style.css

:root {
  --colorBodyBG: #f1f3f5;
  --colorFont: #444444;
  --colorLightDarkIcon: #444444;
  --colorEUbackground: #e6b0aa;
  --colorEUborder: #e6b0aa;
  --colorEUborderdark: #b88c88;
  --colorUPCbackground: #bfe0b5;
  --colorUPCborder: #bfe0b5;
  --colorUPCborderdark: #98b390;
  --colorWObackground: #b2d6e9;
  --colorWOborder: #b2d6e9;
  --colorWOborderdark: #7fbbda;
  --colorATbackground: #fdd479;
  --colorATborder: #fdd479;
  --colorATborderdark: #e3be6c;
  --colorINTbackground: #d9c7e5;
  --colorINTborder: #d9c7e5;
  --colorINTborderdark: #ad9fb7;
  --colorOTHERbackground: #d1d1d1;
  --colorOTHERborder: #d1d1d1;
  --colorOTHERborderdark: #a7a7a7;
  --colorTOPborder: #d8dadc;
  --colorTOPborderdark: #c0c2c4;
  --colorTOPactive: #d8dadc;
  --transition-time: 0.4s;
}

body { /* auch möglich: * { ... }, das betrifft dann alle background-colors */
  transition: background-color var(--transition-time);
}

body {
  margin: 35px auto;
  margin-bottom: 20px;
  max-width: 650px;
  line-height: 3.6;
  font-size: 18px;
  color: var(--colorFont);
  background-color: var(--colorBodyBG);
  padding: 0 10px;
  font-family: "Courier New", monospace;
  user-select: none;
}
h1,h2,h3 {
  line-height: 1.2;
  margin-left: 3px;
}
h4 {
  line-height: 1.0;
  margin-top: 4px;
  margin-bottom: 4px;
}
button {
  border: none;
  color: var(--colorFont);
  padding: 14px 18px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 6px;
}
button:hover {
  filter: brightness(105%);
  z-index: 2;
}
button:focus, button:active {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.EU button, button.EU {
  background-color: var(--colorEUbackground);
  border: none;
  border-left: 1px solid var(--colorEUborder);
  border-right: 1px solid var(--colorEUborder);
  border-top: 1px solid var(--colorEUborder);
  border-bottom: 4px solid var(--colorEUborderdark);
}
.UPC button, button.UPC {
  background-color: var(--colorUPCbackground);
  border: none;
  border-left: 1px solid var(--colorUPCborder);
  border-right: 1px solid var(--colorUPCborder);
  border-top: 1px solid var(--colorUPCborder);
  border-bottom: 4px solid var(--colorUPCborderdark);
}
.WO button, button.WO {
  background-color: var(--colorWObackground);
  border: none;
  border-left: 1px solid var(--colorWOborder);
  border-right: 1px solid var(--colorWOborder);
  border-top: 1px solid var(--colorWOborder);
  border-bottom: 4px solid var(--colorWOborderdark);
}
.AT button, button.AT{
  background-color: var(--colorATbackground);
  border: none;
  border-left: 1px solid var(--colorATborder);
  border-right: 1px solid var(--colorATborder);
  border-top: 1px solid var(--colorATborder);
  border-bottom: 4px solid var(--colorATborderdark);
}
.INT button, button.INT {
  background-color: var(--colorINTbackground);
  border: none;
  border-left: 1px solid var(--colorINTborder);
  border-right: 1px solid var(--colorINTborder);
  border-top: 1px solid var(--colorINTborder);
  border-bottom: 4px solid var(--colorINTborderdark);
}
.OTHER button, button.OTHER {
  background-color: var(--colorOTHERbackground);
  border: none;
  border-left: 1px solid var(--colorOTHERborder);
  border-right: 1px solid var(--colorOTHERborder);
  border-top: 1px solid var(--colorOTHERborder);
  border-bottom: 4px solid var(--colorOTHERborderdark);
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  /*display: none;*/
  position: absolute;
  background-color: var(--colorBodyBG);
  list-style-type: none;
  padding: 0;
  margin: 0;
  left: 0;
  top: 100%;
  border: 1px solid var(--colorTOPborder);
  border-radius: 6px;
  width: 100%;
  opacity: 0;
  transform-origin: top center; /* Set the transform origin to the top center */
  transform: scaleY(0); /* Initially, scale the content to 0 in the Y-axis */
  transition: transform 0.2s ease-in-out; /* Add a transition for smooth animation */
}
.dropdown-content a {
  position: relative;
  display: block;
  opacity: 1;
  padding: 10px;
  text-decoration: none;
  color: var(--colorFont);
}
.dropdown:hover .dropdown-content {
  display: block;
  z-index: 1 ! important;
  opacity: 1;
  transform: scaleY(1); /* Scale it to 100% in the Y-axis */
}
.dropdown:hover a:hover {
  background-color: var(--colorTOPactive);
  border-radius: 6px;
}
.btn-group {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20pt;
  align-content: center;
  text-align: center;
  line-height: 10pt;
}
.btn-group button {
  filter: none;
}
#b1 {
  border-radius: 60px 0 0 60px;
  border-bottom: 2px solid var(--colorTOPborder);
  border-left: 2px solid var(--colorTOPborder);
  border-top: 2px solid var(--colorTOPborder);
}
#b2 {
  border-radius: 0;
  border-bottom: 2px solid var(--colorTOPborder);
  border-top: 2px solid var(--colorTOPborder);
}
#b3 {
  border-radius: 0 60px 60px 0;
  border-bottom: 2px solid var(--colorTOPborder);
  border-right: 2px solid var(--colorTOPborder);
  border-top: 2px solid var(--colorTOPborder);
}
#b1, #b2, #b3 {
  border-bottom: 4px solid var(--colorTOPborderdark);
  padding-top: 6pt;
  padding-bottom: 6pt;
  font-size: 16pt;
}
.top-row {
  background-color: var(--colorBodyBG);
  border: none;
  margin: 0;
  font-weight: 300;
}
.active {
  background-color: var(--colorTOPactive);
  border: none;
  font-weight: 300;
}
.patent {
  /**/
}
.marke {
  display: none;
}
.muster {
  display: none;
}
.footer {
  text-align: center;
  padding-top: 60px;
}
a:focus, img:focus {
  outline: none;
}
a, img {
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
  color: inherit;
  text-decoration: none;
}

#theme-btn {
  cursor: pointer;
  color: var(--colorFont);
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

abbr {
  text-decoration: none;
}

.footer-icon {
  font-size: 24pt;
  min-width: 40px; 
}

button.dropdown::after {
  /*content: "▿";*/
  /*content: "▾";*/
  content: "⌵";
  line-height: 1;
}

button span hr {
  width: 100%; 
  margin: auto; 
  padding: 0; 
  height: 3px; 
  border: none; 
  background-color: var(--colorTOPactive);
}

p.stretch.patent {
  display: flex;
}

p.stretch {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center; /* Align items to the start of the container */
}

p.stretch > a {
  flex-grow: 1;
  margin-right: 8px;
}

p.stretch > button {
  flex-grow: 1;
  margin-right: 7px; /* keine Ahnung warum das ein px weniger sein muss, als bei p.stretch > a, damit die Größe konsistent ist ...? */
}

p.stretch a button {
  width: 100%;
}

@media screen and (min-width: 600px) {
    /* nur am Handy anzeigen */
    #shortcutButtons {
        display: none;
    }
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.3);
    /*background: var(--colorBodyBG);*/
    /*opacity: 0.8;*/
    display: none;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(8px); /* Blurs the content behind the overlay */
    z-index: 1000;
}

.loader { /* https://css-loaders.com/spinner/ */
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: 
    radial-gradient(farthest-side,var(--colorFont) 94%,#0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%,var(--colorFont));
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
  animation: l13 1s infinite linear;
}
@keyframes l13{ 
  100%{transform: rotate(1turn)}
}