@media (max-width: 900px){

.hero{
display:flex;
flex-direction:column;
}

/* Buttons unter das Bild */
.service-buttons{
position:static;
transform:none;
flex-direction:column;
align-items:center;
gap:20px;
margin:25px 0 40px;
}

.service-buttons img{
width:90%;
height:auto;
}

.menu{
flex-direction:column;
gap:12px;
align-items:center;
width:100%;
}

.menu li{
width:100%;
text-align:center;
}

.menu a{
font-size:20px;
white-space:normal;   /* ⭐ GANZ wichtig */
}

body{
overflow-x:hidden;    /* verhindert seitliches Schieben */
}


/* Buttons NICHT absolut */
.service-buttons{
position:static;
transform:none;
display:flex;
flex-direction:column;
align-items:center;
gap:20px;
margin:25px 0 40px;
z-index:1;
}

/* Bilder skalieren */
.service-buttons img{
width:90%;
height:auto;
}

/* Menü Abstand nach oben */
.gold-bar{
margin-top:20px;
}

}




body
{
 background-color:black;
}

body{
margin:0;
background:#000;
font-family:"Times New Roman",serif;
color:#eaeaea;
}

/* HEADER */
.header-top{padding:0 80px;background:#000;}
.logo img{height:160px;display:block;}

/* GOLD BAR */
.gold-bar{
width:100%;
padding:12px 0;
display:flex;
justify-content:center;
background:linear-gradient(to bottom,#fffdd8,#d4af37,#a87400);
}

/* MENU */
.menu{
    list-style:none;
    display:flex;
    gap:60px;
    margin:0;
    padding:0;
}

.menu li{
    display:inline-block;
}

.menu a{
    display:inline-block;
    text-decoration:none;
    font-weight:bold;
    font-size:24px;
    white-space:nowrap;
    transform-origin:center center;
    transition:transform 0.6s ease, color 0.3s ease;
    color:#111;
    text-shadow:
        0 -3px 0 rgba(255,255,255,0.75),
        0 4px 6px rgba(0,0,0,0.95),
        2px 3px 6px rgba(0,0,0,0.85);
}

.menu li:hover a{
    transform:rotateY(360deg);
    color:#bdbdbd;
    text-shadow:
        0 -3px 0 #f5f5f5,
        0 -1px 0 #dcdcdc,
        0 2px 0 #6f6f6f,
        0 4px 6px rgba(0,0,0,0.95),
        2px 3px 6px rgba(0,0,0,0.85);
}

/* HERO BACKGROUND */
.hero{
width:100%;
height:clamp(320px,60vh,800px);

background:url("/haus.jpg") center / cover no-repeat;
}

/* BUTTONS OVER HERO */
.service-buttons{
position:absolute;
bottom:60px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:40px;
}

.service-buttons a img{
display:block; /* Originalgröße */
box-shadow:0 15px 30px rgba(0,0,0,.7);
transition:.3s;
}

.service-buttons a:hover img{
transform:translateY(-6px) scale(1.05);
}

.footer-gold .menu{justify-content:center;}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  display: table;
  background-color: black;
}

@font-face {
  font-family: times;

}

.text {
    font-size: 1.2em;
    font-family: 'Droid Serif', serif
    background-color: #ccc;
    margin: 10px;
    padding: 10px;
}

.neon {
  font-family: times;
  color: #FB4264;
  font-size: 1.5vw;
  line-height: 1.5vw;
  text-shadow: 0 0 3vw #F40A35;
     margin: 10px;
    padding: 0px;
}

.flux {
  font-family: times;
  color: #426DFB;
  font-size: 3vw;
  line-height: 3vw;
  text-shadow: 0 0 3vw #2356FF;
}
.owl {
  font-family: times;
  color: red;
  font-size: 1vw;
  line-height: 1vw;
  text-shadow: 0 0 3vw grey;
}
.static {
  font-family: times;
  color: gold;
  font-size: 2vw;
  line-height: 2vw;
  text-shadow: 3 0 5vw brown;

}
.owl {
    animation: owl 22s ease infinite;
  -moz-animation: owl 22s ease infinite;
  -webkit-animation: owl 22s ease infinite;
}

.neon {
  animation: neon 12s ease infinite;
  -moz-animation: neon 12s ease infinite;
  -webkit-animation: neon 12s ease infinite;
}
.static {
  animation: static 12s ease infinite;
  -moz-animation: static 12s ease infinite;
  -webkit-animation: static 12s ease infinite;
}

.glow {
  color: #red;
  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 10px #red, 0 0 20px #red, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  to {
    text-shadow: 0 0 20px #red, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}


@keyframes static {
  0%,
  100% {
      text-shadow: 0 0 1vw blue, 0 0 3vw blue, 0 0 10vw blue, 0 0 10vw blue, 0 0 .4vw #navy, .5vw .5vw .1vw navy;
    color: navy;
  }
  10% {
          text-shadow:  0 0 .4vw gold, .5vw .5vw .1vw black;
    color: brown;
  }
}

@keyframes neon {
  0%,
  100% {
      text-shadow: 0 0 1vw #FA1C16, 0 0 3vw #FA1C16, 0 0 10vw #FA1C16, 0 0 10vw #FA1C16, 0 0 .4vw #FED128, .5vw .5vw .1vw #806914;
    color: #FED128;
  }
  50% {
    text-shadow: 0 0 .5vw #800E0B, 0 0 1.5vw #800E0B, 0 0 5vw #800E0B, 0 0 5vw #800E0B, 0 0 .2vw #800E0B, .5vw .5vw .1vw #40340A;
    color: #806914;
  }
}

.flux {
  animation: flux 12s linear infinite;
  -moz-animation: flux 12s linear infinite;
  -webkit-animation: flux 12s linear infinite;
  -o-animation: flux 12s linear infinite;
}

@keyframes flux {
  0%,
  100% {
    text-shadow: 0 0 1vw #1041FF, 0 0 3vw #1041FF, 0 0 10vw #1041FF, 0 0 10vw #1041FF, 0 0 .4vw #8BFDFE, .5vw .5vw .1vw #147280;
    color: #28D7FE;
  }
  50% {
    text-shadow: 0 0 .5vw #082180, 0 0 1.5vw #082180, 0 0 5vw #082180, 0 0 5vw #082180, 0 0 .2vw #082180, .5vw .5vw .1vw #0A3940;
    color: #146C80;
  }
}

@keyframes owl {
  0%,
  60% {

    text-shadow: 0 0 1vw yellow, 0 0 3vw orange, 0 0 1vw pink, 0 0 1vw white, 0 0 .4vw purple, .5vw .5vw .1vw orange;
    color: gold;
  }
  30% {
    text-shadow: 0 0 .5vw orange, 0 0 1.5vw lime, 0 0 5vw yellow, 0 0 5vw white, 0 0 .2vw purple, .5vw .5vw .1vw white;
    color: red;
  }
}

.glowing-text {

  color: #fff;
  text-align: center;
  -webkit-animation: glowing-text 1s ease-in-out infinite alternate;
  -moz-animation: glowing-text 1s ease-in-out infinite alternate;
  animation: glowing-text 1s ease-in-out infinite alternate;
}
@-webkit-keyframes glowing-text {
  0% {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #2e00e6, 0 0 40px #6300e6, 0 0 50px #c300e6, 0 0 60px #e200e6, 0 0 70px #e600ca;
}

  100% {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}

.embossed{
  color: black;
  font-size: 16px;
  font-family: Times;
  background-color: #666666;
  text-shadow: 1px 4px 4px #555;
  text-align: left;
  -webkit-background-clip: text;
    -moz-background-clip: text;

}


#bellButton
{
	border: none;
	padding: 0;
	background: transparent;
	cursor: pointer;
}

#bellButton::-moz-focus-inner
{
	margin: 0;
	border-width: 0;
	padding: 0;
}

#bellButton:focus
{
	outline: 3px solid white;
}

#bellButton img
{
	display: block;
}

footer
{
	font-family: sans-serif;
}