*{box-sizing:border-box;margin:0;padding:0}

/* rajdhani-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/rajdhani-v17-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* rajdhani-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/rajdhani-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* rajdhani-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 500;
  src: url('/fonts/rajdhani-v17-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* rajdhani-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 600;
  src: url('/fonts/rajdhani-v17-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* rajdhani-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 700;
  src: url('/fonts/rajdhani-v17-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
	
	
	
body{
   
    background:#000;
    color:#fff;
	
	 font-family: 'Rajdhani';
  font-style: normal;
  font-weight: 300;
	
}

	
	
	
.hero{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

/* ---------------- LOGO AREA ---------------- */

.logo-area{
    background:#ffffff;
    padding:50px 20px 40px 20px;
    text-align:center;
}

.logo-area img{
    max-width:500px;
    width:90%;
    height:auto;
}

/* ---------------- OPENING AREA ---------------- */


.opening-area{
    flex:1;
    position:relative;

    background:#000;
    background-image:url('bg.jpeg');
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;
    padding:60px 20px;
}

/* dunkles Overlay für Transparenz */
.opening-area::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.45); /* Transparenz einstellen */
    z-index:0;
}

/* Inhalt über das Overlay legen */
.opening-content{
    position:relative;
    z-index:1;
}	
	
	
.opening-content{
    max-width:1000px;
}

.headline{
    font-size:clamp(47px,8vw,120px);
    font-weight:900;
    letter-spacing:0.04em;
    text-transform:uppercase;
}

.date-small{
    margin-top:80px;
    font-size:clamp(24px,3vw,60px);
    font-weight:700;
    letter-spacing:0.06em;
    text-transform:uppercase;
}

.month{
    font-size:clamp(90px,14vw,220px);
    font-weight:900;
    line-height:0.9;
    text-transform:uppercase;
}

.domain{
    margin-top:120px;
    font-size:clamp(16px,2vw,30px);
    letter-spacing:0.08em;
}

.domain a{
    color:#fff;
    text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,0.3);
    padding-bottom:4px;
}

.domain a:hover{
    border-color:#fff;
}

@media (max-width:768px){

.logo-area{
    padding:35px 20px 25px 20px;
}

.date-small{
    margin-top:60px;
}

.domain{
    margin-top:80px;
}

}