html{
max-width:100%;
overflow-x:hidden;
position:relative;
}

*{
box-sizing:border-box;
}

body{
margin:0;
max-width:100%;
overflow-x:hidden;
position:relative;
font-family:'Inter',sans-serif;
color:#fff;

background:
linear-gradient(
rgba(0,0,0,.03),
rgba(0,0,0,.10)
),
url("/img/hero_neu.png");

background-size:cover;
background-position:center top;
background-repeat:no-repeat;
background-attachment:fixed;

min-height:100vh;
}

.layout{
display:flex;
min-height:100vh;
width:100%;
overflow-x:hidden;
}

.sidebar{
width:220px;
padding:20px;

background:rgba(15,20,30,.06);

backdrop-filter:blur(2px);
-webkit-backdrop-filter:blur(2px);

border-right:1px solid rgba(255,255,255,.10);
}

.sidebar h2{
margin-top:0;
color:#f2d39b;
font-size:2rem;
}

.sidebar nav{
display:flex;
flex-direction:column;
gap:12px;
margin-top:20px;
}

.sidebar a{
text-decoration:none;
color:#fff;
padding:14px;
border-radius:14px;

background:rgba(255,255,255,.02);

border:1px solid rgba(255,255,255,.20);

transition:.2s;
}

.sidebar a:hover{
background:rgba(255,255,255,.06);
border-color:rgba(255,255,255,.35);
}

.sidebar-footer{
position:absolute;
bottom:20px;
font-size:.9rem;
opacity:.7;
}

main{
flex:1;
padding:24px;
min-width: 0;
}

.hero{
padding:10px 0 20px 0;
margin-bottom:20px;
}

.main-column > .card:first-child{
    margin-top:-78px;
}

.hero-overlay{
display:flex;
justify-content:space-between;
align-items:flex-start;
}

.hero h1{
margin:-25px 0 0 0;
font-size:4rem;
font-weight:800;
color:#fff;
text-shadow: 0 4px 20px rgba(0,0,0,.75);
}

.hero p{
font-size:1.2rem;
margin-top:10px;

text-shadow:
0 2px 4px rgba(0,0,0,.35);
}

.weather-panel{
display:flex;
gap:20px;
}

.weather-panel > div{
    background: rgba(15,20,30,.12);

backdrop-filter:blur(1px);
-webkit-backdrop-filter:blur(1px);

padding:18px;
border-radius:18px;

min-width:140px;

border:1px solid rgba(255,255,255,.15);

box-shadow:
0 2px 8px rgba(0,0,0,.10);
}

.card{
    background:rgba(15,20,30,.06);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    padding:24px;
    border-radius:20px;
    min-width: 0; 
    border:1px solid rgba(255,255,255,.12);
    box-shadow:
    0 4px 16px rgba(0,0,0,.10);
    }

.card h2{
margin-top:0;
margin-bottom:20px;
font-size:2rem;
color:#f2d39b; /* Highlight section titles */
}

.cover-grid{
    overflow: hidden;
    width: 100%;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
contain: paint;
clip-path: inset(0);
}

.cover-track {
    display: flex;
    gap: 18px; /* Abstand zwischen den Covern */
    width: max-content;
    animation: scrollAnimation 150s linear infinite; /* Langsamere Animation */
}

#media .cover-track {
    animation-duration: 90s;
}

#kids .cover-track {
    animation-duration: 180s;
}

#books .cover-track {
    animation-duration: 130s;
}

.cover-track.static-track {
    animation: none; /* Keine Animation für statische Tracks */
}

.cover-grid:hover .cover-track {
    animation-play-state: paused;
}

@keyframes scrollAnimation {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* Still scrolls half the content */
}

/* Scrollbalken überall entfernen */
.cover-grid::-webkit-scrollbar {
    display: none;
}
.cover-grid {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.cover-card{
width:155px; /* Cover etwas kleiner */
flex-shrink:0;
}

#books .cover-card {
    width: 155px; /* gleiche Größe wie Kinderhörspiele */
}

.cover-card img{
width:100%;
display:block;
border-radius:16px;
transition:.2s;
}

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

.title{
text-align:center;
font-size:.82rem; /* Schriftgröße beibehalten */
margin-top:10px;
line-height:1.2;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
height: 2.4em; /* Maximal 2 Zeilen, danach Auslassung */
}

/* Statistikkarten: Zahlenwerte größer und fetter */
.stat-card > div {
    font-size: 1.6rem; 
    font-weight: 700;
    color: #f2d39b; /* Akzentfarbe zur stärkeren Hervorhebung */
}

/* Bentho-Info Karte (Rechte Spalte) */
.bentho-info h2 {
    font-size: 2.4rem;
    margin-bottom: 10px;
}

/* Bentho-Infotext Optimierung */
#bentho {
    display:none !important;
}

.last-wishes {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.last-wishes h4 {
    margin: 0 0 10px 0;
    font-size: 0.9rem;
    color: #f2d39b;
    font-weight: 600;
}

.last-wishes ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.85rem;
}

.last-wishes li {
    padding: 3px 0;
    color: rgba(255, 255, 255, 0.7);
}

.wish{
display:flex;
flex-direction:column;
justify-content:flex-start;
}

/* Layout: Bentho-Bereich und Medienbereich */
.content-grid{
    display:grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(320px, 380px);
    gap:25px;
}

.side-column{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding-top:630px;
}

.wish input{
padding:0 18px;
height:44px;
width:100%;

border:1px solid rgba(255,255,255,.18);
border-radius:22px;

margin-top:10px;
margin-bottom:15px;

background:rgba(15,20,30,.18);
color:#fff;

backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);

box-shadow:0 2px 8px rgba(0,0,0,.15);
}

.wish input::placeholder{
color:rgba(255,255,255,.65);
}

.wish input:focus{
outline:none;
border-color:rgba(242,211,155,.5);
}

.wish button{
padding:16px; /* Größerer Button */
border:none;
border-radius:10px;
background:#d8b07a;
font-size: 1.1rem;
font-weight:700;
cursor:pointer;
transition: 0.2s;
}

.wish button:hover{
opacity:.9;
}

#media,
#books,
#kids{
min-height:140px;
}

@media(max-width:1200px){

.layout{
flex-direction:column;
}

.sidebar{
width:100%;
padding:15px 24px;
border-right:none;
border-bottom:1px solid rgba(255,255,255,.10);
display:flex;
flex-direction:column;
align-items:stretch;
justify-content:flex-start;
flex-wrap:wrap;
}

.sidebar h2{
margin-bottom:0;
}

.sidebar nav{
flex-direction:row;
margin-top:0;
gap:10px;
}

.sidebar-footer{
display:none;
}

.content-grid{
grid-template-columns:1fr;
}

.side-column{
padding-top: 0;
}

.main-column > .card:first-child{
margin-top: 0;
}

.hero-overlay{
flex-direction: column;
align-items: center;
gap: 20px;
}

.stats{
grid-template-columns:1fr 1fr;
}

.hero h1{
    text-shadow:
0 4px 12px rgba(0,0,0,.8);
font-size:2.5rem;
margin: 0;
text-align: center;
}

.weather-panel{
flex-direction:row;
justify-content:center;
}

}

@media(max-width:700px){

main{
padding: 15px;
padding-bottom: 80px;
}

.weather-panel{
flex-direction:column;
width: 100%;
}

.weather-panel > div{
text-align: center;
}

.stats{
grid-template-columns:1fr;
}

.hero h1{
font-size:2rem;
}

.sidebar{
position:relative;
background:transparent;
border:none;
padding:15px;
z-index:1;
}

.sidebar h2{
display:none;
}

.sidebar nav{
position:fixed;
bottom:0;
left:0;
width:100%;
background:rgba(15,20,30,.95);
border-top:1px solid rgba(255,255,255,.10);
padding:10px;
z-index:1000;
justify-content:space-around;
flex-wrap:nowrap;
overflow-x:auto;
gap:5px;
}

.sidebar a{
font-size:.85rem;
padding:10px;
white-space:nowrap;
}
}