﻿<style>

    /* Reset & Basis */
    *{box-sizing:border-box;margin:0;padding:0}
    html,body{height:100%;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "lucida console", Arial;line-height:1.4;color:#222}

    /* Layout grid */
    .site {display:flex;flex-direction:column;min-height:100vh}
    header{background:linear-gradient(90deg,#0f172a,#0b1220);color:#fff;padding:1rem}
    .container{max-width:1100px;margin:0 auto;padding:0 1rem}
	
	.banner  {
     background-color:black;
	 height:185px;
	 width:100%;
     margin-right: auto;
     margin-left: 0;
     }
    

    /* Header / Navigation */
    .topbar{display:flex;align-items:center;justify-content:space-between;gap:1rem}
    .brand{font-weight:700;font-size:1.25rem}
    nav{position:relative}
    .nav-list{display:flex;gap:.5rem;align-items:center}
    .nav-list a, .nav-btn{color:#e6eef8;text-decoration:none;padding:.5rem .75rem;border-radius:.375rem;display:inline-block}
    .nav-list a:hover, .nav-btn:hover{background:rgba(255,255,255,0.06)}

    /* Dropdown */
    .dropdown{position:relative}
    .dropdown-toggle{cursor:pointer}
    .dropdown-panel{position:absolute;right:0;top:calc(100% + .5rem);min-width:200px;background:#fff;color:#111;border-radius:.5rem;box-shadow:0 8px 24px rgba(2,6,23,0.35);overflow:hidden;opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;transition:opacity .18s ease, transform .18s ease}
    .dropdown-panel a{display:block;padding:.6rem .9rem;color:inherit;text-decoration:none}
    .dropdown-panel a:hover{background:#f4f7fb}
    .dropdown.open .dropdown-panel{opacity:1;transform:none;pointer-events:auto}

    /* Main: three columns */
    main{flex:1;padding:2rem 0}
    .layout{display:grid;grid-template-columns:220px 1fr 260px;gap:1.25rem}
    aside.left, aside.right{background:#f8fafc;padding:1rem;border-radius:.5rem}
    article{background:#fff;padding:1rem;border-radius:.5rem;box-shadow:0 1px 0 rgba(2,6,23,0.04)}

    /* Footer */
    footer{background:#0b1220;color:#cbd5e1;padding:1rem}
    .footer-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem}

    /* Social menu (fixed vertical on the right) */
    .social-fixed{position:fixed;right:12px;top:40%;display:flex;flex-direction:column;gap:.5rem;z-index:60}
    .social-fixed a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:8px;background:#fff;border:1px solid rgba(2,6,23,0.06);text-decoration:none}
    .social-fixed svg{width:20px;height:20px}

    /* Responsive */
    @media (max-width:900px){
      .layout{grid-template-columns:1fr;}
      .social-fixed{right:10px;top:auto;bottom:12px;flex-direction:row}
      .topbar{flex-wrap:wrap}
    }

    /* small helper styles */
    h1{font-size:1.5rem;margin-bottom:.5rem}
    p{margin-bottom:.75rem}
    .card{padding:.75rem;background:#fff;border-radius:.5rem;box-shadow:0 1px 0 rgba(2,6,23,0.04)}

    /* Focus visible for keyboard users */
    a:focus, button:focus{outline:3px solid #f0f9ff;outline-offset:3px}
	
  .box {
  border-radius: 20px;
  background-color: #FFFFFF;
  width: 220px;
  
  border: 3px solid black;
  padding: 20px;
  margin: 20px;
  }
  
  .kleinbox {
  border-radius: 20px;  
  background-color: #FFFFFF;
  width: 120px;
  border: 3px solid black;
  padding: 20px;
  margin: 20px;
  }
  
  
 .bigbox {
  border-radius: 20px;
  background-color: #FFFFFF;
   width: 300px;
  
  border: 3px solid black;
  padding: 20px;
  margin: 20px;
  }

.bannerbox {
  background-color: #0b1220;
  border-radius: 20px;
  width: 100%;
  heigh: 300px;
  border: 4px solid black;
  padding: 20px;
  margin: 20px;
  }
  
  .banner {
    width: 100%;
    height: 250px;
    background: linear-gradient(-45deg,
        #0d1117,
        #1f2937,
        #14532d,
        #1e3a8a);
    background-size: 400% 400%;
    animation: gradientBG 12s ease infinite;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.banner-content {
    color: white;
    animation: fadeIn 3s ease-in-out;
}

.banner h1 {
    font-size: 3rem;
    text-shadow: 0 0 15px #00ffcc;
}

.banner p {
    font-size: 1.3rem;
}

@keyframes gradientBG {
    0% {background-position: 0% 50%;}
    50% {background-position: 100% 50%;}
    100% {background-position: 0% 50%;}
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.card{
    background:#2b2d31;
    padding:20px;
    border-radius:10px;
    margin-bottom:20px;
}

input,
textarea{
    width:100%;
    padding:10px;
    margin-bottom:10px;
    border:none;
    border-radius:5px;
    background:#404249;
    color:#fff;
    box-sizing:border-box;
}

button{
    background:#5865f2;
    color:white;
    border:none;
    padding:10px 15px;
    border-radius:5px;
    cursor:pointer;
}

button:hover{
    opacity:0.9;
}

table{
    width:100%;
    border-collapse:collapse;
}

th,td{
    padding:12px;
    border:1px solid #444;
}

th{
    background:#404249;
}

a{
    color:#58a6ff;
    text-decoration:none;
}

.delete{
    color:#ff6b6b;
}

.success{
    color:#57f287;
}

.news-box{
    max-width:1000px;
    margin:auto;
    padding:20px;
}

.news-item{
    background:#fff;
    border:1px solid #ddd;
    margin-bottom:20px;
    padding:20px;
    border-radius:8px;
}

.news-image{
    max-width:100%;
    margin-top:10px;
}
  </style>
