body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:#f4f6f9;
    color:#333;
}

.hps-main{
    width:100%;
}

/* =========================
   STATS
========================= */

.stats{
    display:grid;
    grid-template-columns:repeat(6, minmax(150px, 180px));
    justify-content:center;
    gap:20px;
    max-width:900px;
    margin:30px auto 20px auto;
}

.stat{
    background:#ffffff;
    padding:15px 20px;
    border-radius:8px;
    box-shadow:0 2px 6px rgba(0,0,0,0.08);
    text-align:center;
    font-size:14px;
}

.stat strong{
    display:block;
    font-size:22px;
    color:#0d3b66;
    margin-bottom:6px;
}

/* =========================
   LATEST
========================= */

.latest{
    text-align:left;
    margin:25px 0 10px 0;
}

.latest h3{
    margin:0 0 15px 0;
    font-size:18px;
    color:#222;
}

.latest ul{
    list-style:none;
    padding:0;
    margin:0;
}

.latest li{
    margin:8px 0;
}

.latest a{
    color:#0d3b66;
    text-decoration:none;
}

.latest a:hover{
    text-decoration:underline;
}

/* =========================
   SINGLE INFO BOX
========================= */

.center-box{
    display:flex;
    justify-content:center;
    margin:20px auto 15px auto;
}

/* =========================
   HERO
========================= */

.hero{
    text-align:center;
    padding:45px 20px 25px 20px;
}

.hero h2{
    font-size:34px;
    margin:0 0 20px 0;
    color:#222;
}

.hero p{
    font-size:18px;
    max-width:700px;
    margin:0 auto;
    line-height:1.45;
}

/* =========================
   BUTTONS
========================= */

.buttons{
    margin-top:35px;
}

.btn{
    display:inline-block;
    padding:15px 30px;
    margin:10px;
    font-size:16px;
    text-decoration:none;
    border-radius:6px;
    transition:0.2s;
}

.btn-primary{
    background:#ff7a00;
    color:#ffffff;
}

.btn-secondary{
    background:#0d3b66;
    color:#ffffff;
}

.btn:hover{
    opacity:0.92;
}

/* =========================
   FEATURES
========================= */

.features{
    display:grid;
    grid-template-columns:repeat(2, 260px);
    justify-content:center;
    gap:30px;
    max-width:700px;
    margin:30px auto 70px auto;
}

.feature{
    background:#ffffff;
    padding:30px;
    width:260px;
    min-height:180px;
    border-radius:8px;
    box-shadow:0 5px 15px rgba(0,0,0,0.08);
    text-align:left;
}

.feature h3{
    margin:0 0 18px 0;
    color:#0d3b66;
    font-size:18px;
}

.feature p{
    margin:0;
    line-height:1.35;
}

.feature a{
    color:#0d3b66;
    text-decoration:underline;
    font-weight:bold;
}

/* =========================
   FORM PAGES
========================= */

.container{
    width:420px;
    margin:80px auto;
    background:#ffffff;
    padding:30px;
    border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

.container h2{
    margin-top:0;
    text-align:center;
}

.container input{
    width:100%;
    padding:10px;
    margin-top:5px;
    margin-bottom:15px;
    border:1px solid #ccc;
    border-radius:4px;
}

.container button{
    width:100%;
    padding:10px;
    background:#0077cc;
    color:#ffffff;
    border:none;
    border-radius:4px;
    cursor:pointer;
}

.container button:hover{
    background:#005fa3;
}

.msg{
    margin-top:10px;
    color:green;
    text-align:center;
}

.form-links a{
    display:block;
    text-align:center;
    margin-top:15px;
    color:#0077cc;
    text-decoration:none;
}

.form-links a:hover{
    text-decoration:underline;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 900px){
    .stats{
        grid-template-columns:repeat(2, minmax(150px, 180px));
    }
}

@media (max-width: 700px){
    .features{
        grid-template-columns:repeat(1, 260px);
    }

    .stats{
        grid-template-columns:repeat(1, minmax(150px, 220px));
    }
}
	.feature{
transition:0.2s;
}

.feature:hover{
transform:translateY(-4px);
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

/* ================================
   DASHBOARD
================================ */

.dashboard{
max-width:1100px;
margin:40px auto;
padding:20px;
}

.dashboard h2{
text-align:center;
margin-bottom:10px;
}

.welcome{
text-align:center;
margin-bottom:30px;
}

.dash-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
margin-top:30px;
}

.dash-card{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 4px 14px rgba(0,0,0,0.08);
text-align:center;
}

.dash-card h3{
margin-top:0;
color:#0d3b66;
}

.dash-btn{
display:inline-block;
margin-top:15px;
padding:10px 20px;
background:#0d3b66;
color:white;
text-decoration:none;
border-radius:6px;
}

.dash-btn:hover{
background:#0a2e4d;
}

.dash-btn.danger{
background:#c0392b;
}

.dash-btn.danger:hover{
background:#a93226;
}
.dashboard{
max-width:1100px;
margin:60px auto;
padding:20px;
}
/* ================================
   DASHBOARD
================================ */

.dashboard{
max-width:1100px;
margin:40px auto;
padding:20px;
}

.dashboard h2{
text-align:center;
margin-bottom:10px;
}

.welcome{
text-align:center;
margin-bottom:30px;
}

.dash-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
margin-top:30px;
}

.dash-card{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 4px 14px rgba(0,0,0,0.08);
text-align:center;
}

.dash-card h3{
margin-top:0;
color:#0d3b66;
}

.dash-btn{
display:inline-block;
margin-top:15px;
padding:10px 20px;
background:#0d3b66;
color:white;
text-decoration:none;
border-radius:6px;
}

.dash-btn:hover{
background:#0a2e4d;
}

.dash-btn.danger{
background:#c0392b;
}

.dash-btn.danger:hover{
background:#a93226;
}
/* =========================
   DASHBOARD KPIs
========================= */

/* KPI GRID */

.kpi-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
gap:20px;
margin:30px 0;
}

.kpi{
background:white;
padding:15px;
border-radius:8px;
box-shadow:0 4px 10px rgba(0,0,0,0.08);
text-align:center;
}

.kpi strong{
display:block;
font-size:22px;
color:#0d3b66;
margin-bottom:5px;
}
.kpi{
transition:0.2s;
}

.kpi:hover{
transform:translateY(-3px);
box-shadow:0 10px 25px rgba(0,0,0,0.12);
}
.kpi strong{
font-size:26px;
font-weight:bold;
color:#0d3b66;
}
/* =========================
   TRAFFIC WIDGET
========================= */

.traffic-box{
max-width:600px;
margin:20px auto 40px auto;
text-align:center;
}

.traffic-box h3{
margin-bottom:15px;
color:#0d3b66;
}

.traffic-grid{
display:grid;
grid-template-columns:repeat(2,200px);
justify-content:center;
gap:25px;
}

.traffic-item{
background:white;
padding:20px;
border-radius:8px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.traffic-item strong{
display:block;
font-size:26px;
color:#0d3b66;
margin-bottom:6px;
}

/* =========================
   TABLE
========================= */

.hps-table{
width:100%;
border-collapse:collapse;
margin-top:20px;
}

.hps-table th{
background:#0d3b66;
color:white;
padding:10px;
text-align:left;
}

.hps-table td{
padding:10px;
border-bottom:1px solid #e5e5e5;
}

.hps-table tr:hover{
background:#f6f9fc;
}

/* =========================
   BADGES
========================= */

.badge{
padding:4px 10px;
border-radius:6px;
font-size:12px;
font-weight:bold;
}

.badge.ok{
background:#d4edda;
color:#1e7e34;
}

.badge.wait{
background:#fff3cd;
color:#856404;
}

/* =========================
   ACTION BUTTONS
========================= */

.dash-actions{
display:flex;
gap:15px;
justify-content:center;
margin-bottom:20px;
flex-wrap:wrap;
}

/* =========================
   STICKY FOOTER
========================= */

html, body{
height:100%;
}

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

.hps-main{
flex:1;
}

.empty{
text-align:center;
margin-top:20px;
color:#777;
}

.hps-table img{
border-radius:6px;
box-shadow:0 2px 6px rgba(0,0,0,0.1);
}

/* =========================
   BANNER CODE
========================= */

.banner-code-box{
background:white;
padding:20px;
margin:20px auto;
border-radius:8px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
max-width:500px;
text-align:center;
}

.banner-code-box textarea{
width:100%;
height:100px;
margin-top:10px;
font-family:monospace;
padding:10px;
border-radius:6px;
border:1px solid #ccc;
resize:none;
}

/* =========================
   TABLES
========================= */

.hps-table{
width:100%;
border-collapse:collapse;
margin-top:10px;
}

.hps-table th{
background:#0d3b66;
color:white;
padding:12px;
text-align:center;
}

.hps-table td{
padding:10px;
border-bottom:1px solid #ddd;
text-align:center;
}

.hps-table tr:hover{
background:#f2f6fa;
}

.success-box{
background:#e8f8ec;
border:1px solid #b7e1c1;
padding:15px;
border-radius:6px;
margin-bottom:15px;
}

.form-group{
margin-bottom:15px;
}

.form-group input,
.form-group textarea{
width:100%;
padding:8px;
border:1px solid #ccc;
border-radius:4px;
}

.support-alert{
background:#ffffff;
border-left:5px solid #ff7a00;
padding:20px;
margin:30px 0;
border-radius:8px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
max-width:700px;
}

.support-alert h3{
margin-top:0;
color:#333;
font-size:18px;
}

.support-alert p{
margin:10px 0 20px;
color:#555;
}

.support-btn{
background:#ff7a00;
color:white;
padding:10px 18px;
border-radius:6px;
text-decoration:none;
font-weight:600;
}

.support-btn:hover{
background:#e86800;
}

/* =========================
   DASHBOARD TOP (KPIs + HERO)
========================= */

.dashboard-top{
display:grid;
grid-template-columns: 1fr 360px;
gap:30px;
align-items:center;
margin-bottom:20px;
}

/* MR HAMMER / ENTERPRISE */

.dashboard-hero{
background:white;
border-radius:10px;
box-shadow:0 4px 14px rgba(0,0,0,0.08);
padding:10px;
text-align:center;
}

.dashboard-hero img{
width:100%;
max-width:340px;
border-radius:8px;
}

/* KPI GRID ANPASSUNG */

.kpi-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
}

/* =========================
   RESERVE BOXEN
========================= */

.reserve{
margin-top:40px;
}

.empty{
background:white;
padding:40px;
border-radius:10px;
box-shadow:0 4px 14px rgba(0,0,0,0.08);
color:#888;
font-style:italic;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 900px){

.dashboard-top{
grid-template-columns:1fr;
}

.dashboard-hero{
order:-1;
margin-bottom:20px;
}

}

/* PROMOTION CARD */

.promo-card{
display:inline-block;
transition:0.25s;
}

.promo-card img{
width:220px;
border-radius:12px;
box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

.promo-card:hover{
transform:translateY(-6px) scale(1.03);
}

/* LANDING CENTER */

.landing-center{
display:grid;
grid-template-columns: 1fr 1fr 240px;
gap:30px;
align-items:start;
max-width:900px;
margin:30px auto;
}

/* LATEST */

.latest-sites{
text-align:left;
}

.latest-sites ul{
list-style:none;
padding:0;
}

.latest-sites li{
margin:6px 0;
}

.latest-sites a{
color:#0d3b66;
text-decoration:none;
}

.latest-sites a:hover{
text-decoration:underline;
}

/* INFO BOX */

.info-box{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 4px 14px rgba(0,0,0,0.08);
}

/* PROMO CARD */

.promo-card img{
width:220px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
transition:0.25s;
}

.promo-card img:hover{
transform:scale(1.05);
}

/* LANDING GRID */

.landing-grid{
display:grid;
grid-template-columns:1fr 240px;
grid-template-rows:auto auto;
gap:25px;
max-width:900px;
margin:25px auto;
align-items:start;
}

/* Karte über zwei Reihen */
.promo-card{
    display:block;
    width:220px;
    text-align:center;
}
.promo-card img{
width:220px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
transition:0.25s;
}

.promo-card img:hover{
transform:scale(1.04);
}

/* LANDING GRID */

.landing-grid{
display:grid;
grid-template-columns:420px 220px;
gap:30px;
max-width:680px;
margin:30px auto;
align-items:start;
}

/* linke Spalte */

.landing-left{
display:flex;
flex-direction:column;
gap:20px;
}

/* Karte */

.landing-card{
display:flex;
justify-content:center;
}

.promo-card img{
width:210px;
border-radius:12px;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
transition:0.25s;
}

.promo-card img:hover{
transform:scale(1.05);
}

.latest ul{
list-style:none;
padding:0;
margin-top:10px;
}

.latest li{
margin:6px 0;
}

.latest a{
color:#0d3b66;
text-decoration:none;
display:block;
}

.latest a:hover{
text-decoration:underline;
}

/* LATEST WEBSITES BOX */

.latest-box{
background:white;
padding:25px;
border-radius:10px;
box-shadow:0 4px 14px rgba(0,0,0,0.08);
}

.latest-box h3{
margin-top:0;
margin-bottom:12px;
color:#0d3b66;
}

.latest-box ul{
list-style:none;
padding:0;
margin:0;
}

.latest-box li{
margin:6px 0;
}

.latest-box a{
color:#0d3b66;
text-decoration:none;
}

.latest-box a:hover{
text-decoration:underline;
}

/* LANDING BOXEN GLEICHE BREITE */

.landing-left{
display:flex;
flex-direction:column;
gap:20px;
}

.latest-box,
.landing-left .feature{
width:100%;
box-sizing:border-box;
}

/* PROMOTION SITES */

.promo-sites{
max-width:1000px;
margin:50px auto;
text-align:center;
}

.promo-sub{
margin-top:10px;
color:#666;
}

.promo-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:40px;
margin-top:40px;
}

.promo-tile{
background:white;
border-radius:12px;
padding:20px;
box-shadow:0 8px 20px rgba(0,0,0,0.08);
transition:0.25s;
}

.promo-tile a{
text-decoration:none;
color:inherit;
display:block;
}

.promo-image img{
width:160px;
margin-bottom:15px;
border-radius:12px;
}

.promo-title{
font-weight:bold;
color:#0d3b66;
margin-bottom:5px;
}

.promo-text{
font-size:14px;  
color:#666;
}

.promo-tile:hover{
transform:translateY(-6px);
box-shadow:0 16px 35px rgba(0,0,0,0.15);
}

.banner-intro-wrapper{
max-width:900px;
margin:30px auto;
}

.banner-intro{
display:flex;
gap:40px;
align-items:flex-start;
}

.banner-text{
flex:1;
}

.banner-card{
width:200px;
}

.banner-card img{
width:180px;
height:auto;
border-radius:14px;
box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

.banner-text ul{
padding-left:20px;
}

.banner-card img{
width:180px !important;
height:auto !important;
}