body{
	background: #ffffff;
}

@media (min-width:601px){
	
	.mobile {display:none !important;}
	
	.title-image{width:100%;position:relative;overflow:hidden;}
	.title-image img{width:100%;height:auto;display:block;}
	.title-image::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;box-shadow:inset 0 20px 20px rgba(0,0,0,0.6),inset 0 -20px 20px rgba(0,0,0,0.6);pointer-events:none;}

	.content-box{max-width:1000px;width:100%;margin:20px auto 0 auto;display:flex;box-sizing:border-box;padding-top:50px;padding-bottom:50px;}
	.main-content{flex:1;padding:20px;box-sizing:border-box;border:0px solid;height:100%;}
	.special-content{width:250px;padding:0px;box-sizing:border-box;}
	/* image box */
	.image-box{border:1px solid #bfbfbf;padding:6px;box-shadow:0 3px 8px rgba(0,0,0,0.2);box-sizing:border-box;margin:5px 0;}
	.image-box img{width:100%;height:auto;display:block;}
	/* Hauptlayout */
	.inme_layout {display: flex;gap: 20px;padding: 15px;box-sizing: border-box;}
	.inme_sidebar {width: 300px;flex-shrink: 0;}
	.inco_content {flex: 1;background: #ffffff;padding: 15px;border-radius: 10px;box-shadow: 0 2px 6px rgba(0,0,0,0.1);box-sizing: border-box;}

	.editor {width:920px;padding:30px;background:#c4c4c4;box-sizing:border-box;}

	.topbar {width: 100%;background: #fafafa;padding: 0px;box-sizing: border-box;z-index: 1000;border-bottom:1px solid #dddddd;display: flex;justify-content: flex-end;box-shadow: 0 4px 10px rgba(0,0,0,0.2);}
	.topbar-right {display: flex;}
	.logout-btn {padding: 10px 20px;background: #cfd4db;color: #000000;font-weight:bold;border: none;cursor: pointer;}
	.logout-btn:hover {background: orange;}
	
}

@media (max-width:600px){
	
	.desktop {display:none !important;}
	
	.title-image{width:100%;position:relative;overflow:hidden;line-height:0;}
	.title-image img{width:100%;height:auto;display:block;}
	.title-image::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;box-shadow:inset 0 10px 10px rgba(0,0,0,0.6),inset 0 -10px 10px rgba(0,0,0,0.6);pointer-events:none;}
	
	.content-box{width:100%;max-width:100%;margin:20px auto 0 auto;box-sizing:border-box;display:block;}
	.main-content{width:100%;max-width:100%;padding:7px;box-sizing:border-box;overflow:hidden;}
    .special-content{display:none;}
	.image-box{width:100% !important;max-width:100%;float:none !important;}
	.image-box img{width:100%;max-width:100%;height:auto;display:block;}
	
	/* Content */
	.inco_content {flex: 1;background: #ffffff;padding: 15px;box-sizing: border-box;width: 100%;padding: 10px;}
	
	.topbar {justify-content: center;box-shadow: 0 4px 10px rgba(0,0,0,0.2);margin-bottom:10px;}
    .topbar-right {width: 100%;}
    .logout-btn {padding: 10px 20px;background: #cfd4db;color: #000000;font-weight:bold;border: none;cursor: pointer;width:100%;}
	.logout-btn:hover {background: orange;}
	
	.editor-flex-row {flex-direction:column;}
	.editor-flex-cell {width:100%;flex:unset;}
	
}

.favorite-box{width:100%;margin-top:20px;margin-bottom:20px;box-sizing:border-box;}
.favorite-box-title{display:block;background:#3a3a3a;color:#ffffff;padding:10px;font-weight:bold;text-decoration:none;box-sizing:border-box;}
.favorite-box-title-link{background:#3a3a3a;}
.favorite-box-title-link:hover{background:#d97706;color:#ffffff;}
.favorite-box-links{background:#e5e5e5;box-sizing:border-box;}
.favorite-box-links a{display:block;padding:10px;text-decoration:none;color:#333333;border-bottom:1px solid #d0d0d0;box-sizing:border-box;}
.favorite-box-links a:hover{background:orange;color:#ffffff;}

/* login startseite */
.favorite-box-login{background:#e5e5e5;padding:15px;box-sizing:border-box;}
.favorite-box-login label{display:block;font-size:14px;margin-bottom:5px;}
.favorite-box-login input{width:100%;padding:6px;margin-bottom:12px;border:1px solid #bbb;box-sizing:border-box;background:#ffffff !important;color:#00388a !important;-webkit-appearance:none;appearance:none;}
.favorite-box-login input:focus{background:#ffffff;border:1px solid orange;outline:none;}
.favorite-box-login input:-webkit-autofill,
.favorite-box-login input:-webkit-autofill:hover,
.favorite-box-login input:-webkit-autofill:focus,
.favorite-box-login input:-webkit-autofill:active{-webkit-box-shadow:0 0 0 1000px #ffffff inset !important;-webkit-text-fill-color:#00388a !important;border:1px solid #bbb !important;}


.login-button{text-align:right;}
.login-button button{background:#3a3a3a;color:white;border:none;padding:6px 14px;cursor:pointer;}
.login-button button:hover{background:orange;}
.login-error{color: #b30000;background:#ffe5e5;border:1px solid #ffb3b3;padding:10px;margin-bottom:10px;}

.login-info-box{
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
	border:0px solid;
	background:#e5e5e5;
	color:#333333;
}

.login-info-title{
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.login-info-text{
    font-size: 14px;
    line-height: 1.6;
}

.login-info-links{
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
}

.login-info-links a{
    display: inline-block;
    width: fit-content;
    padding: 10px 16px;
    background: #2f2f2f;
    color: #ffffff;
    text-decoration: none;
    transition: 0.3s;
    box-sizing: border-box;
}

.login-info-links a:hover{
    background: orange;
}
.login-stack{
    width:100%;
    box-sizing:border-box;
}

.info-link{
    width:100%;
    display:block;
    margin-bottom:15px;
    box-sizing:border-box;
}

/* Grundlayout */
.menu {
    width: 100%;
    max-width: 300px;
    background: transparent;
    padding: 10px;
    box-sizing: border-box;
}

/* Hauptbox */
.menu-main {
    margin-bottom: 12px;
    background: #f5f6f8;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #d6d9de;

    /* kleiner aber knackiger Schatten */
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    transition: box-shadow 0.2s ease;

    box-sizing: border-box;
}

/* 🔥 Hover für ganze Box */
.menu-main:hover {
    box-shadow: 0 3px 8px rgba(0,0,0,0.22);
}

/* Hauptkategorie */
.menu-main strong {
    display: block;
    padding: 8px 12px;
    background: #cfd4db;
    color: #1f2933;
    font-size: 14px;
    border-bottom: 1px solid #bfc5cc;
    box-sizing: border-box;
}

/* Submenü */
.menu-sub {
    display: flex;
    flex-direction: column;
}

/* 🔥 Sub Items (weiß & clean) */
.menu-item a {
    display: block;
    padding: 8px 12px;
    background: #ffffff;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #e5e7eb;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* letzter Eintrag */
.menu-item:last-child a {
    border-bottom: none;
}

/* 🔥 Hover Effekt + Slide */
.menu-item a:hover {
    background: #e6f0ff;
    color: #1d4ed8;
    padding-left: 16px;
}

/* 🔥 Aktive Seite */
.menu-item a.active {
    background: #dbe8ff;
    color: #1d4ed8;
    font-weight: 500;
}

.target-line {display:flex;height:40px;align-items:center;}

.target-line-box-left {display:flex;width:50px;height:20px;justify-content:center;}

.target-line-box-right {width:95%;}

.image-box {position:relative;max-width:100%;border:1px solid #bfbfbf;padding:6px;box-shadow:0 3px 8px rgba(0,0,0,0.2);box-sizing:border-box;margin:5px 0;user-select:none;cursor:default;}

.image-box img {width:100%;max-width:100%;height:auto;display:block;pointer-events:none;}

.image-edit-btn {position:absolute;top:5px;right:5px;z-index:10;padding:3px 6px;background:#ffffff;border:1px solid #333333;cursor:pointer;font-size:13px;pointer-events:auto;}

.video {clear:both;position:relative;height:0;padding-bottom:56.25%;margin-top:20px;margin-bottom:20px;border:1px solid #bfbfbf;box-shadow:0 3px 8px rgba(0,0,0,0.2);box-sizing:border-box;user-select:none;cursor:default;}

.video::before {content:"";display:block;clear:both;}

.video-box {clear:both;max-width:100%;width:100%;position:relative;display:block;border:1px solid #bfbfbf;box-shadow:0 3px 8px rgba(0,0,0,0.2);box-sizing:border-box;user-select:none;cursor:default;}

.video-edit-btn {position:absolute;top:6px;right:6px;z-index:50;width:32px;height:32px;border-radius:50%;border:1px solid #666666;background:#ffffff;color:#000000;cursor:pointer;font-weight:bold;box-sizing:border-box;display:flex;align-items:center;justify-content:center;}

.video-edit-btn:hover {background:#eeeeee;}

.video-box-inner {position:relative;width:100%;height:0;padding-bottom:56.25%;}

.video-box iframe {position:absolute;top:0;left:0;width:100%;height:100%;border:0;pointer-events:auto;}

#editor {overflow:hidden;}

#editor::after,
.content-main::after {content:"";display:block;clear:both;}

.editor-flex-table {width:100%;margin:15px 0;box-sizing:border-box;}

.editor-flex-row {display:flex;width:100%;box-sizing:border-box;}

.editor-flex-cell {flex:0 0 auto;min-width:40px;min-height:40px;padding:5px;box-sizing:border-box;border-left:1px solid #999999;border-top:1px solid #999999;}

.editor-flex-row .editor-flex-cell:last-child {border-right:1px solid #999999;}

.editor-flex-table .editor-flex-row:last-child .editor-flex-cell {border-bottom:1px solid #999999;}

.editor-flex-resizer {position:absolute;top:0;right:-5px;width:10px;height:100%;cursor:col-resize;z-index:20;background:transparent;user-select:none;}

.editor-flex-resizer:hover {background:rgba(0,0,0,0.15);}

.editor-flex-cell-active {outline:2px solid #4da3ff;}

.editor-flex-row .editor-flex-cell-active {background:rgba(77,163,255,0.1);}