/* ============================================================
   protostardjk5 — DJK Eintracht Scharnhorst
   Reproduktion des protostar-Looks auf modernem Unterbau (J5).
   Markenfarbe Blau (#0088cc), Open Sans, weißer Container.
   ============================================================ */

:root{
	--djk-color:#0088cc;
	--djk-color-dark:#006fa6;
	--djk-bg:#f4f6f7;
	--djk-text:#333;
	--djk-muted:#777;
	--djk-border:#e4e7ea;
	--djk-radius:8px;
	--djk-maxw:1200px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body.site{
	margin:0;
	font-family:"Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
	font-size:16px; line-height:1.6; color:var(--djk-text);
	background:var(--djk-bg);
	border-top:4px solid var(--djk-color);
}
img{max-width:100%; height:auto;}
a{color:var(--djk-color); text-decoration:none;}
a:hover{color:var(--djk-color-dark); text-decoration:underline;}
h1,h2,h3,h4,h5,h6,.site-title{font-weight:700; line-height:1.25; color:#222;}

.body{padding:0 16px;}
.container{
	max-width:var(--djk-maxw); margin:18px auto; background:#fff;
	border:1px solid var(--djk-border); border-radius:var(--djk-radius);
	box-shadow:0 2px 12px rgba(0,0,0,.06);
}

/* Header — Logo/Banner über die volle Breite oben */
.header{display:block; padding:0;}
.header .brand{display:block;}
.header .brand img{width:100%; height:auto; max-height:none; display:block;}
.site-title{display:block; font-size:1.8rem; color:var(--djk-color); padding:20px 24px;}
.site-description{color:var(--djk-muted); font-size:.95rem; padding:0 24px 10px;}
.header-search{padding:8px 24px; text-align:right;}

/* ============================================================
   Menümodule allgemein (mod_menu) — Links als Block, kein "Zusammenkleben"
   ============================================================ */
ul.mod-menu, ul.menu, .mod-menu{list-style:none; margin:0; padding:0;}
ul.mod-menu li, ul.menu li, .mod-menu li{display:block; position:relative; float:none;}
ul.mod-menu a, ul.menu a, .mod-menu a,
ul.mod-menu span, ul.menu span{display:block; text-decoration:none;}

/* ---- Hauptnavigation (blaue Leiste) ---- */
.navigation{background:var(--djk-color);}
.navigation .nav-collapse > ul,
.navigation > ul{display:flex; flex-wrap:wrap;}
.navigation a{padding:12px 16px; color:#fff; font-weight:600;}
.navigation a:hover{background:rgba(0,0,0,.15); color:#fff;}
.navigation li.current > a, .navigation li.active > a{background:var(--djk-color-dark);}

/* Dropdown: weiße Box mit blauen Links (wie im Original) */
.navigation ul ul{
	display:none; position:absolute; top:100%; left:0; min-width:230px;
	background:#fff; z-index:50; box-shadow:0 6px 18px rgba(0,0,0,.18);
	border:1px solid var(--djk-border); border-top:2px solid var(--djk-color);}
.navigation li:hover > ul{display:block;}
.navigation ul ul a{color:var(--djk-color); font-weight:400; padding:9px 16px; border-bottom:1px solid var(--djk-border);}
.navigation ul ul a:hover{background:var(--djk-bg); color:var(--djk-color-dark);}
.navigation ul ul li:last-child > a{border-bottom:0;}
.navigation ul ul ul{top:0; left:100%;}

.nav-toggle{display:none; background:transparent; border:0; padding:14px 18px; cursor:pointer;}
.nav-toggle span{display:block; width:24px; height:3px; background:#fff; margin:4px 0;}

/* ---- Seitenleisten-Menüs (DJK verbindet, Vereinsoffene Angebote) ---- */
/* Vertikale Liste ERZWINGEN (überschreibt Bootstrap-.nav-Flex / Float / inline) */
.col-side .mod-menu, .col-side ul.menu, .col-side .nav, .col-side .menu{
	display:block !important; flex-direction:column !important; flex-wrap:nowrap !important;}
.col-side .mod-menu li, .col-side ul.menu li, .col-side .nav li, .col-side .menu li{
	display:block !important; float:none !important; width:auto !important;}
.col-side .mod-menu a, .col-side ul.menu a, .col-side .nav a{
	display:block !important; width:auto !important;
	color:var(--djk-color); padding:8px 2px; border-bottom:1px solid var(--djk-border);}
.col-side .mod-menu a:hover, .col-side ul.menu a:hover{color:var(--djk-color-dark); padding-left:6px; text-decoration:none;}
.col-side .mod-menu > li:last-child > a, .col-side ul.menu > li:last-child > a{border-bottom:0;}
.col-side .mod-menu ul a, .col-side ul.menu ul a{padding-left:16px; border-bottom:1px solid var(--djk-border);}

/* Layout */
.banner{padding:16px 24px 0;}
.row-main{display:flex; gap:24px; padding:24px; align-items:flex-start;}
.col-main{flex:1 1 auto; min-width:0;}
.col-side{flex:0 0 280px; max-width:280px;}

@media (max-width:900px){
	.row-main{flex-direction:column;}
	.col-side{flex-basis:auto; max-width:none; width:100%;}
	.nav-toggle{display:block;}
	.navigation .nav-collapse{display:none;}
	.navigation.open .nav-collapse{display:block;}
	.navigation .nav-collapse > ul, .navigation > ul{flex-direction:column;}
	.navigation ul ul{position:static; box-shadow:none; border:0;}
	.navigation ul ul a{padding-left:32px; color:#fff; background:rgba(0,0,0,.12);}
}

/* Sidebar-Karten (Chrome "djkcard") */
.djk-card{background:#fff; border:1px solid var(--djk-border); border-radius:var(--djk-radius); margin-bottom:20px; overflow:hidden;}
.djk-card-title{margin:0; padding:10px 14px; background:#ececec; color:var(--djk-color); font-size:1rem; border-bottom:1px solid var(--djk-border);}
.djk-card-body{padding:14px;}

/* Inhalt */
.col-main h1,.page-header h1{margin-top:0;}
.col-main ul,.col-main ol{padding-left:1.4em;}
.btn,.btn-primary,button.btn{background:#ececec; color:var(--djk-color); border:1px solid #d4d4d4; padding:8px 16px; border-radius:6px; cursor:pointer; display:inline-block;}
.btn:hover,.btn-primary:hover{background:#dfe3e6; color:var(--djk-color-dark); text-decoration:none;}
table{border-collapse:collapse; width:100%; margin:1em 0;}
table th,table td{border:1px solid var(--djk-border); padding:8px;}
blockquote{border-left:4px solid var(--djk-color); margin:1em 0; padding:.5em 1em; background:#f7fbfe; color:#555;}
.com-content-article__title, .item-page h2{color:#222;}

/* Footer */
.footer{margin-top:24px; color:var(--djk-muted); font-size:.9rem;}
.footer .container{background:transparent; border:0; box-shadow:none; padding:18px 24px;
	display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:0;}
.footer a{color:var(--djk-color);}
.footer .copyright{margin:0;}
#back-top{margin-left:auto; display:inline-flex; align-items:center; justify-content:center;
	width:40px; height:40px; background:var(--djk-color); color:#fff; border-radius:50%; text-decoration:none; font-size:1.1rem;}
#back-top:hover{background:var(--djk-color-dark); color:#fff;}

/* Helpers */
.element-invisible{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px);}

/* ============================================================
   Mobile-Fix: horizontales Überlaufen verhindern (v.a. Startseite)
   Desktop bleibt unverändert; bricht breite Inhalte sauber um.
   ============================================================ */
html, body.site{overflow-x:hidden; max-width:100%;}
.container, .row-main, .col-main, .col-side, .banner, .moduletable{max-width:100%;}
.col-main{min-width:0;}
.col-main, .item-page, .blog, .com-content-category-blog, .moduletable, .footer{
	overflow-wrap:break-word; word-wrap:break-word;}
.col-main img, .col-main iframe, .col-main video, .col-main embed,
.banner img, .moduletable img, .item-page img{max-width:100%; height:auto;}
.col-main pre{overflow-x:auto; white-space:pre-wrap; word-break:break-word;}
/* Bootstrap-Grid im Inhalt nicht über den Rand schieben (negative Ränder) */
.col-main .row, .moduletable .row, .banner .row{margin-left:0; margin-right:0;}
.col-main [class^="span"], .col-main [class*=" span"]{box-sizing:border-box; max-width:100%;}
/* Breite Tabellen auf dem Handy horizontal scrollbar statt überlaufend */
@media (max-width:760px){
	.col-main table{display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
}