html {
    --impressum-header-line-width: 3px;
    --impressum-header-height: 30vh;
    --impressum-header-hover-height: 35vh;
    --impressum-header-scrolled-height: 20vh;
    --impressum-header-scrolled-hover-height: 25vh;
    --ee-gold-dark: #E1A52A;
    --ee-gold-mid: #EDBD3C;
    --ee-gold-light: #F0C84D;
    --ee-gallery-gold-gradient: linear-gradient(45deg, var(--ee-gold-dark) 0%, var(--ee-gold-light) 50%, var(--ee-gold-dark) 100%);
    --gold-light-wave: -35%;
    --gold-light-wave-2: 50%;
    --gold-light-alpha-strong: 1;
    --gold-light-alpha-mid: 0.88;
    --gold-light-alpha-soft: 0.58;
    --gold-light-alpha-strong-2: 0.76;
    --gold-light-alpha-mid-2: 0.62;
    --gold-light-alpha-soft-2: 0.42;
    --gold-light-saturate: 3.15;
    --gold-light-contrast: 1.2;
    --gold-light-glow-a: 44px;
    --gold-light-glow-b: 118px;
    --ee-gold-laser-core-gradient:
        linear-gradient(45deg, rgba(255, 221, 72, 0) calc(var(--gold-light-wave) - 11%), rgba(246, 190, 30, var(--gold-light-alpha-soft)) calc(var(--gold-light-wave) - 6%), rgba(255, 203, 35, var(--gold-light-alpha-mid)) calc(var(--gold-light-wave) - 2%), rgba(255, 221, 72, var(--gold-light-alpha-strong)) var(--gold-light-wave), rgba(255, 203, 35, var(--gold-light-alpha-mid)) calc(var(--gold-light-wave) + 2%), rgba(246, 190, 30, var(--gold-light-alpha-soft)) calc(var(--gold-light-wave) + 6%), rgba(255, 221, 72, 0) calc(var(--gold-light-wave) + 11%)),
        linear-gradient(45deg, rgba(255, 221, 72, 0) calc(var(--gold-light-wave-2) - 11%), rgba(246, 190, 30, var(--gold-light-alpha-soft-2)) calc(var(--gold-light-wave-2) - 6%), rgba(255, 203, 35, var(--gold-light-alpha-mid-2)) calc(var(--gold-light-wave-2) - 2%), rgba(255, 221, 72, var(--gold-light-alpha-strong-2)) var(--gold-light-wave-2), rgba(255, 203, 35, var(--gold-light-alpha-mid-2)) calc(var(--gold-light-wave-2) + 2%), rgba(246, 190, 30, var(--gold-light-alpha-soft-2)) calc(var(--gold-light-wave-2) + 6%), rgba(255, 221, 72, 0) calc(var(--gold-light-wave-2) + 11%));
    --ee-gold-sweep-gradient:
        linear-gradient(45deg, rgba(225, 165, 42, 0) calc(var(--gold-light-wave) - 28%), rgba(225, 165, 42, var(--gold-light-alpha-soft)) calc(var(--gold-light-wave) - 18%), rgba(246, 190, 30, var(--gold-light-alpha-mid)) calc(var(--gold-light-wave) - 7%), rgba(255, 207, 45, var(--gold-light-alpha-strong)) var(--gold-light-wave), rgba(246, 190, 30, var(--gold-light-alpha-mid)) calc(var(--gold-light-wave) + 7%), rgba(225, 165, 42, var(--gold-light-alpha-soft)) calc(var(--gold-light-wave) + 18%), rgba(225, 165, 42, 0) calc(var(--gold-light-wave) + 28%)),
        linear-gradient(45deg, rgba(225, 165, 42, 0) calc(var(--gold-light-wave-2) - 28%), rgba(225, 165, 42, var(--gold-light-alpha-soft-2)) calc(var(--gold-light-wave-2) - 18%), rgba(246, 190, 30, var(--gold-light-alpha-mid-2)) calc(var(--gold-light-wave-2) - 7%), rgba(255, 207, 45, var(--gold-light-alpha-strong-2)) var(--gold-light-wave-2), rgba(246, 190, 30, var(--gold-light-alpha-mid-2)) calc(var(--gold-light-wave-2) + 7%), rgba(225, 165, 42, var(--gold-light-alpha-soft-2)) calc(var(--gold-light-wave-2) + 18%), rgba(225, 165, 42, 0) calc(var(--gold-light-wave-2) + 28%));
}

html,
body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none;
}

#menu ul {
    list-style-type: none;
    padding-left: 0;
}
#menu li::before {
    content: "► ";
    color: #800020;
    margin-right: 10px;
}
header{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    width: 100%;
    height: var(--impressum-header-height);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    transition: height 0.18s ease-in-out, padding 0.18s ease-in-out;
    border-bottom: var(--impressum-header-line-width) solid transparent;
    border-image: none;
    z-index: 5;
    box-sizing: border-box;
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: height;
}
header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--impressum-header-line-width);
    pointer-events: none;
    z-index: 3;
    background: var(--ee-gallery-gold-gradient);
    background-size: 100vw 100vh;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
header::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--impressum-header-line-width);
    pointer-events: none;
    z-index: 4;
    background: var(--ee-gold-laser-core-gradient), var(--ee-gold-sweep-gradient);
    background-size: 100vw 100vh;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    filter: saturate(var(--gold-light-saturate)) contrast(var(--gold-light-contrast)) drop-shadow(0 0 8px rgba(255, 215, 72, 1)) drop-shadow(0 0 var(--gold-light-glow-a) rgba(246, 213, 106, 1)) drop-shadow(0 0 var(--gold-light-glow-b) rgba(237, 189, 60, 0.95)) drop-shadow(0 0 calc(var(--gold-light-glow-b) * 1.65) rgba(240, 200, 77, 0.52));
    transform: translateZ(0);
    backface-visibility: hidden;
}
header:hover{
    height: var(--impressum-header-hover-height);
}
header.scrolled{
    height: var(--impressum-header-scrolled-height);
    padding: 0; /* Keine seitlichen Paddings beim Scroll-Zustand */
}
header.scrolled:hover{
    height: var(--impressum-header-scrolled-hover-height);
}
#video{
	width: 100%;
	height: 100%;
	position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
	object-fit: cover;
}
body {
  text-align: center;
  font-weight: bolder;
  font-family: "legitima", serif;
  margin: 0;
  width: 100%;
  min-height: 100%;
  display: block;
  position: relative;
  z-index: 1;
  overflow-x: hidden;
}

button,
input,
textarea,
select {
  font-family: "legitima", serif;
}

html,
body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  margin-top: var(--impressum-header-height);
  transition: margin-top 0.18s ease-in-out;
}
main.scrolled-main {
  margin-top: var(--impressum-header-scrolled-height);
}

/* Main anpassen wenn Header gehovered wird */
header:hover ~ main {
    margin-top: var(--impressum-header-hover-height);
}

/* Main anpassen wenn gescrollter Header gehovered wird */
header.scrolled:hover ~ main.scrolled-main {
    margin-top: var(--impressum-header-scrolled-hover-height);
}

body > main.impressum-kontakt-main {
    margin-top: var(--impressum-header-height);
}

body > header.scrolled ~ main.impressum-kontakt-main.scrolled-main {
    margin-top: var(--impressum-header-scrolled-height);
}

body > header:hover ~ main.impressum-kontakt-main {
    margin-top: var(--impressum-header-hover-height);
}

body > header.scrolled:hover ~ main.impressum-kontakt-main.scrolled-main {
    margin-top: var(--impressum-header-scrolled-hover-height);
}
.row{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0;
    padding: 0;
    flex: 1 1 0; min-width: 0; width: auto;
    height: 100%;
}
#menu{
    font-size: 3vh;
    list-style-type: none;
    padding-left: 0;
}
#menu li {
    color: #800020;
}
#menu a {
    color: #800020;
    text-decoration: none;
}
#hamburger{
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: visible;
}
.topmenu { 
    height: auto; 
    max-height: 0;
    overflow: hidden; 
    pointer-events: none;
    transition: all 0.1s;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 25%;
    transform: translateX(-25%);
    z-index: 30;
}
#hamburg:checked + .hamburg  + .topmenu { 
    height: 100%;
    max-height: 30vh;
    overflow: visible;
    pointer-events: auto;
}
label.hamburg { 
    width: 100%;
    height: 100%; 
    flex-wrap: wrap;
    margin-left: auto; margin-right: auto;
    border-radius: 4px; 
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    overflow: visible;
    background: transparent;
    z-index: 21;
}
.hamburg:hover{
    width: 100%; 
    height: 100%; 
}
 .line:nth-child(1):hover {
    background: var(--ee-gallery-gold-gradient);
    background-size: 100vw 100vh;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    transform: rotate(0deg);
    box-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
}
.line:nth-child(3):hover {
    background: var(--ee-gallery-gold-gradient);
    background-size: 100vw 100vh;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    transform: rotate(0deg);
    box-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
}

input#hamburg {display:none}

.line {
    height: 5px;
    width: 60px;
    background: black;
    border-radius: 5px;
    display: block;
    margin: 6px 0;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
    box-shadow: 0 0 6px rgba(0,0,0,0.3);
    z-index: 22;
    cursor: pointer;
}
.line:hover {
    background: var(--ee-gallery-gold-gradient);
    background-size: 100vw 100vh;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    box-shadow: 0 0 10px gold;
}

 .line:nth-child(1) { top: 5%; }
 .line:nth-child(2) { top: 5%; }
 .line:nth-child(3) { top: 5%; }


#hamburg:checked + .hamburg .line:nth-child(1) {
    transform: rotate(-45deg) translate(0%, 0%);
}

#hamburg:checked + .hamburg .line:nth-child(2) {
    opacity: 0;
}

#hamburg:checked + .hamburg .line:nth-child(3) {
    transform: rotate(45deg) translate(0%, 0%);
}
#EDZADa, #EDZAD {
    display: flex;
    justify-content: center;
    align-items: center;
}
#EDZADa{
    width: 100%;
    height: 90%;
    z-index: 2;
}
#EDZAD{
    object-fit: contain;
    max-height: 100%;
    width: auto;
    height: 100%;
    transition: transform 0.3s ease-in-out;
}
#EDZAD:hover{
    transform: scale(1.08);
}
@keyframes pulse-rotate {
    0% { transform: rotate(90deg) scale(1); }
    50% { transform: rotate(90deg) scale(1.15); }
    100% { transform: rotate(90deg) scale(1); }
}
#hover-Knopf{
    width: 100%;
    height: 60%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0;
    padding: 0;
    transition: transform 0.3s ease-in-out;
}
#Anmeldeknopf{
    object-fit: contain;
    /* Skaliert responsiv, begrenzt auf sinnvolle Max-Size */
    width: clamp(36px, 4vw, 80px);
    height: auto;
    cursor: pointer;
    animation: pulse-rotate 5s infinite;
    animation-fill-mode: forwards;
    transition: transform 0.3s ease-in-out;
}

/* Ab 900px: auf Desktop bewusst kleiner halten */
@media (min-width: 900px) {
  #Anmeldeknopf {
    width: clamp(28px, 2vw, 48px);
  }
}
#Abmeldeknopf{
    display: none;
    object-fit: contain;
    max-width: 100%;
    max-height: 20%;
}
#hover-Knopf:hover{
    transform: scale(1.5);
}
.impressum-section, .kontakt-section {
  width: 22%;
  min-width: 22%;
  max-width: 100%;
  padding: 0.75em 0.5em;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  box-sizing: border-box;
}
.impressum-section {
  background: var(--ee-gallery-gold-gradient);
  background-size: 100vw 100vh;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  border: 0;
  border-image: none;
  color: #1b1405;
  box-shadow: 0 8px 18px rgba(2, 8, 20, 0.35);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.impressum-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--ee-gold-laser-core-gradient), var(--ee-gold-sweep-gradient);
  background-size: 100vw 100vh;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  filter: saturate(var(--gold-light-saturate)) contrast(var(--gold-light-contrast)) drop-shadow(0 0 8px rgba(255, 215, 72, 1)) drop-shadow(0 0 var(--gold-light-glow-a) rgba(246, 213, 106, 1)) drop-shadow(0 0 var(--gold-light-glow-b) rgba(237, 189, 60, 0.95)) drop-shadow(0 0 calc(var(--gold-light-glow-b) * 1.65) rgba(240, 200, 77, 0.52));
}
.impressum-section > * {
  position: relative;
  z-index: 1;
}
.kontakt-section {
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  box-shadow: 0 8px 18px rgba(2, 8, 20, 0.35);
}
.impressum-kontakt-main {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
.impressum-und-contact-and {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, 30px);
  font-size: 5em;
  font-weight: bold;
  z-index: 2;
  pointer-events: none;
  color: #fff;
}
.impressum-section h2 {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  font-size: 2.5em;
  background: #000;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}
.impressum-section p {
  text-align: justify;
}
.kontakt-form {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  align-items: stretch;
  flex: 1;
  justify-content: space-between;
  height: 100%;
}
.kontakt-form label,
.kontakt-field-frame,
.kontakt-form input,
.kontakt-form textarea,
.kontakt-btn {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  font-size: 1.2em;
}
.kontakt-field-frame {
  --kontakt-field-frame-width: 3px;
  display: block;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  font-size: inherit;
  border: var(--kontakt-field-frame-width) solid transparent;
  border-radius: 6px;
  background:
    linear-gradient(#222, #222) padding-box,
    var(--ee-gallery-gold-gradient) border-box;
  background-size: auto, 100vw 100vh;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-attachment: scroll, fixed;
}
.kontakt-field-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background: var(--ee-gold-laser-core-gradient), var(--ee-gold-sweep-gradient);
  background-size: 100vw 100vh;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  filter: saturate(var(--gold-light-saturate)) contrast(var(--gold-light-contrast)) drop-shadow(0 0 8px rgba(255, 215, 72, 1)) drop-shadow(0 0 var(--gold-light-glow-a) rgba(246, 213, 106, 1)) drop-shadow(0 0 var(--gold-light-glow-b) rgba(237, 189, 60, 0.95)) drop-shadow(0 0 calc(var(--gold-light-glow-b) * 1.65) rgba(240, 200, 77, 0.52));
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% var(--kontakt-field-frame-width) no-repeat,
    linear-gradient(#000 0 0) bottom / 100% var(--kontakt-field-frame-width) no-repeat,
    linear-gradient(#000 0 0) left / var(--kontakt-field-frame-width) 100% no-repeat,
    linear-gradient(#000 0 0) right / var(--kontakt-field-frame-width) 100% no-repeat;
  mask:
    linear-gradient(#000 0 0) top / 100% var(--kontakt-field-frame-width) no-repeat,
    linear-gradient(#000 0 0) bottom / 100% var(--kontakt-field-frame-width) no-repeat,
    linear-gradient(#000 0 0) left / var(--kontakt-field-frame-width) 100% no-repeat,
    linear-gradient(#000 0 0) right / var(--kontakt-field-frame-width) 100% no-repeat;
}
.kontakt-form input,
.kontakt-form textarea {
  display: block;
  position: relative;
  z-index: 2;
  padding: 1em;
  border: 0;
  border-radius: calc(6px - var(--kontakt-field-frame-width, 3px));
  font-size: 1.2em;
  font-family: inherit;
  background: #222;
  color: #fff;
  outline: none;
}
.kontakt-form input::placeholder,
.kontakt-form textarea::placeholder {
  color: #fff;
  opacity: 1;
}
.kontakt-btn {
  background: var(--ee-gallery-gold-gradient);
  background-size: 100vw 100vh;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: #1b1405;
  border: none;
  border-radius: 6px;
  padding: 1em 2em;
  font-weight: bold;
  cursor: pointer;
  font-size: 1.2em;
  transition: background 0.2s, color 0.2s;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  box-shadow: 0 8px 18px rgba(2, 8, 20, 0.35);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.kontakt-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: var(--ee-gold-laser-core-gradient), var(--ee-gold-sweep-gradient);
  background-size: 100vw 100vh;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  filter: saturate(var(--gold-light-saturate)) contrast(var(--gold-light-contrast)) drop-shadow(0 0 8px rgba(255, 215, 72, 1)) drop-shadow(0 0 var(--gold-light-glow-a) rgba(246, 213, 106, 1)) drop-shadow(0 0 var(--gold-light-glow-b) rgba(237, 189, 60, 0.95)) drop-shadow(0 0 calc(var(--gold-light-glow-b) * 1.65) rgba(240, 200, 77, 0.52));
}
.kontakt-btn span {
  position: relative;
  z-index: 1;
}
.kontakt-btn {
  text-shadow: 0 0 0 currentColor;
}
.kontakt-section h2 {
  position: relative;
  background: var(--ee-gallery-gold-gradient);
  background-size: 100vw 100vh;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-size: 2.5em;
}
.kontakt-section h2::after {
  content: attr(data-light-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--ee-gold-laser-core-gradient), var(--ee-gold-sweep-gradient);
  background-size: 100vw 100vh;
  background-position: 0 0;
  background-repeat: no-repeat;
  background-attachment: fixed;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  filter: saturate(var(--gold-light-saturate)) contrast(var(--gold-light-contrast)) drop-shadow(0 0 8px rgba(255, 215, 72, 1)) drop-shadow(0 0 var(--gold-light-glow-a) rgba(246, 213, 106, 1)) drop-shadow(0 0 var(--gold-light-glow-b) rgba(237, 189, 60, 0.95)) drop-shadow(0 0 calc(var(--gold-light-glow-b) * 1.65) rgba(240, 200, 77, 0.52));
  transform: translateZ(0);
  backface-visibility: hidden;
}
.kontakt-btn:hover {
  filter: brightness(1.05);
}
footer {
  width: 100%;
  height: auto;
  position: static; /* direkt unter .kontakt-section im Dokumentenfluss */
  left: auto;
  bottom: auto;
  z-index: 3;
  text-align: center;
  margin-top: 0; /* ohne Abstand klebend darunter */
}

/* Bis 1100px: Footer unter dem Inhalt platzieren,
   horizontal zentriert und direkt unter .kontakt-section klebend */
@media (max-width: 1100px) {
  footer {
    z-index: 1;
  }
}

/* Mobile: Stapeln und &-Zentrierung */
@media (max-width: 600px) {
  .impressum-kontakt-main {
    flex-direction: column;
    gap: 0;
  }
  .impressum-section, .kontakt-section {
    width: 100%;
    max-width: 100%;
  }
  .impressum-und-contact-and {
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/* Hamburger-Linien unter 1300px länger (per JS .hamburger-wide) */
.hamburger-wide .line {
  width: 14%;
}
.hamburger-wide .line:hover {
  width: 14%;
}

/* Zusätzliche Regel: unter 800px noch länger (ohne dicker zu werden) */
.hamburger-wide-800 .line {
  width: 18%;
}
.hamburger-wide-800 .line:hover {
  width: 18%;
}

/* Zusätzliche Regel: unter 500px noch deutlich länger (ohne dicker) */
.hamburger-wide-500 .line {
  width: 24%;
}
.hamburger-wide-500 .line:hover {
  width: 24%;
}

/* Unter 900px: Hamburger-Linien deutlich dünner */
@media (max-width: 900px) {
  /* Mehr vertikaler Abstand zwischen den Linien */
  .hamburg {
    gap: clamp(5px, 1.25vh, 11px);
  }
  .hamburg .line {
    height: 1.2%;
    margin: 0; /* Abstand über gap steuern */
  }
  .hamburg .line:hover {
    height: 0.6%;
  }
}

/* Unter 400px: Linienlänge dynamisch je schmaler der Viewport */
.hamburger-dynamic-400 .line {
  width: var(--hamburger-line-width, 24%);
}
.hamburger-dynamic-400 .line:hover {
  width: var(--hamburger-line-width, 24%);
}

/* Unter 600px: Anmeldeknopf skaliert mit Breite (ohne 36px-Untergrenze) */
@media (max-width: 600px) {
  #Anmeldeknopf {
    /* Bei 600px ≈ 36px, bei 320px ≈ 19px */
    width: clamp(18px, 6vw, 36px);
  }
}




/* Einheitliche Header-Control-Groessen wie auf ecruselvedgedenim.php */
.line,
.hamburger-wide .line,
.hamburger-wide-800 .line,
.hamburger-wide-500 .line,
.hamburger-dynamic-400 .line {
    height: 7px !important;
    width: 78px !important;
    background: black !important;
    border-radius: 8px !important;
    display: block !important;
    margin: 7px 0 !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    transition: background 0.2s, box-shadow 0.2s, transform 0.2s !important;
    box-shadow: 0 0 6px rgba(0,0,0,0.3) !important;
}

.line::after,
.hamburger-wide .line::after,
.hamburger-wide-800 .line::after,
.hamburger-wide-500 .line::after,
.hamburger-dynamic-400 .line::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: var(--ee-gold-laser-core-gradient), var(--ee-gold-sweep-gradient);
    background-size: 100vw 100vh;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    filter: saturate(var(--gold-light-saturate)) contrast(var(--gold-light-contrast)) drop-shadow(0 0 8px rgba(255, 215, 72, 1)) drop-shadow(0 0 var(--gold-light-glow-a) rgba(246, 213, 106, 1)) drop-shadow(0 0 var(--gold-light-glow-b) rgba(237, 189, 60, 0.95)) drop-shadow(0 0 calc(var(--gold-light-glow-b) * 1.65) rgba(240, 200, 77, 0.52));
    transform: translateZ(0);
    backface-visibility: hidden;
}

.line:hover,
.hamburger-wide .line:hover,
.hamburger-wide-800 .line:hover,
.hamburger-wide-500 .line:hover,
.hamburger-dynamic-400 .line:hover {
    background: var(--ee-gallery-gold-gradient) !important;
    background-size: 100vw 100vh !important;
    background-position: 0 0 !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    box-shadow: 0 0 10px gold !important;
}

.line:hover::after,
.hamburger-wide .line:hover::after,
.hamburger-wide-800 .line:hover::after,
.hamburger-wide-500 .line:hover::after,
.hamburger-dynamic-400 .line:hover::after {
    opacity: 1;
}

#Anmeldeknopf {
    width: 31% !important;
}

#hover-Knopf {
    width: calc(100vw / 11) !important;
}

#Abmeldeknopf {
    max-height: 31% !important;
}