<link href="https://fonts.googleapis.com/css2?family=Eagle+Lake&display=swap" rel="stylesheet">

<style>
/* 2-kolonne række der bryder ud og går helt til kanten */
.sr-row-wrap{
width: 100vw;
margin-left: calc(50% - 50vw);
display: grid;
grid-template-columns: 1fr 340px; /* venstre tekst | højre login */
gap: 40px;
align-items: start;
padding: 0 40px 0 40px; /* luft i begge sider */
box-sizing: border-box;

isolation: isolate;
}

/* venstre tekst */
.sr-left{
min-width: 0;
}

/* højre kolonne holder login helt til højre */
.sr-right{
display: flex;
justify-content: flex-end;
}

/* Subtil metal/rose puls */
@keyframes srGlow {
0% { box-shadow: 0 0 6px rgba(120,0,0,0.15); }
50% { box-shadow: 0 0 14px rgba(120,0,0,0.25); }
100% { box-shadow: 0 0 6px rgba(120,0,0,0.15); }
}

/* Login box – (samme look som du kan lide) */
.sr-login-box{
width: 340px;
padding: 26px 26px;

background: linear-gradient(
160deg,
rgba(25,25,30,0.85) 0%,
rgba(18,18,22,0.90) 60%,
rgba(45,10,15,0.85) 100%
);

border: 1px solid rgba(160,50,60,0.25);
border-radius: 12px;
backdrop-filter: blur(6px);

animation: srGlow 10s ease-in-out infinite;
color: #eaeaea;
}

/* Titel */
.sr-login-title{
font-family: 'Eagle Lake', cursive;
font-size: 22px;
text-align: center;
margin-bottom: 20px;
color: #f2f2f2;
letter-spacing: 1px;
text-shadow: 0 0 6px rgba(180,60,60,0.25);
}

/* Inputs */
.sr-login-box input[type="text"],
.sr-login-box input[type="password"]{
width: 100%;
padding: 10px 12px;
margin: 8px 0 14px 0;
border-radius: 6px;
border: 1px solid rgba(120,120,130,0.3);
background: rgba(0,0,0,0.55);
color: #fff;
font-size: 15px;
box-sizing: border-box;
transition: 0.2s;
}

.sr-login-box input[type="text"]:focus,
.sr-login-box input[type="password"]:focus{
border-color: rgba(180,70,70,0.5);
box-shadow: 0 0 8px rgba(120,0,0,0.4);
outline: none;
}

/* Knapper + spacing */
.sr-login-box button,
.sr-login-box input[type="submit"],
.sr-login-box .btn,
.sr-login-box .btn-primary{
width: 100%;
padding: 10px;
margin-bottom: 12px;

background: linear-gradient(90deg, rgba(35,35,40,1), rgba(55,15,20,1));
border: 1px solid rgba(150,60,60,0.35);
border-radius: 6px;

color: #eaeaea;
font-weight: bold;
font-size: 15px;
cursor: pointer;
transition: 0.25s;
}

.sr-login-box button:hover,
.sr-login-box input[type="submit"]:hover,
.sr-login-box .btn:hover{
border-color: rgba(200,80,80,0.6);
box-shadow: 0 0 10px rgba(120,0,0,0.5);
}

/* Skjul evt. modul titel */
.sr-login-box .module-title,
.sr-login-box h1,
.sr-login-box h2,
.sr-login-box h3{
display: none !important;
}

/* Mobil: tekst over login */
@media (max-width: 980px){
.sr-row-wrap{
grid-template-columns: 1fr;
padding: 0 20px;
}
.sr-right{
justify-content: flex-start;
}
.sr-login-box{
width: min(340px, 92vw);
}
}
</style>

<div class="sr-row-wrap">

<!-- VENSTRE: her skriver du dit indhold -->
<div class="sr-left">
<h2>Nyheder</h2>
<p>Skriv din tekst her – den kommer til venstre for login-formen.</p>

<h2>Events</h2>
<p>Her kan du skrive om kommende events, regler, rally info, osv.</p>

<p><strong>Dette er en test!</strong></p>
</div>

<!-- HØJRE: login (samme modul) -->
<div class="sr-right">
<div class="sr-login-box">
<div class="sr-login-title">Sword&Rose Login</div>

</div>
</div>

</div>{/source}

 {source}<style>
/* Ren, stabil: pres login til højre uden 100vw/calc */
.sr-login-container{
display:flex;
justify-content:flex-end;
margin: 20px 0 30px 0;
}
.sr-login-box{
width: 340px;
padding: 18px;
background: rgba(0,0,0,0.45);
border: 1px solid rgba(160,50,60,0.25);
border-radius: 12px;
}
</style>

<div class="sr-login-container">
<div class="sr-login-box">

</div>
</div>