/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

/* — Reset — */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  font-family: Georgia, "Times New Roman", Times, serif;
  background: #f3f3f3;
  color: #333;
  font-size: 18px;
  line-height: 1.5;
}

/* — Grundstruktur — */
.box {
  width: 100%;
  max-width: 960px;
  margin: 60px auto;
}
.box .content {
  background: #fff;
  padding: 80px;
  border-bottom: 10px solid #eee;
  text-align: right;
}
.content h1 {
  font-size: 45px;
  line-height: 54px;
  font-weight: bold;
  width: 100%;
}
.content h2 {
  font-size: 27px;
  line-height: 36px;
  border-bottom: 2px solid #333;
  padding-bottom: 20px;
  margin-bottom: 50px;
}
.content p {
  font-size: 21px;
  line-height: 35px;
}
.content p .foo {
  font-family: Arial, Helvetica, sans-serif;
  color: #ccc;
  text-transform: uppercase;
  font-size: 15px;
  width: 100px;
  float: right;
}
.content p .bar {
  float: right;
  width: 340px;
}
.content .referenzen {
  display: block;
  clear: both;
  text-align: center;
  background: #aa0a36;
  margin-top: 60px;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  padding: 30px 0;
  font-size: 21px;
  text-transform: uppercase;
  letter-spacing: 8px;
  text-decoration: none;
}

/* — Anmelde-Button — */
#anmeldeBtn {
  display: block;
  position: fixed;
  top: 20px;
  left: 20px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #7b002c;
  color: #fff;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  z-index: 1000;
  transition: transform 0.2s ease-in-out;
}
#anmeldeBtn:hover {
  transform: scale(1.1);
}

/* — Modal-Hintergrund — */
#anmeldeModal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
}

/* — Modal-Dialogbox — */
#anmeldeModal .dialog {
  background: #fff;
  max-width: 420px;
  margin: 8vh auto;
  padding: 2rem 2.5rem;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.25);
}
#anmeldeModal h3 {
  margin-top: 0;
  color: #7b002c;
}
#anmeldeModal label {
  display: block;
  margin: 0.75rem 0 0.25rem;
  font-weight: 600;
}
#anmeldeModal input,
#anmeldeModal select {
  width: 100%;
  padding: 0.55rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* — Modal-Aktionsbereich — */
#anmeldeModal .actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
}
#anmeldeModal .actions button {
  padding: 0.55rem 1.1rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
#anmeldeModal .send {
  background: #7b002c;
  color: #fff;
}
#anmeldeModal .close {
  background: #aaa;
  color: #fff;
}

/* — Responsive Design — */
@media screen and (max-width: 480px) {
  .box .content {
    padding: 30px;
  }
  #anmeldeBtn {
    top: 15px;
    left: 15px;
    width: 80px;
    height: 80px;
    font-size: 0.9rem;
  }
}