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;
		align-items: stretch;
		min-height: calc(100vh - 87px);
		box-sizing: border-box;
		
	}
	.inme_sidebar {
		width: 300px;
		flex-shrink: 0;
		background: #282828;
		box-shadow: inset -12px 0 10px -10px rgba(0, 0, 0, 0.9);
	}
	.inco_content {
		flex: 1;
		background: #e5e5e5;
		padding: 15px;
		border-radius: 0;
		box-shadow: none;
		box-sizing: border-box;
	}

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

	.topbar {width: 100%;background: #282828;padding: 0px;box-sizing: border-box;z-index: 1000;border-bottom:1px solid #121212;display: flex;justify-content: flex-end;}
	.topbar-right {display: flex;}
	.logout-btn {padding: 10px 20px;background: #1577a7;color: #e5e5e5;font-weight:bold;border: none;cursor: pointer;}
	.logout-btn:hover {background: orange;}
	
	.category-home {
		width: 100%;
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}

	/*
	--------------------------------------------------
	Hauptüberschrift
	--------------------------------------------------
	*/

	.category-home-header {
		display: flex;
		align-items: center;
		gap: 12px;

		margin: 0;
		padding: 0;
	}

	.category-home-main-icon {
		display: inline-flex;
		justify-content: center;
		align-items: center;

		width: 42px;
		flex: 0 0 42px;

		font-size: 34px;
		line-height: 1;
		color: #282828;

		/* Emoji einfarbig dunkel darstellen */
		filter:none;

		cursor: default;
	}

	.category-home-title {
		margin: 0;
		padding: 0;

		color: #282828;
		font-size: 30px;
		line-height: 1.2;
	}

	/*
	--------------------------------------------------
	Trennlinie
	--------------------------------------------------
	*/

	.category-home-line {
		width: 100%;
		height: 0;

		margin: 13px 0 18px;
		padding: 0;

		border: 0;
		border-top: 1px solid #aaaaaa;
	}

	/*
	--------------------------------------------------
	Liste der Unterkategorien
	--------------------------------------------------
	*/

	.category-sub-list {
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		/*
		Genau 10 Pixel Abstand zwischen den Kategorien
		*/
		gap: 10px;

		margin: 0;
		padding: 0;
	}

	.category-sub-item {
		display: inline-flex;
		align-items: center;
		gap: 8px;

		min-height: 48px;
		padding: 6px 10px;

		background: #f3f3f3;

		box-shadow:
			inset 0 1px 0 rgba(255,255,255,0.8),
			inset 0 -1px 0 rgba(0,0,0,0.12);

		box-sizing: border-box;
	}

	/*
	--------------------------------------------------
	Nicht anklickbares Symbol
	--------------------------------------------------
	*/

	.category-sub-icon {
		display: inline-flex;
		justify-content: center;
		align-items: center;

		width: 38px;
		flex: 0 0 38px;

		font-size: 32px;
		line-height: 1;
		color: #282828;

		filter:none;

		cursor: default;
		user-select: none;
	}

	/*
	--------------------------------------------------
	Nur der Name ist anklickbar
	--------------------------------------------------
	*/

	.category-sub-link {
		color: #1577a7;

		font-size: 16px;
		font-weight: 600;
		text-decoration: none;

		transition: color 0.15s ease;
	}

	.category-sub-link:hover,
	.category-sub-link:focus-visible {
		color: #e67e22;
		text-decoration: underline;
	}

	.category-empty {
		margin: 0;
		color: #666666;
	}

	/*
	--------------------------------------------------
	Mobil untereinander
	--------------------------------------------------
	*/

	@media (max-width: 600px) {

		.category-sub-list {
			align-items: stretch;
			flex-direction: column;
		}

		.category-sub-item {
			width: 100%;
		}
	}
	
}

@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 {
    width: 100%;
    height: 37px;
    padding: 0;

    background: #fafafa;
    border-bottom: 1px solid #dddddd;
    box-sizing: border-box;

    display: flex;
    justify-content: flex-end;

    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.topbar-right,
.topbar-right form {
    height: 100%;
    margin: 0;
}

.logout-btn {
    height: 100%;
    padding: 0 20px;

    background: #cfd4db;
    color: #000000;

    font-weight: bold;
    border: 0;
    cursor: pointer;
}

.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);}

/*
--------------------------------------------------
Flache und kompakte Editor-Toolbar
--------------------------------------------------
*/
#editor-toolbar {
    align-items: center;

    gap: 1px !important;
    padding: 3px !important;

    background: #c4c4c4 !important;
    border: 0 !important;
}

/*
--------------------------------------------------
Toolbar-Buttons
--------------------------------------------------
*/
#editor-toolbar > button,
#editor-toolbar > div > button:first-child {
    width: auto !important;
    min-width: 27px !important;
    height: 27px !important;

    padding: 1px 4px !important;

    background: #c4c4c4 !important;
    border: 0 !important;

    color: #111 !important;
    font-size: 20px !important;
    line-height: 1 !important;

    box-shadow: none !important;
}

/*
--------------------------------------------------
Auswahlfelder wie „Absatz“
--------------------------------------------------
*/
#editor-toolbar > select,
#editor-toolbar > div > select:first-child {
    height: 27px !important;

    padding: 2px 6px !important;

    background: #c4c4c4 !important;
    border: 0 !important;

    color: #111 !important;
    font-size: 13px !important;
}

/*
--------------------------------------------------
SVG-Symbole
--------------------------------------------------
*/
#editor-toolbar > button svg,
#editor-toolbar > div > button:first-child svg {
    width: 20px !important;
    height: 20px !important;
}

/*
--------------------------------------------------
Editor-Ladeanzeige
--------------------------------------------------
*/
.editor-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    max-width: 860px;
    min-height: 260px;

    background: #fff;
    box-sizing: border-box;
}

.editor-loader-spinner {
    width: 34px;
    height: 34px;
    margin-bottom: 14px;

    border: 4px solid #d2d2d2;
    border-top-color: #555;
    border-radius: 50%;

    animation: editor-loader-spin 0.8s linear infinite;
}

.editor-loader-text {
    margin-bottom: 10px;
    color: #444;
    font-size: 14px;
}

.editor-loader-progress {
    width: min(280px, 80%);
    height: 7px;

    overflow: hidden;
    background: #ddd;
}

.editor-loader-bar {
    width: 0;
    height: 100%;

    background: #1577a7;
    transition: width 0.2s ease;
}

@keyframes editor-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

/*
--------------------------------------------------
Zweistöckige Toolbar
--------------------------------------------------
*/
#editor-toolbar {
    display: block;
    max-width: 860px;
    margin-bottom: 10px;

    padding: 2px;
    background: #c4c4c4;
    box-sizing: border-box;
}

.editor-toolbar-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    min-height: 28px;
    gap: 1px;
}

/*
--------------------------------------------------
Kompakte Toolbar-Buttons
--------------------------------------------------
*/
.editor-toolbar-row > button,
.editor-toolbar-row > div > button:first-child {
    width: auto !important;
    min-width: 27px !important;
    height: 27px !important;

    padding: 1px 4px !important;

    background: #c4c4c4 !important;
    border: 0 !important;
    box-shadow: none !important;

    color: #111 !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

.editor-toolbar-row > button:hover,
.editor-toolbar-row > div > button:first-child:hover {
    background: #a9a9a9 !important;
}

.editor-toolbar-row > select,
.editor-toolbar-row > div > select:first-child {
    height: 27px !important;

    padding: 2px 6px !important;

    background: #c4c4c4 !important;
    border: 0 !important;

    color: #111 !important;
    font-size: 14px !important;
}

.editor-toolbar-row > button svg,
.editor-toolbar-row > div > button:first-child svg {
    width: 18px !important;
    height: 18px !important;
}
.editor-status-bar {
    width: 100%;
    max-width: 860px;
    padding: 7px 12px;
    box-sizing: border-box;

    display: flex;
    gap: 18px;

    background: #e5e5e5;
    border-top: 1px solid #aaa;

    color: #333;
    font-size: 13px;
}

.editor-status-bar strong {
    font-weight: normal;
    color: #111;
}